OneTwoDay(원투데이) 트러블 슈팅 겸 회고

✔️ [FE] 끝없는 CORS 에러

이거 좀 풀어주실래요?

처음으로 벡엔드와의 협업에서 겪은 에러, CORS 정책 문제로 올바른 API에 정확한 양식으로 데이터를 요청하고 전송했지만 계속해서 문제가 발생하였다. 벡엔드에서도 처음 겪은 이슈로, 이것을 해결하기 전까지 진정한 협업이 불가능했다.

하던거 할게요.

벡엔드에서 처음 겪는 이슈를 프론트엔드에서 해결해줄 수도 없는 노릇, 일단 페이지 구조를 짜거나, 로컬 데이터를 활용하여 이슈가 없는지 등을 확인하며 우선순위가 급한 작업들을 임시방편으로 진행하였다.

회고

엄밀히 말해 벡엔드 측의 휴먼에러이자 트러블 슈팅이지만 여기에 따로 적은 이유는, 이것이 내가 협업에서 처음으로 겪은 문제였다는 것이다. 이 문제를 겪으면서 내가 빠르게 깨달은 것은. 내 작업 순서가 꼬이거나 정체되는 것이 내 실력이나 의사와는 상관없이 발생할 수도 있다는 것이었다. 이러한 깨달음은 실전프로젝트 Navis에서 진가를 발휘하였다.

---

 

✔️ [FE] CSS 공포증

제대로 할 수 있을까

커리큘럼 초기, 24시간 마라톤 프로젝트에서 Html, Div를 전혀 다루지 못해 팀원한테 유의미한 도움이 되지 못한 경험은 CSS를 다루는데 있어 나한테 (부정적으로) 큰 인상을 남겼던 것이 틀림없었다. 급격히 떨어지는 자신감과 CSS 작업 기피 행동이 1주일짜리 프로젝트의 귀중한 초기를 망설이게 만들었다.

한 번 해보자. 해보면 낫겠지

마음을 빠르게 가다듬을 필요가 있었다. 우선 팀원한테 CSS를 잠깐 부탁하고, 로직 구현을 하고 필수적인 CSS 요소만 얼추 잡으면서 이것을 그렇게 무서워할 필요가 없다고 스스로를 고무시키는 과정을 거쳤다. 효과가 있었으며, 1주일이 지나자 CSS는 피할만한 것이 아니라고 자신감을 되찾을 수 있었다.

회고

상당히 민망하지만, 첫 협업(24시간 마라톤 프로젝트)에서 아무것도 못하고 모니터만 5, 6시간 노려보고, 기껐 만들어낸 것이 중앙정렬도 안된 div 몇 개였다는 것은 내게 엄청난 충격을 가져다 주었다. 유니티 엔진으로 만들면 10분이면 만들 프레임에서 이렇게 시간을 쓰는데, 내가 과연 이겨낼 수 있을까? 하는 걱정이 뿌리깊게 박혔던 것이다. 하지만 내가 누군가. 한 번 해보는 사람 아니던가. 망설임을 누르고 다시 한 번 해보니 생각보다 할 만 했었고, 나는 빠르게 극복할 수 있었다.

---

 

✔️ [FE] 리액트 쿼리 이슈

한 페이지 복수 쿼리가 안돼?

팀원이 겪은 이슈로, 한 페이지에서 복수의 쿼리를 동시에 다루지를 못해 올바른 데이터를 받아오지 못하고 있었다. 메인 페이지에서 여행 예산 별로 Radio값을 다르게 해서 API에 값을 요청해야하는데, 전체보기와 특정 예산 범주만 보는 API가 달라 어떤 것을 렌더링 시킬지 로직이 꼬였다.

해결 실패

처음에는 페이지네이션을 피하지 위해 추가한 로직이었지만, 복수의 쿼리를 동시에 다루는 것은 초심자에겐 너무 난이도가 높았다. 댓글과 게시글 내용같이 완전히 다른 경우에는 문제가 적었지만 이 경우에는 화면에 렌더링되는 한 컴포넌트를 두고 2가지 쿼리가 서로 꼬인 형태여서, 1주일 밖에 안되는 짧은 시간에 부족한 지식으로는 해결할 수 없었다.

회고

시간이 지나서 다시 보니, API 명세 자체를 잘못했지 싶다. 전체보기, 예산 별 보기로 받아오는 값을 다르게 하는 하나의 API를 사용하면 가능하지 않았을까 싶다. 아니지. 다시 생각해보니 페이지네이션을 피하기 위해 서버에서 무작위 n개의 게시글 데이터를 보내줬었다. 그래서 전체보기랑 개별보기가 다른 API로 구성되었던 것 같다.

그렇다면 useState 하나를 선언해서 전체보기인지 아닌지 체크하는 bool값을 만들고, 이것을 따져서 어떤 쿼리를 렌더링 시킬지 결정하는 방식을 사용하는 것이 맞았지 싶다. Radio값이 변경될 때 마다 onChange에서 refetch를 시키면 데이터도 따박따박 받아왔지 싶다.

생각하면 할수록 아쉬움이 많다. 이때 같이 작업했던 벡엔드 동료들하고 연락해서 코드를 다시 한 번 고쳐볼까?