| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- Headless 컴포넌트
- type assertion
- TypeScript
- JavaScript
- docker
- webpack
- task queue
- 명시적 타입 변환
- react
- Pull Request
- 프로젝트 구조
- Dockerfile
- prettier-plugin-tailwindcss
- next.js
- 주니어개발자
- Microtask Queue
- prettier
- Custom Hook
- 프로세스
- 암묵적 타입 변환
- Sparkplug
- 좋은 PR
- Event Loop
- Render Queue
- linux 배포판
- 타입 단언
- VirtualDom
- Compound Component
- AJIT
- CS
- Today
- Total
목록react (2)
너굴 개발 일지
React 동작원리(Virtual DOM과 Fiber)
React 동작원리에 대해 공부한 것을 정리한 글입니다. 피드백은 언제나 환영입니다!서론프론트엔드 역사 (React를 곁들인)2000년대까지는 LAMP 스택(Linux, Apache 웹서버, MySQL, PHP)이 강세였으며 웹 서버에서 HTML 페이지를 만들어 클라이언트에게 제공하는 방식으로 브라우저는 단순히 HTML 페이지 렌더링, JS는 폼 처리와 같은 부수적인 역할만 하는 방식으로 프론트엔드는 수동적인 역할이었다.2010년대부터는 웹소켓, 캔버스, 지오로케이션 같은 다양한 기능을 브라우저에서 제공하며 JS의 역할은 더욱 넓어졌다. 그러나 DOM API를 다루는 것은 까다로웠기에 JS 코드가 복잡해지게 되었다.간단한 예시로 DOM을 선택하는 방법에 대해 살펴보면 다음과 같다.ID 선택자를 활용하는 ..
[Webpack] 모듈 번들러, 그리고 ESBuild를 통한 빌드 속도 개선 (1)
회사에서 개발중인 CRA 기반의 React 프로젝트를 Docker 이미지로 빌드시 npm run build 명령어를 통한 빌드 시간이 너무 오래 걸려 이를 개선한 과정을 작성한 글입니다. 프로젝트를 그냥 빌드하면 1분 50초정도 걸리지만 Docker 이미지로 빌드시 빌드시간이 약 6분정도로 3배가량 차이가 났습니다. 그래서 Webpack을 커스텀해 빌드 시간 자체를 줄이면 Docker 이미지 빌드 시간도 줄일 수 있지 않을까 싶어 빌드 과정을 개선해보겠습니다. 내용이 길어질 것 같아 2개의 글로 나눠 이번 포스팅은 모듈 번들러, Webpack이란 무엇이고 왜 쓰는지에 대해 알아보겠습니다. 사전 지식 CRA React 빌드 과정 모듈 시스템 본론 모듈 번들러 트랜스파일러 Webpack Create Reac..