104%

interface 타입과 객체 자체에 대한 type 별칭은 많은 점이 비슷하지만, type 별칭보다 더 많은 것을 할 수 있기에 interface를 사용하는 것을 일반적으로 권장합니다. interface는 같은 이름으로 여러 번 선언을 해도 컴파일 시점에서 합쳐지기 때문에 확장성이 좋다. 따라서 일반적으로는 interface를 사용하고 union, tuple 등이 필요한 경우에만 type 별칭을 사용하라는 TypeScript Handbook의 내용은 현재에도 유효하다. -> 예를들어, A.tsx 파일에서 interface test { str1: '1' } B.tsx 파일에서 interface test { str2: '2' } 똑같은 이름의 인터페이스를 중복으로 선언하면 프로젝트가 컴파일 될때 아래와 같이..

현재 게시글에 담겨있는 이미지를 firestorage에 업로드 하면 resizing 핸들러가 trigger 되어서 사이즈가 축소된 이미지를 다시 클라이언트로 내려주는 로직을 작성하고 있다. 그런데 클라이언트에서 게시글을 submit했을때 서버에서 이미지가 리사이징 될때까지 모두 기다리면 제출하는데 꽤 오랜시간이 걸린다. 그래서 이런 방식을 사용하지 않고 우선적으로 이미지를 서버에 업로드한 다음에, (곧 리사이징될) public URL을 DB에 등록한 뒤에, 클라이언트에는 원본이미지의 경로와 리사이징된 이미지의 경로 두개를 내려주려고 한다. 그래서 게시글을 조회할때 우선적으로 리사이징된 이미지를 보여주고 fallback으로 원본이미지를 보여주는 방식으로 구현하고자 한다. getDownloadUrl을 사용하..

useEffect완벽가이드 2편 읽고오기 지난 포스팅에서는 useEffect에서 의존성배열에 올바른 변수를 명시해주지 않으면 어떤 문제가 발생하는지 살펴봤습니다. 이번 포스팅에서는 useEffect에 올바르게 의존성을 명시하는 방법에 대해서 살펴보겠습니다. useState의 함수형 업데이트 사용하기 useEffect(() => { const id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); 이런식으로 코드를 작성할 경우 매 렌더링 마다 타이머가 초기화되고 다시 세팅되는 과정이 반복되어 비효율적이라고 말했었습니다. 이 코드를 아래와 같이 변경해봅시다. useEffect(() =..

서론 프로젝트를 진행하다가 삽질한 내용을 공유합니다. Next.js에서는 getInitialProps라는 메소드가 있습니다. 이 메소드를 사용하면 화면이 렌더링 되기 전에 필요한 데이터를 미리 준비해 놓을 수 있습니다. getInitialProps는 다음과 같은 상황에서 트리거 됩니다. 1. 주소창에 직접 URL을 치고 들어온 경우 SSR(Server Side Rendering)이 일어납니다. 이때 getInitialProps가 실행됩니다. 2. next/link나 next/router를 사용해서 클라이언트 사이드 라우팅(CSR)을 한 경우. 이 경우에도 getInitialProps가 실행됩니다. 이슈 제가 만들고 있는 프로젝트는 SNS라서 메인페이지에 진입했을때 피드의 리스트가 쭉 출력되어야 합니다. ..

사람은 1초에 60개의 프레임을 볼 수 있다고 한다. 그 이상의 프레임을 더 찍어내더라도 사람이 느끼기엔 거의 차이가 없다는 말이다. 그래서 자바스크립트로 애니메이션을 구현할때도 1초에 60프레임정도를 찍어내면 된다. 그 말은, 1프레임을 찍어내는데 16.6ms(1000ms / 60frame)를 넘겨서는 안된다는 말이다. 프레임이란 그냥 한장의 사진이라고 생각하면 된다. 동영상도 사실 여러장의 사진이 빠르게 움직여서 움직이는것처럼 보이는것일 뿐이다. 16.6ms마다 프레임을 찍어내기 위해 첫번째로 사용할 수 있는 방법은 setInterval이다. setInterval(function() { // animiate something }, 1000/60); 또 다른 방법은 requestAnimationFram..

useEffect 완벽 가이드 - 1편 읽고 오기 이제 우리는 함수형 컴포넌트 내부 함수에서 state, props를 참조할때 이전 값을 가져오는 현상이 발생하는 원인에 대해서 알게 되었습니다. 그럼 이제 최신 상태의 state와 props를 가져오기 위해서는 어떻게 해야하는지에 대해서 알아봅시다. useRef 사용하기 useRef를 공부해보신분은 알겠지만 함수형 컴포넌트 내부에서 useRef를 마치 지역변수처럼 사용할 수 있습니다. 이 useRef를 사용하면 과거의 렌더링 시점에 갇혀있는 함수가 미래의 값을 참조하게 만들 수 있습니다. 이렇게 하는게 "가능 하긴 하지만" state와 props에 맞춰 ui를 보여주는 리액트의 패러다임을 벗어나는 느낌이 있어서 깨끗한 느낌이 들진 않습니다. 어쨌든 use..

프로젝트를 진행하면서 useEffect를 사용할때 가끔씩 이상하게 동작할때가 많았습니다. useEffect에서 리덕스 스토어의 값을 참조할때 예전값을 가져오는등의 현상이 발생해서 훅스를 제대로 이해하지 못하고 사용하는것 같아 이번 기회에 정리해보려고 합니다. 훅스를 쉽게 이해하기 위해 컴포넌트 라이프사이클 개념을 가져다 쓰다보니, 자꾸 엇나가는 부분이 생긴것같습니다. 훅스를 제대로 이해하기 위해서는 라이프 사이클을 잊으라고 말합니다. 렌더링 마다 고유한 Props와 State가 있다. function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click m..

ES5 까지의 자바스크립트의 원시 타입은 number, string, boolean, undefined, null, Object 뿐 이었습니다. 하지만 ES6에서 새로운 Symbol 타입이 소개되었습니다. 이 Symbol타입은 고유한 값을 만들어내기 위해 사용됩니다. 생성된 심볼을 변수에 담아놓지 않으면 접근이 불가능합니다. 또한, 객체의 key값으로 사용될 경우 private 멤버 변수 처럼 동작합니다. 자세한건 아래 내용을 살펴봅시다. symbol의 특징 열거대상에서 제외 심볼을 객체의 키로 사용하게 되면 for .. in 문으로 순회가 불가능합니다. obj2에 있는 2개의 심볼은 콘솔에 찍히지 않았습니다. 왜그렇냐면, 생성된 심볼을 변수에 담아 놓아야만 나중에 그 변수를 통해서 심볼에 접근이 가능해..