다음 주부터 개발이 진행되기 때문에 앞으로 회의에 지금까지 진행상황에 대해서 공유하기로 했다. Jira에 이슈 구축해놓은 것에 대해서 사용방법을 공유했다.
각자의 진행 상황과 예정 사항에 대해서 공유하고 끝났다.
어제에 이어서 각자 개발을 진행하기로 했다.
12/8
먼저 figma에서 디자인한 화면을 코드로 바꾸기 위해서 여러 플러그인을 참고했는데 하나같이 다 어디 한군데가 부족하거나 돈을 내야해서 그냥 직접 만들기로 했다. 홈페이지와 프로필 페이지에서 공통적으로 필요한 네비게이션바가 필요해서 내가 같이 만들기로 했다. 네브바는 내가 디자인 한 것보다 다른 분이 디자인한게 더 나아서 그것을 내 홈페이지로 이식한 다음 개발을 진행했다.
이전 넷플릭스 클론 강의에서 했던 것처럼 layout을 만들어서 다른 페이지에서 사용할 수 있게 했고, 네브바가 필요없는 에디터 페이지는 layout에서 제외시켰다.
12/9
홈페이지를 구성했다. 마지막으로 푼 문제 화면을 만들고, 검색창, 알고리즘 리스트 순서대로 진행했다.
검색창에서는 필터에 셀렉트 태그를 사용해서 구현을 했고 useState를 이용해서 검색창 입력값을 받았다.
알고리즘 리스트에서는 redux를 활용해서 전체 알고리즘 문제를 받아서 store에 저장한 다음 불러오는 방식으로 했다.
12/10
검색기능을 구현했다.
입력 받는대로 결과를 바로 보여주는 방식으로 진행할 지, 검색을 눌러야 결과가 나오게 할 지 고민이었는데 후자로 갔다. 전자로 했으면 그냥 구현화면에서 filter로 실시간으로 걸러내면 돼서 다른 코드를 많이 안 건드려도 될 것 같았는데 그러면 검색 버튼이 의미가 없어질 것 같아서 후자로 진행했다.
검색 입력값을 받아서 useNavigate로 url에 입력값을 포함시켰다. 그러고 알고리즘 리스트 보여주는 컴포넌트에 props로 넘겨줬는데 js와 다르게 타입스크립트는 타입을 지정해줘야해서 막혔다. 그냥 any로 주고 넘어갈까 싶었지만 그러면 혹시나 알지못하는 문제가 생길까 걱정되어서 검색해서 해결했다. 이번에는 잘 넘어갔는데 다음에 비슷한 상황에서 알지 못하는 타입을 지정해줘야하는 상황이 생기면 어떻게 해야하면 좋은지 찾아봐야겠다.
이번에는 interface로 자료형 하나 만들어서 지정해줬는데 코드가 너무 더럽고 귀찮다.
코드 짜면서 막힌 부분을 다 기록하려고 했는데 막상 막히는 부분이 생기면 그거 찾고 고치는데 정신 팔려서 기록남기는게 어렵다. 다른 분들은 어떻게 하는지 노하우를 물어봐야겠다.
알고리즘 문제도 풀어야하는데 이거하면 시간 다 가서 문제 먼저 풀고 개발하는 방식으로 가야겠다.