[멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_87일차_"팀프로젝트 - Next.js"

🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁
TIL 회고 - [87]일차

🚀87일차에는 프론트엔드 개발 착수를 위한 Next.js에 대한 학습을 할 수 있었다.

학습 목표 : 프론트엔드에서 Next.js와 Cursor AI를 활용하여 개발을 진행할 수 있어야함

학습 과정 : 회고를 통해 작성

---

 

리액트와 Next.js의 차이점

 

➡️리액트 - SPA (Single Page App)

• 리액트는 라우터(Router)를 직접 구현해야한다 (=라우터의 구조를 직접 구현)

• 이처럼 Router를 따로 정의해서 component형태로 넣어놔야 동작을 할 수 있는 원리

 

➡️Next.js - SSR (Server Side Rendering)

• 반면 Next.js는 이미 완성된 규칙을 따라간다.

ex. 디렉토리 post에 page.tsx을 생성하면

• post/page.tsx 로 페이지를 바로 접속이 가능 (=디렉토리 설계로 URL을 구조화시킬 수 있다는 것)

정리하자면

edit/page.tsx ➡️ localhost:~~~/edit로 접속이 바로 가능

---

Cursor AI

사용법

• @ 를 눌러서 작업하고 싶은 디렉토리를 지정할 수 있다.
• @Codebase ➡️전체 프로젝트 선택 >> Files, Folders 등도 각각 선택할 수 있다.

• 요구사항들을 Accept All 로 모두 반영할 수 있고, 코드 별로 각각 하나하나 변경을 승인하거나 거절할 수 있다.

 

예약어 종류

• /help : 깃허브 코파일럿 도움말 출력
• /doc : 코드 설명을 요청
• /clear : 새로운 채팅 시작
• @workspace : 프로젝트 전체 문맥을 파악해달라는 요청을 전달
  - /explain : 선택한 코드를 더욱 자세하게 설명 요청
  - /fix : 코드를 개선하거나 리팩토링 요청 (자주 쓰는 명령어)
  - /new : 슬래시 명령을 사용하여 새 프로젝트를 설정
  - /tests : 선택한 코드에 대한 테스트를 작성하도록 요청

 

이외 사용 예시

• e.preventDefault() ➡️받아온 이벤트 (e) (=기존에 실행되던 이벤트)를
  handleSubmit 함수가 실행됨에 따라 중단해주는 것

 

• JSON.stringify()
  ➡️JSON 형식으로 문자열화 (stringify()) 시켜서 body태그에 보내는 기능을 하는 메소드

---

Next.js에서 page.tsx 의 의미

ts = 타입스크립트의 약자

x = 리액트에서 사용하는 것

tsx =리액트에서 타입스크립트 사용

ex. 자바스크립트면 page.jsx 

---

프로젝트에 Cursor AI 작업 넣기

• 원하는블로그화면을 캡처해서 참고자료로 첨부하고
• 테일윈드 스타일로 작업해달라고 요청할 수 있음

 

ex. Cursor AI가 만들어낸 프론트엔드 페이지

• 💡팀프로젝트와 관련없는 작업물

• 이정도 느낌을 구현해줄 수 있다. 기존 설계와 목적이 다를 수 있으니 세부적인 구현은 직접해야할 수 있다.

---

🚀회고 결과 :

프론트엔드 작업을 백엔드와 함께 수행하려하니 어려운 점이 많았는데 Cursor AI 를 통해 스타일 적인 설계는 맡길 수 있을 것 같아 다행이었다.

Next.js의 문법은 리액트와 유사하므로 조금 더 학습하여 프론트단의 세부적인 구현은 진행할 수 있어야겠다고 느꼈다.

향후 계획 : 

- Next.js와 React의 차이점 좀 더 공부
- Next.js의 문법 공부