log4me

참조(이미지 포함): Do You Really Know These 6 TypeScript Utilities? 1. Pick Pick을 사용하면 주어진 타입에서 원하는 키들을 골라 새로운 타입을 만들 수 있다. interface User { id: number; firstName: string; lastName: string; age: number; phone: string; } type UserName = Pick; /* (위와 동일) interface UserName { firstName: string; lastName: string; } */ const userName: UserName = { firstName: 'Gildong', lastName: 'Hong' } 2. ..

참조(이미지 포함): When to useCallback & useMemo hooks ? 이 글은 [React] 똑똑하게 useCallback 사용하기에서 이어지는 글이다. 리액트의 성능 최적화에 대한 이야기와 useCallback 훅을 사용해 최적화 한 예시를 보고 싶다면, 위 글을 먼저 보고 오기를 추천한다! useMemo란 useMemo는 재사용된(memoized) 값을 반환하는 훅이다. 이 훅은 데이터의 많은 가공이 필요할 때 적합하다. 예를 들면, 복잡한 수학적 계산이 사용되는 경우나 계산하는데 오랜 시간이 걸리는 로직을 다루는 경우가 이에 해당된다. 먼저 이 함수는 컴포넌트의 첫 렌더 때 실행되고, 이후 리렌더가 될 때마다 캐시된 데이터를 반환해 보여준다. 매번 함수를 실행해서 내부 로직을 다..

이 글은 3 Ways To Create HTML Element In JavaScript을 참고하여 작성된 글입니다. 자바스크립트를 통해 아래와 같은 구조를 갖는 DOM을 만드는 방법 3가지를 알아보자. Click Me! 1. createElement() 사용하기 먼저 body에 app 요소를 추가한다. const app = document.createElement('div'); app.id = 'app'; document.body.appendChild(div); 그리고 app에 button 요소를 추가한다. const button = document.createElement('button'); button.id = 'button'; button.i..

이 글은 When to useCallback & useMemo hooks ? 의 번역글입니다. (이미지 포함) 개발자의 숙명, 어플리케이션 성능 최적화 성능 최적화는 개발자라면 누구든 어플리케이션 빌드 이후 마주하게 되는 흔한 이슈이다. 하지만 개발할 때는 완벽하게 동작했던 시스템이 배포 후 운영 시에 더 느려지는 느낌이 드는 건 단순한 착각일까? 개발 모드일 때 더 빠르게 느껴지는 이유 어플리케이션이 개발 모드일 때는 모든 파일들이 로컬 머신 즉, 내 컴퓨터를 통해 로컬 포트 3000번(React 기준)에 호스팅이 된다. 로컬에서 개발을 하기 때문에 인터넷 속도에 그다지 영향을 받지 않는 경우, 번들 파일들을 다운로드 받는 것은 굉장히 효율적이며 빠르게 동작한다. 하지만 운영 시에는 인터넷이 굉장히 느..

{} 을 타입으로 사용하지 않기 빈 객체에 {} 타입을 지정하면 @typescript-eslint/ban-types 경고가 발생한다. {} 타입은 null이 아닌 모든 값이라는 뜻이기 때문에 타입을 지정했음에도 컴파일 때 이 값이 객체인지 뭔지 알 방법이 없게 된다. 따라서 상황에 따라 구체적으로 타입을 지정해줄 필요가 있다. 정말로 빈 객체인 경우 Record 프로퍼티 값에 never를 지정함으로써 어떤 값도 담기지 않을 빈 객체임을 나타낸다. 객체인 경우 Record 프로퍼티 값에 unknown을 지정함으로써 모든 타입의 값이 할당될 수 있는 객체임을 명시해준다. 값인 경우 unknown 객체가 아닌 어떤 값이든 할당될 수 있다는 걸 의미한다.

react-youtube react-youtube는 YouTube IFrame Player API를 리액트 컴포넌트로서 구현한 패키지이다. 사용법은 너무나 간단하니 공식 문서를 참고하자. videoId가 바뀌어도 영상이 변경되지 않는다? 빠르게 유튜브 플레이어를 서비스에 포함시키고자 사용했는데, 몇 가지 이슈가 있었다. 그 중에 하나는 props로 내려받은 videoId에 따라 영상이 업데이트 되지 않는다는 거였다. 이해를 돕기 위해 공식 문서의 예제를 가져왔다. 여기서 우리는 videoId가 변경되면 Example 컴포넌트가 리렌더 되면서 영상이 변경될 것으로 예상할 수 있다. 하지만 영상이 변경되지 않았다! import YouTube from 'react-youtube'; functio..

클로저란 반환되는 함수가 반환시킨 함수의 변수 환경을 묶어서(closing) 기억하고 있는 개념을 말한다. 일반적인 경우 함수의 실행이 종료되어 콜 스택에서 제거되면 해당 함수 내부에 선언된 변수에 접근할 수 있는 방법이 없다. 하지만 반환된 함수는 자신을 반환시킨 함수가 콜 스택에서 제거되어도 여전히 그 스코프에 접근하여 변수를 참조할 수 있게 된다. 이는 반환된 함수는 자신이 호출될 때가 아니라 선언될 때의 환경(Lexical Environment)을 기억하고 클로저 스코프를 갖기 때문에 콜 스택에 반환시킨 함수가 없더라도 스코프 체인을 통해 변수를 참조할 수 있게 되는 것이다. 이해를 돕기 위한 간단한 예제이다. // inner 함수를 반환시키는 함수 function outer() { const o..

호이스팅이란 코드 실행 전에 변수나 함수의 선언문이 해당 스코프의 가장 위로 끌어올려지는 것을 말한다. 따라서 변수가 선언되기도 이전에 변수를 참조하여 사용할 수 있는 일이 가능하게 되지만, 이는 예상치 못한 에러를 발생할 수 있어 권장되는 방식이 아니다. 변수 호이스팅 원리 먼저 간단한 예를 보며 호이스팅이 되는 과정을 이해해보자. console.log(amIHoisted); // undefined var amIHoisted = true; console.log(amIHoisted); // true 논리적으로 생각했을 때 첫번째 줄에서 에러를 뿜어내야할 것 같지만 그렇지 않다. 왜냐하면 두번째 줄의 amIHoisted 변수 선언문이 가장 위로 호이스팅 되기 때문이다. 게다가 var 키워드로 선언된 변수는..

거슬리는 import 코드 그동안 나름대로의 규칙을 가지고 import 코드를 최대한 보기 좋게 정리하고 있었다. 하지만 한 파일에서 사용하는 모듈이 한 두개가 아니기 때문에 매번 이렇게 수작업으로 일일이 import 순서를 맞춰주는 게 여간 귀찮은 일이 아닐 수 없었다. 그리고 아무리 잘 한다고 해도 모든 파일에서 동일한 규칙을 따르기가 쉽지 않았다. 따라서 ESLint로 규칙을 정하고 강제화 하는 작업을 진행했다. ESLint의 eslint-plugin-import ESLint는 eslint-plugin-import를 통해 import/export 구문의 린트를 지원한다. 추가적으로 나는 Webpack과 TypeScript를 사용해서 절대 경로(alias)를 설정해놓고 사용하고 있기 때문에 프로젝트에..

이벤트 핸들러의 Event 객체 JavaScript에서는 addEventListener() 메서드를 통해 DOM 요소에 이벤트 핸들러를 등록할 수 있다. 등록된 이벤트 핸들러는 호출될 때 자동적으로 Event 객체를 첫 번째 인자로 전달받는다. 보통 임의로 e나 event로 이름지어 사용하는 파라미터가 여기에 해당된다. 이 이벤트 객체는 앞으로 다루게 될 target, currentTaget과 같은 프로퍼티와 stopPropagation()과 같은 메서드 등을 가지고 있다. const input = document.querySelector('.input'); // 파라미터명은 꼭 e가 아니어도 된다. const handleChange = (e) => { const { name, value } = e.ta..