/app/packages├── /hook├── /type└── /componenttsconfig.base.json이러한 모노레포 구조의 프로젝트(npm workspace + Vite + React + TypeScript)가 있다고 해보자. `packages/*`에 있는 개별 패키지를 `/app`이나 다른 패키지에서 가져다 쓰고 싶은 경우 `package.json`, `vite.config.ts`, `tsconfig.json`은 어떻게 작성해야 할까? 우선 `packages/*`에서 `extends`할 `tsconfig.base.json` 파일은 아래와 같이 설정한다.// tsconfig.base.json{ "compilerOptions": { "baseUrl": ".", "target": "..
1. 문자열 인코딩의 역사A. ASCII 코드1960년대, 다양한 통신 시스템들이 각각 고유한 문자 인코딩 방식을 사용했기 때문에 서로 다른 통신 시스템 사이에 문자를 교환하는 것이 무척 까다로웠다. 이러한 문제를 해결하고자 통신 시스템에서 사용하는 문자 인코딩 방식을 통일하기 위해 미국 표준 협회(ANSI)는 아스키(ASCII; American Standard Code for Information Interchange)라는 표준 인코딩 방식을 개발하였다. ASCII 코드1. 7비트로 제어문자, 영문자 및 숫자, 일부 특수문자를 표현(총 128개 문자)2. 당시 많은 시스템, 장비들이 7비트를 기본으로 처리해 ASCII 코드에서도 7비트를 사용해 메모리를 절약하고, 1비트는 데이터의 오류를 확인하기 위한..
1. app 폴더 구조 #A. 기본 폴더 구조Next에서는 /app 폴더 내부에 각각의 경로 세그먼트(route segment)에 해당하는 폴더를 만듦으로써 라우팅이 가능하다. 예를 들어, /app/dashboard/page.js 컴포넌트는 www.mypage.com/dashboard 페이지로 연결된다. 이러한 방식으로 중첩 라우팅이 가능한데, /app/dashboard/setting/page.js 컴포넌트는 www.mypage.com/dashboard/setting 페이지에 해당한다. B. 파일 컨벤션 #① page.js: 해당 경로에 보여줄 UI 컴포넌트② route.js: ③ layout.js: 현재 경로 세그먼트와 자식 세그먼트의 레이아웃을 위한 UI 컴포넌트④ loading.js: 로딩 상태를..
1. Vite 작동 방식(개발 환경)A. 스크립트 파일 로드Vite의 React + TypeScript 탬플릿의 `index.html` 파일을 보면 script 태그에 tsx 파일이 그대로 들어가 있는 걸 볼 수 있다. 브라우저는 JavaScript 파일만 읽을 수 있는데 어떻게 문제가 없이 작동할 수 있는 걸까? `npm run dev`로 개발 서버(ex. http://localhost:3000/)를 시작하면 브라우저에서는 해당 URL의 html 파일을 Vite 개발 서버에 요청한다. 브라우저가 다운받은 html 파일은 아래와 같은데 위 템플릿 html에 스크립트가 추가되어 있다. react-refresh는 React 코드에 변경 사..
이 글은 CSS Flex 아이템 크기 결정 알고리즘: 이론 편을 바탕으로 CSS Flex 아이템의 크기가 어떻게 결정되는지 구체적인 사례를 통해 이해해보는 글이다. 1. 고정 크기의 헤더, 푸터와 유동적인 본문위 사진과 같이 헤더와 푸터의 높이는 고정이고, 본문의 크기는 viewport에 따라서 달라지는 레이아웃을 생각해보자. 이 레이아웃은 Flex를 사용하지 않고 CSS `calc()` 함수를 이용해서 만들 수도 있지만 요구사항이 바뀌어 헤더, 푸터의 높이가 달라진다면 각 요소의 높이를 개별적으로 수정해줘야 하는 불편함이 있다. Flex 레이아웃을 사용한다면 헤더, 푸터의 높이가 달라지더라도 본문의 높이는 수정해줄 필요가 없어 편하다. 이 레이아웃에서 CSS 코드는 아래와 같다..container ..
Figma의 코멘트 요소처럼 캔버스 노드 바로 위에 DOM 요소를 렌더링해야 하는 요구사항이 생기다 보니 react-konva-utils의 ``을 이용해 DOM 요소를 렌더링할 수 있도록 했다. 처음에는 간단한 UI 요소에만 ``을 사용했는데 점점 노드 설정 팝업 등 스타일링이 들어간 요소가 필요하게 되어 styled-components를 사용하게 됐는데 그 과정에서 styled-components의 theme을 제대로 가져오지 못하는 문제에 직면하게 됐다. 이 글은 react-konva-utils의 ``와 styled-components를 사용하면서 theme 설정을 제대로 가져오지 못하는 문제를 해결해나가는, 다소 허무한 여정을 정리한 것이다. 1. styled-components의 테마를 사용할..
모던 웹에서 CSS Flex는 많이 사용되고 개념도 그리 어렵지는 않지만 내가 생각한 결과와 실제 브라우저에서 보여지는 레이아웃이 다르다면 당황스러울 수 있다. 플렉스 너비 결정 알고리즘을 이해한다면 플렉스 아이템의 크기가 왜 그렇게 결정되었는지, 왜 내가 생각한 대로 렌더링되지 않았는지 고민하느라 시간을 낭비하지 않을 수 있을 것이다.문제를 간단하게 하기 위해 플렉스 아이템에 특별히 `position`속성을 설정하지 않은 경우, 그리고 플렉스 메인 축(main axis)이 x축 방향일 때만을 고려해보자.(`flex-direction: column`이라면 동일한 내용을 y축에 대해 적용해주면 된다.)Flex Layout Algorithm1. Initial Setup2. Line Length Determi..
제너레이터 함수에서 다음 yield 구문을 실행하기 위해서는 generator.next() 메서드를 실행해줘야 함. 하지만 각각의 제너레이터 함수에 대해 next()를 실행해주는 로직은 없는데 Redux-Saga 내부에서 어떠한 과정을 거치길래 이러한 동작이 가능할까?1. Saga 미들웨어는 어떤 과정을 거쳐 각각의 제너레이터 함수에 대해 next() 메서드를 실행시킬까?2. UI에서 액션이 dispatch될 때, 어떻게 suspend되어 있는 제너레이터 함수가 다시 재개될까? 아래와 같은 rootSaga를 Redux에 설정하는 경우를 예로 들어보자.import { createStore, applyMiddleware } from 'redux'import createSagaMiddleware from 'r..
웹앱을 사용하면서 성능 저하가 느껴진다면 브라우저 개발자 도구의 "성능" 기능을 이용해 어떤 부분에서 성능 문제가 발생하는지 알 수 있다. 성능(Performance) 탭에서 녹화를 시작하고 성능 저하가 발생하는 동작을 한 후 녹화를 종료해보자. 그러면 아래와 같은 플레임 차트가 렌더링된다. 지금부터 성능 탭의 결과 화면에서 각각이 어떠한 것을 나타내는지, 그것을 성능 문제 분석에 어떻게 활용할 수 있는지 살펴보도록 하자. 1. 프레임1. Idle Frame(흰색): 변경사항이 없습니다.2. Frame(녹색): 예상대로 제때 렌더링됩니다.3. Partially Presented Frame(노란색): Chrome에서는 적어도 일부 시각적 업데이트를 제때 렌더링하기 위해 최선을 다했습니다. 예를 들어 렌..
1. Distributive Conditional Types #Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation. Checked Typetype A = string extends T ? "yes" : "no"type B = { x: T } extends { x: number } ? "yes" : "no"type C = T extends U ? "yes" : "no"제네릭 타입에서 ..
기타 2025. 3. 21. 12:51
/app/packages├── /hook├── /type└── /componenttsconfig.base.json이러한 모노레포 구조의 프로젝트(npm workspace + Vite + React + TypeScript)가 있다고 해보자. `packages/*`에 있는 개별 패키지를 `/app`이나 다른 패키지에서 가져다 쓰고 싶은 경우 `package.json`, `vite.config.ts`, `tsconfig.json`은 어떻게 작성해야 할까? 우선 `packages/*`에서 `extends`할 `tsconfig.base.json` 파일은 아래와 같이 설정한다.// tsconfig.base.json{ "compilerOptions": { "baseUrl": ".", "target": "..
기타 2025. 1. 11. 19:13
1. 문자열 인코딩의 역사A. ASCII 코드1960년대, 다양한 통신 시스템들이 각각 고유한 문자 인코딩 방식을 사용했기 때문에 서로 다른 통신 시스템 사이에 문자를 교환하는 것이 무척 까다로웠다. 이러한 문제를 해결하고자 통신 시스템에서 사용하는 문자 인코딩 방식을 통일하기 위해 미국 표준 협회(ANSI)는 아스키(ASCII; American Standard Code for Information Interchange)라는 표준 인코딩 방식을 개발하였다. ASCII 코드1. 7비트로 제어문자, 영문자 및 숫자, 일부 특수문자를 표현(총 128개 문자)2. 당시 많은 시스템, 장비들이 7비트를 기본으로 처리해 ASCII 코드에서도 7비트를 사용해 메모리를 절약하고, 1비트는 데이터의 오류를 확인하기 위한..
JavaScript/Next.js 2024. 12. 28. 18:16
1. app 폴더 구조 #A. 기본 폴더 구조Next에서는 /app 폴더 내부에 각각의 경로 세그먼트(route segment)에 해당하는 폴더를 만듦으로써 라우팅이 가능하다. 예를 들어, /app/dashboard/page.js 컴포넌트는 www.mypage.com/dashboard 페이지로 연결된다. 이러한 방식으로 중첩 라우팅이 가능한데, /app/dashboard/setting/page.js 컴포넌트는 www.mypage.com/dashboard/setting 페이지에 해당한다. B. 파일 컨벤션 #① page.js: 해당 경로에 보여줄 UI 컴포넌트② route.js: ③ layout.js: 현재 경로 세그먼트와 자식 세그먼트의 레이아웃을 위한 UI 컴포넌트④ loading.js: 로딩 상태를..
JavaScript/기타 라이브러리 2024. 11. 23. 16:15
1. Vite 작동 방식(개발 환경)A. 스크립트 파일 로드Vite의 React + TypeScript 탬플릿의 `index.html` 파일을 보면 script 태그에 tsx 파일이 그대로 들어가 있는 걸 볼 수 있다. 브라우저는 JavaScript 파일만 읽을 수 있는데 어떻게 문제가 없이 작동할 수 있는 걸까? `npm run dev`로 개발 서버(ex. http://localhost:3000/)를 시작하면 브라우저에서는 해당 URL의 html 파일을 Vite 개발 서버에 요청한다. 브라우저가 다운받은 html 파일은 아래와 같은데 위 템플릿 html에 스크립트가 추가되어 있다. react-refresh는 React 코드에 변경 사..
CSS 2024. 9. 5. 21:52
이 글은 CSS Flex 아이템 크기 결정 알고리즘: 이론 편을 바탕으로 CSS Flex 아이템의 크기가 어떻게 결정되는지 구체적인 사례를 통해 이해해보는 글이다. 1. 고정 크기의 헤더, 푸터와 유동적인 본문위 사진과 같이 헤더와 푸터의 높이는 고정이고, 본문의 크기는 viewport에 따라서 달라지는 레이아웃을 생각해보자. 이 레이아웃은 Flex를 사용하지 않고 CSS `calc()` 함수를 이용해서 만들 수도 있지만 요구사항이 바뀌어 헤더, 푸터의 높이가 달라진다면 각 요소의 높이를 개별적으로 수정해줘야 하는 불편함이 있다. Flex 레이아웃을 사용한다면 헤더, 푸터의 높이가 달라지더라도 본문의 높이는 수정해줄 필요가 없어 편하다. 이 레이아웃에서 CSS 코드는 아래와 같다..container ..
JavaScript/React 2024. 8. 29. 16:48
Figma의 코멘트 요소처럼 캔버스 노드 바로 위에 DOM 요소를 렌더링해야 하는 요구사항이 생기다 보니 react-konva-utils의 ``을 이용해 DOM 요소를 렌더링할 수 있도록 했다. 처음에는 간단한 UI 요소에만 ``을 사용했는데 점점 노드 설정 팝업 등 스타일링이 들어간 요소가 필요하게 되어 styled-components를 사용하게 됐는데 그 과정에서 styled-components의 theme을 제대로 가져오지 못하는 문제에 직면하게 됐다. 이 글은 react-konva-utils의 ``와 styled-components를 사용하면서 theme 설정을 제대로 가져오지 못하는 문제를 해결해나가는, 다소 허무한 여정을 정리한 것이다. 1. styled-components의 테마를 사용할..
CSS 2024. 8. 7. 12:40
모던 웹에서 CSS Flex는 많이 사용되고 개념도 그리 어렵지는 않지만 내가 생각한 결과와 실제 브라우저에서 보여지는 레이아웃이 다르다면 당황스러울 수 있다. 플렉스 너비 결정 알고리즘을 이해한다면 플렉스 아이템의 크기가 왜 그렇게 결정되었는지, 왜 내가 생각한 대로 렌더링되지 않았는지 고민하느라 시간을 낭비하지 않을 수 있을 것이다.문제를 간단하게 하기 위해 플렉스 아이템에 특별히 `position`속성을 설정하지 않은 경우, 그리고 플렉스 메인 축(main axis)이 x축 방향일 때만을 고려해보자.(`flex-direction: column`이라면 동일한 내용을 y축에 대해 적용해주면 된다.)Flex Layout Algorithm1. Initial Setup2. Line Length Determi..
JavaScript/기타 라이브러리 2024. 8. 3. 18:02
제너레이터 함수에서 다음 yield 구문을 실행하기 위해서는 generator.next() 메서드를 실행해줘야 함. 하지만 각각의 제너레이터 함수에 대해 next()를 실행해주는 로직은 없는데 Redux-Saga 내부에서 어떠한 과정을 거치길래 이러한 동작이 가능할까?1. Saga 미들웨어는 어떤 과정을 거쳐 각각의 제너레이터 함수에 대해 next() 메서드를 실행시킬까?2. UI에서 액션이 dispatch될 때, 어떻게 suspend되어 있는 제너레이터 함수가 다시 재개될까? 아래와 같은 rootSaga를 Redux에 설정하는 경우를 예로 들어보자.import { createStore, applyMiddleware } from 'redux'import createSagaMiddleware from 'r..
기타 2024. 6. 8. 16:48
웹앱을 사용하면서 성능 저하가 느껴진다면 브라우저 개발자 도구의 "성능" 기능을 이용해 어떤 부분에서 성능 문제가 발생하는지 알 수 있다. 성능(Performance) 탭에서 녹화를 시작하고 성능 저하가 발생하는 동작을 한 후 녹화를 종료해보자. 그러면 아래와 같은 플레임 차트가 렌더링된다. 지금부터 성능 탭의 결과 화면에서 각각이 어떠한 것을 나타내는지, 그것을 성능 문제 분석에 어떻게 활용할 수 있는지 살펴보도록 하자. 1. 프레임1. Idle Frame(흰색): 변경사항이 없습니다.2. Frame(녹색): 예상대로 제때 렌더링됩니다.3. Partially Presented Frame(노란색): Chrome에서는 적어도 일부 시각적 업데이트를 제때 렌더링하기 위해 최선을 다했습니다. 예를 들어 렌..
TypeScript 2024. 4. 22. 20:32
1. Distributive Conditional Types #Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation. Checked Typetype A = string extends T ? "yes" : "no"type B = { x: T } extends { x: number } ? "yes" : "no"type C = T extends U ? "yes" : "no"제네릭 타입에서 ..