처음 노션클로닝을 하려고 했을때
에,,,,? 이걸 만들라고요...?😳
JS 걸음마를 이제 뗏다고 생각했는데,👶 제대로 잘 동작하는 노션을 만드려니 막막했다. 그렇게 무작정 시작을 하고....3주차 회고때 했던 나의 다짐을 생각하며, 부딛혀보고 막상 닥치면 어떻게든 된다는 마음가짐으로 임했다!
💻결과물
어떻게든 무엇인가 비슷한것이 만들어졌다.
사실 3일차 까지만 해도 기한 내에 비슷한 몇개의 기능이라도 제대로 동작하는 것에도 자신이 없었다. 그러나 컴포넌트간의 흐름을 이해하고, 그동안 해왔던 것을 돌이켜 보고, 약간의 깨달음을 얻은(?) 순간 순조롭게 진행 할 수 있었다. 이것이 배움의 재미 아니겠는가...?
📷 포기하고 싶었던 1일차의 UI 😅
이전 포스팅에서 느낀점들을 적어놨었는데, 모아놓고 보니 나름의 고민들과 해결했었던 방법들이 떠올라 한번더 쓰고 생각하게 되었다.
🔥일자 별 느낀점
1일차
- API를 불러오는 것 부터 어려움을 겪었으나, 여러가지 고민과 시도끝에 API.js로 모듈을 따로 생성하여 이제는 자신감있게 원하는 데이터를 불러오고 내보낼 수 있게 되었다.
- History API를 이용해 SPA 형태로 구현하면서, 사용자의 편의성을 높이는데 중요함을 깨달았다.
- 문서들을
<ul> <li>태그로 묶어서 표현을 하고, 하위 문서 추가시 재귀함수를 이용해<li>태그안에 또<ul>태그안에 추가하는 방식으로 구현하였다. 재귀를 이용했다는 것에 뿌듯하였다.
- 첫날이라 그런지 집중이 잘 되었고 무엇인가 만드는 재미가 쏠쏠했다.🔥
1일차에는 API연동에 시간을 다 쓴것 같다.... 원래는 CSS기본 구조까지 다 하려 했으나... 또 나의 주제를 몰랐다.
2일차
- css를 연구해보느라 시간을 거의 다써서 시간관리의 중요성을 다시한번 깨달았고 우선순위를 정했다.
나의 우선순위:
1.기능구현
2.스타일 css입히기
3.문서화
css를 만만히 보았던 과거의나.. 반성합니다😂
3일차
- 문서 삭제 기능 (✅1일차 문제해결!)
삭제 기능도 추가기능과 마찬가지로, 페이지는 트리형태로 되어있기에, 재귀형태로 해당 문서를 찾아서 삭제한다. 만국의 재귀라고 느꼈다.
css를 내 나름대로 입혀 보았는데, 처음이라 그런지 쉽지않았다.
문제가 점점 해결되고, 기능이 구현이 되면서 재밌었다.
삭제기능을 잘 구현하였다. JS에서 동적으로 태그를 생성하다 보니, 원하는 태그를 선택하여 삭제하는데 어려움을 겪었으나, EventTarget.addEventListener() 을이용하여 Target 에 접근 처리, getelementsbyclassname() 등을 이용하는 익혔다.
4일차
- 🗑휴지통
노션의 휴지통기능을 보면서 편리하다고 느껴서 구현해보고 싶었는데, api서버 특성상 post get delete 정도 까지 밖에 없어서, 임시로 저장할 공간이 로컬 스토리지가 생각나 로컬스토리지에 저장해놓고, 렌더링해주는 방식으로 구현하였다. 로컬스토리지까지 사용을 해보니, 정말 내가 개발자라도 되는 줄 알았다.
URL형태로 데이터를 넘겨주고 받을때, decode와 encode의 중요성을 느꼈다.. history api를 위해, push형태로 로컬 스토리지의 title을 넘겨주다보니, decode되어 넘어와 적잖이 당황했다.
휴지통을 구현하기 위해 고민한점, 떠올린 로컬스토리지를 이용하여 구현했던 기억이 있다. 또 여기서 오는 문제점도 있었고 이를 고민하고 개선하는 재미가 쏠 SoL~
5일차
접었다 폈다 하는 기능도 간단히 구현 될 줄 알았으나, 생각보다 오래 걸렸다. 재귀로 구현했던
<li>태그들을 다루다보니, 원하는 값에 접근하기가 쉽지않았고, className으로 접근했기에 변수이름과 class이름의 작명에 대한 중요성을 깨달았다.
js안에서 html들을 조작하는 것이 결코 쉬운일이 아니라는 것을 느꼈다.
css 작업은 언제나 어렵다...
거의 마무리 단계
6일차
css 작업은 언제나 어렵다...
사용자의 편의성을 고려하여 설계하는 것이 정말 어렵구나..를 느꼈다.
사용자의 편의성을 위해 원하는데로 척척 개발이 되면 좋으련만...그것이 자유롭게 되지 않은 내가 슬프다
마무리하며
1주일 동안 이리 구르고 저리 구르고 많이 차이면서 버그도 많이 만나보고, 나름의 머리도 써서 만들어 냈지만 아직도 문제점이 많다.😇
⛔문제점
- 페이지 추가시 노션처럼 입력될때마다 렌더링
- 휴지통은 로컬스토리지로 구현이 되어있기 때문에 ♻(복구) 버튼을 누를시, 로컬스토리지에서 title값만을 받아 와서, api를 통해 다시 'post' 하여 id를 받아 새로운 문서가 된다.(기존 제목에서 수정을 해야만 복구가능)
첫번째 문제점 원인 파악 및 해결 못한 이유
노션처럼 입력마다 페이지의 제목이 렌더링 되지 않고, title 입력후, 2초후 더 이상 반응이 없어 자동저장이 되고 난 후에야 title이 문서 목록에 업데이트 된다. 낙관적으로 진행하려 하였으나, api와 기존 리스트 컴포넌트와의 연결이 방해가 되어(코드가 더러운 이유에서 이다.) 구현하지 못하였다.
여기서 느낀점
코드는 굉장히 쉽게 더러워지고, 구현을 위한 코드를 하다보니 더욱 더 적나리 하게 보이는 것 같다. 기능추가 및 보수를 편하게 하기위해, 컴포넌트 단위로 나누고, 모듈로 서로 침해하는 영역 없이 재사용성을 고려해 설계하는 것인데, 나의 코드는 그런 흉내만 내는 형편없는 코드였단 것을 느낀다..😤 설계부터 사용자의 편의성과 함께 개발자의 편의성도 고려한 코드를 고민하고 짜야한다고 느꼈다... 나혼자 일하는 것도 아니니까...!
두번째 문제점 원인 파악 및 해결 못한 이유
복구버튼을 만들때, 단순히 새로 추가하면 그만이라고 생각하였다.
그러나 이는 처음부터 잘못 되었는데,
페이지 삭제기능 만들며 휴지통에 넣을때, 단순히 서버로부터 삭제를 하고, 그전에 이를 로컬스토리지에 넣는다는 생각을 한거 부터,
복구를 고려하지 않고 의식의 흐름대로 그냥 그렇게 구현 하였다는 것이다.
삭제기능을 만들고 뒤늦게 복구기능을 구현하려 하니, 로컬스토리지에서 서버로 새로 추가를 하게 되면 기존의 content값을 보존 못한다는 것을
(왜? 서버는 처음 페이지를 만들때, id와 title만 받기 때문)
구현하고 나서야 깨달았고, 이를 해결하기 위해 로컬스토리지의 데이터와 서버의 데이터를 합처서 놓은 로직을 만들거나, 아니면 로컬스토리지가 아닌 다른 방법을 생각해봐야 하는데, 이미 코드가 엉켜 처음부터 다시 짜야할 것 같았다. 내 능력이 부족한 것도 있겠지만, 처음부터 복구기능을 고려하여 생각하고 구현하였다면, 위의 방법을 조금더 빨리 생각할수 있지 않았을까? 이런생각이 든다.여기서 느낀점
로컬 스토리지를 이용한다는 것에서는 좋은시도 였다고 생각을 하지만, 무엇인가를 구현할때, 의식의 흐름대로 구현하는 것 보다 내가 추가할 기능까지 염두해두고 계획적으로 구현해야겠다고 생각했다. 차후에 이 방법이 잘못되었다면 이미 그때는 고치기 힘든 돌이킬 수 없는 강을 건너고 난 후의 일 일수도 있기때문에.
또한 백엔드와의 협업에서 api설계를 부탁할텐데, 내가 원하는 그림을 그릴때, api 호출에서 문제가 없이 원하는 데이터를 불러오고 내보낼수 있도록 잘 설명 할 수 있어야하고, 그려려면 더욱 더 코드를 짤때 구체적으로 어떤식으로 짤것이고 이는 추후에 문제가 없는가? 에 대한 염두해 두고 있어야 한다는 것을 느꼈다.🔥 이런 경험이 점점 많아진다면 더 능숙하게 해결 할 수 있겠지...
많이 구르고 뻘짓을 해봐야 는다... 이리 치이고 저리 치인 정말 상처 뿐인 첫번째 프로젝트 였지만, 이 과정들의 나의 성장통이라 여기면서...끝
