프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
9월 3일 (금)
📚 TIL
1. 업무 관리 툴 Notion 클로닝 프로젝트 종료
2. 코딩테스트 대비 문제 해결하기
3. 멘토링(with. Lucas)
📮 Feelings
1. 업무 관리 툴 Notion 클로닝 프로젝트 종료
오늘은 계속해서 구현하였던 기초 기능들에 대하여 CSS를 전반적으로 구현하였다. CSS 작업을 빨리 마무리하고 구현해보고 싶은 추가 요소들에 대하여 개발할 계획이였다.
하지만 내 생각과 달리 중첩리스트 요소에 대한 각각의 hover 효과를 적용하는데에서 문제점을 발견하였고 그 문제를 인지함과 동시에 리스트의 요소에 패딩값을 적용하니 페이지 리스트가 정상적으로 클릭이 되지않는 이슈를 발견하였다.
이를 해결하는데에 상당한 시간을 소요하게 되었으며 결국 중첩리스트들의 패딩값을 제거하고 자바스크립트를 통한 패딩값 지정으로 두 가지 문제를 해결할 수 있었고, 그 과정에서 중첩리스트에 대한 마크업 관련 문제에 관해 많이 찾아보며 새롭게 배운 내용이 많았기에 의미 있는 시간을 가질 수 있었다.
생각하지 못한 부분에서 문제를 직면하게 되어 조급하기도 했지만 그래도 다행히 문제를 해결하고 정상적으로 기본 기능들이 동작하는 형태로 프로젝트 1차 마무리를 할 수 있었다.
이번 주말에는 최초 상태에 대한 가공을 통해 하위 컴포넌트들에서 값을 다루고 태그들을 제어할 수 있도록 리펙토링 할 예정이며, 커서에 관한 selection 함수에 대해 공부하여 Editor를 rich하게 리펙토링 하려고 한다.
2. 코딩테스트 대비 문제 해결하기
백준 2210 - 숫자판 점프
시간제한이 2초이며 입력값이 5 * 5의 크기로 이루어진 2차원 배열로 주어졌고 2차원 배열에서 6자리의 서로 다른 수들의 경우의 수를 구하는 문제였다.
이를 통해 완전 탐색 유형 문제임을 유추하였고 그 과정에서 탐색 알고리즘인 BFS 알고리즘을 활용하였다. 그리고 중복되는 경우의 수에 대한 처리를 위하여 Set 메소드를 사용하여 문제를 해결할 수 있었다.
멘토링(with. Lucas)
어제 고민했던 최상위 앱 컴포넌트에서 API 요청으로 최초에 전달받은 state를 하위 컴포넌트에 전달할 때 해당 state를 가공해서 전달하는 것과 초기 상태를 불변으로 다루는 경우에 대하여 어느 방향으로 개발을 진행하여야 할 지에 대한 문제에 대하여 Lucas에게 좋은 말들을 들을 수 있었다.
각 컴포넌트에서의 책임을 어디까지로 정할지가 일단 가장 원초적인 접근법이였고 협업의 경우 팀끼리 그 범위를 정하며 작업을 진행하는 경우가 대부분이며 개인 프로젝트의 경우 개인이 직접 정해보며 각각의 경우에 대해 느낀점을 토대로 개선해보는 방법은 굉장히 이상적인 방법이라고 하였다.
결국 직접 불편함도 느껴보고 편리함도 느껴봐야 정답이 없는 개발 방법에서 최선의 길로 다가가기에 가장 적합한 방법이라는 점이다.
처음에는 내가 작성한 코드에 대하여 허탈함을 많이 느꼈고 코드를 뒤엎고 새로 만드는 시간이 너무 아깝게 느껴졌었지만 지금에서 돌이켜보면 그로 인해 기억이 강하게 남아 같은 실수를 되풀이 하지 않게 되는 좋은 경험을 한 것 같다.
좀 더 빨리 이런점을 느꼈더라면 더 좋은 결과로 프로젝트를 마무리 할 수 있었을 텐데 약간의 아쉬움이 남았지만 이제라도 알게 되어 참 다행이라고 느끼게 되었다.
마치며 🙏
데브코스 과정의 첫 개인 프로젝트를 마무리하게 되었다. 나에 대해 많은 부족함을 느꼈고 모자란 부분에 대하여 깨닫게 되었다.
구현하고 싶은 기능을 아직 구현 못한채로 마무리 하기가 너무 아쉽게 느껴져서 이번 주말에도 리펙토링 과정을 가지려고 한다.
이번 주말을 통해서도 구현을 완전히 하지 못한다면 계속해서 구현을 할 때 까지 시도하려고 한다. 잡힐듯 말듯 안잡히는 그 상황이 계속해서 포기를 못하게 만드는 것 같다. 조금만 더 하면 현재까지의 내가 생각할 수 있는 부분에 대해서는 마무리 할 수 있어 보인다.
많이 힘들었지만 그만큼 얻었던 점 역시 많았던 이번 개인 프로젝트를 통해 더더욱 성장할 수 있었다.
📅 Future Action Plans
-
업무 관리 툴 Notion 클로닝 프로젝트 리펙토링
- 초기 state 가공을 통한 전반적인 기능 동작을 위한 광범위 리펙토링 진행
- Editor의 현재 페이지의 하위 페이지 링크 렌더링 구현
- Editor의 업데이트 되는 state에 대한 Rich한 Editor로 기능 향상시키기
- 코딩테스트 대비 문제 해결하기
