adapterz/3-frontend-CodeUnicorn

인터넷 강의 사이트 프론트엔드 서버 입니다.

코드유니콘

진행 기간 : 22.05.09 ~ 22.07.15

✅ 프로젝트 소개

⭐️ 무료 온라인 강의 사이트 ⭐️

🛠 Tech Stack 🛠

               

배포 URL

https://codeunicorn.kr

✅ 프로젝트 구조

모듈	설명
Components	모든 컴포넌트를 관리하는 디렉토리
Pages	라우팅 기능을 담당하는 디렉토리
Core	API 모듈을 관리하는 디렉토리
Slices	리덕스 모듈을 관리하는 디렉토리
Interface	재사용 가능한 interface를 관리하는 디렉토리
Config	SEO 등 설정 관련 모듈을 관리하는 디렉토리

✅ 프로젝트 주요 기능

⭐️ 메인 페이지

• 베너에서 신규 강의를 보여줍니다.
• 카테고리를 선택하여 다양한 강의를 볼 수 있습니다.
• 추천 강의를 보여줍니다.
• 검색을 통해 원하는 강의를 찾을 수 있습니다.
  

⭐️ 회원가입, 로그인

• 소셜 로그인을 통해서 회원가입, 로그인 할 수 있습니다.
  

⭐️ 전체 강의 조회

• 카테고리별 전체 강의를 볼 수 있습니다.
  

⭐️ 강의 검색

• 원하는 강의를 검색할 수 있습니다.
• 공백 입력 후 검색시 모든 강의를 보여줍니다.
  

⭐️ 유저 프로필 수정

• 프로필 이미지 및 닉네임을 변경할 수 있습니다.
  

⭐️ 관심 교육 등록 및 강의 수강

• 유저는 로그인 후 마음에 드는 강의를 관심 교육으로 등록할 수 있습니다.
• 유저는 로그인 후 강의를 수강할 수 있습니다.
• 유저는 마이페이지에서 관심 교육, 보고 있는 교육 목록을 확인 할 수 있습니다.
  

❗️ 프로젝트 이슈

1. Maximum update depth exceeded

https://www.notion.so/Maximum-update-depth-exceeded-93b94c9fdedd465986186a784f2616e4#ae9d56bbef65406eb38acd2583f4d7fe

2. 새로고침시 redux의 상태를 유지하지 못하는 이슈

https://rigorous-nutmeg-f1f.notion.site/Store-80b9e8e8a2734838a935ee65dbeba378

✅ 프로젝트 UI

✅ 프로젝트 시연 영상

🔗 (링크 추가 예정)

✅ 프로젝트 회고

⭐️ 1. 개선하고 싶은 부분

1. 토스트 메시지 컴포넌트 보완
   • 개선 방향 : 현재 토스트 메시지 컴포넌트는 state로 message만 가지고 있다. 만약 message뿐만 아니라 type, color, time과 같은 state를 추가해준다면, 타입 or 중요도에 따른 토스트 메시지의 색상, 보여지는 시간을 지정할 수 있어서 UX에 긍정적인 영향을 줄 수 있다고 생각한다.
2. 불필요한 리렌더링이 발생하는 컴포넌트 성능 최적화
   • 개선 방향 : 현재 강의 시청 페이지에서 커리큘럼 변경 시 전체 페이지가 리렌더링 되는 등의 불필요한 리렌더링이 발생하는 컴포넌트들을 찾아서 컴포넌트를 분리하고, state, props가 변경되지 않는다면 리렌더링이 발생되지 않도록 성능 최적화를 진행하고 싶다.
3. 기능 추가
   • 개선 방향 : 정해진 기간 안에 빠르게 MVP 기능만을 선정하여 개발했기 떄문에 프로젝트를 진행하면서 추가하면 좋을 것 같은 기능들을 따로 정리해놨는데, 추후에 시간적인 여유가 생긴다면 더 좋은 서비스를 제공하기 위해 리뷰, 강의를 들으면서 내용을 정리할 수 있는 메모장 등의 기능을 추가해보고 싶다.

---

⭐️ 2. 프로젝트를 진행하면서 느낀점

1. 재사용 가능한 컴포넌트 정리 https://rigorous-nutmeg-f1f.notion.site/7b85682001834dabacb29b024f168166

2. props 통한 값 전달 방식에 대한 고민 https://rigorous-nutmeg-f1f.notion.site/props-9196a9fac23a4cc7b3c62ce9b380fd5d

3. 상태관리 라이브러리의 필요성 및 선택 https://rigorous-nutmeg-f1f.notion.site/dc39d83392be4e49aad80b519f368300

4. CSR, SSR, SSG 적용 고민 https://rigorous-nutmeg-f1f.notion.site/CSR-SSR-SSG-05d7f8be1c494663ac57845414420538

5. SEO 최적화를 위한 고민 https://rigorous-nutmeg-f1f.notion.siteSEO-3e5e7f1a9a0143d39bed4da358e7a9c0

6. 이미지 최적화에 대한 고민 https://www.notion.so/Next-Image-Optimization-f73e5b9216bb42f09c89e1bc8128660b#13ddba1f09c144078cc4925ee9ee410d

✅ 프로젝트 버전 기록

배포 후에도 추가 기능 및 발생하는 이슈에 대한 버전관리를 진행하고 있습니다.