콘요맘떼 개발일지

실행 컨텍스트 (Execution Context) - 자바스크립트 코드들이 실행되기 위한 환경을 의미한다. 여기서 말하는 자바스크립트는 크게 세 가지가 존재한다. 1) 전역 코드 : 전역 영역에 존재하는 코드 2) 함수 코드 : 함수 내부에 존재하는 코드 3) eval 코드 : eval 함수로 실행되는 코드 그러나 eval 함수는 해커가 악의적으로 이용할 가능성이 있기 때문에 사용이 지양된다. 따라서 실질적으로 사용되는 코드는 전역 코드와 함수 코드라고 보면 된다. - 실행 컨텍스트에는 전역 컨텍스트와 함수 컨텍스트 두 종류가 있다. - 실행 컨텍스트는 코드를 형상화하고 구분하는 추상적인 개념이지만 자바스크립트 엔진에 의해 물리적 객체 형태로 관리되며 3가지 프로퍼티를 가진다. (1) 변수객체 (Vari..

리액트를 개발해본 사람이라면 누구나 한 번쯤 접했을 화면이다. 리액트는 컴포넌트 내부에서 에러가 발생하면 위와 같이 에러를 화면으로 보여준다. 그러나 저 화면은 개발을 하는 우리들만이 볼 수 있는 화면이다. Production 모드로 들어가면 에러는 보여지지 않고 렌더링에 실패한 컴포넌트가 남긴 쓸쓸한 텅 빈 화면만이 남아있을 것이다. 그에 따라 React16에서는 UI 일부분에 해당하는 자바스크립트 에러가 전체 어플리케이션을 셧다운시키는 것을 막기 위해서 에러 경계라는 새로운 개념을 가져왔다. (React 공식 문서에 적힌 표현) 에러 경계(Error Boundary)는 하위 컴포넌트 트리 안에서 발생하는 에러를 찾아내고 깨진 컴포넌트 트리 대신 fallback UI를 제공해준다. 복잡할 것 없이 에러..

번들링은 여러 파일을 하나로 묶는 것을 말한다. 그냥 파일을 그대로 가져오면 편리함에도 번들링을 실행하는 이유는 단발성으로 리소스를 요청하는 HTTP 통신의 특성상 여러 번 파일을 요청하는 것보다 여러 파일을 한 번에 가져오는 것이 훨씬 효율적이기 때문이다. 이러한 측면에서 번들링은 최대한 빨리 리소스를 가져와서 사용자에게 화면을 제공해야 하는 프론트엔드 직무에서 매우 중요한 개념 중 하나이다. 리액트 어플리케이션들은 Webpack, Rollup, Browserify 등의 번들링 툴을 활용하여 하나의 파일로 통합할 수 있다. 심지어 리액트 어플리케이션을 만들기 위해 많이 사용하는 Create React App 혹은 최근 서버 사이드 렌더링과 함께 주목받고 있는 Next.js 등의 툴을 활용한다면 어플리케..

자바스크립트는 '단일 스레드'기반 언어이다. 즉, 한 번에 하나의 작업만을 처리할 수 있다. 보다 정확히 표현하자면 자바스크립트 엔진은 '단일 콜 스택'을 활용하고 하나의 메인 스레드를 가진다. 그러나 자바스크립트가 돌아가는 실제 환경(브라우저, Node 등)은 여러 개의 스레드가 사용된다. 하나의 콜 스택을 활용하는 자바스크립트 엔진과 여러 스레드를 활용하는 실제 구동 환경이 서로 연동될 수 있도록 해주는 것이 바로 '이벤트 루프'이다. (이벤트 루프는 앞서 언급한 단일 메인 스레드를 관리해준다.) 자바스크립트는 이벤트 루프를 통해 비동기 방식으로 동시성을 지원한다. 참고로 이벤트 루프는 자바스크립트 엔진에서 지원되는 것이 아니라 브라우저 혹은 NodeJS에 의해 제공된다. (NodeJS는 libuv라..

React.memo( ) React.memo( )는 리액트에서 제공하는 고차함수(HOC)이다. React.memo( )로 컴포넌트를 감싸주면 그 결과물을 메모리에 기억하여 재사용한다. 그를 통해 불필요한 리렌더링을 방지할 수 있기 때문에 성능적인 부분을 개선시킬 수 있다. 그러나 무분별한 React.memo( )의 남발은 렌더링 비용보다 메모이제이션 비용이 비싸져서 오히려 프로그램의 성능을 저하시킬 수도 있다. 따라서 적절한 순간에만 React.memo( )를 적용하는 것이 중요하다. 1. React.memo( )의 비교 방법 React.memo( )는 기본적으로 얕은 비교를 통해 Props 객체를 비교한다. 만약 Props를 비교하는 Custom 메소드를 지정해주고 싶다면 다음과 같이 React.mem..

고차 컴포넌트 (HOC, Higher Order Component) 1. 고계함수 (HOF, Higher Order Function) 이미 많은 사람들이 알고 있겠지만 리액트는 함수형 프로그래밍을 지향한다. 그렇기 때문에 리액트의 컴포넌트는 입력값인 props를 전달받고 ReactElement를 반환하는 함수의 형태를 띄고 있으며 상태 관리 라이브러리인 리덕스는 순수 함수와 불변 스토어를 강조하며 함수형에 가까운 프로그래밍 스타일을 권장한다. 리액트의 HOC 역시 함수형 프로그래밍의 개념 중 하나인 HOF에서 유래하였다. HOF는 함수를 인자로 받아서 또 다른 함수를 반환하는 함수를 뜻한다. 함수형 프로그래밍에서는 작은 단위의 범용적 함수를 만든 후 그를 조합하여 재사용가능한 프로그래밍을 구현한다. HO..

String Union Type을 활용할 때 이따금씩 가능한 타입의 값들을 코드 안에서 value로 활용하고 싶은 경우가 있다. 한 예시로 MBTI에 대한 String Union Type을 형성한 후 각각의 MBTI를 표현하는 MBTI를 생성하고 싶을 때는 map 함수를 활용하여 컴포넌트들을 사용하는 것이 매우 효율적이다. 가능한 방법은 두 가지가 있다. 두 가지 모두 type을 먼저 생성하는 것이 아니라 가능한 값들을 생성한 후 그로부터 타입을 추출하는 방법들이다. 1. 배열 활용 위 예시와 같이 가능한 값들의 배열을 생성한 후 'typeof 배열이름[number]'을 통해 그 값들을 가지는 타입을 생성할 수 있다. 배열에 변화가 없다는 as const를 덧붙여야지만 해당 값들로 타입을 생성할 수 있으..

1. Mapped Types 자바스크립트의 map을 생각하면 쉽다. 가장 대표적인 사용 예시로 두 가지가 있다. (1) 키 - value 타입 지정 (2) in 자바스크립트의 for in을 생각하면 쉽다. 위 예시의 경우 OnlyBools는 T 타입의 모든 키에 대해 boolean 값을 가지는 타입을 반환한다. 2. Utility Types 이미 타입스크립트에서는 사람들이 자주 사용할 만한 타입들을 많이 만들어 두었다. 대표적인 예시는 다음과 같다. (1) Required Required는 주어진 타입의 모든 프로퍼티를 required로 변경해준다. 위의 예시에서 person은 age가 더 이상 optional이 아니기 때문에 에러가 발생한다. (2) Partial Partial은 Required와 반대..

1. 공통점 object의 타입을 정의하는 데 사용될 수 있다. class를 통해 구현(implementation)이 가능하다. 확장(extension)이 가능하다. 2. 차이점 중복 선언 - Type alias는 중복 선언이 불가능하지만 Interface는 중복 선언이 가능하다. 그러나 Interface의 중복 선언은 새롭게 정의되는 것이 아니라 기존의 정의에 새로운 내용이 추가되는 것이다. (Intersection으로 생각하면 된다, 그러나 여태까지 프로젝트 경험으로 봤을 때는 실용성 있는 차이인지에 대해서 아직 잘 모르겠다.) Union type - Type alias는 Union type이 가능하다. 그러나 Intersection은 Union type이 불가능하다. 3. 결론 - Union typ..

인터섹션 타입은 두 가지 이상의 타입의 합집합인 타입을 의미한다. 모든 타입을 합쳤다는 점에서 여러 타입 중 하나에만 해당하면 되는 Union Type과는 차이가 있다. Intersection Type은 & 연산자를 통해 생성할 수 있으며 재료가 되는 타입들 간에 동일한 프로퍼티가 있는 것은 문제가 되지 않는다. (다만 해당 프로퍼티가 동일한 타입을 가져야 한다. 아래 예시의 경우 Student의 name은 number 타입인데 Developer의 name은 string 타입을 가지면 오류가 발생한다.)