Intercepting Routes 현재 페이지의 컨텍스트를 유지하면서 현재 레이아웃 내에서 route 를 로드할 수 있다. 이 라우팅의 패러다임은 특정 경로를 “가로채” 다른 경로를 표시하려는 경우에 유용하다. 예를 들어, 피드 내에서 사진을 클릭하면 피드를 오버레이하는 모달이 사진과 함께 표시되어야 한다고 하자. Next.js 는 /feed...

1. Parallel Routes a. 대시보드 혹은 피드 소셜 사이트의 대시보드 혹은 피드와 같이 매우 동적인 애플리케이션의 경우, 병렬 라우팅을 사용하여 복잡한 라우팅 패턴을 구현할 수 있다! b. 독립적인 에러, 로딩 상태 병렬 라우팅을 사용하면, 독립적으로 fetch(스트리밍) 되는 각 경로(라우트)에 대해 독립적인 에러 바운더리, ...

모든 애플리케이션의 골격은 라우팅이다. 이번 블로깅에서 부터는 나만의 Next.js - Deep Dive 를 정리해보려 한다. 1. The app Router 13v Next.js 에서는 React Server Components 에 기반한 새로운 App Router 를 소개했다. shared layouts, nested routing, loadi...

사용자의 입력으로 커뮤니케이션 하기~ 내가 사용했던 form 태그들 회원가입시 입력하는 정보들을 form 태그로 관리 상품등록에 필요한 정보들을 form 으로 관리 검색할 때 필요한 query 들을 form 으로 관리 사용법은 알지만, 좀 더 기본적으로 알아보기 위해 블로그를 작성한다. 1. form form 태그는 사용자...

4년제 대학과정을 공부한것도 아니고, bottom to top 으로 차근차근 공부한 것도 아니다. 부트캠프를 통해 실무과정을 배우고, 필요한 부분이 있으면 그때그때 공부했었다. 덕분에 빠르게 빠르게 성장할 수 있었다. 회사에서도 업무를 하는데 있어서 크게 어려움은 없었다. 매 순간 어려운 부분들은 나에게 챌린지 처럼 다가왔고, 그 순간을 고민하고 공...

React 에 key 값이 필요한 이유(Rendering Lists) 화면에서 어떤 데이터 리스트를 구현해야 하는 경우는 매우 많다. 그리고 그러한 리스트들은 비슷한 컴포넌트 모양을 가지고있다. 그래서 보통은 data 의 array method 를 사용해서 표현했다. 이번 배우기 목표 array method map(), filt...

[Next.js v13] React Essentials (2) 서버컴포넌트에서 클라이언트로 props 전달하기 서버에서 클라이언트 컴포넌트로 보내지는 Props 는 직렬화(serialization)가 필요하다. 이 말이 무엇이냐 하면, 함수, 날짜, 등등은 직접적으로 Client Components 로 전달이 되지 않는다. 직렬화 (seri...

React Essentials (Next.js 13v) (1) Next.js 로 어플리케이션을 구축하면, Server Components 와 같은 React 의 최신 기능에 익숙해지는 것에 도움이 된다. 이번 블로깅 목표: 서버 구성 요소와 클라이언트 구성 요소의 차이점 사용 시기 및 권장패턴 알아보기 Serve...

함수 호출 방식에 의해 결정되는 this 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this 를 암묵적으로 전달받는다. 이를 이해하려면 실행 컨텍스트를 이해해야 하는데, 다음과 같다: 자바스크립트가 실행되는 환경을 정의 this, 변수, 객체, 함수 등 코드의 실행에 필요한 기반 식...

시작하며 이전시간에는 집을 설계하는 방법인 소프트웨어 아키텍쳐에 대해 공부해 보았다. 이번에는 디자인 패턴에 대해 볼텐데, 신기한 부분이 있었다. 가장 초기모델인 MVC 에 대해서인데, 이것을 아키텍처라고 정의하는 사람도 있고, 디자인 패턴이라고 하는 사람도 있다. 무엇이 맞는것일까..? 어디로 분류하냐가 중요한 부분일까에 대해서도 고민해 보았다. ...