Total (149) 썸네일형 리스트형 번들러 분석기: Webpack, vite, esbuild, rollup 1. 번들러(1) 등장 배경여러 모듈을 각각 호출하면 여러 개의 모듈을 호출하게 된다. 하지만 서비스의 규모가 커짐에 따라 분리된 호출이 서버에 부하를 가져오게 되었고, 여러 모듈을 하나의 모듈로 묶는 번들링 기술이 등장하게 되었다. 서버에 한 번의 호출을 하게 되는 혁신이 일어난 것이다. (2) 종류 및 기능종류WebpackrollupesbuildVite기능Tree-shaking: 사용되는 모듈만 AST 트리에 포함시켜 불필요한 코드를 제거해, 가벼운 번들을 생성동적 서버: 번들링 결과를 메모리에 실시간으로 제공하는 서버이며, development 환경에만 존재 2. 모듈(1) 정의기술이 발전함에 따라 웹 페이지의 크기가 날이 갈수록 커지고 있다. 하나의 자바스크립트에서 작업을 하여 결과물을 제시한다는.. NEXT.js에서 dynamic import 사용하기 1. 배경로딩 스피너를 Lottie(로띠)라는 프로그램을 통해 제작한 후, 프론트에서 이를 화면으로 그려내는 과정을 진행하고 있었다.Lottie로 제작한 애니메이션 요소를 보여주기 위해선 라이브러리 설치가 필요했다. 에어비엔비에서 제공하는 lottie-web 라이브러리를 통해 직접 LottieComponent를 생성하여, json 형태의 Lottie를 보여주는 것까지 성공했다.하지만 document is not defined라는 경고가 콘솔에 찍히기 시작했고, 이를 해결하기 위해 dynamic import를 도입하게 되었다. 2. document is not defined 경고가 발생한 원인NextJs의 경우, SSR 환경이기에 기본적으로 서버에서 페이지를 로드하게 된다. 일반 import의 경우, 해당.. 리액트의 Virtual DOM 동작 원리 분석기: Fiber Reconciler편 1. DOM이란?브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄 것인가에 대한 정보를 담고 있는 것이다.웹페이지에서 DOM이 생성되어 사용자에게 보이는 과정은 다음과 같다.1. HTML 파싱 > DOM 노드로 구성된 트리(DOM) 생성2. CSS 다운로드3. CSS 파싱 > CSS 노드로 구성된 트리(CSSOM) 생성4. DOM에 CSSOM 적용 2. 가상 DOM(Virtaul DOM)이란?(1) 정의리액트가 관리하는 가상의 DOM이다.웹페이지가 표시해야 할 DOM을 메모리에 저장하고, 리액트가 변경에 대한 준비가 완료되면 실제 브라우저의 DOM에 반영하는 로직을 바탕으로 동작한다. 이때 DOM 계산을 브라우저가 아닌 메모리에서 진행해, 실제 렌더링 과정을 최소화하는 것이 핵심이다. (2) 탄생한 이.. 이미지 업로드 최적화하기 0. 배경위치 추적 게임 서비스, 어데고?! 의 핵심 부분인 콘텐츠 부분을 전담하고 있다. 사용자가 이미지를 업로드한 후, 미리 보기로 업로드한 이미지들을 보여주는 것부터, 올린 전체 장소 조회, 게임에서 콘텐츠로 활용 등 서비스 전체적으로 이미지가 필수적으로 존재해야 한다.1차 MVP에선 사용자가 업로드한 이미지를 그대로 S3에 저장하고, url로 해당 이미지를 불러와 사용했다. 크기가 작은 이미지를 저장하고 사용하는 것에 문제가 되지 않았으나, 크기가 큰 이미지를 저장하고 불러올 때 서비스에 지연 시간이 생기는 것을 확인했다. 이러한 지연은 사용자에게 예상보다 큰 불편함을 느끼게 하고, 서비스가 안정적이지 못하다는 인상을 남기게 되는 악영향을 초래하기에 심각성을 인지하고 곧바로 수리에 돌입했다. 문제.. 객체의 불변성 유지법: Javascript, React편 1. 객체의 불변성을 유지해야 하는 이유(1) JavaScript원본 데이터가 변경이나 훼손되는 상황이 발생하지 않음을 단정할 수 있어, 예측 가능한 개발을 진행할 수 있다. (2) ReactReact는 Props나 State가 변경되었을 때 리렌더링이 발생한다. 이 Props와 State의 변경을 불변성을 이용해 감지하게 된다.(객체의 참조를 복사하는 성질을 이용해 얕은 비교를 이용해 변경 발생 여부를 확인한다)그렇기에 React에서 모든 요소는 불변성을 지니고 있어야 한다. 특정 시점의 UI를 나타내며, UI를 업데이트하는 방법은 새 요소를 만들어 전달하는 것이 존재한다. State는 직접 수정되어서는 안 되고, 새로운 요소로 업데이트되어야 한다.자바스크립트에서 객체인 경우 메모리 힙 영역에 저장이 .. NPM에 라이브러리 배포하기: usePortal편 1. Portal이란(1) 정의컴포넌트 일부가 하위의 컨테이너에 위치해도, 해당 컨테이너를 탈출하여 상위 컨테이너에 위치하는 것처럼 요소를 렌더링 할 수 있는 방법이다. Portal 생성을 하면, createPortal의 결과를 렌더링하고 DOM 노드가 있어야 할 위치를 지정한다. 구조는 변하지 않으나, 렌더링하는 위치만 바뀌어 보이게 된다.구조는 하위 컨테이너에 위치해 있기에, 렌더링 하는 위치가 최상위이더라도 하위 컨테이너의 직계 상위 컨테이너와의 기능 연동이 가능하다. 렌더링 되는 위치를 최상위로 지정하게 된다면 z-index를 사용하지 않아도 된다는 이점이 존재한다.구조: 하위 컨테이너에 위치렌더링: 상위 컨테이너에 위치 (2) 사용하는 이유리액트의 경우 DOM 트리를 형성할 때, 부모-자식의 구.. NPM에 라이브러리 배포하기: Storybook 자동 배포편 0. 배경NPM에 surff 라이브러리를 배포한 후, 로컬에서 실행을 해 올바르게 컴포넌트가 동작하는지를 보는 것은 라이브러리 사용자에게 불편함을 느끼게 한다는 사실을 깨닫게 되었다. 불편함을 해소하기 위해선 사용자에게 라이브러리의 동작을 보여주고, 제어할 수 있는 도구를 제공해야 했다. 모든 컴포넌트와 커스텀 훅을 보여주어야 한다.컴포넌트의 props을 조절할 수 있어야 한다.부수적인 설치 없이 손쉽게 제공되어야 한다. 위의 조건을 만족하는 방법은 Storybook을 통해 컴포넌트와 훅의 동작을 보여주고, 이를 웹에 게시하여 부수적인 설치 없이 url을 통해 Storybook을 확인할 수 있도록 하는 것이었다. 1. Storybook 설치npx storybook@latest init 2. Storyb.. NPM에 라이브러리 배포하기 🏄 배포된 surff 라이브러리: https://www.npmjs.com/package/surff0. 배포하게 된 배경프로젝트를 진행하면서 이전에 사용했던 컴포넌트나 훅을 반복적으로 불러와 사용하는 경우가 많았다. 이러한 과정을 통해, 이전 프로젝트의 레포지토리를 분석하고 필요한 요소를 추출하는 일이 잦아졌다. 이러한 노력을 반복하다 보니 공통적으로 사용되는 요소들을 모아두고 보다 빠르고 쉽게 활용하고 싶다는 생각이 들었다.이런 아이디어를 바탕으로 깃 레포지토리를 활용하여 아카이빙을 시도하게 되었다. 스스로가 컴포넌트와 커스텀 훅을 재사용하고자 하는 목적도 있었지만, 함께 프로젝트를 하는 팀원들에게도 디자인 시스템을 공유하며 효율적인 개발 사이클을 구축하고자 하는 바람이 있었다.공유할 방법에 대해 고민.. 이전 1 2 3 4 ··· 19 다음
