Jerry's Community - FE 🖍

📚 목차

• 프로젝트 소개
• 프로젝트 화면 구성
• 사용한 기술 스택
• 기술적 이슈와 해결 과정

📝 소개

Jerry's Community의 FE 코드를 담은 레포지토리입니다.

화면 구성

로그인
로그인, 회원가입 수행가능한 접속 시 페이지입니다.

회원가입
회원가입을 수행할 수 있는 페이지입니다.

게시물 리스트
커뮤니티의 게시물을 한 눈에 볼 수 있는 페이지입니다.

게시물 상세조회
게시물 리스트에서 클릭한 게시물을 볼 수 있고 해당 게시물의 좋아요를 누를 수 있으며,게시물 수정,삭제 및 댓글 작성,수정,삭제,게시글 조회수를 확인 할 수 있는 페이지입니다.

게시물 수정
게시물 수정을 할 수 있는 페이지입니다. 게시글 사진 변경도 가능합니다.

회원정보 수정
회원정보를 수정할 수 있는 페이지입니다. 회원탈퇴도 가능합니다.

비밀번호 수정
비밀번호를 수정할 수 있는 페이지입니다.

⚙ 기술 스택

Front-end

Infra

Tools

🤔 기술적 이슈와 해결 과정

• CORS 이슈
  • Axios message: 'Network Error'(CORS 오류)
• api 호출 시 중복되는 헤더 작업 간소화하기
  • axios interceptor 적용하기
• axios 요청하기
  • axios delete 요청 시 body에 data 넣는 방법

FE 프로젝트 구조

2-jerry-park-fe
├─ FE
│  ├─ Lottie.html
│  ├─ accountEdit.css
│  ├─ accountEdit.html
│  ├─ accountEdit.js
│  ├─ edit_post.css
│  ├─ edit_post.html
│  ├─ edit_post.js
│  ├─ index.css
│  ├─ index.html
│  ├─ index.js
│  ├─ passwordch.css
│  ├─ passwordch.html
│  ├─ passwordch.js
│  ├─ post_detail.css
│  ├─ post_detail.html
│  ├─ post_detail.js
│  ├─ postlist.css
│  ├─ postlist.html
│  ├─ postlist.js
│  ├─ posts.json
│  ├─ postupload.css
│  ├─ postupload.html
│  ├─ postupload.js
│  ├─ profile_img.webp
│  ├─ signup.css
│  ├─ signup.html
│  ├─ signup.js
│  └─ users.json
├─ README.md
├─ config.js
├─ package-lock.json
├─ package.json
└─ server.js