** VanillaJS로 신년메시지 주고받는 SPA 사이트 만들기 **

넘블 챌린지

📌배포 사이트

📘회고록

기간

- 챌린지 기간

2023년 1월 6일 (금) ~ 2023년 1월 19일 (목) [ 14일 ]

- 추가 공부 및 개발 기간

2023년 1월 20일 (금) ~ 2023년 2월 7일 (화) [ 16일 ]

규칙

• 구체적인 가이드라인

기능목록

• 메인 페이지

  • 메인화면에서 게시글 작성화면과 상세 게시글로 이동할 수 있다.
  • 최신글 순서로 게시글들을 보이게 한다.

• 게시물 추가 페이지

  • 네비게이션 바의 뒤로가기 버튼과 로고이름을 클릭하면 메인 화면으로 이동한다.
  • 이미지가 추가되고, 텍스트가 작성되면 글 작성하기 버튼이 활성화 된다.
  • 글 작성하기 버튼을 클릭하면 메인 화면으로 이동하면서 글 작성이 완료된다.

• 게시물 확인 페이지

  • 네비게이션 바의 뒤로가기 버튼과 로고이름을 클릭하면 메인 화면으로 이동한다.
  • 수정 버튼을 클릭하면 수정 페이지로 이동한다.
  • 삭제 버튼을 클릭하면 글이 삭제 되면서 메인 페이지로 이동한다.
  • 맨 아래의 입력창에 댓글을 쓰고 게시를 클릭하면 댓글이 추가된다.
  • 추가된 댓글의 삭제 버튼을 클릭하면 댓글이 삭제된다.

• 게시물 수정 페이지

  • 네비게이션 바의 뒤로가기 버튼과 로고이름을 클릭하면 메인 화면으로 이동한다.
  • 수정하고자 하는 게시물의 상태를 그대로 가져와서 그 상태에서 수정을 할 수 있다.

파일 구조

📦src
 ┣ 📂css  
 ┃ ┣ 📜detail.css      ----------------------------------- 상세 게시물 페이지 css 관리
 ┃ ┣ 📜edit.css        ----------------------------------- 게시물 수정 페이지 css 관리
 ┃ ┣ 📜home.css        ----------------------------------- 메인 페이지 css 관리
 ┃ ┣ 📜navbar.css      ----------------------------------- 중복되는 네비게이션 바 css 관리
 ┃ ┣ 📜style.css       ----------------------------------- css 통합 관리 css 관리
 ┃ ┗ 📜upload.css      ----------------------------------- 게시물 추가 페이지 css 관리
 ┣ 📂images
 ┃ ┗ 📜left-arrow.png  ----------------------------------- 뒤로가기 아이콘 
 ┗ 📂js
   ┣ 📂api
   ┃ ┣ 📜commentApi.js ----------------------------------- 댓글 관련 api 관리
   ┃ ┣ 📜imageApi.js   ----------------------------------- 랜덤 이미지 api 관리
   ┃ ┗ 📜postApi.js    ----------------------------------- 게시물 관련 api 관리
   ┣ 📂handler
   ┃ ┣ 📜detailPostHandler.js  --------------------------- 상세 게시물 페이지 핸들러
   ┃ ┣ 📜editHandler.js        --------------------------- 게시물 수정 페이지 핸들러
   ┃ ┗ 📜uploadHandler.js      --------------------------- 게시물 추가 페이지 핸들러
   ┣ 📂utils
   ┃ ┣ 📜dom.js                --------------------------- dom 관리
   ┃ ┗ 📜url.js                --------------------------- url 관리
   ┣ 📂views
   ┃ ┣ 📜404.js                --------------------------- 404 페이지 렌더링
   ┃ ┣ 📜detailPost.js         --------------------------- 상세 게시물 페이지 렌더링
   ┃ ┣ 📜editPost.js           --------------------------- 게시물 수정 페이지 렌더링
   ┃ ┣ 📜header.js             --------------------------- 네비게이션 바 렌더링
   ┃ ┣ 📜home.js               --------------------------- 메인 페이지 렌더링
   ┃ ┗ 📜uploadPost.js         --------------------------- 게시물 추가 페이지 렌더링
   ┣ 📜index.js                --------------------------- index.js
   ┗ 📜router.js               --------------------------- 각 페이지 라우팅 관리
📜index.html                   --------------------------- html 뼈대 
📜_redirects                   --------------------------- 배포 리다이렉팅 파일
📜server.js                    --------------------------- 로컬 서버 파일