[항해 미니프로젝트 5주차]

<회고록>

이번주는 항해에서 미니 프로젝트를 하는 주였다!!! 나는 나랑 정말 쿵짝이 잘 맞는 팀원들이랑 팀이 되어 정말 기분 좋게 프로젝트를 할 수 있었다. 프론트는 나 혼자라서 조금 힘들기 했지만 백엔드 분들이 나의 상황을 정확하게 이해해주셔서 크게 어려운 점들은 없었다. 그래서 오늘은 내가 프로젝트를 하면서 겪었던 트러블 슈팅들과 이를 어떻게 해결했는지에 대해서 작성해볼려고 한다.

 

 

1. 중첩 라우팅

우리 프로젝트의 특징은 기존의 원페이지를 극한으로 사용하는 것이었다. 즉 이게 무슨 말이냐면 메인 페이지의 템플릿을 그대로 유지하면서 다른 페이지들마다 새로운 컴포넌트를 붙이는 형식으로 진행되는 프로젝트였다. 그래서 나는 이전 페이지에 있던 내용을 기억해서 다른 페이지에도 쓸 수 있도록 만드는 것이 관건 이었다. 나는 이문제를 중첩 라우팅을 통해서 해결했다. 즉 기존의 빼대가 되는 라우팅 예를 들어 루트 페이지가 있다면 이를 중심으로 다른 페이지들마다의 컴포넌트들을 붙이는 형식으로 진행했다. 이를 말로 설명하면 좀 어려우니 직접 코드를 통해 설명하겠다.

Routing 코드

<Route path="/" element={<Home />}>
	<Route path="write" element={<Write />} />
	<Route path="detail" element={<Detail />} />
</Route>

Home page 코드

<Layout>
	<Outlet />
	<ReviewListContainer />
</Layout>

위 코드를 보면 알 수 있듯이 Outlet이라는 것을 사용했는데 이게 뭐냐면 컴포넌트의 children같은 존재이다. 이게 무슨 말이냐면 만약 내가 write 페이지로 가게 된다면 <Write>컴포넌트가 <Outlet>의 자리 잡게 되는 것이다. 이는 결과적으로 <ReviewListContainer>는 어딜 가든 유지 되면서 다른 페이지로 갈때마다 <Outlet>에 추가적으로 <Write>나 <Detail>등이 들어오게 되는 것이다.

 

2. CORS에러

우리는 작업을 하면서 백엔드의 도매인과 내 프론트 도메인이 달랐다. 이는 결과적으로 프론트와 백엔드 사이에 통신에서 브라우저는 안전하지 않는 작업이다라고 판단하고 둘 사이에 연결을 끊어버린다. 이게 바로 CORS에러이다. 이 CORS에러로 인해서 우리는 통신을 할 수 없어서 다음과 같이 조치를 취했다. CORS에러를 확인하기 위해서는 동일 출처 정책을 우회한다는 것을 request header에 담아서 보내야 한다. 그래서 나는 axios instance에 cookie에 해당 값을 추가해주었다. 백엔드에서도 똑같은 작업을 취했고 이로 인해서 CORS에러는 해결할 수 있었다.

3. useInput , usePost => useForm

처음에 코드를 작성할때는 useInput과 usePost로 이렇게 2가지 custom Hooks을 이용해서 로직을 처리했다. 여기서 useInput은 Input과 관련된 커스텀 훅이고 usePost는 input의 내용을 전달했을때 처리하는 로직이다. 이때 문제점은 이 2개를 분리하다 보니 서로 input내용을 주고 받고 서로 input내용을 수정하기 위해서는 context api나 redux가 필요했다. 즉 custom hooks을 쓰는 이유가 작업을 줄이기 위해서인데 오히려 작업의 양이 더 늘어나는 것이었다. 그뿐만 아니라 이 2가지 커스텀 훅이 어떤 역할을 하는 것인지에 대한 것도 알기가 어려웠다. 그래서 나는 이 2가지 커스텀 훅을 하나로 합쳤다. 그렇게 만들어진 친구가 useForm이다. 이렇게 합치니 따로 redux를 쓸 필요도 없어지고 추가적으로 useForm이라는 것을 보고 아 폼과 관련된 부분이구나 라는 것 까지도 확인할 수 있었다.