[Next.js] 게시판 구현에 있어서 #1 #Backend

 

 

 

아, 백엔드 프로코드로 해야겠구나.

금일 G사 코딩테스트를 치고 나서 싱숭생숭했다.

 

자바스크립트로 어떻게 하면 상태관리를 효율적으로 확장성을 보장하며 처리를 하는지. 

백엔드에선 어떻게 값을 (잘) 보내야 하는지. 간단한 게시판을 통해서 API 통신을 해보려고 한다.

 

 

그외에 내가 추구해야할 가치가 무엇인지(?), 회사의 커리어와 이상적 방향이 일치할 수 있는지.

이 방향이 맞으려면 어떻게 일을 해야하는지? 왜 이렇게 방향을 맞추려고 하면 힘이 드는지

 

내가 여기 왜 있는거지? 

 

요즘 기술적 스트레스가 심하다.. 애초에 로코드 솔루션을 할 게 아니었던거 같다(심히, 취업사기가 아닌가 싶다)

사실 사내에도 대체자도 없고 인력도 없는 상황이 썩 좋지 않아서 믿을 건 개인의 책임감 하나 뿐이고,

프로코드가 재밌는데,,,  기술적으로 로우레벨단을 뜯어보는 면이 부족하여 이 솔루션으로 일을 할 때마다 스트레스를 받는다.

개발을 할 때 스트레스를 받지는 않는데, 근간이 무너진건 이번이 처음이다.

 

 

 

 

개발에만 집중하고 싶어요 ㅠㅠ ㅠㅠ ㅠㅠ 

그럼 뭐다! 개발해야지~~

회사에서 개인적 커리어의 발전은 뒤로 하고,, 시간을 내서라도 원하는 개발을 하고자 한다.

 

오늘은 Cursor AI 로 개발자 프롬포트를 좀 더 정확하게 적용할 수 있는 방법이 있다고 하니

Cursor AI를 활용해서 기존에 작업하던 Next.js BackEnd + Solid.js Frontend 의 게시판을 다듬어서 기술블로그 이전을 해야겠다.

작년인 2024년 6월에 개발을 했으니 슬슬 레퍼런스도 많아졌을 거라 기대한다. 

 

cursor/rules 엔 각각 기술의 Best Practice가 기재되어 있다. 호다닥 이전을 해주었다.

 

우선, 상황은 다음과 같다.

MVP로 게시판 구현 정도만 우선 구현한다.

왜냐하면, 권한 관리가 아직 없다. (회원가입 기능도 없다)

사실 개인 포트폴리오라 굳이..? 회원가입을 할 필요도 없기에 권한 작업도 빼두었지만.

 

게시글을 (프론트엔드)에서 기재 하고 싶다고 한다면? > 일이 엄청 늘어날 것으로 예상된다.

(회원가입 / 보안) 등... 개인 기술블로그가 해킹당하는 사고는 끔찍한 일 일 것이다.. (내 이력서도 안녕..)

하지만 최종적으로 프론트엔드에서 기재해야! 내가 덜 불편하다. (로컬 서버 열어서.. 게시글 작성하고... )

 

따라서 우선적으로 Next.js의 관리자페이지에서 게시글을 등록하고, 이를 프론트엔드로 쏴주기만 한다.

백엔드 도메인 지식은 빈약하기에, GPT와 Cursor AI의 도움을 받아본다.

 

 

생각해보니, si 기업 재직중 인데도 간과한게 있었다. 잘 작성된 요구사항이 무엇일까?

왜 이렇게 복잡한 요구사항이 발생하고 메일이 많이 오가는걸까?

내가 고객이다 생각하고 요구사항 명세서도 작성해보자..

---

잘 짜여진 요구사항 명세서

 

✍️ 예시 – 로그인 기능 요구사항 (좋은 예 vs 나쁜 예)

❌ 나쁜 예

• 로그인 기능이 있어야 함
• (→ 어떤 방식으로? 어떤 조건에서? 실패 시 어떻게?)

 

✅ 좋은 예

• 사용자는 이메일과 비밀번호를 입력하여 로그인할 수 있어야 한다.
• 로그인 시, 입력값은 서버에 POST 요청으로 전달되며, 응답은 JWT 토큰이다.
• 비밀번호는 최소 8자, 영문+숫자 포함이어야 한다.
• 로그인 실패 시, 오류 메시지를 사용자에게 표시한다.
• [우선순위: 필수] [릴리즈 버전: MVP 1.0]

 

S (Specific)	기능이 구체적으로 명시되어 있어야 함 (예: “사용자는 이메일로 로그인할 수 있어야 한다”)
M (Measurable)	성공 기준이 명확해야 함 (예: “비밀번호는 8자 이상이어야 한다”)
A (Achievable)	현재 자원과 기술로 구현 가능해야 함
R (Relevant)	서비스 목표에 부합해야 함 (불필요한 기능 제외)
T (Time-bound)	우선순위나 일정이 명시되어 있으면 더 좋음 (예: “1차 릴리즈까지 구현 예정”)

 

---

요구사항 명세서 0.0.1

Backend : Next.js (관리자페이지)

Frontend : Soldis.js (뷰어용)

 

핵심기능 : 게시글 등록

• 설명
• 관리자는 로컬에서 구동되는 Next.js 기반 관리자 페이지를 통해 Markdown 형식의 게시글을 작성하고 저장할 수 있습니다. 작성된 게시글은 DB에 저장되며, 프론트엔드 게시판에도 실시간 반영됩니다. ※ 추후에는 프론트엔드 권한 관리 기능이 추가되어 관리자 전용 페이지가 분리될 예정입니다.
• 사용 시나리오
  
  1. 관리자가 브라우저에서 로컬 관리자 페이지(localhost:3000/admin)에 접속
  2. ‘글 작성’ 버튼 클릭
  3. Markdown 형식으로 텍스트 입력, 이미지 파일 업로드
  4. ‘저장’ 버튼 클릭
  5. 글이 DB에 저장되고, 관리자 페이지 목록에서 확인
  6. 프론트엔드(/ 또는 /posts) 페이지에서도 동일한 글 확인
• 입력값
  • title: 게시글 제목 (문자열)
  • content: 게시글 본문 (Markdown 문자열)
  • images[]: 첨부 이미지 파일 (다중 가능)
  • authorId: 작성자 ID
• 처리 방식
  • 저장 시, 서버는 게시글 데이터를 Markdown 원본 형태로 DB에 저장한다.
  • 이미지 파일은 서버 또는 S3 등 외부 저장소에 업로드되며, 이미지 링크는 본문 내에 삽입된다.
  • 저장 완료 후 게시글 ID를 포함한 응답을 반환한다.
  • 게시글은 API를 통해 프론트엔드에 제공되어야 하며, /api/posts/:id 또는 /api/posts 리스트 엔드포인트를 통해 조회 가능하다.
• 출력/응답
  • 성공 시: { status: "success", postId: "abc123" }
  • 관리자 페이지 게시글 목록에 최신 게시글이 반영됨
  • 프론트엔드 게시판에도 반영됨 (즉시 혹은 캐시 무효화 전략 적용)
• 예외 처리
  • 필수 입력값 누락 (title, content): 오류 메시지 반환
  • 이미지 업로드 실패: 게시글 저장 실패 처리, 사용자에게 오류 표시
  • 서버 오류: 500 에러 코드 반환 및 관리자 알림 로그 작성
• 우선순위
  • 긴급 (MVP 1.0에 포함되어야 하며, 서비스 핵심 기능 중 하나임)

---