NextJs 공식문서 Getting Started: Project Structure | Next.jsA list of folders and files conventions in a Next.js projectnextjs.orgGithub GitHub - joseph0926/next-docs: nextjs docs로 학습하는 레포입니다nextjs docs로 학습하는 레포입니다. Contribute to joseph0926/next-docs development by creating an account on GitHub.github.com app router에서 예약어 파일들 1. layout.tsx layout이란? layout 파일은 해당 경로(폴더)에 공유되는 UI입니다NextJs 프로젝트를 구성하면 ..
저번글 [NextJs] NextJs 시작하기 (NextJs란?, NextJs 핵심기능) NextJs를 사용하는 이유로는 여러 가지가 존재할 수 있습니다. 예를 들어 서버사이드 렌더링 로직을 사용하고 싶을 수 있고, 하나의 프레임워크로 풀스택 애플리케이션을 구축하고 싶을 수도 있 joseph0926.tistory.com - 문제 저번글에도 언급했지만, NextJs는 정적 사이트에 React(동적)를 사용할 수 있게 해주는 프레임워크입니다. 아래 사진은 제 웹 프로젝트 초기 빌드 결과입니다 404 페이지를 제외하고는 모든 페이지가 동적 렌더링되고 있는것을 확인 할 수 있습니다. 이게 꼭 나쁘다고는 할 수 없지만, 개인적으로는 이럴꺼면 Next를 사용할 이유가 없다고 생각합니다. 따라서 아래 과정으로 제 프로..
NextJs를 사용하는 이유로는 여러 가지가 존재할 수 있습니다. 예를 들어 서버사이드 렌더링 로직을 사용하고 싶을 수 있고, 하나의 프레임워크로 풀스택 애플리케이션을 구축하고 싶을 수도 있습니다. 이러한 이유도 존재하겠지만, 근본적으로 Next는 정적 사이트에 React(동적)를 사용할 수 있게 해주는 프레임워크입니다. 이를 염두하고 NextJs에 대해서 알아보려합니다. 1. 파일 기반 라우팅 NextJs는 기본적으로 파일 기반 라우팅을 채택하여 사용하고 있습니다. 즉, React의 react-router처럼 코드를 통해 페이지의 라우터를 정의하는 것이 아닌, 폴더 및 파일을 통해 라우터가 정의됩니다. 여기에는 몇가지 규칙이 존재합니다. app 폴더내의 page 파일은 매우 특별한 파일이며, 해당 파일..
이번 프로젝트는 블로그에 기록하면서 구축해보려합니다. 저는 1인 개발 프로젝트를 진행할 때 보통 아래와 같은 순서로 진행합니다. 간단한 기획 프로젝트 주제, 프로젝트 간단 설명, 사용 기술, 예상 규모(기간, db등,,) 간단한 기획을 기반으로 openAI와 상세 기획 구성 디자인 레퍼런스 검색 (주로 유튜브나 Dribbble 참고) 1,2,3 을 통합하여 기획서(노션) 및 뼈대(draw.io) 작성 4번을 기반으로 1번에서의 사용 기술, 예상 규모 재검토 개발 시작 1. 간단한 기획 최근 1 ~ 2달간 NextJs v13을 기반으로 한 game forum 프로젝트를 진행하였고, 진행중입니다. 따라서 이번에는 조금 결이 다른 프로젝트를 진행해보려합니다. 저는 개인 프로젝트 주제를 정할 때 생각하는건 두 ..
Next.js가 v13으로 버전 업데이트가 되면서, 기존에 page 폴더에서 해왔던 작업들이 app 폴더에서 진행되게 변경되었고 추가적인 변화들이 생겼습니다. 그중에서 이 글에서 알아볼 것은 server componet 입니다. Server Componet 란? server 컴포넌트란 서버를 벗어나지 않는 컴포넌트입니다. 조금더 길게 써보면, server 컴포넌트의 코드는 서버에서 실행되고 클라이언트에는 코드의 결과만을 제공합니다. 즉 해당 컴포넌트의 js 코드가 클라이언트에서 실행되지 않는다는 것을 의미합니다. 이게 무슨 의미가 있을까요? 일반적인 CSR에서는 컴포넌트의 js 코드가 클라이언트로 전송되고, 클라이언트에서 실행됩니다. 반면 server 컴포넌트는 앞서 언급했듯이 클라이언트로 js 코드를 ..
