Woomin
Vite는 어떻게 CJS를 ESM으로 바꿀까?
는 개발모드에서 Native ESM을 사용해서 unbundled 상태로 개발 환경을 제공합니다. 그렇기 때문에 파일이 수정되어도 해당 파일만 다시 빌드하고 캐시해서 브라우저에게 제공하기 때문에 어플리케이션이 아무리 커져도 항상 일관적인 속도로 개발모드를 유지할 수 있습니다. 이를 “Unbundled development”라고 하며 말 그대로 번들링하는 게…
React에서 컴포넌트가 리렌더링되면 children도 리렌더링 될까?
여기 다음과 같이 children을 받아서 레이아웃을 잡아주는 이라는 컴포넌트가 있습니다. 컴포넌트에는 리렌더링 버튼이 하나 있는데, 이 버튼이 클릭되면 컴포넌트가 리렌더링 되며 콘솔에 “Layout rendered”라는 문구가 찍힙니다. 그리고 이 컴포넌트를 다음과 같이 가져다가 사용했습니다. 이 때, 만약 컴포넌트에 있는 리렌더링 버튼을 클릭하…
TypeScript 유틸리티 타입 창고
String 관련 Split string을 split해서 튜플타입으로 만들기 Trim string의 양옆 공백이 제거된 string 타입을 만들기 Replace string에서 특정 문자가 변경된 string 타입을 만들기 Join string으로 된 튜플을 join하여 templete literal로 만들기 Tuple 관련 Filter 튜플에서 특정 타…
S3 + CloudFront로 정적 배포 과정 이해하기
정적 웹사이트 호스팅은 간단하게는 다음과 같은 과정을 거칩니다. 정적 파일을 웹서버에 업로드 정적파일에 접근 할 수 있는 범위 설정 CDN을 통해 어느 물리적 위치에서도 빠르게 접근할 수 있도록 설정 웹서버의 정적 파일을 직접 접근할 수 없고 CDN을 통해서만 접근할 수 있도록 설정 CDN cache invalidate 도메인을 구매하고 CDN 배포와 연…
URL파라미터와 페이지간의 의존성을 TypeScript를 통해 드러내기 - 제네릭타입의 활용
배경 개발을 하다보면 아래 코드와 같이 페이지간의 정보전달을 위해 패스파라미터 혹은 쿼리파라미터를 사용하곤 합니다. 예를들어, 라는 path를 갖는 “게시글 목록 페이지”가 존재하고, 쿼리파라미터로 를 받는다면 다음과 같이 사용될 것입니다. 하지만 이런 사용법에는 문제가 있는데, 페이지 라우팅을 하려는 곳(쿼리파라미터를 붙이는 쪽)과 “게시글 목록 페이지…
Recoil은 Context API를 어떻게 사용하길래 상태 변경이 일어나도 RecoilRoot의 자식 컴포넌트들에 대한 불필요한 리렌더링을 유발하지 않을까?
리코일 0.6.0 버전으로 작성된 글입니다. Context API를 사용할 때 발생하는 문제점 보통 를 사용해서 스토어를 관리하고 를 사용해서 자식으로 상태를 내려주는 방법을 사용하게 되면, 이 가 통과하는 모든 컴포넌트들이 리렌더링되는 문제점이 있습니다. 그런데 을 사용하면 위와같은 문제가 발생하지 않습니다. 도 사용하려면 일단 로 감싸줘야해서 저는 에…
CSS Note
Safari issue “overflow: hidden”과 “border-radius” 문제 Safari에서 과 함께 를 먹은 엘리먼트의 모서리가 둥글게 표시되지 않는 이슈가 있는데, 이는 웹킷 버그로 속성을 이용해서 새로운 레이어를 생성해줌으로써 해결할 수 있습니다 disabled input Safari에서는 같은 엘리먼트에 를 주게되면 자동으로 가…
CSS Rendering
맹기완 대표님의 코드스피츠를 들으면서 알게된 내용들을 정리한 포스팅입니다. Normal Flow Normal Flow는 , , 로 그려지는 것을 말합니다. 여기서 와 란, Normal Flow를 계산하는 방식으로, Block Formatting Context와 Inline Formatting Context를 의미합니다. BFC는 Block의 Geometr…
Merge commit Revert 하기
작성 동기 글의 주제에 있어서 그렇게 중요한 부분은 아니기에 안읽고 본론만 읽으셔도 무방합니다 저희 팀에서는 브랜치를 의 흐름으로 관리하고 있습니다. 그래서 develop 브랜치에 모아두었다가 master에 merge 하여 production 배포를 진행하는데, 이번에 develop에 있는 커밋 중 아직 production에 배포돼서는 안되지만 그 위에 …
react-router 구현하며 이해하기
동기 react-router의 BrowserRouter를 사용하다가 발생한 이슈를 처리하는 방법을 찾아보다가 서버에서 해당 index.html 파일을 내려주면 해결할 수 있다는 것을 알게되었습니다. 하지만 index.html 파일을 내려주면 왜 해결되는지를 알지 못하고 있어서 이를 이해해보고자 react-router 코드를 뜯어보고 직접 구현해보기로 마…