원티드에서 진행을 하는 프리온보딩 프론트엔드 챌린지 8월 강의를 들으며 배운것과 코드를 구현한것에 관해 정리하고자 합니다.
회차를 통해 배운점 및 느낀점
- 선언적 프로그래밍. How가 아닌 What에 더 집중하여 코드 작성하기
- 지나친 추상화는 오히려 안좋다. 적절한 추상화가 중요
- 시간 날때 오픈 라이브러리 따라 만들어보기
회차를 듣고 난후 리팩토링 과정
1. api 구조 간단화
Before
After
import axios from "axios";
const request = axios.create({
baseURL: "http://localhost:8080",
timeout: 10000,
headers: { "Content-Type": "application/json" },
});
export default request;
사실 위의 코드는 이전에 프로젝트를 할때 사용했던것을 바탕으로 작성을 하였다. 하지만 todo app을 구현하는데 있어 불필요하게 많은 코드들이며, 굳이 저렇게 해야할 이유가 없었다고 생각하여 아래와 같이 축소화 시켰다. token이 넘어올때만 따로 처리를 해주면 될거같다.
그리고 authApi 부분도 원래 AxiosResponse를 받는것으로만 처리하고 api를 호출하는 컴포넌트에서 response를 다시 data 변수로 지정했었는데, 다른 참여자분의 도움으로 authApi 내에서 바로 필요한 데이터만 data 변수로 추출을 하였고 해당 api호출을 하는 컴포넌트로 return을 해줌으로서 불필요한 코드를 줄일 수 있었고, 유지보수에도 효율적이게 되었다.
2. useForm hook 구현
회원가입, 로그인 그리고 todo 작성 페이지에도 form이 연속적으로 필요하므로 중복된 onChange, onSubmit 등의 이벤트 함수들을 작성하는것보다 hook을 구현하여 재사용을 하는것이 리액트의 장점을 살리는 것이라고 생각을 하였다. 각각 다르게 필요한 항목들(initialValues, onSubmit,validate)는 props를 통해 받아오도록 하였고, 받아온 props들을 useForm hook 내부에서 처리를 한뒤 다시 return을 해주는 방식으로 구현을 하였다.
사실 처음에 성능 향상을 위해 input에 들어오는 value들을 onChange가 아닌 useRef를 사용하여 구현을 하였는데, hook을 구현하며 다시 onChange로 구현하였다. hook을 구현할때는 안될거라 생각했는데, 지금 다시 생각 해보니 useRef까지 사용하여 props로 전달해줄수 있을거같다. 디바운스 처리를 혹은 useRef를 사용하여 성능 향상에 도움이 되도록 한번더 리팩토링을 해봐야겠다.
마무리
예전에 팀플로 했던 프로젝트에 비하면 todo는 굉장히 간단한 앱인데도 불구하고 꽤 많은 시간이 걸렸다. 그리고 코드를 짜면서든 생각이 내가 했었던 방법에만 너무 익숙해져 그게 좋은 방법이라고 착각을 했던것 같다. 이 프로그램을 통해 다른 참가자들의 코드를 많이 볼수 있어 좋았고 아직 부족한점이 많다는것을 느끼게 되었다. 그리고 test code를 auth 관련해서만 작성했는데, todo쪽에도 추가적으로 구현을 해보아야겠다. 마지막으로 아쉬운것은 추상화에 대해 조금만 더 일찍 알았더라면... 최근 본 코테를 통과할 수 있지 않았을까..?
