Je개발 일지

1. 경로 만들기 Next.js 는 파일 시스템 기반이다. 따라서 경로를 정의하는데 폴더를 사용한다. 각각의 폴더는 경로의 한 부분(Route Segment) 를 가리키고 이는 URL 의 Segement 와 매핑된다. 중첩된 경로를 사용하기 위해서는 중첩 폴더 구조를 사용하면 된다. 특수 파일 중 하나인 page.js 는 해당 경로에 공개되는 UI 다. 위의 예시를 들어보자면 `/dashboard/analytics` URL 경로는 page.ts 파일이 없으므로 접근이 불가능하다. 보통 이런 폴더는 컴포넌트, 스타일, 이미지 등을 넣기 위한 것으로 사용된다 2. UI 만들기 각 경로별 segement 를 위한 UI 를 만들기 위해 특수 파일을 활용하는 규칙이 존재한다. 예를 들어서 페이지를 만들고자 할 때..

1. 용어 Tree 계층구조를 시각화하는 컨벤션이다. 예를 들면 부모와 자식간의 컴포넌트, 폴더 구조 등이 트리 구조로 돼있다. Subtree 트리의 한 부분이다. Root 트리가 새로 시작하여 마지막 Leaf 들로 끝난다. Root Tree, 혹은 Subtree 의 시작이 되는 첫 번째 노드다. Leaf Subtree 에서 더이상 자녀가 존재하지 않은 Subtree 의 노드들이다. 예를 들면 URL 에서 마지막 Segement 에 해당하는 것들이 있다. URL Segement URL 의 한 부분으로 Slash 로 구분되는 것들이다. URL Path URL 의 한 부분으로 Domain 뒤에 오는 모든 것을 의미한다. 2. app Router Next.js 13버전에서 React 서버 컴포넌트 기반의 새로..

2주년이 된지 꽤 지났지만, 간만에 설문조사를 진행했다. 이번에는 작년 한 해 동안 L 프로젝트를 만들며 생고생을 했던 팀장님과 사수에게 많은 질문을 쏟아 부으며 내가 지금 잘하고 있는 점과 개선해야할 점에 대해 알아보는 시간을 가졌다. 1. 팀장 팀장님의 경우, 프로젝트 전체를 관리하는 분이셨기에 이번 프로젝트에 있어서 나는 얼마나 이 프로젝트에 기여했는지를 여쭤보고 싶었다. 두 번째로는, 내가 기획과 디자인을 많이 했고 이것을 컨펌해주신 분이 팀장님이었기에 같이 일하면서 어떤 부분이 나에게는 강점이고, 단점인지를 여쭤봤다. 또, 이제 1년이 지났으니 1년 전과 비교했을 때 지금의 나는 어떤 위치에 있고, 팀 내 생활에 있어서 나는 얼마나 잘하고 있는지 평가를 받고 싶었다. (1) L 프로젝트에서 크게..

1. 무엇을 최적화해야 하는가? 프론트엔드에서 가장 비용이 많이 드는 것은 DOM 에 화면을 그리는 Layout(혹은 Reflow), Paint(Repaint) 하는 과정이다. 물론, 이미지 압축, 네트워크 요청 최적화 등의 작업들도 존재하지만 이 장에서는 “React 시작하기” 에 이어 가장 기초적인 React 라이브러리의 최적화 방안에 대해서 알아보고자 한다. 흔히 프론트엔드에서 최적화한다고 말하면 이 화면을 그리는 작업을 최소화하는 것을 뜻한다. 그렇다면 React 에서는 어떤 방식으로 DOM 에 화면을 그리는 지를 알아야 한다. 1-1) React 의 Trigger, Render, Commit React 에서 클래스형 컴포넌트가 주류였던 시기에는 Vue 와 마찬가지로 “Life Cycle” 이 중..