Vite 왜 쓸까?좋은것 같긴해 빌드 속도도 빠르고 개발서버 구동 속도도 쾌적하다. webpack.config에 비해 vite.config 설정법이 직관적이기도 하고만들어진 플러그인을 import해서 그대로 쓰면 원하는 목적을 달성하는데도 금방임느낌적인 느낌은 여기까지 적어보고 정리 스근하게 해본다. Native ModuleVite는 JS 네이티브 모듈을 기반으로한 데브 서버임CRA같은 보일러 플레이트를 이용하거나 웹팩과 같은 번들러, 바벨 트랜스파일러등을 설치해 개발 환경을 직접 설정해줄 수 있지만, 빠른 개발가능..빠른 배포 이게 JS 네이티브 모듈때문에 빠르다는 것임 번들링ESM(EcmaScript Module)등장 이전엔 JS언어 레벨에서 모듈화 방식 없었음require.js, 즉시실행함수(IIF..
분류 전체보기
1. 1주차 핵심 개념자바스크립트의 기본기가 탄탄해야 프론트엔드 프레임워크를 사용했을 때, 다양한 상황에 따른 문제 해결력을 보여줄 수 있다. 경험상 주니어 레벨에서의 겪는 대부분의 문제는 본인이 사용하고 있는 언어와 기술에 대한 낮은 이해도로 인해 발생하기 때문이다. 본인은 1주차에 학습한 개념 중 중요한 부분, 다시 한 번 되짚고 싶은 부분 위주로 작성했다.- 1.1 호이스팅var 키워드는 선언과 초기화 단계가 동시에 진행되므로 코드 실행흐름 도달 이전에 참조시 undefined가 출력됨.let과 const는 선언과 초기화 단계가 분리되어 진행됨. 즉, 소스코드 평가단계에서 식별자 정보 등록 후 undefined 초기화는 수행하지 않으므로 실행 단계에서 변수 선언문이 실행될 때 참조가 가능하고 이전에..
💡 서버에서 렌더링된 페이지와 클라이언트 사이드에서 렌더링된 페이지 간에 HTML 속성 불일치로 발생하는 에러문제Next.js에서 다크 모드와 같은 테마 기능을 손쉽게 구현할 수 있도록 도와주는 라이브러리로 next-themes를 많이 이용하길래 나도 한 번 사용해봤다.테마 기능은 잘 동작한다. 다만, 콘솔창에서 위와 같은 에러가 발생하는데 서버에서 렌더링된 페이지와 클라이언트 사이드에서 렌더링된 페이지 간에 HTML 속성 불일치로 발생하는 에러임을 확인 위처럼 서버에서 렌더링된 페이지의 HTML 속성과 클라이언트에서 렌더링된 페이지간의 속성 차이가 발생하는 것을 볼 수 있다.해결클라이언트 사이드에서 컴포넌트가 마운트 됐을 때, ThemeProvider를 렌더링하게끔 useEffe..
useSelectedLayoutSegement 활성화된 링크(Active link)를 감지하기 위해선 브라우저단에서 가능하다. 사용자가 어떠한 페이지에 있는지 알아야하기 때문이다. 브라우저 환경은 클라이언트 사이드이므로 서버 컴포넌트가 아닌 클라이언트 컴포넌트로 작업해야 한다. useSelectedLayoutSegment hook은 레이아웃보다 한 단계 아래의 활성화된 route segment를 획득할 수 있다. "use client"; import { useSelectedLayoutSegment } from "next/navigation"; export default function NavMenu() { const segment = useSelectedLayoutSegment(); return } 위..
Parallel Routes 동일한 레이아웃(동일한 화면) 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있다. 병렬 라우트를 정의할 때 @folder 형태의 슬롯이 필요하다. 슬롯은 route segment에서 제외되기 때문에 URL 구조에 영향을 주지 않는다. 슬롯은 부모 layout에 props로 전달된다. 사용 예시 "src/app/page.tsx"의 메인 페이지와 동시에 특정 경로 페이지를 동시 렌더링하고 싶다면 병렬 라우트를 이용한다. 다만, 공통 레이아웃에서 페이지를 동시에 렌더링하기 위해선 page.tsx가 디렉토리의 동일 계층에 위치해야 한다. "src/app/(beforeLoin)" 아래에 슬롯(@modal)과 layout.tsx를 동일 계층에 위치시킨 다음 별도의 im..
template.tsx 템플릿은 각 하위 레이아웃 또는 페이지를 래핑한다는 점에서 레이아웃과 유사하다. 사용자가 템플릿을 공유하는 경로 사이를 탐색할 때 컴포넌트의 새 인스턴스가 마운트되고, DOM 요소가 다시 생성되며, 상태가 유지되지 않고, 효과가 다시 동기화된다. useEffect(ex: 페이지 보기 로깅) 및 useState(ex: 페이지별 피드백 양식) 에 의존하는 기능은 template가 적합하다. 💡 layout과 template는 공존해서는 안된다. 둘 중 하나를 택하도록 하자. layout.tsx의 경우 라우팅간에 리렌더되지 않지만, template.tsx는 컴포넌트가 새로 마운트되므로 특정 동작이 필요할 경우 채용한다. 는 HTML 요소를 확장한 route 간 prefetching 및 ..
app router 라우팅 처리될 페이지들이 포함될 디렉토리 파일 시스템 기반으로 라우팅 처리 자동 코드 스플리팅 수행(번들 사이즈 down 효과) 💡 path alias 경로 별칭 설정 가능 (next.js는 기본적으로 @으로 설정됨) 상대 경로 ex) ../../app/layout 절대 경로 ex) @/app/layout 브라우저 주소 app 폴더에 반영하기 layout.tsx 여러 페이지간에 공유되는 UI (Navbar, header, footer 등 공통적으로 표현될 UI) 레이아웃은 중첩될 수 있다. (루트 레이아웃 -> 특정 레이아웃 -> 특정 페이지) children prop으로 페이지 또는 중첩 레이아웃을 전달받는다. export default function DashboardLayout(..
무한스크롤 기능을 위해 사용한 방식을 설명하세요 react-query에서 제공하는 useInfiniteScroll 훅을 사용하여 무한 스크롤을 구현했습니다. 페이지당 데이터 갯수를 제한하고, Suspense를 활용해 추가 데이터를 로드할 때 로딩 UI를 보여주고 있습니다. Intersection observer를 활용하는 라이브러리를 사용해 특정 엘리먼트가 교차점을 지났을 때 추가 데이터를 로드합니다. 장바구니에 상품을 추가하는 프로세스를 설명해주세요. 상품이 추가될 때 사용자 인터페이스는 어떻게 업데이트되나요? react-query의 useMutation 훅을 낙관적 업데이트로 처리했습니다. 클라이언트 캐시를 우선적으로 업데이트 하고, 상품 추가 시 요청을 전송하도록 구현했습니다. 먼저 onMutate..
