컴포넌트 분리에 시간을 너무 많이 써서 기능 구현이 늦어졌다. (...) 오늘 안에 구현해야지~ 라고 생각은 했었는데 코치님들께서 제일 빠르게 구현되어야 할 부분이 이 부분이라고 한 걸 듣고 부담이 많아졌다.
아무튼 어떻게든 구현을 해냈고, 일단 기능 구현 후에 중복되는 코드를 분리하는 식으로 갈 것 같다.
그리고 이 글에선 페이지를 만들면서 겪었던 문제들에 대해 적어보려고 한다.
1. axios timeout 설정
const api = axios.create({
baseURL: import.meta.env.VITE_BACKEND_URL,
timeout: 5000,
withCredentials: true,
});
처음 axios 인스턴스를 생성할 때 timeout을 1000(1초)로 하였다. 그러나 이메일 인증번호 전송을 구현할 때,
timeout 초과 오류를 interceptor가 잡아 출력해주었는데 서버에는 요청이 제대로 전송되었고 인증번호 또한 메일로 잘 도착한 것을 확인할 수 있었다.
이유는 잘 모르겠지만... timeout을 5000으로 늘려줬더니 오류가 나지 않았다.
근데 사실 내가 요청하는 방식이 뭔가 잘못 되어서 요청 시간이 느려진 거라면...
이라는 생각이 자꾸 든다. 문제는 뭘 모르는지 모르는 상태여서 해결 방법을 찾는 방법 또한 모르겠다... 😖
2. 자동완성 시 input의 배경 색이 고정되는 문제
이메일을 입력하고, 인증번호 전송 버튼을 클릭하면 이메일을 수정하지 못 하도록 input 창을 disabled 상태로 만들고, disabled 상태일 때 스타일이 변경되도록 하려고했다.
그러나 자동완성으로 이메일을 입력하고, 인증번호 전송 버튼을 눌렀을 때 제대로 배경 색이 변경되지 않았다.
!important 속성을 주었음에도 불구하고, 자동완성으로 입력을 했을 때만 배경 색이 변하지 않았다.
그런데 찾아보니 크롬에서 자동완성으로 입력 시 배경색이 변경된다는 말이 있었고,
transition과 box-shadow 속성으로 변경할 수 있다는 것을 봤다.
그래서 Input 컴포넌트에 해당 스타일을 적용해주었고 (참고로 tailwind css를 사용하고 있다.)
className={`autofill:active:transition-shadow disabled:shadow-disabled disabled:opacity-50 disabled:!text-black disabled:border disabled:!border-black disabled:placeholder:text-black`}
자동완성으로 입력 시에도 배경 색이 변하지 않게 되었다.
3. React Query를 사용해야 할까
내가 서버에 요청을 전송하고 응답을 받는 경우는 인증 번호를 요청할 때, 닉네임의 중복 여부를 확인할 때, 회원 데이터를 전송해 회원가입을 하는 경우이고, 서버에서 받은 데이터를 이용해서 화면에 띄우거나, 데이터를 캐싱할 필요가 있는 요청이 아니었기 때문에 axios만 써도 괜찮다고 생각했다. (물론 이 경우에 react query를 쓴다고 해서 안 좋은 점이 있는 건 아니라고 생각한다.)
그치만 아직 확신은 못하겠다. 팀원 분께서 모든 경우에 react query를 쓰는게 통일이 되고 좋을 것 같다는 얘기를 하셨고, 그것도 맞는 말이라고 생각했기 때문이다.
아직 훅 분리에 대해서도 모르겠는 점이 많다. 저번 프로젝트에서 백엔드를 작업했을 때는 서비스/컨트롤러/라우터 파일로 나누는 기준이 명확했는데 아직 리액트를 만진지 별로 안 되어서 그런가 파일 분리를... 어떻게 해야할 지 정말 모르겠다.
#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript
