오늘 회원가입 페이지를 만들었는데 어제 진행했던 테스트 코드들을 바탕으로 새로운 테스트 코드를 짜서 실행했더니 무사히 그린라이트가 들어왔다.. 생각했지만
내 착각이였다
await를 통한 waitfor 함수로 그저 통과 됐다 생각했을 뿐 정확한 원리를 모른상태였다
따라서 Jest를 활용한 TDD 투두리스트 만들기는 잠깐 멈추고 jest에 대해 더 확실하게 공부하기로 했다
현재 todolist 만드는 과제 시간 관계상 jest를 따로 공부를 하고 만들긴 어렵다고 판단하고 TDD가 아닌 클린코드에 더 집중해 보기로 했다
처음 시작 전 설계 때 디렉토리 구조를 생각했고
- src
- components
- auth(회원가입,로그인 페이지에서 사용되는 컴포넌트)
- ui(공용버튼, input등 ui 컴포넌트)
- todo(todo페이지에서 사용되는 컴포넌트)
- pages(라우팅 되는 각 페이지 상위 컴포넌트 즉, 페이지 컴포넌트)
- styles
- auth(회원가입, 로그인에 필요한 css)
- pages(페이지 컴포넌트에 필요한 css)
- ui(ui에 컴포넌트에 사용되는 css)
- todo(todo컴포넌트에서 사용되는 css)<페이지 스타일에서 처리할지 고민>
- components
- types (공통으로 쓰이는 타입들)
- util (api,debounce,storage,유효성 검사등 util함수)
이전에 프로젝트를 진행할 때는 이런 기초적인 것도 잡지않고 들어갔던 경향이 있어서인지 미리 디렉토리 구조와 필요한 파일 함수들을 정리하고 들어가니 좀 더 좋았다
추가적으로 작업을 하면서 typescript를 한번 싹 정리하고 가니 저번보다 더 확실한 타입 지정을 할 수 있었다
export const debounceFunction = <T>(
callback: (...args: T[]) => void,
delay: number
) => {
let timer: NodeJS.Timeout;
return (...args: T[]) => {
// 실행한 함수(setTimeout())를 취소
clearTimeout(timer);
// delay가 지나면 callback 함수를 실행
timer = setTimeout(() => callback(...args), delay);
};
};
debounce를 설계한 함수인데 <T>제네릭 타입을 이용해 들어오는 타입을 자유롭게 받을 수 있었다.
또 axios를 사용하며 error처리를 할 때 항상 타입이 unknown인 것 때문에 타입 처리가 까다로웠다. 특니 as를 통한 타입단언으로 처리하기도 했는데 공식문서와 구글링을 해보니 생각보다 더 좋은 방법이 있었다
export const signupUser = async (userData: authType) => {
try {
const response = await axios.post(
`${process.env.REACT_APP_API_URL}auth/signup`,
userData
);
return response;
} catch (error) {
if (isAxiosError(error)) {
return error.response
}
}
};회원가입 기능으로 .env를 통해 서버 url은 보이지 않도록 보호 했고 회원가입 userData를 받아서 회원가입 요청을 한다
이때 error처리를 진행하면서 isAxiosError를 알게되었고 if를 통해 조건문으로 사용하면
통과시 error 객체는 AxiosError로 타입이 추론된다.
따라서 error처리가 가능하게 된다!
이전까지 뭔가 만들어지는데로 만드는 경향이 꽤 있었는데 하나하나 신경쓰고 공통된 부분은 switch..case문을 사용해 꺼내서 하나의 함수로 만든다는 등의 쇼팅 기법들을 사용하며 리팩토링과 함께 진행하니 확실히 저번 코드보다 나아지는 것을 느끼는 중이다
