✔ FACT(사실)
👶 현진
강사님이 주신 필수 구현 사항이 목표라고 할 때 50%정도 구현한 것 같다. 기존에 짜던 방식이 옛날 방식인 dom 조작에 머물러있다보니, state와 render 방식으로 짜는 것이 익숙하지 않았다.ㅜㅜ 앞으로 익숙해져야할 부분이다.
👶 형진
직면했던 문제
- 편집 페이지의 Title input에 placeholder 속성이 적용 안되어서 Title input에 별도의 div를 appendChild 한 뒤 해당 div에 contentEditable과 placeholder 속성을 주어 우회적인 방법으로 해결하였다.(비 효율적인 방법이라 생각하지만 제한 시간이 있어 어쩔 수 없이 선택한 방법이다.)
- 설계를 할 때 컴포넌트와 객체와의 역할을 혼동하여 Store, API를 컴포넌트에 추가하여 설계하였고 추후 프로젝트를 갈아엎는 계기가 되었다.
👶 혜경
노션 클로닝을 하며 아쉬웠던 점이 좀 있었다.
1. setState와 render 을 혼용해서 썼다. 요소 밖에서 setState로 접근해야 할 지 render 로 접근해야 할 지 정해야겠다.
- 마크다운이 잘 적용되는 rich-editor를 사용하지 못 했다
👶 남경
컴포넌트 생성, api연결, 라우터 설정, state관리, contentEditable 등 이것들을 다른 라이브러리 없이 vanillaJS로 만드는 프로젝트를 진행했다.
👶 유현
노션 클로닝 요구 사항 중 기본 요구 사항과 보너스 요구 사항에서
편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가합니다. 빼고 구현을 했다. 노션처럼 툴팁 박스가 뜨는 형식으로 구현하려고 필요한 자료구조나 컴포넌트는 만들었었다. 편집기에서 다른 문서 이름을 적은 위치 바로 밑에 툴팁을 띄우는 방식으로 구현하려 했지만 위치를 지정하는 로직을 공부하고 구현하자니 시간이 부족할 거 같아 포기했다.노션 클로닝 과제를 하면서 어려웠던 점은 크게 3가지가 있었다😱 첫번째는 컴포넌트 구조를 설계하는 일이고 두번째는 보너스 요구사항인 contentEditable을 이용한 rich-editor를 만드는 것이다. 마지막 세번째로는 현재 컴포넌트 구조를 3개의 컴포넌트가 하나의 페이지에서 관리하는데 편집기 선택 여부에 따라 2개의 컴포넌트를 append하거나 remove하는 방식으로 렌더링하다 보니 상황에 따라 어떤 컴포넌트를 렌더링하고 상태 변화를 해야하는지 결정하고 순서를 맞추는 일이다.
💡 FEELING(느낌)
👶 현진
시간을 써도 아무것도 구현 못하는 내 자신을 보면서 힘들기도 하고, 설계의 중요성을 많이 느꼈다. 그래도 이런 삽질을 해야 설계를 어떻게 해야하는지 교훈을 얻는 것 같다. 다음에는 더 잘할 수 있겠지?
👶 남경
- 쉽지 않을거라는건 알았지만 생각보다 어려웠다. 그동안 라이브러리에서 제공하던 것 들에 대해서 어떤 원리로 동작을 했을까 생각해볼 수 있었다.
- 라우터 설정에 있어서 새로고침이 동작하지 않았다. 원인은 아직도 찾지 못했다. 아마 새로고침과 동시에 라우터가 돌아가야하는데 그전에 store에서 데이터 세팅하는게 먼저 동작해서 그러지 않을까..? 하는 추측에 store를 싹다 빼고 라우터 먼저 동작하도록 바꿔봤는데도 잘 동작하지 않았다. ㅠㅠ
- toggle은 details 태그를 이용해 재귀로 돌리는 방식으로 쉽게 구현했다. 다만 details에서 재공해주는 삼각형 토글 버튼에 애니메이션이 올라가지 않아서 버튼을 제거하고 따로 만들어주었다. 또한 글씨를 클릭해도 토글이 동작하는 바람에 다른 태그로 그 위에 커버를 씌워주어서 토글이 눌리지 않도록 했다. 그 과정에서 조금 난잡해지지 않았나 싶다.
- 이번에 eventlistener를 다시 배운것 같다. 그냥 eventlistener를 사용하면 알아서 select된 태그에 이벤트가 붙는줄 알았다. 그런데 랜더링이 일어나면서 이벤트가 붙지 않는현상을 봤고, 아직 이벤트에 대한 이해가 부족하다는 것을 느꼈다.
- api는 기존에 자주 쓰던 방식으로 작성했다. 상단에 공통 header 작성해주고 아래 method나 다른 body 값을 전달해 줄 수 있는 함수로 작성했다. 여기에 대해서는 딱히 수정해주고 싶은 사항은 없었다.
- contentEditable 시도는 했지만 너무 어려웠다. 중간에 맨토님이 감사하게도 그대로 복사해서 사용할 수 있도록 코드도 제공해 주셨지만 한번 다시 랜더링 한 후에는 방향키 이벤트가 싹 빠져있어서 다시 이벤트를 붙여주는 작업이 필요했다. 그 이후에 # 의 갯수나 다른 애디터 기능을 추가해야하는데 제출까지 시간이 별로남지 않아서 다음에 다시 해보기로하고 관련 코드는 다 제거한 후 올렸다.
- 처음에 컴포넌트를 많이 필요하지 않을까? 하는 생각에 state를 props로 넘겨주지 않고 store에서 관리하자 라고 생각했었다. 그런데 vanillaJS로 프로젝트를 하는게 익숙하지 않다보니 파일을 나누는것이 부담이 되었다. 컴포넌트를 나누더라도 재사용할만한 컴포넌트가 딱히 있지 않았고, 있다고 해도 재사용성 있게 깔끔하게 만들 자신이 없없다. 그래서 결국 컴포넌트 2개 패이지 1개 라는 그냥 단순하게 데이터를 넘겨줬어도 될만한 그림이 나왔다.
👶 혜경
그동안 아무 생각없이 썼던 노션을 클로닝하게 되었다. 처음에는 드래그 앤 드롭을 구현하는 줄 알고 잔뜩 설렜는데, 알고 보니 사이드바와 에디터였다. 그래서 생각보다 쉬울 줄 알았는데, 전혀 아니었다. (오히려 더 DOM 과 관련된 주제인 거 같다👍 )
그동안 바닐라 JS보다 리액트를 해왔는데, 리액트처럼 바닐라 JS를 구현하려 노력하였다. 노션을 클로닝하면서
라이브러리의 중요성을 느꼈다. 얼른 리액트 다시 하고 싶다👶 형진
이번 클로닝은 많은 좌절을 겪으며 동시에 학습에 대한 동기부여를 심어주는 기간이었다.
좌절 포인트
- 프로젝트 마감 3일전에 모든 것을 갈아 엎음
- 갈아 엎고 난 뒤에도 방향을 잡지 못해 허우적거림
👶 유현
과제 시작한 지 4일차 정도 되는 날에는 금방 끝낼 것 같은 오만한 생각이 들었지만 역시나 아니었다.문서 추가, 삭제 시에도 하위 문서 목록이 펼쳐져 있는 상태를 유지(토글 상태 유지)하는 것과 contentEditable을 구현이 남아있었다. 두 기능을 구현하려고 혼자 머리를 싸매고 끙끙대며 하다 지쳐 포기하려고 했었다. 하지만 다른 분들과 기능 구현에 대해서 의논해보면서 진행하니 다시 의욕을 가지고 구현할 수 있었다. 지금 생각해보니 같이 한다는 것에 대한 좋은 점을 많이 알게 된 것 같다.
👩💻 FINDING(교훈)
👶 현진
- 구현에서 막힐 때는 설계로 돌아가자. 이 동작이 다른 파일에 어떻게 연관을 주는지, 어떤 동작이 일어나게 하고 싶은 것인지를 생각해보자.
- 이 때 누군가에게 내가 어떤 것을 하고 싶다고 설명하는게 내 생각 정리하는 데 도움이 많이 된다. 혼잣말이라도 계속 하면서 스스로를 이해시켜보자. 😂
👶 남경
- 기술적인건 공부하고 알아아가면 되는 거지만, 초반에 개발 습관을 다시 잡아야겠다는 생각을 했다. 커밋을 하면서 너무 순서 없이 구현해서 메시지를 적는데에서 고민을 많이 하게 되었다. 코드 작성하기 전에 사전에 생각을 더 많이 해봐야 할 것 같다.
👶 혜경
- 큰 그림을 그리자
- 설계를 튼튼히 하고 개발에 들어가자
👶 형진
- 데브코스에 합류한지 한달이 흘렀다. 노션 구현에 대한 한계를 느끼며 한달이라는 기간동안 부족했던 지식을 채우지 못했던 스스로를 반성하게 되는 계기가 되었다고 생각한다.
👶 유현
혼자 끙끙대지 말고 다른 사람들과 함께 하자! contentEditable, selection, range 개념 공부! 컴포넌트의 데이터 중심 구조 설계의 중요성! API 명세서 꼼꼼히!
📁 FUTURE ACTION
👶 현진
- 코드 정렬이랑 배포를 통해 코드를 읽는 사람을 배려하는 습관을 들이자.
- 강사님 강의에서 코드보다도 어떻게 설계를 했고, 왜 그렇게 했는지를 중심으로 이해를 먼저 해보자
- 멘토님 피드백대로 데이터 중심으로 설계해보자.
👶 남경
- 우선 이번 과제를 하며 이론적으로 이해가 부족했던 eventlistener를 공부
- 기본기능에 대한 오류사항(event)에 대한 수정과 contentEditable도 구현해보고 하면서 지속적으로 업데이트를 해나갈것 같다.
👶 혜경
- 요구사항을 분석하는 능력을 기르자
- 보너스 요구사항도 도전해보자..! 😤
- 리드미를 좀 더 잘 꾸며보자!
👶 형진
- 로컬 환경에서만 작업하다보니 다른 PC에서 UI가 깨지는 현상을 발견하지 못했다. 모든 케이스를 테스트할 수는 없지만 해상도, 브라우저 등 다른 환경에 대해서도 생각을 해야할 것 같다.
- 훗날 react, vue를 공부하기 전에 반드시 VanillaJS에 대해 깊이 공부를 해야겠다.
👶 유현
🤔🤔🤔🤔
홓