꾸미기
3일차에 Navigation, Editor 컴포넌트 기능을 모두 구현하였다. API와의 통신도 잘 이뤄어지고, 각 컴포넌트들의 기능들도 잘 작동하였다. 이제 노션과 최대한 비슷하게 꾸밀 일만 남았었다.
이번 프로젝트에서 처음으로 SCSS를 사용해서 CSS 코드를 작성하였다. 물론 CSS 코드만 사용해도 문제 없지만, CSS만 사용하면 DOM간의 계층 관계를 파악하기 어렵고, 계층화된 구조로 코드를 관리하는게 추후 코드양이 많아지면서 생기는 꼬임 현상을 최소화할 수 있기 때문에 SCSS를 사용했다. 그 결과, 과거 이곳저곳에 코드를 작성하면서 생겼던 문제를 사라졌고, 보는 사람의 입장에서도 논리 정연한 코드 구조를 만들어 냈다. (이럴줄 알았으면 웹 프로그래밍을 시작했을 무렵 진작에 배울껄 그랬다..)
한가지 어려웠던 점은 CSS 개념들중 약간 헤깔리는 개념들도 있고, 속성별로 특징을 잘 몰라서 적용이 안되는 경우도 종종 있었다. 특히 DOM 내부에서 글자의 위치를 선정하는게 가장 까다롭고 힘들었다. flex를 사용하여 하위 요소들의 위치를 정렬하는데 익숙하다보니, flex를 사용하지 않은 요소들에게도 당연하게 element들을 정렬하는 속성값을 사용했고, 그 결과 당연히 정렬이 되지 않았다. 구글링을 통해 일반적으로 글자는 padding과 margin을 통해 위치를 조절해야 한다는 점을 확인했고, 처음 문제에 봉착한 이후에는 별다른 문제 없이 CSS 작업도 끝냈다
추가구현
기본 요구사항만 충족하면 사실 프로젝트를 마무리 해도 되지만, 그래도 뭔가 좀더 완성된 프로젝트를 제작하고 싶다는 마음이 앞서서 결국 추가구현에도 손을 댔다. (지난주 과제 때 정말 기능만 완성해서 제출했는데 다른 팀원들은 CSS로 다듬어서 보다 완성된 결과물을 만들어 제출했던 것이 추가구현을 결심하는데 한몫 했다. 추가 구현해야 할 내용이 CSS로 꾸미는게 아닌 Javascript로 Component를 추가하고, 기능들을 구현하면서 다른 Component들도 일부 손대야 할 부분들이 많은 것이 많은 번거로운 작업이었지만 그래도 보람은 있었다
SubDocsPage
추가구현은 하위 페이지 리스트를 보여주고, 리스트 요소를 클릭시 해당 도큐먼트로 이동하면서 결과값을 랜더링 해주는 기능이었다. 상위 컴포넌트에 SubDocsPage 컴포넌트를 추가했고, 필요한 기능들을 구현한뒤, 다른 컴포넌트들이 경우에 따라 적절한 액션을 할 수 있도록 코드를 변경했다. 해당 컴포넌트가 Editor 컴포넌트가 실행될 때 받는 API response를 바탕으로 랜더링을 해야하기 때문에 Editor 컴포넌트 안에 넣어야 할지, 모든 state 관리는 상위 컴포넌트(App)에서 담당하므로 App 컴포넌트에 넣어야 할지 고민하면서 꽤 많은 시간이 걸렸지만 결과적으로 추가 기능도 구현 성공하였다.
