영프로 개발

1달 기간의 한 기업의 웹페이지 리뉴얼 하는 파이널 프로젝트중 회원가입 에서 추후에 리팩토링 하면 좋을것? 작성해보겠습니다. 일단 react-hook-form 을 처음 사용해보았습니다. 처음 접한걸 바로 학습하고 사용하다보니 공식문서를 통하여 학습 및 적용을 하였는데 공식문서가 친절하게 잘 안내해주어 사용하는데에 크게 문제가 없었던것 같습니다. onChange를 사용하게되면 매번 바뀔때마다 렌더링이 되어 불필요하다고 생각이 들었습니다. 나중에 리펙토링할때는 굳이 렌더링되게끔 하지말고 Submit 버튼을 눌렀을때 하이픈(-) 에 따라 값을 바꾸어서 서버에 보내준다면 불필요한 렌더링 없이 사용할 수 있지않을까? 생각이 듭니다. 처음 회원가입부터 작업하다보니 여기서는 AsyncThunk를 적용하지 못했었습니다..

2022.10.31 - [분류 전체보기] - 파이널 프로젝트 후기 -1- 내가 프로젝트를 하면서 생겼던 의문 Q. API Post나 Get 요청들을 보통 Store의 액션에 지정해놓고 쓰나요? 아니면 컴포넌트에 바로 Axios를 이용해서 쓰나요?? A. 컴포넌트에서는 해당 Action을 호출하기만 해야하고 직접 API를 호출할 필요가 없다! AsyncThunk 를 이용하여 axios 를 이용하여 비동기적으로 API를 호출할 수 있다. 저는 왜 이런 고민을 하고 질문을 했냐면 백엔드분이랑 카카오 로그인을 진행하기로했었는데 카카오 로그인 같은경우는 카카오로그인을 누르면 카카오서버를 통하여 로그인을 한 후 "인가 코드" 를 받아 이 인가코드를 이용하여 유저정보를 받을수있는 "카카오토큰" 을 받아야합니다. 이후..

1달 기간의 한 기업의 웹페이지 리뉴얼 하는 파이널 프로젝트가 끝이났다. 나는 로그인, 회원가입, 커뮤니티(CRUD) , 댓글(CRUD) 초기의 메인 Carousel 을 맡아서 진행하였다. 위의 기능들은 다 내가 처음 구현을 해보는 것 들이라 상당히 많은 삽질을 하였다 ㅜㅜ.. 프로젝트를 하면서 팀원들을 많이 가르쳐 보기도하고 도움을 많이 줘보기도 하고 작은 감정상함? 디자이너, 백엔드 와의 소통을 해보는 귀한 경험을 했다. 이러한 과정속 어떻게 소통했는지? 어떻게 해결해나갔는지, 어떤 고민을 하였는지 앞으로 리펙토링의 방향 에 대해 나눠서 서술을 해보려고 합니다. 아래 사진들은 제가 구현한 홈페이지의 사진들 입니다.

프로젝트 진행도중 회원가입에 성별을 선택하는 필드가 있었다 나는 react-hook-form 을 사용하고 있었고 바로 radio 속성을 이용해서 버튼을 custom 해서 쓰면 될거라고 생각하고 CSS스타일을 바꿔보고 시도해 보았으나 내가 원하는대로 잘 안되었는데 번뜩 머리를 스쳐가는 Button에 onClick 이벤트에 SetValue('gender' , 'male or female') 이런식으로 하면 될거 같은데? 라는 생각으로 바로 수정을 해보았다. 위와 같이 잘 작동하는 모습 위와 같이 해결하였습니다.