dpwl032/thunk-fanletter-project

팬레터 프로젝트

스파르타 리덕스 심화주차 개인과제

주제

인증 서비스가 들어간 그룹 아티스트 팬레터함

개발기간

개발 기간 : 2024.02.19 ~ 2.21
보완 기간 : 2024.02.21~ 진행 중

필수 구현 사항

• 팬레터 CRUD 를 위한 API 통신은 json-server 를 이용해 주세요 (firebase firestore 사용X)
• 인증과 프로필관리를 위한 API 통신은 제공된 jwt 인증서버를 이용해 주세요 (firebase authentication 사용 X)
• fetch API 대신 axios 를 이용해 주세요
• 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가 되도록 설정 (스타일링 방식은 자유지만 일관성 있게 작업할 것)
• Redux 사용 시 반드시 Redux Toolkit 을 이용해 주세요

페이지 구성

• login & join
• Main
• my Page (내 프로필)
• Detail (팬레터 상세페이지)

진행하면서 발생한 오류

• 새로고침 시 데이터 날라감
• 실시간 렌더링 오류
• JWT 인증 서버 , 회원 정보 확인 오류 발생

프로젝트 보완 사항

• 모든 api요청 전에 accessToken 유효여부 확인
• 프로필 api 설정
• box-sizing : border-box 설정 및 css 수정
• 의미없는 swtich문 변경수정
• redux 쿼리를 사용한 리팩토링 (현재 진행중)
• 선택 요구 사항

thunk-fanletter-project's Issues

[리액트 심화주차] 개인과제 코드리뷰 - 최원장 튜터

환경변수를 통한 민감정보 처리

백엔드 통신 관련 url 등은 꼭 보안상 이유로 감춰져야 해요. 우리가 현재 사용하는 API url에 json-server 통신을 위한 url + 인증서버 url이니까 이 부분은 환경변수로 관리해주는 것이 좋겠어요!

불필요한 백엔드 중복 호출

현재 로직상으로는 post 요청을 한 후, 갱신된 내용을 반영코자 get 요청을 또 하고 있는데요, 이렇게 하게되면 백엔드에 한 번의 요청마다 2번을 call 하게 되죠. 이렇게 하기 보다는 extraReducers에서 직접 갱신된 state를 처리해주는 방법이 좀 더 적합해 보입니다! 그렇게 되면 한 번만 호출하면 되기 때문이에요.

client state / server state 분리 굳

서버 통신이 필요한 로직은 extraReducers로, 필요하지 않은 로직은 reducers로 분리한 부분이 좋았어요.

비동기 로직 처리 굳

try ~ catch를 통해서 실패할 수 있는 비동기 처리에 대한 로직을 잘 써주셨어요. async ~ await 코드도 이제는 쉽게 사용하실 수 있죠? 시간이 되신다면 then ~ catch 블록으로도 처리하는 연습 해봐도 좋을 듯 싶어요!!

일관된 alert 처리

어떤 부분은 alert 코드로, 어떤 부분은 toast로 되어있다보니 일관성이 없는 것 같아요. toast의 여러 옵션을 통해서 성공시 / 실패시 나누어 제공하면 훨씬 더 좋은 UI가 될 수 있을 것 같습니다.

사용하지 않는 변수

navigator, dispatch, auth는 현재 컴포넌트에서 사용되고 있지 않지만 선언되고 있습니다. 변수할당을 한다는 것 자체가 메모리에 어떤 공간을 사용한다는 것을 의미하기 때문에 최대한 간결하게 유지해주시는 것이 좋을 것 같아요.

AuthLayout의 로직

이와같이 작성됐는데, 맞을까요? 로그인이 필요한 페이지에 대해서 로그인이 안되어있다면 redirect를 해야할 것 같네요 ==> 다시 보니, 각 페이지 컴포넌트별로 각각 처리해주신 것 같네요.

비슷한 컴포넌트

ButtonWrap 안에 비슷한 코드가 두개 들어가니, 공통화 시키는 것도 좋겠어요. 코드가 길어지다 보니 가독성이 좋지 않게 보이기도 하네요 ㅠㅠ

색상코드 하드코딩

우리 프로젝트에서 사용하는 색상코드는 정해져있기 때문에 6자리의 색상코드를 넣기 보다는 공통화 시켜서 관리하면 좋겠어요. colors.js를 만들어서 export default const COLORS = { blue: "#6ab8c8", green: "#2adc9e" } 이런 식으로 쓰게 되면 어디에서든 공통으로 사용할 수 있겠죠.

하드코딩2

이런 부분도 작게 느껴지겠지만, 1024의 값을 꼭 1024로 적을 필요는 없어요. constant value로 관리하면 좋을 것 같아요.

전체적으로 기능에 충실한 좋은 코드로 작성해주셨습니다! 수고하셨어요 :)