본문 바로가기

프레임워크46

[공식문서] NextJS 페이지 간 이동하기 #2 이전 레슨을 계속 진행 중이라면 이 페이지를 건너뛸 수 있습니다. 다음 페이지로 이동하려면 아래 Next 버튼을 클릭하세요. 스타터 코드 다운로드 (선택 사항) 이전 레슨을 진행 중이 아니라면 아래에서 이 레슨의 스타터 코드를 다운로드하고 설치하여 실행할 수 있습니다. 이를 통해 nextjs-blog 디렉토리가 설정되며, 이전 레슨의 결과와 동일하게 설정됩니다. 다시 말하자면, 이전 레슨을 방금 마친 경우에는 이 작업이 필요하지 않습니다. npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter" 그런.. 2023. 8. 14.
[공식문서] NextJS 페이지 간 이동하기 #1 지금까지 만든 Next.js 앱은 한 페이지만 가지고 있습니다. 웹사이트와 웹 애플리케이션은 일반적으로 여러 다른 페이지를 가지고 있습니다. 이제 어떻게 애플리케이션에 더 많은 페이지를 추가하는지 알아보겠습니다. 이 레슨에서 다음을 배우게 될 것입니다. 통합된 파일 시스템 라우팅을 사용하여 새 페이지 만들기. 링크(Link) 컴포넌트를 사용하여 페이지 간 클라이언트 측 탐색을 활성화하는 방법 배우기. 코드 분할과 프리페칭에 대한 내장된 지원 알아보기. Next.js 라우팅에 대한 자세한 문서가 필요하다면 라우팅 문서를 확인해보세요. 2023. 8. 14.
[공식문서] Next.js 앱 만들기 #3 페이지 편집하기 시작 페이지를 편집해 보겠습니다. 먼저, Next.js 개발 서버가 여전히 실행 중인지 확인하세요. 텍스트 편집기를 사용하여 pages/index.js 파일을 열어보세요. 태그 아래에 있는 "Welcome to"라는 텍스트를 찾아 "Learn"으로 변경해보세요. 파일을 저장하세요. 파일을 저장하는 즉시 브라우저가 새 텍스트로 페이지를 자동으로 업데이트 합니다. Next.js 개발 서버에는 빠른 갱신(Fast Refresh)이 활성화되어 있습니다. 파일을 변경하면 Next.js가 변경 사항을 브라우저에 거의 즉시 적용합니다. 새로 고침할 필요가 없습니다! 이를 통해 앱을 빠르게 반복하여 개발할 수 있습니다. 다음 단계 : 페이지 생성 잘 하셨습니다. 첫 번째 레슨은 여기까지입니다. 다음 레.. 2023. 8. 14.
[공식문서] Next.js 앱 만들기 #2 설정 먼저 개발 환경이 준비되어 있는지 확인해 봅시다. Node.js가 설치되어 있지 않다면 여기서 설치하세요. Node.js 버전은 10.13 이상이어야 합니다. 이 강좌에서는 텍스트 편집기와 터미널 앱을 사용합니다. Windows를 사용하신다면 Git for Windows를 다운로드하고 함께 제공되는 Git Bash를 사용하는 것을 권장합니다. Git Bash는 이 강좌에서 사용되는 UNIX 특정 명령어를 지원합니다. 또 다른 옵션으로 Windows Subsystem for Linux(WSL)을 사용할 수 있습니다. Next.js 앱 만들기 Next.js 앱을 만들려면 터미널을 열고 원하는 디렉터리로 이동한 다음 다음 명령을 실행하세요. npx create-next-app@latest nextjs-b.. 2023. 8. 14.
[공식문서] Next.js 앱 만들기 #1 React를 사용하여 처음부터 완전한 웹 애플리케이션을 구축하려면 고려해야 할 중요한 세부 사항이 많이 있습니다. 웹팩과 같은 번들러를 사용하여 코드를 번들링하고 Babel과 같은 컴파일러를 사용하여 변환해야 합니다. 코드 분할과 같은 제품 최적화를 수행해야 합니다. 성능과 SEO를 위해 일부 페이지를 정적으로 사전 렌더링하거나 서버 사이드 렌더링 또는 클라이언트 사이드 렌더링을 사용할 수 있습니다. 리액트 앱을 데이터 저장소에 연결하려면 일부 서버 측 코드를 작성해야 할 수도 있습니다. 이러한 문제들을 해결해 주는 프레임워크가 필요합니다. 그러나 이러한 프레임워크는 적절한 추상화 수준을 가져야 합니다. 그렇지 않으면 유용하지 않을 것입니다. 또한 코드를 작성하는 동안 훌륭한 "개발자 경험"을 제공해야 .. 2023. 8. 14.
[공식문서] Next.js의 작동 방식 #11 다음 단계 Next.js Foundations 강좌를 완료하신 것을 축하드립니다! Next.js를 계속 학습하려면, 메인 기능을 소개하는 튜토리얼을 통해 첫 번째 Next.js 앱을 만들어 보시기를 권장합니다. 또한 문서를 확인하고 다양한 예제 목록을 살펴보실 수 있습니다. 대화에 참여하세요 궁금한 사항이 있으면 Discord나 Github Discussions 커뮤니티에서 질문하실 수 있습니다. 2023. 8. 14.
[공식문서] Next.js의 작동 방식 #10 네트워크란 무엇인가? 배포된 응용 프로그램 코드가 저장되고 실행되는 위치를 알아두는 것은 도움이 됩니다. 네트워크는 자원을 공유할 수 있는 연결된 컴퓨터(또는 서버)로 생각할 수 있습니다. Next.js 애플리케이션의 경우 응용 프로그램 코드는 원본 서버, 콘텐츠 전송 네트워크(CDN), 그리고 엣지에 배포될 수 있습니다. 각각에 대해 알아보겠습니다. Origin Server (원본 서버) 앞서 논의한대로 서버는 응용 프로그램 코드의 원본 버전을 저장하고 실행하는 주요 컴퓨터를 의미합니다. 원본 서버라는 용어를 사용하여 응용 프로그램 코드가 CDN 서버와 엣지 서버와 같은 다른 위치로 배포되는 서버와 구별합니다. 원본 서버가 요청을 받으면 응답을 보내기 전에 일부 계산을 수행합니다. 이 계산 작업의 결과.. 2023. 8. 12.
[공식문서] Next.js의 작동 방식 #9 렌더링이란 무엇인가? React에서 작성한 코드를 UI의 HTML 표현으로 변환하는 작업을 의미합니다. 이 과정을 렌더링이라고 합니다. 렌더링은 서버 또는 클라이언트에서 발생할 수 있습니다. 렌더링은 빌드 시점에서 미리 실행될 수 있고, 런타임에서 각 요청마다 실행될 수 있습니다. Next.js에서는 세 가지 유형의 렌더링 방법을 사용할 수 있습니다. 서버 사이드 렌더링, 정적 사이트 생성, 클라이언트 사이드 렌더링. Pre-Rendering (사전 렌더링) 서버 사이드 렌더링과 정적 사이트 생성은 사전 렌더링으로도 불립니다. 외부 데이터의 가져오기 및 React 컴포넌트를 HTML로 변환하는 작업이 클라이언트에게 결과가 전송되기 전에 미리 실행되기 때문입니다. Client-Side Rendering v.. 2023. 8. 12.
[공식문서] Next.js의 작동 방식 #8 클라이언트와 서버 (Client and Server) 웹 애플리케이션의 맥락에서 클라이언트는 사용자의 기기에 있는 브라우저를 나타내며, 이 브라우저는 애플리케이션 코드를 요청하기 위해 서버에 요청을 보냅니다. 그런 다음 서버로부터 받은 응답을 사용자가 상호 작용할 수 있는 인터페이스로 변환합니다. 서버는 데이터 센터 내의 컴퓨터를 나타내며, 애플리케이션 코드를 저장하고 클라이언트로부터 요청을 받아 일부 계산을 수행한 다음 적절한 응답을 다시 보냅니다. 2023. 8. 12.

티스토리툴바