이번에 처음으로 알고리즘이 아닌 구현과제를 통해서 테스트를 봤는데
어떻게 준비를 해야될지 몰라서 준비를 많이 못했던게 걱정이 가장 많이 되었다.
React과제로서 JS 또는 TS를 사용해서 구현이라고만 명시되어있어서
특정 페이지 또는 세팅이 다 되어있는 코드들을 수정또는 구현해서 하는거라 짐작은 했지만 설마ㅏ.. 세팅부터하는건지는 몰랐다.
1차 멘탈 와르르
우선 입장 시간이 11시반부터 12시까지로 명시되어있었고 지각하면 못들어간다고 명시가되어있어서 미리 준비하고 기달리고있었지만 12시가 넘어가면서 걱정이되어서 여러번 제접속을 하였지만 계속 호스트대기중이라고 하여 멘탈이 털리기 시작했다,다행이 거의 12시 10분에 들어갈수있었고 큰 문제가 되지는 않았지만 미리 통보 또는 알림같이 알려주는게 필요하다고 생각한다.
2차 멘탈 와르르
과제질문과 repo를 클론 받고 파일들을 탐색하면서 생각지도 못한 문제가 생겼었다. package.json에 script를 직접 작성하고, 또한 react, react-dom 또는 추가적인 빌드할때 필요한 번들러경우에만 사용이 가능해서 처음에는 기존에 루트 폴더에 추가해서 구현하였지만 계속해서 run dev 실행이 되지않았고. 과제에서는 루트에서 실해하되 특정폴더에 추가해야된다고 되어있어 그것또한 해결되지않았다.
1차 시도
기존에 있는 루트폴더내에서 라이브러리 설치후 template없이 개별로 파일을 만들어서 연결, 따라서 script 자체에 특정 폴더에있는걸 실행하도록 작성,하지만 실패...
2차 시도
특정 폴더에 직접 create template 해주어서 해당 폴더에서 실행 시킬때는 문제없이 사용, 하지만 루트 폴더에서 커맨드 실행시 에러...
3차 시도
2차 시도에서 했던 내용에서 vite를 사용해서 vite.config에 해당 폴더로 세팅 루트에서는 script만 따로 설정해서 실행시킬때 해당 폴더에서 실행 성공!!
시간을 확인하니 3차 까지오면서 4시간에서 1시간을 날렸다 ..
3차 멘탈 와르르
설정이 다되었고 드디어 실제 과제를 확인할수있게 되었다.
html과 css는 거의다 만들어진 상황에서, JS만 추가적으로 구현이고 추가적인 요구사항에 맞추어야했다.
과제 1.
특정 아이템 클릭시(필터링) url에 query parameter를 특정규칙으로 만들어서 url로 이동하되 history가 남지 않게 replaceState 사용 초기화될시 query 전체 초기화.
과제 2.
백엔드 로컬로 실행시켜서 api 호출하여 카드 형식으로 product 보여주기 하지만 과제 1에서 선택했던 필터 아이템로 product 필터 또는 정렬.
개인적으로 특별히 어렵다고 생각이 되지는 않았다. 기능 자체는 그동안 해왔던 기술들을 사용해서 구현 가능했고 gpt또한 사용가능하여 부족한부분을 물어보면서 해결해 나아갔다.
하지만 문제는 시간....
어렵지는 않은 기능이지만 해당 html과 css를 분석하는데에도 시간이 오래걸렸고, 기능을 만들면서 프로젝트 세팅을 제대로했는지에 대한 의문때문에 계속 마음에 걸렸었다. 또한 url에 query params를 넣는데 나는 거의 button또는 input으로 처리할려고 하였지만, 제공된 html 태그는 anchor로 href를 사용해서 query params가 추가된 url로 이동시키는 건가하는 의문이 들었다.
마지막 멘탈 와르르
어느정도 기능 완성이 되면서 조금더 구현하면 그래도 절반아상은 구현했다고 생각이 들었다, 하지만 남은 시간은 10분....
여기서나는 추가적으로 구현하는것이 아닌 테스트를 돌려보기로 했다.
1) 루트에서 실해이 되어야 하고 빌드시 특정폴더에 dist가 생성되어야한다,또한 실행이 정사 작동을 해야한다..
따로 만들어져있는 test 가있었지만 그것보단 dist파일이 제대로 만들어지는것이 먼저였다.
10분간 엄청난 검색과 실행착오를 겪으면서 내가 생각했던대로 만들어졌지만.. 남은 시간 1분 제대로 끝까지 해결하지 못하고 제출하였다.
이번에 과제를 접하면서 당연하지만 멘탈관리가 많이 중요하다 느꼈다 최대한 침착하게 생각대로 안되더라도 일단 차근차근 에러를 해결하면서 진행했다면 횔씬 좋은 과정이 되었을것이다.
프로젝트 경험이 넘쳐나지는 않았지만 그래도 어느정도 프로젝트를 경험해보았지만 항상 새로운 template을 가지고 프로젝트를 세팅하는 작업에 많은 시간을 투자하지않다, 이번 과제를 세팅하는데 어려움을 겪은 당연한 결과였다 매번 프로젝트를 세팅할때 그저 명령어만 입력하고 설치했을뿐 해당 명령어는 어떤 작업을 하고, 설치되는 파일들은 어떤게 있으면 해당 파일들은 무슨 역할을 하고, package.json이나 tsconfig.json 같은 파일들은 어떻게 커스텀 할수있으면, 내가 원하는 방식을 설정을 한번도 생각하지않고 그동안 페이지 구현에만 급급하여 실제 내가 사용하는 스텍을 커스텀하지 못했다.
react를 기존 프로젝트에 연결해보았는가?
react를 기존 프로젝트에서 원하는 폴더 구조를 통해서 실행 시켜보았는가?
pakcage.json에 사용되는 script들이 어떤방식으로 실행되고 내가 원하는 script를 작성할수있는가 ?
react 등 설치했을때 생기는 package.json에 있는 패키지들이 어떤 역할 설치이유 를 알고있는가?
나는 몰랐다 왜 이런 파일, 스크립트, 패키지들이 사용되고 있는지 이제라도 제대로 알고 좀 사용하자 ..
또한 이번에 강한게 느낀 부족한점은 문제를 작은 단위로 나누고 계획을 짜는 시간이 너무 오래걸렸고, 기존에 있는 코드 즉 남이 짠 코드를 이해하는데에 시간이 굉장히 오래걸리다는것을 깨달았다.
문제를 나누고 해결방법을 생각하는 것은 경험으로 채울수있고,
코드를 빠르게 이해할수있게 연습하는건 다른사람의 코드를 많이 접하고 리뷰또는 분석을 그만큼 연습해야한다.
extra thoughts
다른 사람의 코드를 일부분 보게되었는데, 많은 충격을 받았다.
나는 구현도 제대로 못했는데 커스텀 훅을 만들어서 로직은 분리시키는 개발자도 있다는 사실에 자책하고있던 나한테 선배로 부턴 조언을 받았다..
너만의 철학이 담긴 알관성있는 코드를 짜라.
아직 나만의 스타일이 어떤건지 모르겠지만 코드를 구현할때 남한테 이유를 설명할수있는 일관된 코드를 구현해라.
아직 나만의 철학이 담기 코드를 만들기에는 너무 실력,지식,경험 부족하지만 언젠간 남들한테 자랑할수있는 코드를 짤때까지 공부해야겠다.
억장 와르르멘션