skdksldk1485 / life_manager Goto Github PK

Life Manager는 자기계발을 위해 자신이 자주 보고 싶은 동영상 링크를 저장해 플레이리스트를 보여주고,
플레이 할 수 있는 url 링크 저장소 서비스입니다.

이번 프로젝트는 TypeScript와 GraphQL, next.js을 공부하면서, 간단한 프로젝트를 하나 만들어 보아야겠다 다짐을 하며 시작하게 된 작업입니다.
사용자가 회원가입을하고 로그인을 하면 youtube 등에서 자신에게 도움이 되는 동영상 등의 링크를 iframe url을 입력해 생성하면, streams 페이지에서 자신이 등록한 동영상을 다시 확인해볼 수 있습니다.

아래 링크에서 프로젝트 데모 확인이 가능합니다.

• 🎯 사이트 :https://life-manager.herokuapp.com/

• 2021.07 ~ 2021.08

• Front End

  • React, Next.js, Styled-components, Typescript

• Back End

  • Apollo, GraphQL, MongoDB

• JWT 토큰과 SessionStorage를 사용하여 로그인/로그아웃 구현
• TypeScript를 적용함으로써 코드 가독성 및 안전성 향상
• GraphQL을 사용하여 동영상 stream CRUD 구현
• Material-UI를 사용한 그리드 구현
• nextjs의 useRouter기능을 통해 헤더 스타일을 동적으로 구현
• Next 기반의 SSR 웹 애플리케이션 구축
• keyframe을 활용한 스크롤 애니메이션 구현
• 랜딩페이지 scrollDown, scrollUp 구현
• Styled-component으로 웹 디자인 구성
• 미디어쿼리를 이용한 반응형웹 구현

• 회원가입/로그인/로그아웃
• 동영상 stream CRUD
• 랜딩페이지 scrollDown, scrollUp
• 반응형 웹

데스크탑, 아이패드, 모바일 각 화면에 맞춰서 반응형 웹을 구현하였습니다.

이번 Life Manager 프로젝트에서는 GraphQL, Next.js로 진행함으로써 다양한 프레임워크와 라이브러리를 경험해볼 수 있었습니다.
Node.js와 Javascript, react만으로 웹을 구현 할 때와는 다르게
이번 프로젝트에서는 Next.js와 같은 프레임워크를 도입할수록 제약사항이나 환경설정이 많아져 힘들었지만,
나중에 규모가 큰 프로젝트를 진행할 경우 로직이 통일되어 효율적이겠다고 느낄 수 있었습니다.
그리고 Next.js을 도입하는 과정에서 서버사이드 렌더링의 전체적인 흐름을 읽을 수 있었으며,
TypeScript를 적용함으로써 코드를 읽기 쉽게 도와주고, 데이터에 타입을 명시해주어 안정적인 프로그래밍이 가능하도록 하는 개발경험을 얻을 수 있었고
앞으로는 static 언어인 TypeScript를 더 공부하여 OOP에 익숙해져야겠다는 생각을 갖게되었습니다.