2022.10.01(토)~10.11(화) 11일 동안의 BearMello 플젝 개발 회고 ✍️
🗓 22.10.01-02(토-일)
🔥 TODO
- Nav바에 Logo 추가
- GlobalStyle - 색상 변수명 수정 → 모든 페이지에서 색상 변수명 변경
- 세부 디자인 조금씩 수정
- 이미지 여러장 업로드 기능 구현
- S3에 이미지 업로드 구현
❗️ S3에 이미지 업로드하는 과정에서 발생한 에러 핸들링 과정은 따로 기록하기 ❗️
⚡️ DIARY
s3로 업로드하는것도 쉽지가 않다ㅠㅠ 계속 잘 뭐가 안되고, 되는듯 했지만 또 CORS 지옥에 빠졌다,,😵💫 BE 팀원분께 여쭤봐야겠따,,
🗓 22.10.03(월)
🔥 TODO
- cors error 해결함 → BE에서 다시 재배포해주셔서 해결했다!
- 회원가입 기능 구현
✋ BE에서 S3 클라이언트 배포 주소도 함께 cors 설정을 해줘야 한닷
🗓 22.10.04(화)
🔥 TODO
- 다중 이미지 업로드 → BE에서 file_path를 문자열 받아오는걸로 구현하셨다고 해서 배열로 s3 url 받아왔던거 그냥 문자열로 하나만 받아오도록 변경
- 로그인 기능 구현 ← 액세스 토큰 받아와서 sessionStorage에 저장, sessionStorage에서 토큰 삭제하는걸로 로그아웃 프론트에서 임시적으로 구현
- Redux Toolkit 이용해서 isLogin 변수 전역적으로 관리 구현 (authSlice.js 추가)
🚨Error Handling
1️⃣ s3에 업로드한 사진 삭제하기 → cors 에러남,, → 정책 생성기로 DeleteObject 도 추가해줘야 함.
{
"Version": "2012-10-17",
"Id": "Policy1664856700459",
"Statement": [
{
"Sid": "Stmt1664856696010",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:DeleteObject", // <- here!!
"s3:GetObject"
],
"Resource": "arn:aws:s3:::bear-mello/*"
}
]
}2️⃣ header에 있는 Authorization 권한 접근 가능하도록 백에서 처리하는 법
[참고자료] react - header의 Authorization받기
Postman으로 로그인쪽 통신 테스트를 해봤을 때 Headers 안에 Token이 숨겨져 있었었는데 res.headers로 막상 콘솔을 찍어보면 Token을 찾을 수가 없어서 로그인쪽 구현할 수가 없었다..
그래서 찾아보니까 BE쪽에서config.addExposedHeader("Authorization");코드를 따로 추가를 해주면 된다고 해서 이 사실을 BE쪽에 공유했고, 이 방법대로 수정해주셨는데 정말로 해결이 됐다.🙃
🗓 22.10.05(수)
🔥 TODO
- isAdmin, useId, isLogin Redux Toolkit으로 전역 관리해서 필요한 컴포넌트에서 사용하기
- 로그인 성공 → res.data.role === ‘ADMIN’ → Redux 내의 isAdmin = true → 사이드바가 관리자용이 나오도록 구현
- 캠핑장 등록 및 관리 컴포넌트 구조 변경 & 게시글 내용 유무에 따른 컴포넌트 분기 처리 구현
- userId, role - Redux Toolkit → localStorage에 저장하는걸로 수정
(Redux 새로고침하면 초기화되는 이슈땜에 변경) - Role(Adin, User)에 따른 사이드바 분기처리
⚡️ DIARY
BE쪽에서 로그인 기능을 추후에 구현하시는게 좋을 것 같다고 해서 그렇게 진행하게 되었는데, 로그인쪽 없이 다른거 구현하다가 여기에 로그인 기능을 붙여서 관리자용, 고객용 로그인했을 때를 따로 설정을 해주어야 하는 것에서 코드를 은근 많이 변경해야해서 쉽지 않았다..
🗓 22.10.06-07(목-금)
🔥 TODO
- 캠핑장 글 조회 기능 구현
- 캠핑장 글 등록 기능 구현
- 캠핑장 글 삭제 기능 구현
🗓 22.10.08-09(토-일)
🔥 TODO
- API 문서 정리
- Nav바 아이콘 수정
- 게스트모드 로그인 추가
- Nav Dropdown 수정
🗓 22.10.10(월)
🔥 TODO
- Nav Dropdown 외부 클릭시 닫히도록 수정
- 캠핑장 등록, 수정, 삭제 부분 폴더 구조 및 코드 구조 리팩토링
🐼 MEMO
- Dropdown 외부 영역 클릭시 닫기 참고자료
🔗 리액트 외부 영역 클릭시 닫기
React Hooks CRUD example with Axios and Web API - BezKoder
🗓 22.10.11(화)
🔥 TODO
- 캠핑장 수정 기능 구현
- 캠핑장 등록 버그 수정
- 전체 font 변경
- 자잘한 스타일 수정
🐼 MEMO
- 프로젝트에서 적용한 폰트
🔗 눈누 - '카페24 고운밤' font
