오늘은 저번에 리액트로 만들었던 포트폴리오 홈페이지를,
이번엔 Next.js로 다시 만들어보는 실습을 진행했어요.
강의 들으면서 직접 커서AI(Cursor AI)로 작업한 과정을 그대로 기록해봤습니다 😊
이번 편은 ① 설치부터 ② 프로젝트 구조 잡기까지만 다루고,
실제 페이지 내용(소개/프로젝트/스킬 페이지) 작성은 다음 편에서 이어갈게요!
1. Next.js 설치하기
먼저 현재 폴더에 Next.js를 설치했어요.
설치 중간에 나오는 옵션들은 제가 직접 선택하고 싶어서,
자동 설정 없이 하나하나 질문지에 답하는 방식으로 진행했습니다.
터미널에 아래 명령어를 입력하면 시작돼요.
| 명령어 |
npx create-next-app@latest .
|
실행하면 아래처럼 항목별로 Yes / No를 선택하는 질문지가 나와요.
사용할 항목은 y(Yes), 안 쓸 항목은 n(No)으로 답하면 됩니다.
▲ TypeScript, ESLint, Tailwind CSS 등 옵션을 y/n으로 선택하는 화면
💡 Tip. Tailwind 설정이 자꾸 오류 나서 불편하다면, 질문지에서 Tailwind 항목을 n으로 선택하고 나중에 부트스트랩(Bootstrap)으로 대체할 수도 있어요.
2. 설치 완료 후 첫 화면 확인
설치가 다 끝나면 아래 명령어로 로컬 서버를 켜서 정상적으로 화면이 뜨는지 확인해요.
| 명령어 |
npm run dev
|
실행하면 로컬 주소(http://localhost:3000)가 생성되고,
링크를 클릭해서 접속했을 때 Next.js 기본 화면이 뜨면 설치 성공이에요!
▲ npm run dev 실행 후 정상적으로 뜬 Next.js 기본 화면
3. Git에 초기 설정 저장하기
여기까지 설치와 기본 확인이 끝났으면,
Git에 커밋해서 지금 상태를 저장해뒀어요.
나중에 문제가 생겨도 이 시점으로 돌아올 수 있으니 습관처럼 저장하는 게 좋더라고요.
▲ 소스 컨트롤 탭에서 변경사항 확인 후 Commit
4. 기존 PRD 문서 재활용하기
이제 기획 문서(PRD)를 만들어야 하는데,
사실 이건 예전에 리액트로 작업할 때 만든 PRD 문서를 그대로 재활용했어요.
완전히 새로 쓰는 대신,
Next.js 작업 폴더에 살짝 복사해서 붙여넣고
AI에게 수정을 요청하는 방식으로 진행했습니다.
제가 처음 만든 PRD가 보기에 좀 복잡해서,
AI에게 파일을 통째로 보내서 정리해달라고 요청했어요.
(그대로 써도 되지만 저는 재정리 쪽을 택했어요.)
그리고 이번엔 요구사항이 좀 달라졌어요.
예전엔 1페이지짜리 구성이었는데,
이번엔 각 메뉴를 별도 URL로 나누고 싶었거든요.
그래서 이렇게 요청했어요.
참고로 Tailwind 대신 Bootstrap을 설치한 경우라면,
그 설치 내역까지 AI에게 언급해서
작업 환경에 맞게 PRD를 수정하도록 요청하면 돼요.
▲ App Router 기반 멀티페이지 구조로 수정된 PRD.md 내용
5. 구조만 먼저 잡기
PRD가 정리됐으면 이제 웹사이트 구조부터 잡을 차례예요.
내용은 페이지별로 하나씩 따로 요청할 거라,
이번엔 구조만 만들어달라고 했어요.
저는 커서AI에게 바로 작업시키지 않고
직접 하나하나 수정할 계획이었어서,
수정 코드랑 수정해야 할 위치까지
최대한 상세하게 알려달라고 요청했어요.
이렇게 요청하니
파일 설치 위치랑 체크 포인트를 정리해서
작업 순서를 안내해줬어요.
파일명을 클릭하면 수정할 코드를 바로 확인할 수 있고,
부분 수정이 어려워 보이니 통째로 복사해서 교체하는 방식으로 안내해줬습니다.
(사실 부분수정을 했었더랬죠.. 장렬히 망했습니다 ㅋ)
▲ 터미널 패키지 설치부터 파일 교체·생성까지 순서대로 정리해준 답변
6. 패키지 설치 확인하기
1번 항목에 패키지 관련 내용이 있어서 뭔지 물어봤더니,
확인 방법을 알려줬어요.
아래 명령어로 이미 설치된 패키지인지 체크할 수 있어요.
▲ cat package.json으로 framer-motion, react-icons 설치 여부 확인
cat package.json으로 확인했는데 없는 걸로 나와서, 아래 명령어로
직접 설치했어요.
| 명령어 |
npm install framer-motion react-icons
|
정상적으로 설치가 완료되고 나서, 2번 항목부터 파일 수정을 진행했어요.
7. 파일 통째로 교체하기
부분 수정보다는 통으로 교체하는 게 헷갈리지 않아서,
globals.css와 layout.jsx 같은 기존 파일들은 코드를
통째로 복사해서 교체했어요.
▲ src/app/globals.css, layout.jsx 파일을 전체 교체하는 코드 예시
8. 폴더/파일 구조 확인하기
커서AI에게 작업을 요청했다면,
완료 후 PRD에 있는 구조표를 보면서
실제로 폴더랑 파일이 제대로 생성됐는지
꼭 확인하는 게 좋아요.
제 위치에 있는지,
혹시 다른 위치에 잘못 생성됐거나
아예 인식을 못 해서 안 만들어진 게 있는지
PRD랑 비교해서 파악하고,
문제가 있으면 바로 수정 요청을 했어요.
▲ about, skills, projects, contact 페이지와 components, data 폴더까지 정리된 구조
이렇게 App Router 기반으로
app/about/page.jsx →
/about 같은 식으로
각 메뉴가 독립된 URL을 갖는 구조가 완성됐어요.
Navbar와 Footer는 layout.jsx에 한 번만 작성하면
모든 페이지에 자동으로 적용되는 것도 편했습니다.
오늘의 정리
- Next.js 설치 시 옵션은 직접 y/n으로 선택 가능
- 기존 리액트 PRD를 재활용해서, AI에게 "Next.js + 멀티페이지 구조"로 수정 요청
- 구조만 먼저 잡고, 내용은 페이지별로 나눠서 진행하는 게 헷갈리지 않음
- 부분 수정보다 파일 통째로 교체하는 방식이 초보자에게는 더 편함
- 작업 후엔 항상 PRD 구조표랑 실제 생성된 파일을 비교 확인하기
다음 편에서는
실제로 소개 페이지,
프로젝트 페이지,
스킬 페이지에 내용을 채워 넣는 과정을 이어서 정리해볼게요! 🙌
댓글 없음:
댓글 쓰기