온라인 코스 서비스 새로 만들기(courseology)

♻️이번에 다시 만들어 볼 서비스는

• 기존 서비스 : https://github.com/YOONLEEVERSE/onlinecourse-front

• 온라인 강의를 등록하고 관리할 수 있고, 수강이 가능한 서비스이다. 유튜브에서 유용한 강의를 모아서 강의 리스트로 만들어 한 페이지에서 쉽게 볼 목적으로도 사용할 수 있을 것 같았다.

🤔 왜 다시 만들게 되었나?

• 취준생이라는 생각을 하니 마음이 조급해지기만 했고 단기간에 많은 서비스를 구현해야 한다고 생각했다. 그래서 graphql 이나 react 구조를 처음부터 꼼꼼하게 설계하지 못했고 후반부로 갈수록 코드는 더러워져만 갔다. 프로젝트를 진행하면서 내가 옳게 구현하고 있는건가,.? 나는 왜이렇게 못하지..?라는 생각에 좀 슬럼프를 겪으면서 해당 서비스의 구현이 많이 딜레이 됐다.
• 겨우겨우 필수 기능 구현이 완료됐지만 구조며 코드며 하나도 마음에 드는 게 없었다. 좀 더 깔끔한 설계와 코드가 필요하다고 생각한 나는 원티드 프리온보딩 코스를 듣게 되었다. 원티드 프리온보딩 프론트엔드 코스를 진행 하면서 내 코드의 문제점을 많이 파악하게 됐는데 기존 프로젝트를 보완해보고 싶다는 생각이 들었다. 그래서 제일 처음 재구축 할 프로젝트로 이 온라인 코스 서비스를 선택하게 되었다.
• 제일 최근에 만든 서비스라 어떤 의도로 만들었는지, 어떻게 생각하면서 그 부분을 구현했는지 기억이 제일 잘 나서 잘못 생각했던 부분을 고치기 가장 쉬울 것 같았다. 그리고 구조 분리를 시도해보기도 했던 때라, 그나마 폴더 구조가 정리 돼있어서 과거의 코드와 현재의 코드를 비교해보기 좋을 것 같았다.

📖새로 만들 때 원칙

1. 단일 컴포넌트에서는 되도록 하나의 일을 하도록 하자
2. common한 함수/컴포넌트와 한 컴포넌트에 종속돼있는 함수/컴포넌트를 잘 구분지어 정리하도록 하자
3. useRef를 써서 리렌더링을 좀 줄일 수 있도록 해보자
4. 혼자 하는 프로젝트지만, commit convention, code convention을 잘 지키면서 구현하자
5. 무작정 구현하지 말자. 충분히 생각을 해보고 설계를 마친 후에 구현하자! 설계가 훨씬 중요하다. UX도 충분히 고려한 설계일 것
6. Theme Provider를 이용해 theme을 관리하도록 하자
7. 클린한 코드를 짤 수 있도록 늘 노력하자
8. 리팩토링은 필수!
9. UI 라이브러리에 의존하지 말 것. 웬만하면 내가 다 구현하자
10. 폴더 구조를 깔끔하게 가져가자
11. 통신 모듈은 항상 그냥 쓰지 않는다. Wrapper로 한 번 묶어줄 것(에러 핸들링을 하기 위함)
12. 테스트 코드를 작성해보자
13. 최적화를 해보자(useMemo, useCallback, Debounce, Throttle)