유연해지기

JavaScript Set 내 맘대로 구현하기

서론 Symbol을 학습하면서 iterator 부분을 직접 코드로 작성해보고 싶어졌다. 그래서 간단한 Set을 직접 구현해서 iterator을 적용해봐야지 했다. iterator 부분은 금방 구현했다. 하지만 Set을 JavaScript의 Set과 최대한 비슷하게 만들고 싶었는데 그 부분이 잘 안됐다. 갑자기 이상한 곳에 꽂혀서 이래저래 삽질한 과정을 글로 남겨보려고 한다. 자료구조로서의 Set Set은 자료구조로서 비단 JavaScript에만 존재하는 개념은 아니다. 간단히 정리해 Set은 다음과 같은 특성을 갖는 자료구조이다. 보관된 값들에 순서가 존재하지 않는다. 각 값들은 중복되지 않는다. 값의 존재 여부를 파악함에 용이하다. Javascript에서의 Set을 간단하게 직접 구현해보기로 하자. (..

Yarn Berry로 node_modules를 해치우자

서론 npm과 yarn v1이 가지고 있던 고질적인 문제점을 해결해주는 Yarn Berry의 등장! node_modules의 큰 용량 차지, package.json에 명시되어있지 않은 패키지를 사용하는 유령 의존성 등을 해결해줄 수 있다. yarn v1으로 관리되고 있던 프로젝트를 Yarn Berry를 사용하도록 migration 해보자. Yarn Berry 적용하기 우선 yarn을 설치한다. npm install -g yarn 그리고 프로젝트의 루트로 이동한 뒤 yarn berry로 변경해준다. yarn set version berry 그리고 lockfile을 생성해준다. yarn install 프로젝트에 새로운 파일들이 추가된 것을 확인할 수 있다. .pnp.cjs pnp.cjs는 의존성을 확인할 수..

간단하게 React 리렌더링 최적화하기

무거운 컴포넌트 만들기 무거운 작업을 하는 컴포넌트를 흉내내기 위해서 다음과 같은 컴포넌트를 정의해보자. function Child() { let start = new Date().getTime(); for (; new Date().getTime() - start c + 1)}>자식 상태 변경 자식상태: {count} ); } 버튼을 누를 때마다 Compo..

Vanilla Javascript로 간단한 SPA 라우터 구현해보기

Vanilla Javascript로 간단한 SPA 라우터 구현하기 서론 본문을 이해하려면 History API와 브라우저의 History 스택에 대한 이해가 필요하다. SPA의 경우 페이지를 이동할 때 anchor 태그를 활용해 새로운 html을 불러오는 게 아니다. index.html 하위의 DOM을 갈아 끼우면서 다른 페이지를 보여주는 방식이다. 이때 새로운 HTML을 불러오지 않으면서 어떻게 앞으로 가기 뒤로 가기를 구현할 수 있을까? 답은 History API에 있다. 브라우저에서 제공하는 History API의 자세한 설명은 여기서 참고하길 바란다. 프로젝트 구조 ├── index.html ├── main.js ├── package.json ├── 📦 src │ ├── app.js │ ├── 📦..

React 18 의 새 기능 자동 배칭(Automatic Batching)은 무엇일까?

React 18 릴리즈를 살펴보며 Automatic Batching에 대해 탐구해보고 실험한 것을 정리한 글입니다. Batching이란 무엇일까? React 공식문서 번역 ( https://reactjs.org/blog/2022/03/29/react-v18.html ) Batching이란 React가 더 나은 성능을 위해 여러개의 state 업데이트를 한 번의 리렌더링으로 묶어서 진행하는 것을 말한다. Automatic batching이 없다면 React의 이벤트 핸들러 내부에서만 batched 업데이트가 가능했다. 기존에는 Promise의 내부나 setTimeout 혹은 native 이벤트 핸들러에서는 React에 의해 배칭 되지 않았다. Batching은 어떤 이점을 주는가? 당연히 성능적인 이점이다..

React에서 Intersection Observer로 이미지 Lazyloading 구현하기 with 콜백 ref

이슈 COEAT 이라는 서비스를 개발하고 있었다. 약 50개의 이미지를 한 번에 불러오는 페이지가 있는데 이 부분에서 문제가 발생했다. 이미지의 크기가 너무 크다 보니까 50개의 이미지를 한 번에 요청하니 페이지가 멈춰버리는 것이었다. 이를 해결하기위해 서버 측에서 Image Resizing을 진행하기로 했고 클라 측에서는 Lazy loading을 추가하기로 했다. 사실 이미지의 리사이징만 완료되어도 성능이 대폭 개선될 것이다. 하지만 추후에 불러와야할 이미지들의 개수가 늘어가게 되었을 때에는 리사이징만으로는 한계가 있을 것이라고 판단했다. 이에 이전에 한 번 살펴보았던 Intersection Observer API를 사용해서 유저가 특정 위치에 도달했을 때 이미지를 로딩할 수 있도록 구현해보았다. In..

카카오맵 API를 리액트스럽게 사용해보자

서론 이번에 진행하는 프로젝트에서 지도를 통해 정보를 제공하는 기능이 필요했다. 많은 지도 API 중에서 하나를 선택해야 했는데 카카오맵을 사용하기로 했다. 그 이유는 카카오맵 API의 개발자 커뮤니티가 잘 활성화되어있고 공식문서 구성이 깔끔했다. 또한 프로젝트에서 다루게 될 지도의 영역이 서울시였고 주변 건물들의 위치정보가 잘 드러나야 했기 때문에 이러한 점들을 고려하여 카카오맵을 최종적으로 선택하게 됐다. 이 글을 통해 카카오맵 API를 좀 더 React 환경과 어울리게 사용하고자 고민했던 과정을 공유해보고자 한다. 카카오맵 API 불러오기 https://apis.map.kakao.com/web/guide/ 공식문서에 카카오맵을 불러오는 방식이 잘 정리되어있지만 그래도 ! 작성해보겠다. API 키 발..

리액트에서 이미지 미리보기 만들어보기 (React Image Preview)

서론 HTML의 input 태그로 이미지를 핸들링할 때 현재 선택한 이미지를 미리 보고 싶은 경우가 있다. 라이브러리를 통해 구현할 수도 있지만 어떤 방식으로 구현할 수 있을까 고민해보았다. Web API 중 FileReader라는 객체를 사용하여 구현해보도록 하겠다. React에서 ImagePreview 만들기 마크업은 위와 같다. 동작원리는 다음과 같이 설계했다. input 이미지가 변경될 때 onChange 함수 내부에서 파일을 체크한다. 위의 File 객체를 기반으로 이미지를 base64로 인코딩한다. 인코딩된 문자열을 imageSrc state에 넣음으로 렌더링 하여 프리뷰를 보여준다. 즉, input에서 사용자가 입력한 File 객체를 base64로 인코딩할 필요가 있다. 이를 위해서 File..

간단한 리액트 커스텀 훅 만들어보기. (React custom hook)

서론 React 16.8부터 추가된 Hook 은 리액트 함수형 프로그래밍의 근간이 된다. 다만 Hook은 리액트 어디서나 사용 가능한 것은 아니고 몇 가지 제약사항이 있다. 리액트 함수형 컴포넌트 내부 혹은 커스텀 훅 내부에서만 사용 가능하다. 함수형 컴포넌트 내부에서도 최상위에서 선언이 가능하다. (반복문, 조건문에서 선언 X) 오늘은 이 Custom Hook, 커스텀 훅 에 대해서 다루어보자. 커스텀 훅이란? 컴포넌트 내부에서 훅을 사용해 로직을 구현하다 보면 중복되는 부분이 발생하기 마련이다. 우리는 중복되는 훅들을 결합하고 추상화하여 사용하고자 하는 니즈가 생길 것이다. 이와 관련해 리액트 공식문서에서는 커스텀 훅에 대해 다음과 같이 말하고 있다. Hook을 추상화된 로직으로 사용할 수 있도록 결..

vscode에서 typescript warning, error 정보 안 보일 때

cmd + ,setting 들어간 뒤, typescript validate 검색 후 Enable/disable Typescript validation 체크