전체 글 17

[Next.js] 기초 정리 2 (레이아웃, 라우팅 심화 등)

유튜브 강의https://www.youtube.com/playlist?list=PLC3y8-rFHvwjOKd6gdf4QtV1uYNiQnruI 를 보며 정리한 내용입니다.레이아웃페이지는 기본적으로 header, content, footer로 구성된다.이 컴포넌트는 페이지 간의 공통 레이아웃을 정의하는 데에 사용되는데, 레이아웃 컴포넌트가 렌더링될 때 자식 페이지를 포함할 수 있도록 반드시 children prop을 받아야 한다.이러한 레이아웃을 적용하기 위해, 폴더 안에 layout.tsx 파일을 만들면 된다. layout.tsx 파일에서는 children prop을 통해 렌더링될 자식 페이지를 받아와서 레이아웃의 특정 위치에 그 자식 페이지를 렌더링하게 된다. 이 방법으로 각 페이지가 공통 레이아웃을 공..

[Next.js] 기초 정리 1 (시작~라우팅 관련)

유튜브 강의https://www.youtube.com/playlist?list=PLC3y8-rFHvwjOKd6gdf4QtV1uYNiQnruI 를 보며 정리한 내용입니다.Next.js란React + production이 바로 가능하게 라우팅, 최적화 렌더링, 데이터 fetching, 번들링, 컴파일링 등 지원왜 Next.js를 사용하는가Next.js는 아래와 같은 기능들을 지원함으로써 프로덕션을 위한 웹 애플리케이션을 간단히 빌드할 수 있다.1. 라우팅2. API 루트3. 렌더링4. 데이터 fetching5. 스타일링6. 최적화7. 개발 및 배포 빌드 시스템 // SSR 말하는 건가?Next.js 사용 시 전제 조건HTML, CSS, JavaScript 기반ES6 + featuresReact 기반Next...

폐쇄망에서 배포용 Git 서버 구축하기 --- (2) 구축 방법

저번 글에서 정리한 이론을 토대로 실제 git 서버를 구축해보고자 한다.2025.02.04 - [DevOps/Git] - 폐쇄망에서 배포용 Git 서버 구축하기 --- (1) 이론이 git 서버로 Next.js, FastAPI 서버 등 여러 개를 배포해봤는데 이 글에서는 Next.js를 예시로 정리할 것이다.1. 배포 서버에 Bare Repository 구축 git init --bare 명령어를 통해 Bare Repository를 만든다. 2. 만든 Bare Repo 내부의 hooks 디렉토리에 들어간 후, "post-receive" 훅 스크립트 작성nano 등의 명령어로 post-receive 스크립트를 작성하면 된다. 본인의 상황에 맞게 배포 방식에 대해 적으면 되는데,대충 git clone이나 gi..