- 개발자들의 커뮤니티 Sokdak 💬
- 커리어와 라이프스타일에 대해 자유롭게 이야기 할 수 있어요 🙋🏻
- 설명 : Wanted 커뮤니티 클론 코딩
- 기간 : 2022.12.23 ~ 2022.12.29
- 팀원 :
- | NAME | GITHUB |
---|---|---|
BE | 김인광 | https://github.com/ingwang-kim |
BE | 김규리 | https://github.com/kyuung09 |
BE | 신승호 | https://github.com/hongdangmoo49 |
FE | 장신원 | https://github.com/synuns |
FE | 최수빈 | https://github.com/123456soobin-choi |
🏁 최초 설계 내역
📍 회원가입/로그인
(1) 일반 이메일 회원가입 / 로그인
- 아이디 중복 확인
- 아이디 / 패스워드 정규식 확인
- 랜덤 난수 닉네임 생성
(2) OAuth2(카카오) 회원가입 / 로그인
- 회원가입 Type 식별 👉 일반 로그인 불가
(* 일반회원이 카카오로 로그인 시도시 일치하는 ID가 있을 경우 SignUpType 변경 0 → 1)
- 랜덤 난수 닉네임 생성
(3) 로그인/ 로그아웃 인증
- JWT Token
📍 커뮤니티
(1) 커뮤니티 내용 등록
- Category 선택 [ 커리어고민, 취업/이직, 회사생활 , … , UI/UX]
- 사진 업로드 (AWS S3)
- 제목 / 내용
- 글 작성시 닉네임으로 출력되도록
(2) 커뮤니티 내용 조회
- 전체 조회
- 카테고리별 조회
- 선택 조회
(3) 커뮤니티 내용 수정
- 수정시 사진 삭제
(4) 커뮤니티 내용 삭제
- 게시물 삭제시 연관 내용 전체 삭제
(5) 커뮤니티 글 좋아요 기능
(6) 커뮤니티 댓글 등록/삭제
📍 마이페이지
(1) 내 정보 조회
- 프로필 사진 업로드
- 직무, 경력 정보 등록 & 수정
✊🏻 추가 스코프 내역
📍 BE
- http → https 프로토콜 변경
- 페이징(Slice)
- Swagger
- Access Log Logging 처리
- 마이페이지 닉네임 수정 기능
📍 FE
- 마이페이지
- Infinity Scroll
- 디테일 페이지 비로그인 방식 변경
- swagger : https://devsokdak.shop/swagger-ui.html
트러블 슈팅 | |
---|---|
[Frontend] | 게시글 수정하기를 할 때 원래 게시글의 데이터를 가지고 가면서 작성하기 페이지를 재사용하도록 기획하였는데, 수정할 때 작성하기와는 다르게 이미지 데이터가 이미지 url값을 가지고 있어서 어떻게 formData 형태로 다시 가공해야하는지 매우 어려웠음. (미해결) : 유저 정보를 redux를 이용해서 store에 저장하고 관리하면서 비로그인과 로그인 상태를 구별하여 다른 화면을 보여줄 수 있도록 하고 있는데, 유저정보가 제대로 리프레쉬되지 않는 트러블이 발생함. |
[Frontend] | image를 form data로 보낼 때 file 자체로 보내야 하는지 string 형식으로 보내야 하는지 어려웠는데 각각 request 형식에 맞게 보내는 방법을 알 수 있었음 : 상세 페이지 컴포넌트 구조가 복잡해서 props drilling이 생겼었다. 자식 컴포넌트에게 props 를 주고 상태값을 변경하는 방법으로 해결했지만 유지보수가 매우 힘들어 시간이 오래 걸렸음. : 초반에는 파일들을 한 번에 커밋하거나 커밋메시지를 잘 적는데 어려움이 있었으나 깃 플로우에 따라 협업하는 방법을 배웠음. |
[backend] | 기존의 코드(게시물)에 @builder 패턴을 적용시키려 개념학습 후, 기존 코드 리펙터링을 했다. 그러나 초기 설계의 차이와 시간 부족으로 결국 실패했다. 그러나 시간이 충분했다면 해낼 수 있었을 것 같다. |
[backend] | 게시글 전체 조회, 카테고리별 조회 등 데이터를 조회 할 때 모든 데이터를 한번에 가져오지 않고 나누어 가져와야됨 > 페이징 처리> 페이지를 동적으로 변경하는 방법을 찾아봄 (1) PathVariable이나 RequestParam으로 값을 동적으로 받은 뒤 처리를 해봄 > 실패 (2) Pageable 자체에서 지원하는 Param으로 프론트에서 적용할 수 있음 > 성공 |
[backend] | AWS EC2 서버에 도메인 연결 및 SSL 인증서 적용 시 도메인 매핑 오류 - 적용 후 도메인으로 접속이 안되는 문제가 발생 - 보안그룹이 기본값으로 되어있어서 ALB에 적용시켰을때 모두 차단되어서 문제가 발생 - 80/443 포트만 허용 후 성공 ! : Oauth2 연동 프론트 연결 후 접속 오류 - Redirect Uri를 프론트 테스트 URI로 변경하고, CORS 설정 변경 후 성공 ! |
https://www.notion.so/synuns/Sokdak-c016b8cb325d4460a0f1a92807082d59
- Forntend : https://github.com/Dev-sokdak/FE-sokdak
- Backend : https://github.com/Dev-sokdak/BE-sokdak