프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
9월 2일 (목)
📚 TIL
1. 업무 관리 툴 Notion 클로닝 프로젝트 진행
2. 코딩테스트 대비 문제 해결하기
3. 코드 리뷰 진행 - ToDoApp
📮 Feelings
1. 업무 관리 툴 Notion 클로닝 프로젝트 진행
최상위 앱 컴포넌트에서의 상태를 가공하지 않은 상태를 불변으로 다루는 점을 고려하여 오늘은 어제의 구현 코드에서 웹 스토리지를 통한 상태 참조로 리펙토링을 해보았다. 리펙토링을 하고 난 후 느낀점은 상태관리가 웹 스토리지에 너무 의존적인 느낌이 강하게 들었다.
최상위 앱 컴포넌트에서 API 요청으로 최초에 전달받은 state를 하위 컴포넌트에 전달할 때 해당 state를 가공해서 전달하는 것과 초기 상태를 불변으로 다루는 경우에 대하여 어느 방향으로 개발을 진행하여야 할 지 고민이 많이 되었다.
결국 나는 다시 코드를 리펙토링 하기로 마음먹었고 재귀를 통해 트리형태의 데이터 상태를 가공하여 하위 컴포넌트에 내려줄 생각이다. 웹 스토리지에 의존하기 보다 직접적인 상태에 의존하며 상태 변경 역시 이루어지는 관점에서 이 방법이 맞다라고 결론을 내리게 되었다.
이 고민에 대하여 멘토링 시간에 루카스에게 질문을 남겨야겠다.
2. 코딩테스트 대비 문제 해결하기
백준 11004 - K번째 수
간단한 정렬 알고리즘과 주어진 인덱스를 통해 문제를 해결할 수 있었다.
백준 1525 - 퍼즐
완전 탐색과 BFS 알고리즘을 활용하는 문제였다.
2차원 배열로 모든 경우의 수에 대해 탐색을 진행하였는데 메모리 초과 문제가 발생하였고 이 메모리 제한을 극복하는게 중요했다.
결국 2차원 배열이 아닌 문자열 형태와 스왑을 통하여 BFS 로직을 구현하였다. 하지만 계속해서 메모리 초과 문제가 발생하였고 나는 큐 역시 직접 구현을 하였지만 메모리 초과 문제가 발생하였다.
구글링을 통해 알아보니 백준 저지의 node.js 경우 입출력 문제에 대하여 상당한 메모리를 차지하여 메모리 관리를 통한 문제 해결에 불리하다고 한다.
결국 찝찝한 마무리를 하게 되었지만 로컬 환경에서의 테스트케이스 결과는 이상없이 출력되었다.
3. 코드 리뷰 진행 - ToDoApp
Vanilla JS만을 이용하여 개발한 팀원분들 각각의 ToDoApp 코드에 대하여 코드 리뷰를 작성하며 소통하는 시간을 가지게 되었다.
내가 아닌 상대방의 관점으로 바라본 나의 코드에 대한 이야기들을 들으며 내가 인지하지 못하고 있었던 코딩 스타일에 대하여 짚어보고 넘어갈 수 있었다.
반대로 내 관점으로 바라본 상대방의 코드에서 여러 가지 생각을 할 수 있는 경우도 많았고 새롭게 배우게 된 코딩 기법들도 알 수 있었던 유익한 시간이였다.
어느 덧 코드 리뷰 경험이 많이 쌓이게 되었고 그에 따라 보는 관점이 계속해서 달라지는 나의 모습이 신기하고 그만큼 피드백을 나누었던 코드에 대해서는 개선된 모습이 많이 보여져서 뿌듯했다.
마치며 🙏
프로젝트의 기본적인 기능은 다 구현을 하였고 아직 내가 구현하고 싶은 추가 기능들은 구현을 하지 못한 상태이다.
초기 상태의 불변을 유지할지 유여한 상황에 대비하여 가공할지에 대한 고민을 직접 코드로 구현하며 비교하다 보니 깨닫는 점이 직접적으로 와닿아서 좋았지만 시간이 많이 걸리게 되었다.
일단 기본 기능에 문제는 발견하지 못했으니 제한 기간에 정상적으로 마무리 하기 위해서 내일은 추가 기능의 구현에 대해 집중할 것 이며 내가 고민한 문제에 대해서는 주말을 활용해서라도 마무리 할 예정이다.
📅 Future Action Plans
-
업무 관리 툴 Notion 클로닝 프로젝트
- Editor를 textarea가 아닌 contentEditable 속성을 활용하여 성능 개선
- Editor의 현재 페이지의 하위 페이지 링크 렌더링 구현
- 최종 CSS 구현
- 코딩테스트 대비 문제 해결하기
