김지은
- 아쉬운 점
- 정해진 마감기한을 맞추기 급급해 끼워 넣기 식의 코딩을 했다. 개념 전체적으로 정확한 이해가 부족했고 그로 인해 능동적으로 프로젝트를 구현하지 못한 게 아쉽다. 그렇기 때문에 기능 구현은 했지만 프로젝트를 진행하면서 어떤 어려움이 있었고, 어떻게 해결했는지 잘 기억하지 못하고 있다는 것도 정말 아쉽다.
- 프로젝트 시작하면서의 마음가짐부터 잘못됐다고 생각한다.. 처음부터 겁먹어서 스스로에 대한 의심을 갖고, 그저 기본사항만이라도 최대한 구현해서 제출해 보자는 생각으로 프로젝트를 진행했다. 보너스 요구 사항은 제대로 들여다보지도 않고 시작부터 포기했다는 것에 대해 정말 큰 반성을 하고 있다.
- 팀과의 소통 없이 진행한 게 가장 아쉽다. 팀원분들께서는 프로젝트를 진행하면서 고민 중인 내용이나, 어렵다고 생각하는 부분에 대해서 공유해 주셨는데 나만 꼭꼭 숨어 있었다. 정확한 이해 없이 꾸역꾸역 진행하고 있다는 나 자신이 부끄러워서 그랬는데, 지금 다시 생각해 보면 그때의 내 태도가 더 부끄럽다. 모르는 부분에 대해 공유했다면 조금씩이라도 이해하면서 진행할 수 있지 않았을까 하는 생각이 든다.
- 느낀 점
- 전체적으로 아쉽고 반성하는 점이 가득한 프로젝트이지만, 그래도 성장했다는 생각도 든다. 어쨌든 인생 첫 프로젝트였고, 많은 걸 배우고 느꼈기 때문이다. 컴포넌트를 분리하고, 상태 관리를 하고, API를 사용하는 등 한 달 전까지만 해도 상상도 못했을 프로젝트를 구현했다. 처음 배우는 개념을 사용하고, 매일 눈물을 훔치며 포기하지 않고 어떻게든 해냈다는 게 사실은 마음이 벅차게 뿌듯하다. 이 감정을 계기로 더 공부하고 더 노력하게 되는 원동력이 생겼다. 다른 분들 PR 및 회고를 보면, 같은 기간 동안 같은 과제를 한 게 맞나 싶을 정도로 엄창난 차이가 나지만, 출발선이 다른 만큼 더 열심히 달려가야겠다는 다짐을 하게 되었다!
- 개선 계획 및 피드백
- 전체적인 복습 후 구현한 코드 다시 뜯어보기, component map 그리기
- 프로젝트 개선 (렌더링 문제 등 다양한 버그 해결, CSS 개선, 보너스 기능 구현, 방어 코드 작성 등등등)
- 기록하는 습관
- 숨지 말고 뻔뻔하게(?) 질문하기
- 프레임워크 및 라이브러리 사용하기 전, JS에 대한 이해를 높이기 위한 더 많은 공부 (Deep Dive 스터디 적극 활용)
나호석
- 어려웠던 부분
- 상태관리
- 현재 editor에서 수정 중인 내용과 서버에 전달한 후 변경된 내용을 얼마나, 어떻게 일치 시킬 것인가?
- 상태 관리를 각 컴포넌트에서 관리할지 중앙에서 제어할지.
- 트리 토글 기능
- 정보를 기억하기 위헤 localstroage에 저장하고 state를 추가로 관리.
- 상태가 조금 더 복잡해진다.
- css로 트리 구조를 만들면서 ellipsis 적용하기.
- 리치 컨텐트에서 keydown 이벤트 처리하기
- innerHTML 값을 상위 컴포넌트에 전달해서 업데이트.
- 그런데 innerHTML에 현재 발생한 keydown의 키 값이 적용이 안됨.
- 발생한 이벤트에서 js로 접근한 node의 정보와 현재 html의 값이 일치하지 않는 문제.
- 느낀점
- 버그가 많다.
- 그렇게 복잡한 구성은 아니라고 생각하는데 구현하고 실행하면서 생각지도 못한 버그들을 많이 보게 됐다. 여러가지 경우의 수를 생각하면서 코딩을 해야한다는 생각이 들었다.
- 상태 관리는 간단하게 하자.
- 현재 구현 내용이 불필요한 렌더링을 발생시키지만 유지 보수하는데는 더 용이하다고 생각한다. 솔직히 지금도 여러 버그들을 마주하게 되는데 필요한 렌더링만 하도록 코드를 구현하게 되면 그만큼 로직이 더 복잡해지고 내가 관리하기에는 쉽지 않다는 생각이 들었다. 물론 성능을 무시할 수 없지만 예전에 들었던 내용처럼 우선 구현을 하고 성능 관련 이슈가 발생하게 되면 해당 로직을 개선하는 방식이 좋다는 생각이 들었다.
- CSS의 중요성.
- 일단 CSS에 대한 지식이 많이 부족함을 느꼈다. CSS만으로도 처리가 가능한 내용들이 있었음에도 지식이 부족해 잘 적용하지 못했다. 특히 박영웅 멘토님의 flex 세션을 들으면서 노션 프로젝트에 적용할 수 있는 내용들이 보이긴 했다. 피드백 반영기간에 추가하면서 CSS에 대한 공부도 같이 진행해야겠다.
- 일정 관리.
- 이번 프로젝트를 진행하면서 나의 개발 속도를 어느 정도 가늠할 수 있었던 것 같다. 처음 2일까지는 생각보다 진도가 빨리 나가서 일정안에 많은 기능들을 구현할 수 있을거라 예상했는데 현실은 그렇지 않았다. 물론 여유있게 일정관리하는 것도 좋겠지만 현재 나의 역량을 조금 더 객관적으로 파악할 필요성을 느꼈다. 이번 프로젝트에서 가장 일정이 느려지게 된 부분은 CSS였기 때문에 해당 지식을 학습할 필요성도 같이 느꼈다.
유창헌
- 느낀 점:
- 내 맘대로 작동하는게 하나 없다. ⇒ 구현부터 스타일링까지 한번에 원하는대로 됐던 적이 거의 없었다. 항상 log 찍어보면서 현재 상태가 어떤지, 내가 어디까지 이 상태를 가지고 왔는지, 내가 어디에 있는지 계속 파악해야 했다.
- 상태관리가 너무 어렵다. ⇒ 어떻게 해야 상태를 업데이트 시킬 수 있을지, 어디서 가져와야 더 빠르게 가져올지 고민하는 시간이 많았다. 특히 비동기로 api 호출해서 가져오다 보니 방심하면 계속 <pending> 만 가져와서 비동기를 다루느라 더 힘들었다.
- 스타일링은 더 어렵다. ⇒내가 원하는 위치에 내 생각대로 와 줄 리가 없다. 각 요소들이 무슨 생각(왜 속성을 넣었는데 적용이 안돼)을 하고 있는지 알 수가 없었다.
- 엣지케이스?(예외처리)가 생각보다 많았다. ⇒ 구현이 끝났다고 생각했을 때 자꾸 버그가 하나씩 발생하고, 계속 하나씩 예외 상황이 나와서 속상했고, 내가 미쳐 찾지 못한 버그가 있지 않을까 라는 생각을 떨칠 수 없었다.
- 아쉬웠던 점:
- 기본 요구사항을 좀 애매한 시간에 끝내서 어떤 추가사항을 넣을지 갈팡질팡하며 이것저것 넣으려고 하다가 결국 아무것도 넣지 못했다. 마지막에 좀 더 집중해서 기능 하나 더 넣을 수 있었을 것 같은데 그러지 못해 아쉽다.
- 스타일링을 더 멋있게 하고 싶었는데 실력 부족으로 만족스럽지 못한 결과였다.
- 추가 구현하고 싶은 점:
- editor를 textarea로 했지만 contentEditable, rich content 추가하기
- Nav에서 토글기능 구현하기
- 가상상태로 버튼들 위에 hover 했을 때 적절한 문구 띄워주기
- css 더 예쁘게(영웅님 세션 참고)
- 총 평: 바닐라 자바스크립트로만 프로젝트를 진행해본 것은 처음이었는데 구조 짜는 것부터 구현까지 다 새로워서 어려웠고, 개인적으로 만족스러운 코드는 아니었지만 바닐라로만으로도 이렇게 멋진 결과물을 만들 수 있다는 것이 흥미로웠고 재미있었다. 또, 어디서부터 시작할지 몰라 원래 시도조차 못하고 있던 것이었는데 이렇게 한걸음 뗄 수 있어서 좋았다.
임재현
- 총평
- 생각보다 어려워서 처음에 머리속에서 구상했던 것이 맘처럼 구현되지 않았다
- 나는 생각보다 렌더링 최적화 부분이나 state 관리하는 로직을 잘 모르고 있었다
- 전체적으로 잘했다기보단 아쉬운 점이 많이 남은 프로젝트였다
- 구현하며 중점적으로 생각했던 것
- API 호출 최대한 줄이기 → SPA 형태이므로 document 상태를 client 내에서 모두 계산하는 방식
- 의미없는 렌더링 줄이기 → root documents 상태로만 관리했을 때 하위의 document 추가, 삭제 시에도 Sidebar 전체를 재렌더링 하는 것을 피하고 싶었습니다 → 즉, 중앙 집중 state 관리가 아닌 각 컴포넌트마다 본인 관심사에만 해당하는 documents만 관리, 재렌더링하게 하고 싶었습니다(트리 구조이므로)
- setState -> render() 흐름 최대한 유지하기 → state를 통한 렌더링이 아닌 외부에서 DOM 조작을 하고 속성을 변경하는 것은 피하고자 했습니다(document 선택하는 SelectPage, changeTitle 등의 함수는 시간이 부족할 것 같아서 일단 구현해봤습니다)
- 좋았던 점
- 최대한 구글링을 피하고 스스로 state 관리하는 부분에 대해서 붙잡고 삽질을 계속 한점. 그래서 어떤 부분이 문제일 수 있고 어느 컴포넌트 구조로 해야지 단점을 줄일 수 있겠다 라는 고민을 계속 할 수 있었습니다
- 순수 자바스크립트로 프로젝트를 진행하다보니 생각하는 Depth를 좀 더 깊게 해야지 구현할 수 있는 것들이 많아서 해야 하는 고민들이 많아져서 오히려 더 배울 점이 많았습니다.
- 아쉬웠던 점
- 이전 과제에서 배웠던 방어 코드, validation, 낙관적 업데이트 등을 적용하지 못한 점.
- 컴포넌트 구조를 제대로 설계하지 못해서 코드 가독성 및 state 관리가 어려워졌다고 느껴졌습니다
- 렌더링 최적화를 목표로 시작했지만 최적화는 커녕 오히려 메모리가 낭비되고 있는 것을 발견해서 리팩토링 할 것이 늘어났습니다
리팩토링 리스트
API caller에서 try...catch 적용하기
state, new Function 방어 코드
토글 상태 기억하기
낙관적 업데이트 적용하기
title 실시간 수정시 sidebar state에 저장하여 렌더링하기
render() 할때 변경된 사항만 적용하기
데이터 흐름이 단방향으로 될 수 있게 리팩토링하기(onStateChange 등의 함수 제거)
Rich editor 구현하기
SidePage 컴포넌트에서 document에 해당하는 객체 따로 컴포넌트로 분리하기
observer 패턴에서 메모리 누수되는 부분 해결하기
웹 접근성 구현하기(semantic, aria, label 등)