전체 글

1. 라우팅을 이해하기 위한 주요 용어 (1) Tree 관련 Tree : 계층 구조를 시각적으로 잘 보기 위한 규칙(위 → 아래) Subtree : tree의 한 부분, root부터 시작해서 leaf들에 이르기까지 범위 Root : Tree 또는 Subtree의 첫번째 노드 ex) root layout Leaf : children이 더 이상 없는 node (2) URL 관련 URL Segment 슬래시(/)로 분류된 URL path의 한 부분 URL Path 도메인(www.sample-web.com) 이후 따라오는 전체 URL 부분 2. 파일(폴더) 기반 라우팅 (1) page.tsx : main ui가 표시될 곳 (2) static routing : react-router-dom과 같은 별도의 라이브러..

1. Next.js 버전의 주요 분기점 일반적으로 Next.js를 채택할 때 주요한 의사결정은 1) App Router를 쓸 것인가? 2) Pages router를 쓸 것인가? 와 연관되어 있다. 왜 router 기반으로 주요한 속성을 분류하는 것일까? - 우리는 웹사이트를 기획/설계할 때 어떤 페이지가 존재하게 할지 라우팅은 어떻게 할지를 항상 먼저 고려한다. - 기존의 React.js를 사용하여 웹 애플리케이션을 만들 때는 react-router-dom을 이용해 라우팅을 가능하게 했다. - 이렇게 중요한 라우팅에 대한 근본적인 시각, 전략이 next.js 13버전을 기점으로 변경되었다. a. 변경 전 : pages 폴더에 원하는 페이지의 파일 이름을 둔다. b. 변경 후 : app 폴더 밑에 폴더명을..

프레임워크? : 개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 '기술의 조합' Spring Framework : Java 기반의 웹(백엔드) 프레임워크 Vue.js, Angular.js : Javascript 기반 웹 프론트엔드 SPA 프레임워크 Django, Flask : Python 기반의 웹 프레임워크 Ruby on Rails .NET Framework Express.js, NextJS : Javascript 기반 웹 백엔드 프레임워크 라이브러리 : 공통 기능의 모듈화가 이루어진 프로그램의 집합 React.js react-router-dom redux React.js 공식홈페이지 : UI를 만들기 위한 라이브러리 그 자체만으로 프레임워크라 불리기엔 제공해야 하는 ..

클라이언트 사이드 렌더링(Client Side Rendering) 자바스크립트를 다운 후 브라우저에서 자바스크립트를 실행해야 화면에 UI가 표시됨 자바스크립트가 동작하지 않는 환경에서는 화면이 표시되지 않기 때문에 검색엔진과 같은 로봇들이 컨텐츠를 이용할 수 없음 자바스크립트를 다운하고 실행하기 전까지 화면이 표시되지 않음 서버 사이드 렌더링(Server Side Rendering) 서버쪽에서 자바스크립트 실행 브라우저로는 완성된 HTML을 전송함 -> 자바스크립트를 실행할 수 없는 환경에서도 잘 동작한다. 검색 엔진 친화적 다운 받는 즉시 실행하기 때문에 사용자 입장에선 눈 깜짝할 사이에 웹페이지가 표시되는 것을 확인할 수 있다.