한줄 소감
예상 보다 힘들었고 덕분에 배울게 많았다.
프로젝트 소개
바닐라 js 로 클론 노션을 만들어라.
목표
컴포넌트를 잘 분리하려 노력했다.
- 손으로 컴포넌트 관계를 도식화했다.
점점 시간에 쫒기며, 코드가 복잡해져갔다.
함수형 코딩 책을 읽고 나서 적용하려고했다.
- 내부적으로 api 호출과 로컬 스토리지 호출하는 함수를 최대한 줄였다. (액션보단 계산을 최대한 활용하였다.)
- 많이 사용하는 함수들을 사용하기 쉽게 만들었다. (추상화벽을 만들려고 노력했다.)
뭘 구현했나?
낙관적 업데이트 적용
낙관적 업데이트를 언제 써야하는지 확신이되지 않았다.
딱 어디다 써야할지 정해져 있을것 같지가 않았다.
그래서 찾아보았다.
낙관적 업데이트, 언제씀?
ui 를 미리 업데이트해도 괜찮을 때
- 실패해도 괜찮을때
- 별로 중요하지않은 ui
- api 응답이 빠르게될때
예시 - 좋아요, 싫어요
그래서 어디에 구현할까
내 노션은 velog 처럼 editor 와 preview 를 분리해 구현했는데,
자동 저장 할때 낙관적 업데이트 해도 괜찮을것같았다.
만약 수동 저장 기능이 있다면 사용자 입장에서는 자동저장기능은 부가기능이다.(자동저장이 되면 다행이고 안되면 재수없다.)
하지만 수동저장 기능은 만들지 않았다..ㅠ
낙관적 업데이트 타임라인 그래프
수동 저장 기능 대신 fall back 을 만들었다.
fall back 적용
위 그래프를 참고한다면,
만약 낙관적 업데이트 실패시 localStorage 데이터는 살아있을것이다(remove 수행 X).
다른 노션 포스트 클릭시 fall back을 구현했다.
타임 라인 그래프
request 요청으로 가져온 데이터와 살아남은 local 데이터중 하나만 살아남는다.
배운점
fetch 로 인해, 코드가 뒤죽박죽..
fetch 의 비동기(사이드 이펙트)로 상당히 혼란스러웠다.
코드 흐름이 보이지 않았다.
작업기억 부하가 원인이라 예상했다.
프로그래머의 뇌 란 책(두분이나 추천해주신 책) 에서 의 조언이 생각났다.
stm, 작업기억의 부담을 줄이려면 손으로 도식화해라
실제로 컴포넌트 도식화를 시도했다.
확실히 답답함이 사라졌다. 👍
컴포넌트 분리
컴포넌트 분리를 생각하며 코드를 짰다.
컴포넌트당 100줄 이하로 짜려고하진 않았는데,
분리하다보니 저절로 100줄 이하가 됬다. 😂
구체적인 방법
함수형 코딩이란 책 의 조언을 이용했다.
액션을 계산으로 바꿔라
추상화 벽을 사용해라
도식화를 하자 (feat - 프로그래머의 뇌)
표식 (주석, 좋은 변수명)은 코드를 이해할때 좋지만,
도식화는 전체적인 흐름을 이해하는데 좋은것 같다.
혼자 해낼려하지말고 도움 받자 (feat - regex)
regex 레퍼런스가 있음에도,
스스로 해내려고 했다가 시간만 뺐겼다.(원하는 기능의 글이 영어로밖에 없어서 읽기 귀찮았다.)
시간안에 최적의 결과물을 내는게 좋은 개발자. (feat - 멘토님)
안된다고 혼자 해낼려하지말고 물어보거나 귀찮더라도 깊이 읽어보자. (컴포트 존에서 벗어나자. - grit)
일정을 잘게 자르자
일정계획을 했는데 너무 추상적이거나 크게잡았다.
이선협 강사님의 글을 보고 계획을 구체적으로 잘게 쪼개보았다.
훨신 계획이 잘 지켜졌다.
regex
regex 학습 사이트를 찾았다.
나중에 해야봐야겠다.
앞으로의 계획
보완
- 컴포넌트 도식화 하기
- 보완할 점 블로깅
추가 계획
- 함수형 코딩 타임라인 챕터 다시보고 정리
- regexone 다 풀어보기
