기동팀 프로젝트 회고

회고 진행방식: KPT 방식

Keep

Problem

Try

노션 클로닝 프로젝트 회고

Keep

🐰 다연

• 바닐라 JS만을 사용하여 하나의 결과물을 완성시키는 경험이 처음이라 뜻깊고 많은 것을 배울 수 있었다.

• 컴포넌트 구상과 계획이 가지는 중요성에 대해 느낄 수 있는 기회였다.

• CSS를 사용하여 노션이 가지고 있는 스타일을 그대로 적용하면서 가진 지식을 활용한 점이 좋았다.

🐮 명재

• Notion Project를 Vanilla JS에 진행하면서 선언적 프로그래밍으로 구축하는 방법에 대해서 배울 수 있는 시간이었습니다.

• DOM을 직접 업데이트하는 방법이 아닌 상태 관리를 통한 DOM 업데이트에 대해서 깊이 있게 고민하고 스스로 Project에 적용하는 시간을 통해 상태 관리를 효율적으로 할 수 있는 방법을 배울 수 있었습니다.

• 컴포넌트를 분리하는 방법에 대해서 배울 수 있는 시간이었습니다.

• Project를 진행하면 팀원들과 문제점에 대해서 소통하면서 공통의 문제가 발생하면 서로의 피드백을 통해 Project에 적용하는 시간을 통해 소통에 대한 중요성을 배울 수 있었습니다.

🐯 동우

• 컴포넌트 구조를 먼저 나누고, 마크업 구조를 짠 후 개발을 시작한 것

• 노션을 써보면서 기능을 하나씩 나눠서 개발하려고 한 것

• 낙관적 업데이트를 적용시키려고 많이 노력한 것

🐔 대현

• API를 통해 데이터를 받거나 생성하거나 삭제하는 것이 익숙해졌다. 그와 더불어 async await에 대한 활용도 조금 나아진 것 같다.

• 모듈화를 통해서 export하고 import하는 과정들이 익숙해졌다.

• 미숙하지만 컴포넌트를 직접 설계해 보고 구현해 보는 일련의 과정을 통해 컴포넌트에 대한 감을 익힐 수 있었다.

• CSS를 처음 적용해 본 경험이 좋았습니다.

🐮

Problem

🐰 다연

• 함수 호출 과정에서 내가 원하는 순서대로 호출하지 못했다. 비동기와 관련된 문제라고 생각된다.

• 처음에 프로젝트하는 과정에서 컴포넌트 구상을 하지 않고 진행했더니 기능을 추가할 수록 코드가 복잡해지고 깔끔하지 못했던 것 같다.
• 그래서 중간에 새로 시작하며 컴포넌트 구상을 체계적으로 하기 위해 노력했다.

• Document 리스트가 리렌더링 되어도 toggle on/off 상태가 유지될 수 있는 방법에 대한 어려움이 있었다.

🐮 명재

• 생성자 함수로 컴포넌트를 만드는 과정을 클래스로 대체하는 과정에서 지역 변수를 사용하기 어려워서 지역 변수를 this로 참조해야 하는 문제가 있었습니다.

• App 컴포넌트에서 Sidebar, PostEditor로 상태를 내려주는 과정에서 하나의 상태가 업데이트되면 전체 Application이 업데이트 되는 문제가 있었습니다.

• TypeScript를 사용하면 예외처리 로직을 많이 줄일 수 있었지만 미숙한 TS 지식을 가지고 있어서 따로 적용하지 못했습니다.

🐯 동우

• 추가 요구사항(rich Editor, 하위 링크 렌더 등)들을 구현 못했다.

• state관리가 제대로 안된 것 같다.
• 상위 Product에서 모든 state를 갖고, 다른 컴포넌트 들에서 해당 특정한 액션을 하면, state가 변화하는 느낌으로 짜려고 했지만 state가 바뀌면 전체 화면이 바뀌게 되는 문제가 있었다.

• sideBar를 유지시키려고 많은 노력을 했지만 실패했다.
• localStorage에 넣어두고 유지시키는 노력을 하고 있는 중이지만 삽질의 늪에 빠지는 중이다.

• 폴더 구조나 파일을 좀 더 명확하게 나누고 싶었지만 아직 못했다.

• 제대로 하지도 않아놓고 시간이 충분하다고 믿었던 내 자신이 아쉽다.

• 테스트 코드도 작성해보고 싶었는데 못해서 아쉽다.

🐔 대현

• commit을 제대로 하지 않았다.
• 코드를 작성하면서 처음에는 commit을 하면서 했으나, 점점 코드들을 지웠다 작성했다를 반복했고 수정되는 내용도 많았다.
• 나중에는 코드를 수정하는데 비교 대상이 없어 시간이 더 많이 걸렸고, 그동안 내가 코드를 구현하는 과정들을 기록하지 못했다.
• 최대한 commit 컨벤션도 지켜가며 git을 활용해야겠다는 생각이 많이 들었다.

• 시간상의 이유로 History API를 추가하지 못했다.

• 첫 페이지를 열었을 때, 아무런 document도 선택하지 않은 상태에서 보여지는 편집기에 title이나 content를 넣으면 아무런 예외 처리 없이 값이 들어가고 404 Error를 발생시키는데, 이 부분을 처리하지 못했다.

• 컴포넌트들을 잘못 구성하여 필요한 하위 컴포넌트에서 상위 컴포넌트로 id 값을 다시 전달하거나, 메서드들을 호출하기 위해 커스텀 이벤트를 남발했다.

🐮

Try

🐰 다연

• 함수 호출 방식에 대한 수정을 하고, Document 리스트 유지 기능에 대한 고민을 더 해보아야겠다.

• 팀원과 멘토님의 코드 리뷰를 바탕으로 부족했던 점에 대한 리팩토링을 진행할 것이다.
• 반복되는 코드를 모듈화 하여 재사용할 수 있도록 수정할 것이다.
• 예외처리가 되지 않은 부분이 있다면 고민해보고 추가할 것이다.

• 추가 구현사항을 적용해볼 것이다.
• rich editor 부분을 적용해보면 좋을 것 같다.

• 위의 모든 사항들이 적용된다면 추후 netlify를 사용해 배포해볼 것이다.

🐮 명재

• 리팩토링을 통해 directory의 구조를 명확하게 분리하였습니다.
1. 기존의 Project는 App 컴포넌트 자식 컴포넌트로 Sidebar Page, Post Page에 모든 기능 로직을 작성하면서 로직의 가독성이 떨어지는 문제를 기능별로 컴포넌트를 분리해서 가독성 있는 로직을 만들었습니다.
2. page 별로 최상위 컴포넌트를 Container 컴포넌트로 지정하여 Side Effect 관련 로직을 작성하고, 재사용 가능성이 있는 컴포넌트를 분리하는 작업을 통해 리팩토링을 했습니다.

• AWS 배포 학습을 위해 Notion Project를 AWS에 배포하는 과정을 진행했습니다.

• 하나의 상태만 변해도 모든 Application이 리렌더링 되는 문제를 renderable로 구분하여 page 별로 리렌더링될 수 있게 변경하였습니다.

• Local Storage를 사용해서 낙관적 업데이트 방식을 채택하여 UX 개선을 하였습니다.

🐯 동우

1. SideBar 유지 기능을 제일 최우선으로 시도해보고 있다.
- localStorage로 구현해보자 - 이 기능이 모든 기능 완성도의 시초가 될 것 같다.

2. state관리를 좀 더 명확하고 확실하게 하기 - state 이동을 정리해놓기

3. 폴더 구조를 좀 더 명확하게 나누고 리팩토링 하기 - container 들 page로 나누기 - 쓸데 없는 코드 제거 (console.log() 등) - 상수 정리, utils 정리 등

4. 추가 기능구현사항 해보기 - rich editor, 하위 링크 렌더 구현 해보기

5. 배포해보기 - vercel로 일단 맛보기 하고, github action 공부하며 적용해보기

🐔 대현

• SPA로 만들기
1. History API를 적용

• 중복되는 코드 수정
1. 사용되지 않는 import한 내용들 삭제

• 예외 처리를 적용
1. 첫 페이지에 document를 선택하지 않은 상태에서의 editor에 값을 입력한 경우
404error가 발생하는데 이 부분에 대한 예외 처리 필요

• 리팩토링
1. 더 나은 컴포넌트 구조를 생각해보고 정리하기
2. 고차함수를 활용하는 등 조금 더 효율적이고 깔끔한 코드를 작성할 부분은 없었는지 확인하기

🐮

기동팀 5주 간의 회고

🐰 다연

• 좋은 팀원들을 만나서 긍정적인 영향을 많이 받았다.
• 학습과 관련된 지식도 얻었고, 사람들 간의 좋은 교류도 할 수 있어 잊지 못할 것 같다.

• 내가 관심 있고 좋아하는 분야에 대한 공부를 하다보니 시간이 너무 빠르게 지나갔다.
• 정신 없이 지나갔다고 해야할까 이 시점에 한 번 그동안 배운 것에 대해 다시 복습하는 시간이 필요할 것 같다.

🐮 명재

• 5주 동안 많은 도움만 받아서 미안한 마음이 들고 어려운 문제가 발생하면 함께 소통하고 해결해 나가면서 서로 의지할 수 있는 시간이었습니다.

• 성실하게 학습하는 팀원들을 보면서 동기부여를 할 수 있는 시간이었습니다.

• 온라인으로 진행해서 쉽게 다가가기 어려울 수 있었지만 먼저 다가와 주는 성격을 가진 팀원들의 도움으로 빠르게 친해질 수 있었습니다.

• 다른 팀에 가도 저를 잊지 말아주세요. 🥹🥹🥹

🐯 동우

• 좋은 팀원분들을 만나 시간이 금방 지나가버린것 같아 아쉽다.

• 아직 많이 부족하구나를 절실히 느낀 5주였다.

• 좀 더 내 생활패턴이나 공부하는 습관을 들이는데 노력을 해야되겠다고 생각했다.

🐔 대현

• 좋은 팀원들과 함께 공부하니 지친다는 생각보다는 힘이난다는 생각이 많이 들었다.

• 열심히 노력하는 팀원들을 보고 스스로 되돌아보고 반성하고 더 열심히 공부할 수 있는 좋은 시간이었다.

🐮