담백한 웹 개발 이야기

출처: 에릭 감마 , 리처드 헬름 , 랄프 존슨 , 존 블리시디스. 『Gof의 디자인 패턴』. 김정아(역). 프로텍미디어, 2015. [0일차] 생성 패턴 5일만에 끝내기 챌린지 - GoF 디자인 패턴 타입스크립트로 설명하는 GoF 디자인 패턴의 생성 패턴 5일만에 끝내기 챌린지 생성 패턴이란? 인스턴스를 만드는 절차를 추상화하는 패턴이다. 객체를 생성 및 합성하는 방법 또는 객체의 표현 방법을 시스템에서 분리해준다. 활용성 1) 생성패턴은 시스템이 어떤 구체 클래스를 사용하는지에 대한 정보를 캡슐화한다. 2) 생성패턴은 이들 클래스의 인스턴스들이 어떻게 만들고 서로 맞붙는지에 대한 부분을 완전히 가려준다. 공식 기술블로그 링크 더넥스트웹리서치랩 웹 클라이언트 기술을 전문적으로 연구하고 자료를 발행하는 ..

글의 목적프로젝트 초기에 위험 식별 활동을 수행하는 것은 중요하다. 위험 식별 활동은 기획서 검토를 통해 장애물을 식별하고 대응 방안을 마련하는 것이다. 그리고 프로젝트 진행 중 발견된 위험을 빠르게 보고해야 하고 의사결정이 필요하다. 의사결정이 빠르게 진행될수록 최소한의 비용으로 위험을 해결할 수 있다. 이러한 위험관리는 프로젝트를 이끄는 리더뿐만 아니라 프로젝트의 구성원들에게도 중요하다. 이 포스트는 위험관리란 무엇이고 어떻게 하는 것인지 정리한 포스트이다. 목차위험관리란 무엇인가 위험관리를 수행하는 조직이 많지 않은 이유 위험관리는 어떻게 할까 위험관리란 무엇인가위험이란 아직 결함으로 발생하지는 않았지만, 결함이 될 수 있는 잠재적 가능성을 말한다. 결함이란 사람의 실수가 소프트웨어에 전이된 것으로..

글의 목적 기존에 사용하던 콜스택 구조를 코루틴으로 변경하고, 코루틴를 통해 지연 평가를 발생시켜 콜스택과 차이를 설명한다. 콜스택과 코루틴 비교 배열을 인자로 받아 홀수만 리턴하는 odd와 숫자를 인자로 받아 숫자만큼 리턴하는 take를 콜스택과 코루틴 동작을 비교한다 콜스택 중첩함수 중 내부에 사용된 odd가 실행된 뒤, take가 실행된다. 배열의 크기만큼 루프가 반복되는 것을 알 수 있다. function odd(arr) { const newArr = [] for (const v of arr) { console.log(`odd ${v}`) if (v % 2) { newArr.push(v) } } return newArr } function take(arr, n) { const newArr = []..

async 함수 async 함수는 Promise를 반환한다. const f = async () => {} f() // Promise 정상적인 동작으로 값을 반환하면 then에서 받을 수 있다. const f = async () => 'Hi!' f().then(console.log) // Hi! 비정상적인 동작으로 에러를 발생하면 catch에서 받을 수 있다. const f = async () => die; f().catch(error => console.log('에러 발생!')) // 에러 발생! async에서 Promise 반환 async 함수의 반환값으로 Promise를 사용하면 호출자에서는 async 함수 사용과 동일하게 사용된다. resolve 상태면 then으로 처리되고, reject 상태면 c..

목차 Promise 상태 응답 결과 전달 방법 마이크로테스크 연속적인 동작 Promise API catch 케이스 스터디 적용 사례 Promise 상태 Promise의 상태는 대기, 이행, 거부 상태가 있다. 상태는 대기에서 이행/거부로만 변경이 가능하다. 대기 : 초기상태 이행 : 성공 상태, resolve(), Promise.resolve() 거부 : 실패 상태, reject(), Promise.reject() 이행상태는 then으로 처리할 수 있다. resolve를 통해 전달한 값이 then에 인자로 전달된다. Promise.resolve(10) .then(result => console.log(result)) // 10 거부상태는 catch으로 처리할 수 있다. reject를 통해 전달한 값이 c..

출처 : [니콜라스 자카스] 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 글의 목적 자바스크립트에서 this를 다루기 위해서는 this에 대한 깊은 이해가 필요하다. 그리고 프런트 개발자라면 기술면접시 질문을 받아봤을 만한 단골 문제이기도 하다. 이 글은 자바스크립트에 입문할 때 하나의 산이었던 this를 정리한 내용이다. this란 this란 호출부의 참조이다. 호출부의 참조를 결정하는 방법은 네가지가 있다. 첫번째, 단독 함수 실행 할 경우 전역 객체가 기본 바인딩이 된다. 전역에서 함수를 호출하고 함수가 this를 참고하면 전역 객체를 사용하게 된다. function foo() { console.log(this.a); } var a = 'Hello World'; foo(); // Hello Wo..

서사 자바스크립트의 기반이 되는 ECMAScript가 매년 새로운 문법이 추가되기 때문에 자바스크립트는 매년 새로운 문법이 추가됩니다. 프런트 엔드 개발자라면 자바스크립트는 기본적으로 능숙하게 다루겠지만 그렇다고 자바스크립트의 문법을 잘 안다고 할 순 없습니다. 실무에 몇 년, 몇십 년 일해도 가끔은 뒤돌아서 기본을 볼 필요가 있다고 생각합니다. 이 글에서는 현재의 자바스크립트 기반이 되는 ECMAScript 2015를 정리했습니다. var vs let var is Function Scope var 키워드는 Function Scope로 블럭에 정의를 해도 블럭 밖에서 사용이 가능합니다. if (true) { var x = 3 } console.log(x) //3 let is Block Scope let ..

서사 컴포넌트 Props에 tailwindcss의 클래스명을 받을 때가 있다. 타입 선언할 때 단순하게 string으로만 정의하기도 하는데, string으로 정의해서 의도하지 않게 버그가 발생하는 경우가 있었다. 예를 들어서 아이콘 컴포넌트에서 w-*, h-*를 함께 받아야 하는데, string으로만 정의하면 컴파일 타임에 알 수 없다. 타입스크립트의 탬플릿 리터럴과 infer를 활용하면 사용하면 안되는 클래스명과 쌍으로 사용해야 하는 클래스명을 타입을 통해 알 수 있다. Tailwind ClassName fill-* 대신 text- 사용하도록 처리 fill-*를 사용하면 text-*로 사용하라고 알려준다. T extends `${infer U}fill${infer V}` ? `${U}text${V}` ..

서사​ REST API에 HTTP 요청할 때 각 컴포넌트 파일에서 동시에 실행하는 경우가 있었다. 이때 사용측을 수정하는 것 보다는 함수 정의측을 수정하는 게 수정을 최소화 할 수 있다고 판단해서 debounce 함수를 만들어서 해결했다. 함수 인자가 없는 경우도 있고, 함수 인자를 필요한 경우도 있어서 콜백 타입 추론하도록 처리했다. ​ 타입 추론 코드 export const debounce = void, PropCallback = (prop: Prop) => void, >( callback: Callback extends (prop: Prop) => void ? (pr..

규칙을 전부 마스터하면 뭐든지 할 수 있다. 심지어 규칙을 파괴할 수도 있다. 그런데 체계가 아예 없으면 시작조차 할 수 없다. 에드워드 펠라 (Edward Fella, 현 미국 칼아츠의 디자인교수, 디지털 그래픽 디자인의 선구자) ​ 디자인을 주간적인 감각이 뛰어난 사람만 잘 할 수 있다는 의견들을 많이 들었습니다. 하지만 디자인은 단순히 감각적으로 하는 것이 아닌 객관적인 근거를 바탕으로 디자인을 하는 것입니다. 이 글에서는 디자인 요소들을 작업할 때는 각 요소별로 심리학적으로 접근하는 방법과 통계적으로 접근하는 방법을 설명합니다. ​ ​ 개요 ​ 레이아웃 색상 타이포그래피 사진편집 UI 컴포넌트 강조하기 ​ ​ 레이아웃 전체는 단순히 부분의 합이 아니다 Kurt Koffka 쿠르트 코프카(독일 심리..

서비스를 개발하면서 많은 코드를 작성한다. 그 코드들 속에 중복적인 요소 또는 로직은 항상 존재하며 추상화를 통해 반복적인 작업을 줄일 수 있다. 추상화를 하는 과정은 중복적인 요소 또는 로직을 공통화하고, 결과적으로 재사용성을 높인다. 추상화는 요구사항 수정 시, 수정 범위를 최소화하기 때문에 구조 설계에 있어서 필수적인 과정이라고 할 수 있다. 추상화는 일반화와 단순화로 설명된다. 아래에서 자세히 알아보자. 일반화일반화는 우리가 작성하는 코드에서 중복적인 요소 또는 로직을 찾아 공통화하는 것을 의미한다. 이 말대로 하면 두가지 과정으로 일반화가 이뤄진다. 1. 중복적인 요소 또는 로직을 파악한다. 2. 중복적인 요소를 성격에 따라 공통화 한다. 공통화여기서 공통화는 중복적인 요소의 성격에 따라 다르게..

마틴 파울러의 리팩토링 책 일부를 정리한 포스트입니다. 리팩터링 리팩터링은 겉으로 드러나는 기능은 그대로 둔 채, 알아보기 쉽고 수정하기 간편하게 소프트웨어 내부를 수정하는 작업이다. 소프트웨어를 더 이해하기 쉽고 수정하기 쉽게 만들어 겉으로 드러나는 기능에 거의 또는 아예 영향을 주지 않으면서 소프트웨어의 각종 기능을 추가할 수 있다. 리팩터링 수행 후에 겉으로 드러나는 기능에 영향을 주지 않기 때문에 사용자는 소프트웨어의 변화를 눈치채지 못한다. 리팩터링과 성능 최적화리팩터링은 성능 최적화와 상반되는 데, 같은 점은 수행 후에 기능이 변경되지 않는 것이다. 다른 점은 성능 최적화는 성능 향상을 위해 불가피하게 필요한 성능을 내기 위해 코드를 파악하기 더 어려워질 때가 많다. 리팩터링과 기능추가리팩터링..