Next.js Learn
1.[Next.js Learn] Introduction - About Next.js
Next.js를 효과적으로 사용하기 위해서는 JavaScript, React 및 관련 웹 개발 개념에 익숙해져 있는 것이 도움이 됩니다. 그러나 JavaScript와 React는 방대한 주제입니다. 그렇다면 Next.js를 배우기에 준비가 되었다고 어떻게 알 수 있을까
2.[Next js Learn] What is Next.js?
Next.js는 빠른 웹 애플리케이션을 만들기 위한 구성 요소를 제공하는 유연한 React 프레임워크입니다.하지만 이 문장이 정확히 어떤 의미인지 알아보겠습니다. React와 Next.js가 무엇이며 어떻게 도움을 줄 수 있는지에 대해 자세히 알아보겠습니다.모던한 애플
3.[Next.js Learn] From JavaScript to React(1)
React가 작동하는 방식을 이해하기 위해서는 브라우저가 코드를 해석하여 상호작용하는 사용자 인터페이스(UI)를 생성하는 방식에 대한 기본적인 이해가 필요합니다.사용자가 웹 페이지를 방문하면 서버는 다음과 같은 모양의 HTML 파일을 브라우저에 반환합니다:그럼 브라우저
4.[Next.js Learn] From JavaScript to React(2) - Updating the UI with JavaScript
JavaScript와 DOM 메서드를 사용하여 UI 업데이트하기 자바스크립트와 DOM 메서드를 사용하여 프로젝트에 h1 태그를 추가하는 방법을 알아보겠습니다. 코드 편집기를 열고 새로운 index.html 파일을 생성하세요. HTML 파일 내부에 다음 코드를 추가합
5.[Next.js Learn] From JavaScript to React(3) - Getting Started with React
React를 프로젝트에서 사용하려면, unpkg.com이라는 외부 웹사이트에서 두 개의 React 스크립트를 불러와야 합니다.react는 React의 핵심 라이브러리입니다.react-dom은 DOM과 함께 React를 사용할 수 있도록 도와주는 DOM 특화 메서드를 제
6.[Next.js Learn] From JavaScript to React(4) - Essential JavaScript for React
React를 배우는 동시에 JavaScript도 배울 수 있지만, JavaScript에 익숙하다면 React를 배우는 과정이 더 쉬워질 수 있습니다.다음 섹션에서는 JavaScript 관점에서 React의 일부 핵심 개념을 소개하게 될 것입니다. 다음은 언급될 Java
7.[Next.js Learn] From JavaScript to React(5) - React Core Concepts
React를 사용하여 애플리케이션을 개발하기 위해 익숙해져야 할 핵심 개념은 다음과 같습니다:컴포넌트 (Components)속성 (Props)상태 (State)다음 섹션에서는 위의 개념들을 차례대로 다루고, 계속해서 학습할 수 있는 자료를 제공할 것입니다.출처: htt
8.[Next.js Learn] From JavaScript to React(6) - Building UI with Components
사용자 인터페이스는 컴포넌트라고 불리는 작은 구성 요소들로 분해될 수 있습니다.컴포넌트를 사용하면 독립적이고 재사용 가능한 코드 조각을 구축할 수 있습니다. 컴포넌트를 LEGO 조립 블록처럼 생각해보면, 이러한 개별 블록을 함께 결합하여 더 큰 구조물을 형성할 수 있습
9.[Next.js Learn] From JavaScript to React(7) - Displaying Data with Props
지금까지 <Header /> 컴포넌트를 재사용한다면, 두 번 모두 동일한 내용이 표시될 것입니다.하지만 만약 다른 텍스트를 전달하고 싶거나 데이터를 외부 소스에서 가져오는 경우에는 어떻게 해야 할까요?일반 HTML 요소에는 요소의 동작을 변경하는데 사용할 수 있는
10.[Next.js Learn] From JavaScript to React(8) - Adding Interactivity with State
React가 상태와 이벤트 핸들러를 통해 상호작용성을 추가하는 방법을 알아보겠습니다.예를 들어, HomePage 컴포넌트 내에 좋아요 버튼을 만들어보겠습니다. 먼저, return() 문 안에 button 요소를 추가해주세요.버튼을 클릭했을 때 동작하도록 하려면 onCl
11.[Next.js Learn] From JavaScript to React(9) - How to Continue Learning React
방금 세 가지 필수적인 React 개념인 컴포넌트, 프롭스(Props) 및 상태(State)를 소개했습니다. 이러한 개념에 대한 튼튼한 기반을 갖추면 React 애플리케이션 구축에 시작할 수 있을 것입니다. 자신감이 생기면 다음과 같은 다른 React 주제들도 확인해보
12.[Next.js Learn] From React to Next.js(1)
마지막 강의에서는 React로 시작하는 방법에 대해 논의했습니다. 아래는 최종 코드 예시입니다. 여기서 시작한다면, 이 코드를 코드 편집기의 index.html 파일에 붙여넣으세요.이제 간단한 React 앱에서 Next.js로 이동하는 방법을 살펴보겠습니다.출처: ht
13.[Next.js Learn] From React to Next.js(2) - Getting Started with Next.js
Next.js로 프로젝트를 시작하려면 더 이상 unpkg.com에서 react와 react-dom 스크립트를 로드할 필요가 없습니다. 대신, Node Package Manager (npm)를 사용하여 이러한 패키지를 로컬로 설치할 수 있습니다.참고: 머신에 Node.j
14.[Next.js Learn] From React to Next.js(3) - Next Steps
첫 번째 Next.js 애플리케이션을 만들어 축하드립니다!요약하자면, React와 Next.js의 기본 지식을 탐색하고 간단한 React 애플리케이션을 Next.js 애플리케이션으로 마이그레이션했습니다.이제 Next.js 여정에서 다음 단계를 선택할 수 있습니다. 다음
15.[Next.js Learn] How Next.js Works(1)
더 고급 Next.js 기능을 배우기 전에 Next.js가 어떻게 동작하는지에 대한 기본적인 이해가 도움이 될 것입니다.이 과정의 처음에는 React가 어떻게 애플리케이션을 구축하고 구조화하는지에 대해 비교적 개입하지 않는다고 언급했습니다. React로 애플리케이션을
16.[Next.js Learn] How Next.js Works(2) - From Development to Production
환경은 코드가 실행되는 맥락으로 생각할 수 있습니다.개발 중에는 애플리케이션을 로컬 컴퓨터에서 빌드하고 실행합니다. 프로덕션으로 넘어가는 것은 애플리케이션을 배포하고 사용자가 사용할 수 있도록 준비하는 과정입니다.Next.js는 애플리케이션의 개발 단계와 프로덕션 단계
17.[Next.js Learn] How Next.js Works(3) - Compiling
개발자들은 JSX, TypeScript 및 현대적인 버전의 JavaScript와 같은 개발자 친화적인 언어로 코드를 작성합니다. 이러한 언어들은 개발자의 효율성과 확신을 향상시키지만, 브라우저가 이해할 수 있도록 하기 위해서는 JavaScript로 컴파일되어야 합니다.
18.[Next.js Learn] How Next.js Works(4) - Minifying
개발자들은 인간이 읽기 쉽도록 최적화된 코드를 작성합니다. 이 코드에는 주석, 공백, 들여쓰기, 여러 줄 등과 같이 코드 실행에 필요하지 않은 추가 정보가 포함될 수 있습니다.최소화는 코드의 기능을 변경하지 않고 코드의 형식 지정 및 주석을 제거하는 과정입니다. 목표는
19.[Next.js Learn] How Next.js Works(5) - Bundling
개발자들은 애플리케이션을 모듈, 컴포넌트, 함수 등으로 분할하여 더 큰 조각으로 구성할 수 있습니다. 내부 모듈 및 외부의 타사 패키지를 내보내고 가져오면 파일 간의 복잡한 종속성 웹이 형성됩니다.번들링은 종속성 웹을 해결하고 파일(또는 모듈)을 최적화된 번들로 병합
20.[Next.js Learn] How Next.js Works(6) - Code Splitting
개발자들은 일반적으로 애플리케이션을 여러 페이지로 분할하여 각 페이지를 서로 다른 URL에서 접근할 수 있도록 합니다. 각각의 페이지는 애플리케이션으로의 고유한 진입점이 됩니다.코드 분할은 각 진입점이 필요로 하는 작은 청크로 애플리케이션 번들을 분할하는 과정입니다.
21.[Next.js Learn] How Next.js Works(7) - Build Time vs Runtime
빌드 타임(또는 빌드 단계)은 애플리케이션 코드를 프로덕션에 배포할 준비를 위해 수행되는 일련의 단계를 가리키는 용어입니다.애플리케이션을 빌드할 때, Next.js는 코드를 프로덕션에 최적화된 파일로 변환하여 서버에 배포하고 사용자가 사용할 수 있도록 준비합니다. 이러
22.[Next.js Learn] How Next.js Works(8) - Client and Server
웹 애플리케이션의 맥락에서 클라이언트란 사용자 장치의 브라우저를 의미합니다. 클라이언트는 애플리케이션 코드를 서버에 요청하고, 서버로부터 받은 응답을 사용자가 상호작용할 수 있는 인터페이스로 변환합니다.서버는 데이터 센터의 컴퓨터를 가리킵니다. 이 컴퓨터는 애플리케이션
23.[Next.js Learn] How Next.js Works(9) - Rendering
React에서 작성한 코드를 UI의 HTML 표현으로 변환하는 작업은 피할 수 없는 작업입니다. 이 과정을 렌더링이라고 합니다.렌더링은 서버 또는 클라이언트에서 발생할 수 있습니다. 이는 빌드 시 미리 실행되거나, 런타임에서 각 요청마다 발생할 수 있습니다.Next.j
24.[Next.js Learn] How Next.js Works(10) - CDNs and the Edge
애플리케이션이 네트워크에 배포된 후에는 애플리케이션 코드가 어디에 저장되고 실행되는지 알아두는 것이 도움이 됩니다. 네트워크는 리소스를 공유할 수 있는 연결된 컴퓨터(또는 서버)로 생각할 수 있습니다. Next.js 애플리케이션의 경우, 애플리케이션 코드는 오리진 서버
25.[Next.js Learn] How Next.js Works(11) - Next Steps
Next.js Foundations 강의를 완료하신 것을 축하드립니다!Next.js 학습을 계속하기 위해, 주요 기능을 소개하는 튜토리얼을 통해 첫 번째 Next.js 앱을 만드는 것을 추천합니다.또한, 문서를 확인하고 다양한 예제를 살펴볼 수도 있습니다.질문이 있으시
26.[Next.js Learn] Create a Next.js App(1)
React를 사용하여 처음부터 완전한 웹 애플리케이션을 구축하기 위해서는 많은 중요한 세부사항을 고려해야 합니다:코드는 webpack과 같은 번들러를 사용하여 번들링되고, Babel과 같은 컴파일러를 사용하여 변환되어야 합니다.코드 스플리팅과 같은 프로덕션 최적화 작업
27.[Next.js Learn] Create a Next.js App(2) - Setup
Setup 먼저, 개발 환경이 준비되어 있는지 확인해봅시다. 만약 Node.js가 설치되어 있지 않다면, 여기서 설치하세요. Node.js 버전 10.13 이상이 필요합니다. 이 튜토리얼에서는 여러분 자신의 텍스트 편집기와 터미널 앱을 사용할 것입니다. > Win
28.[Next.js Learn] Create a Next.js App(3) - Welcome to Next.js
http://localhost:3000에 접속하면 다음과 같은 페이지가 표시됩니다. 이는 Next.js에 대한 도움이 되는 정보를 보여주는 스타터 템플릿 페이지입니다.도움 받을 수 있어요!: 도움이 필요하다면 GitHub Discussions 페이지에서 커뮤니
29.[Next.js Learn] Create a Next.js App(4) - Editing the Page
시작 페이지를 편집해보겠습니다.Next.js 개발 서버가 여전히 실행 중인지 확인하세요.텍스트 편집기로 pages/index.js 파일을 엽니다.<h1> 태그 아래에 있는 "Welcome to"라고 쓰인 텍스트를 "Learn"으로 변경하세요.파일을 저장하세요.파일
30.[Next.js Learn] Navigate Between Pages(1)
지금까지 만든 Next.js 앱은 한 페이지만 가지고 있습니다. 웹사이트와 웹 애플리케이션은 일반적으로 여러 다른 페이지를 갖고 있습니다.앱에 더 많은 페이지를 추가하는 방법을 알아보겠습니다.이번 레슨에서 다음을 배울 것입니다:통합 파일 시스템 라우팅을 사용하여 새 페
31.[Next.js Learn] Navigate Between Pages(2) - Pages in Next.js
Next.js에서 페이지는 pages 디렉토리의 파일에서 내보낸 React 컴포넌트입니다.파일 이름을 기반으로 페이지는 라우트와 연관됩니다. 예를 들어, 개발 환경에서는 다음과 같습니다:pages/index.js는 /경로와 연관됩니다.pages/posts/first-p
32.[Next.js Learn] Navigate Between Pages(3) - Link Component
웹사이트에서 페이지 간에 링크를 만들 때는 <a> HTML 태그를 사용합니다.Next.js에서는 애플리케이션의 페이지 간에 링크를 만들기 위해 next/link의 Link 컴포넌트를 사용할 수 있습니다. <Link>는 클라이언트 측에서 탐색을 수행하며, 탐색
33.[Next.js Learn] Navigate Between Pages(4) - Client-Side Navigation
Link 컴포넌트는 동일한 Next.js 앱에서 두 페이지 간에 클라이언트 측 탐색(Client-Side Navigation)을 가능하게 합니다.클라이언트 측 탐색은 페이지 전환을 JavaScript를 사용하여 수행하므로, 브라우저가 수행하는 기본 탐색보다 더 빠릅니다
34.[Next.js Learn] Assets, Metadata, and CSS(1)
두 번째로 추가한 페이지에는 현재 스타일이 없습니다. 페이지에 CSS를 추가해보겠습니다.Next.js는 CSS와 Sass에 대한 내장 지원 기능을 갖고 있습니다. 이 강의에서는 CSS를 사용할 것입니다.또한 이 수업에서는 Next.js가 이미지와 페이지 메타데이터(예:
35.[Next.js Learn] Assets, Metadata, and CSS(2) - Assets
Next.js는 이미지와 같은 정적 자산을 최상위 public 디렉토리 아래에서 제공할 수 있습니다. public 안의 파일은 pages와 마찬가지로 애플리케이션의 루트에서 참조할 수 있습니다.public 디렉토리는 robots.txt, Google 사이트 검증 및 기
36.[Next.js Learn] Assets, Metadata, and CSS(3) - Metadata
만약 <title>과 같은 페이지의 메타데이터를 수정하려면 어떻게 해야 할까요?<title>은 <head> HTML 태그의 일부이므로, Next.js 페이지에서 <head> 태그를 어떻게 수정할 수 있는지 알아보겠습니다.에디터에서 pages/ind
37.[Next.js Learn] Assets, Metadata, and CSS(4) - Third-Party JavaScript
서드 파티 JavaScript는 제3자 소스에서 추가된 스크립트를 가리킵니다. 일반적으로 서드 파티 스크립트는 분석, 광고 및 고객 지원 위젯과 같은 새로운 기능을 사이트에 도입하기 위해 사용됩니다. 이러한 스크립트를 사용하면 처음부터 작성할 필요 없이 기능을 추가할
38.[Next.js Learn] Assets, Metadata, and CSS(5) - CSS Styling
이제 CSS 스타일링에 대해 이야기해보겠습니다.보시다시피, 우리의 인덱스 페이지(http://localhost:3000)는 이미 일부 스타일이 적용되어 있습니다. 파일 구조를 살펴보면 styles라는 폴더와 두 개의 CSS 파일이 있는 것을 확인할 수 있습니다
39.[Next.js Learn] Assets, Metadata, and CSS(6) - Layout Component
먼저, 모든 페이지에서 공유될 Layout 컴포넌트를 만들어 봅시다.components라는 상위 디렉토리를 생성하세요.components 디렉토리 내부에 layout.js라는 파일을 생성하고 다음 내용을 추가하세요.그런 다음, pages/posts/first-post.
40.[Next.js Learn] Assets, Metadata, and CSS(7) - Global Styles
CSS Modules는 컴포넌트 수준의 스타일에 유용합니다. 그러나 모든 페이지에서 로드되어야 하는 CSS가 필요한 경우에도 Next.js에서 지원합니다.전역 CSS를 애플리케이션에 로드하려면 다음 내용으로 pages/\_app.js라는 파일을 생성하세요.\_app.j
41.[Next.js Learn] Assets, Metadata, and CSS(8) - Polishing Layout
지금까지는 CSS Modules와 같은 개념을 설명하기 위해 최소한의 React 및 CSS 코드만 추가했습니다. 데이터 가져오기(data fetching)에 관한 다음 레슨으로 넘어가기 전에 페이지 스타일링과 코드를 개선해 보겠습니다.components/layout.m
42.[Next.js Learn] Assets, Metadata, and CSS(9) - Styling Tips
스타일링 팁(Styling Tips) 다음은 도움이 될 수 있는 몇 가지 스타일링 팁입니다. > 저희 앱에 변경 사항을 가할 필요 없이 다음 섹션들을 읽어주시면 됩니다 ! 토글 클래스에 clsx 라이브러리 사용하기(Using clsx library to toggl
43.[Next.js Learn] Pre-rendering and Data Fetching(1)
우리는 블로그를 생성하고자 합니다. 지금까지는 아무런 블로그 콘텐츠를 추가하지 않았습니다. 이번 레슨에서는 외부 블로그 데이터를 앱에 가져오는 방법을 배워보겠습니다. 블로그 콘텐츠는 파일 시스템에 저장할 것이지만, 다른 곳에 저장되어도 동작할 수 있습니다(예: 데이터베
44.[Next.js Learn] Pre-rendering and Data Fetching(2) - Pre-rendering
데이터 가져오기에 대해 이야기하기 전에, Next.js에서 가장 중요한 개념 중 하나인 사전 렌더링에 대해 이야기해보겠습니다.기본적으로 Next.js는 모든 페이지를 사전 렌더링합니다. 이는 Next.js가 각 페이지의 HTML을 미리 생성한다는 것을 의미합니다. 클라
45.[Next.js Learn] Pre-rendering and Data Fetching(3) - Two Forms of Pre-rendering
Next.js에는 두 가지 형태의 사전 렌더링이 있습니다: 정적 생성(Static Generation)과 서버 사이드 렌더링(Server-side Rendering). 차이는 페이지의 HTML을 생성하는 시점에 있습니다.정적 생성(Static Generation)은 빌
46.[Next.js Learn] Pre-rendering and Data Fetching(4) - Static Generation with and without Data
데이터를 사용하여도 가능하며, 데이터를 사용하지 않아도 정적 생성(https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts지금까지 생성한 모든 페이지는 외부 데이터를 가져
47.[Next.js Learn] Pre-rendering and Data Fetching(5) - Blog Data
간단한 블로그 생성하기(Creating a simple blog architecture) 예제에서 블로그 글은 애플리케이션의 디렉토리에 로컬 마크다운 파일로 저장됩니다(외부 데이터 소스에서 가져오지 않음). 따라서 파일 시스템에서 데이터를 읽어와야 합니다. 이 섹션
48.[Next.js Learn] Pre-rendering and Data Fetching(6) - Implement getStaticProps
getStaticProps 실행하기(Implement getStaticProps) Next.js에서 Pre-rendering(Pre-rendering in Next.js) Next.js는 두 가지 형태의 사전 렌더링을 지원합니다: 정적 생성(Static Genera
49.[Next.js Learn] Pre-rendering and Data Fetching(7) - getStaticProps Details
getStaticProps에 대해 알아야 할 몇 가지 핵심적인 정보가 있습니다.lib/posts.js에서는 파일 시스템에서 데이터를 가져오는 getSortedPostsData를 구현했습니다. 하지만 다른 소스에서 데이터를 가져올 수도 있습니다. 예를 들어, 외부 API
50.[Next.js Learn] Pre-rendering and Data Fetching(8) - Fetching Data at Request Time
만약 데이터를 빌드 시간이 아닌 요청 시간에 가져와야 한다면, 서버 사이드 렌더링(Server-side Rendering)을 사용해 볼 수 있습니다.서버 사이드 렌더링을 사용하려면 페이지에서 getStaticProps 대신 getServerSideProps를 내보내야