털고 일어나기
기업 과제 테스트를 받았다.
필수 요구 과제에 대해서 잘했다고 생각했다.
하지만 원하는 결과를 얻지 못했다.
스스로 과제를 잘 마무리했다고 생각해 코드에 대해서 면접에서 어떻게 대답을 할지,
회사의 복지, 연봉, 사옥 어떤 사업을 하는 회사인지 알아보며 입사한냥 과몰입하게 되었다
그래서 결과를 받아 들고 많은 감정 소모가 있었다.
앞으로는 선뜻 마음을 주지 않고 단단히하여
아무 일 없다는 듯 앞으로 정진하겠다.
취업을 하더라도 앞으로 4년은 더 취준생처럼 공부하겠다 다짐했던 것 처럼
그리고 마음을 다잡고 채용담당자분께 피드백을 해주실 수 있겠냐 용기내어 문자를 보냈고
감사히도 피드백을 받을 수 있었다.
내가 어떤 과제를 받아 문제를 어떻게 해결했는지 적으면 다른 응시자들이 볼 수 도 있고, 여러 문제가 발생 할 수 있으니, 나만 알아 볼 수 있도록 적겠다.
피드백 1) 코딩컨벤션과 변수명
코드 부분에서 명확히 알 수 없는 변수명들이 있었습니다.
코딩 컨벤션과 변수명을 조금 더 고민해보시면 좋을 것 같습니다
usePagination.tsx
numPages => lastPage || totalPage페이지네이션에서 마지막 번호의 변수 명을 페이지의 총 갯수라는 의미의 numPages라고 했는데
lastPage, 혹은 totalPage 이런식으로 하는 편이 좋았을 것 같다.
Sass 코딩 컨벤션
사실 이번 기업 과제를 하면서 Sass를 처음으로 사용해보았다.
camel케이스 말고 snake 케이스를 사용해야 한다는 것을 알고 있었다.
참고
그런데 이상하게 snake 케이스를 할 경우 class가 적용되지 않았다.
여러번 시도했는데도 적용되지 않았다.
포스트모템 문서가 쓸모 없는 사죄, 변명, 지적으로 채워지지 않도록 각별히 주의하세요.
그런데 왜 지금 다시 해보니까 잘 적용되는 걸까.
피드백 2) 필터링 로직
데이터를 조건에 따라 필터링 하는 로직을 조금 더 고민해보셨으면
정확한 검색 데이터가 나왔을 것 같습니다
피드백 2-1) switch문을 썼어야 했을까?
// 수정 전 RouterInfo.tsx
if(filter==='all'){
selectedFilterName='전체'
}else if(filter==='title'){
selectedFilterName = '상품명'
}else if(filter==='brand'){
selectedFilterName = '브랜드'
}else if(filter==='description'){
selectedFilterName='상품내용'
}// 수정 후 RouterInfo.tsx
switch(filter){
case undefined :
selectedFilterName="전체"
break;
case "title" :
selectedFilterName = "상품명"
break
case "brand" :
selectedFilterName = "브랜드"
break
case "description" :
selectedFilterName="상품내용"
break
default :
selectedFilterName = "전체"
}피드백 2-2) 필터링 로직
-
localStorage와 redux-persist를 사용하면 안된다.
-
새로고침 하더라도 검색 조건(필터, 페이지당 데이터 수, 검색어)과 키워드가 유지되어야 한다.
next.js에서 url에 검색조건과 키워드를 담아두면 되겠다.
-
pagination에서 다른 페이지로 이동할 경우도 url의 정보에 따라 이동하게 된다.
브랜드, 10개, samsung 상태에서 2페이지를 누르면 다음 10개가 나온다.
-
그런데 브랜드, 페이지당 데이터수를 변경한 상태에서 2페이지를 누를 경우, UI의 상태는 수정되었지만 url은 변경되지 않게 되어서
렌더링되는 화면은 전체, 50개, samsung 키워드 2번 페이지 일지라도
실제 데이터는 브랜드, 10개, samsung 키워드2번 페이지를 보여준다. -
그래서 Redux Toolkit을 사용해서 클라이언트의 상태와 url의 상태를 매칭하게 했다.
-
useEffect를 통해 렌더링되는 시점의 url을 client state에 반영하게한다.
그리고 드롭다운은 client의 state를 변경시키고, 페이지네이션 및 조회하기 버튼을 눌렀을 때는
client state를 기반으로 주소를 변경시킨다.
그리고 다시 주소를 기반으로 client state를 설정하게 했다.
수정 전
나는 새로고침을 하더라도 검색 조건과 키워드가 유지되는 것에 초점을 두었다.
router.push(`/filter=${filter}&q=${q}&page=${page+1}&limit=${limit}`)/filter=all&q=default&page=1&limit=1
그래서 위와 같은 url을 기본 값으로 가지도록 로직을 짰다.
수정 전 코드의 문제점
1. 기본 키워드를 default로 갖는 바람에 만약 default라는 브랜드, 상품내용을 검색하고 싶을 경우 검색할 수 없다.
2.filter, q를 설정 하지 않더라도 url에 기본 값이 남게 된다.
저렇게 로직을 짰던 가장 큰 이유는
Next.js에서 dehydrate(queryClient)의 값 중에서 undefined인 값이 있어서 발생하는 에러다.참고
context.query.filter
context.query.q
가 없어서 undefined이더라도 쿼리키 값으로 넣으려고 했는데 undefined는 받아주지 않는다.
그래서
context.query.filter가 undefined일 경우'all'
context.query.q가 undefined일 경우'default'값을 쿼리키로 주려고 했다.
문제 해결
쿼리키에 null을 넣는다면 hydration serializing error가 발생하지 않는다.
그래서 나는 null값을 넣는 방식으로 문제를 해결하려고 했다.
근데 진짜 자바스크립트한테 엄청 열받는게 😡😡😡
함수에 인수로 null을 넣으면 함수의 인자에서는 undefined가 된다.
그런데 진짜 열받는건 button태그의 value로 undefined를 할당하면
e.target.value에서는 ""의 값을 갖는다.
""는 string 이다. undefined을 기대하고 조건문에 넣었더니 undefined가 ""가 되서 true값을 갖게 되더라.
그래서 결국은
1. filter가 undefined이면서 q가 undefined일 때,
2. filter가 undefined이면서, q 검색어가 있을 때,
3. filter가 undefined가 아니면서, q가 undefined일 때,
4. filter가 undefined가 아니면서, q 검색어가 있을 때
분기를 모조리 따주고
e.target.value==="" 일 때도 undefined가 할당 되도록 분기를 따줬다.
내가 타입스크립트를 덜 공부해서 그런거리라,
타입스크립트를 공부하다보면 이런 이슈들을 해결 할 방법이 분명 있을거라 기대한다.
마치며
내가 꼼꼼하지 못했다.
과제를 제출하고 하필 React query 라이브러리에 대해서 면접 질문을 정리하다가
React.Suspense를 통해 isLoading 상태일 때 fallback 할 수 있다는 사실을 알았다.
그리고 Next.js에서는 커스텀 서스펜스가 필요했다. 첫 화면에서도 isLoading이 있으니 첫 화면만 잘 렌더링되면 되는 줄 알았는데, 검색할 경우 문제가 발생했다.
그리고 위의 문제들을 뒤늦게야 해결한 내가 꼼꼼하지 못했던 건지
그만큼 간절하지 못했던 건지
문제를 잘 풀었다 생각해서인지 아쉬움이 많이 남았다.
실패를 두려워하지 않고 배우고 기록하여 내일의 밑거름 삼아 다음 단계로 성장하겠습니다.
내 이력서의 첫 문장이다. 처음부터 가졌던 생각은 아니고 그냥 끼워맞추기 식으로 적은 문장이었다.
실패를 맛보고 가만히 있자니 오늘은 어째서 양심에 찔리는 걸까.
실패한 와중에도 집요하게 채용담당자님에게 피드백을 구하고,
남은 문제들을 덮고 넘어가지 않고 다시 들추어 문제를 해결하고 이렇게 기록으로 남기니
실컷 울고난 것 처럼 마음이 개운해졌다.
이제 감기도, 다래끼도 다 나았으니 다시 씩씩하게 공부하겠다.
