.jpeg?table=block&id=80efbfee-5b18-4d9b-a08a-b9c8f8377325&cache=v2)
느낀 점
😎 순요님
: 강의대로 했는데 ‘왜 안돼?’가 정말 많았다. 문제를 해결하느라 과제에 시간을 많이 못 썼다. 그래도 강의를 들은 덕분인지 과제를 할 때 기본 기능을 구현하는 데 생각보다 시간이 적게 걸렸다. 이후에는 추가 기능과 CSS만 더 집중해서 업데이트를 하고 vercel로 프로젝트 배포를 하고 싶다.
바닐라 자바스크립트로 뭘 만들 수 있는 날이 이렇게 일찍 올 줄 몰랐는데… 프론트엔드 데브매칭 과제에서 철저하게 깨졌던 과거를 생각하면 현재 많이 성장했음을 느꼈다.
배운 점 - 컴포넌트 방식으로 생각하기 - history API와 SPA 정적 파일 제공 상 에러 이슈 해결하는 방법 - npx의 의미 - 낙관적 업데이트 의미
👻 상우님
: 회사 온보딩 과제랑 .. 노션 과제.. 눈물의 1주를 보냈습니다.. 어제 밤새서 오늘 푹잘것입니다😎..
그리고 세상엔 개발 잘하는 사람이 넘 많아요 프로그래머스 수준 뭐야~!~!~!
🍔지영님:
api를 제대로 사용해보는 경험이 처음이어서 헤맸던 부분이 많았던 것 같다. 이렇게 하면 될 것 같은데? 라고 생각했던 부분이 안돼서 시간이 오래 걸리기도 했고 이게 왜 되는 거지??싶었던 부분도 있었다. 이렇게 기간을 정해서 프로젝트를 진행해본 경험이 데브코스 과제 외에는 처음이라 새로웠고 역시 일정을 관리하고 맞추는 것은 어려운 일이라는 걸 다시 한 번 느꼈다.
✨별님:
저도 반성부터… 우선 기한 내에 완성하지 못한 것과.. 강의를 들었으니 쉽게 할 수 있지 않을까 하는 안일함 ㅠ.ㅠ..
우선 프로젝트 하면서 정말 정말 부족함을 많이 느꼈고 공부를 더 열심히 해야겠다고 느꼈다.. 또 프로젝트를 좀 더 많이 해봤어야 하는 게 아닐까 하는 생각이 들었다. 이번 노션 프로젝트의 내 코드는… 이것 그자체
그래도 마지막날에는 (지연님과 같이)밤도 새고 열심히 노력했다..~~ 시간 가는줄 모르고 프로젝트 하면서 재밌긴 했어서 개발이 맞는다고 느끼긴 했다. 그치만 개발은 날 좋아하지 않는 것 같아…. 아무튼 앞으로 프로젝트는 절대 절대 늦지 않고 기한 내에 할 수 있도록 미리미리 준비해서 완성할 것이다. 반성 반성…
😆 지연님
: 우선 반성부터..
컴포넌트 구조를 명확하게 짜지 않고 프로젝트를 시작했다….
평소 공부할 때처럼 노션은~ 왼쪽엔 페이지 리스트, 오른쪽엔 편집기니까~ 왼쪽부터 시작해볼까~ 안일하게 생각하고 시작했던 과거의 나를 반성한다ㅜㅜ
컴포넌트를 세밀하게 쪼개고 파일 구조화를 노력했어야 했는데, 멋대로 구현하다가 복잡해져서 기간 내에 매우 아쉬운 결과물이 나온 것 같아 아쉽다아
그래도 api를 연동해보고, 밤도 새면서 코딩해본 경험은 매우.. 즐..거..웠다..!
어려웠던 점
😎 순요님: state 관리가 정말 더러웠다. 편집창에서 제목을 수정하는 동시에 문서 목록의 제목도 변경해야 하는 부분이 히든 과제였다. 문서 목록과 에디터를 별개 컴포넌트로 관리했는데 이를 어찌할지 고민하다가 의외로 해결 방법이 간단해서 맥이 빠졌다.
그리고 개인적으로는 UI/UX를 깔끔하게 하는 방법에 대해 고민이 많았다. 자바스크립트로 만지려니 코드가 더러워져서 싫었고, 클래스로 하려니 동적으로 스타일 변경하는 부분을 어떻게 처리할지 감이 안 잡혔다. 다른 분들의 코드를 보면서 조금씩 보완해야겠다.
👻 상우님
: 아무래도 state를 최적으로 짜는게 어려운것 같다. 랜더링이야 MarkUp으로 짤 수 있지만 state에 따라 동적으로 변경하는 UI를 만드는것 쉽지 않았어요
🍔지영님:
컴포넌트를 나누는 기준과 함수를 어떨 때 util로 빼야하는지 고민했던 것 같다. 이 부분은 바닐라 자바스크립트 뿐만 아니라 이후 리액트를 공부할 때도 중요한 부분이라서 더 공부하고 다른 분들의 코드를 보면서 배우고 싶다. 컴포넌트 간의 state가 어떻게 이동되는지 코드를 짜면서도 혼란스러워서 콘솔에 많이 찍어보고 고민했었다. 하지만 여전히 어렵다.. state를 누가 관리하면 좋을 지, 어디서 어디로 데이터나 함수를 전달할 것인지 결정하는 게 어려웠고 정답은 없겠지만 여러 방법을 해보면서 가장 좋은 방법을 찾아보고 싶다!
✨별님:
처음에 컴포넌트를 나눠놓고 시작하면 더 쉬울줄 알았는데 내가 아직 익숙하지 않은 것인지 생각보다 구현할 때 생각해야할 것도 많고 오류가 났을 때 해결하는 데 더 시간이 오래 걸렸던 것 같다. 사실 코드를 짜는 시간보다 코드를 짜놓고 콘솔 로그를 살펴보는 시간이 두배였던 듯… 바닐라 자바스크립트로 혼자서 온전히 프로젝트를 진행해본 적이 없어서 더 어려웠던 것 같다. 컴포넌트 딱딱 만들고 슉슉 합칠 수 있는 그날까지 노력하자!!
😆 지연님
: 제일 어려웠던 점은, root document 밑으로 무한정 하위 파일을 생성하는 코드를.. 작성할 때였다. innerHTML을 계속 수정시키는? 느낌이 확 와닿지 않았는데, 구글링을 통해 어느정도 해결할 수 있었던 것 같다! 그리고,, 팀원들의 파일 구조를 보는데, 세밀하게 나눈 컴포넌트들 + 그에 맞는 폴더를 적절하게 사용하는 부분 또한 어려웠던 것 같다. 오류를 해결하는 인내심도 길러야겠다.
개선할 부분
😎 순요님:
절망적인 CSS 보완하기
rich editor 구현
현재 편집 중인 Document의 하위 Document 링크를 렌더링
편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가
👻상우님:
/ 를 이용해서 페이지 만들기
router를 history를 사용하지 말고 구현해보기 (동적 라우팅을 위해..)
MD 문법 적용시켜 보기
Rich한 에디터 만들기
🍔지영님:
여러 번 서버가 호출되는 부분 수정하기
리스트 토글 추가하기
Rich한 에디터 만들기
css list 수정하기
✨별님:
버그 존재
- root 경로가 아닌 다른 경로로 들어가면 css가 적용되지 않는 현상
- sidebar header 클릭 시 기본 화면을 띄우지 않음
- editor의 내용을 수정하고 다른 document를 클릭했을 때 title만 변경되고 content가 변경되지 않는 현상
- editor 내용이 저장될 때마다 자동으로 sidebar에 렌더링 되도록 해야함
- 더블 클릭했을 때 editor title이 사라지는 현상
css 개선
document tree 토글 되게 만들기
모달창 구현
그 외 보너스 요구사항들
- Rich한 에디터 만들기
- 편집기 최하단에 하위 document 링크 추가하기
- 편집기 내에서 다른 document name으로 링크 거는 기능
😆 지연님:
api 호출 오류 잡기
컴포넌트 더 세분화하기
css 개선
contenteditable 로 편집기 구현해보기
그 외에 코드 리뷰를 통해 확인한 버그 잡기
유리님(??):
- 리액트 또는 뷰로 만들어보면 좋을 것 같네요! (개인적으로는 리액트를 추천합니다😄)