💻 프로젝트 소개
컨텐츠를 무제한으로 시청할수 있는 사이트인 NEFLIX를 모티브로 삼아 영화 컨텐츠를 제공하는 사이트를 기획하였습니다.
📅 프로젝트 기간
2022.09.08 ~ 진행 중
리팩토링:
☃️ 팀 구성
- Back-end: 박진성
- Front-end: 이나은
💡 기술 스택
👉🏻 Common :
- Git
- Github
👉🏻 Back-end :
- Django
- PostgreSQL
- JWT
- AWS
- EC2
👉🏻 Front-end :
- React.js
- Redux-Toolkit
- FireBase
- Styled-components
🖊 프로젝트 진행 방식
기획을 마치고 큰 덩어리 단위의 레이아웃을 먼저 짜기 시작했다. 기본이 되는 페이지들을 만들고 그 안에 컨텐츠들을 채워 넣었다. 프로젝트를 할때 습관적으로 구글링을 했다면 이번 프로젝트에서는 최대한 혼자 힘으로 구상하고, 문제에 접근을 하고, 해결하려고 노력했었다. 또한 영어문서를 읽는 것에 두려움 없이 다양한 자료들을 섭렵하여 올바른 결과를 도출해내려고 했다. 리팩토링하는 과정에서 개인 사정으로 인해 시간이 지체되었지만 코드를 한번 더 읽고 복습하는 과정에서 내 코드를 진짜 나의 코드로 만드는데 도움이 되었다.
📸 구현 목록
✅ Nav & Footer & Main
- 로그인 성공 여부에 따라 SIGN UP, SIGN IN / LOGOUT / UserProfile / ProfileList 버튼
동적으로 바꾸기
Pages
✅ [SIGN UP]
- 이름, 닉네임(2자 이상), 이메일('@', '.'포함) 유효성 검사, 비밀번호(특수문자, 숫자, 소문자, 대문자 혼합 8자 이상) 유효성 검사, 체크박스 체크여부에 따른 버튼 활성화 / 비활성화 기능 구현.
- FireBase를 이용한 유저 정보 저장 및 관리.
✅ [SIGN IN]
- FireBase에 저장 된 유저 정보가 아닐 경우 로그인 실패, 오류 메시지 출력.
- 로그인 성공 시 프로필 생성 페이지로 이동.
✅ [AddProfile & UserProfile & SelectProfile]
- 닉네임 등록을 통한 프로필 생성.
- 닉네임 중복확인.
- 키즈 프로필로 생성 가능.
- 프로필 생성은 최대 3개까지 가능
- 유저프로필 관리 페이지에서 프로필 삭제 및 생성 가능
- 프로필 선택시 컨텐츠 페이지로 이동, 키즈 프로필일 경우 키즈 컨텐츠로 이동.
✅ [ContentsList]
- Slick Slider를 통한 무한 슬라이더 및 슬라이더 구현
- Hover시 제목, 평점, 소개 레이아웃 구현
✅ [반응형 디자인]
- 미디어쿼리를 통한 디바이스 별 반응형 디자인 구현
🤷🏻♀️ 개인적인 소감
✨ 좋았던 점
-
초반에 진행했던 프로젝트보다 리팩토링을 하면서 많은 걸 느끼고 배운 프로젝트. 특히 프로필 생성을 구현하는데 있어서 어려움을 느꼈는데 리팩토링때 문제를 해결하고 기능을 추가하는 과정에서 큰 재미와 성취감, 배움을 얻었다. 겁내기에만 급급했던 초반에 비해 문제에 하나씩 접근을 하면서 해결했던 리팩토링. 하면 된다는 너무나도 당연한 말이지만 나는 스스로를 깎아내리고 할 수 없다는 생각을 은연중에 하고 있었던 것 같다. 문제를 해결하는 과정에서 이 기능을 추가하면 어떨까? 레이아웃을 조금 더 수정하면 심미적으로 낫지 않을까? 하는 생각을 계속해서 했다. 물론 지금도 100% 만족하진 못하지만 구현하고 싶었던 기능들을 거의 성공적으로 구현하게 되었고 자신감을 얻게 되었다. 다시 한번 나를 믿을 것, 현실에 안주하지 않을 것.
-
리팩토링을 거치며 크고 작은 기능들이 추가 되었고 레이아웃의 수정과 반응형 디자인 작업이 이루어졌다. 위 작업들을 거치며 사용자의 입장에 서서 많은 생각을 하게 된 것 같다. 내가 만든 레이아웃이 사용자의 입장에선 어떻게 보일까? 가독성이 떨어지진 않을까? 좋은 UI, UX란 무엇일까 하는 고민을 끊임없이 하였다. 개발자의 역할은 단순한 프로그래밍만이 아닌 문제에 접근하고 그 문제들을 해결하는 태도에 달려 있다는 것을 절실하게 깨달았다.
☄️ 아쉬웠던 점
-
디자인 적인 문제에 있어서 모티브로 삼은 넷플릭스를 클론하는데 급급하여 나만의 개성이나 특색을 녹여내지 못한 아쉬움이 있다.
-
프론트엔드 작업을 혼자 하는 과정에서 많은 부분을 스스로 기획하고 구현해냈다는 뿌듯함과 재미가 있었지만 작업을 하는 시간이 길어질수록 지금의 방향성이 맞는 것인지, 놓치고 있는 부분은 없는지 계속해서 의심이 들었다. 또한 개인 프로젝트를 연달아 하면서 협업의 능력이 떨어지진 않을까 하는 걱정도 들었다. 개발 능력의 반은 협업이기에 더욱 그러하였다. 뭐든 장단점이 있듯이 지금의 나도 그렇지 않은가 싶다. 그래도 아쉬움 보단 성취감이 배로 남은 프로젝트이기에 이번 프로젝트가 남긴 아쉬움은 다음 프로젝트를 통해 해결하기로 마음 먹었다.
🤍 프로젝트를 마치며
아쉬운 점이 남더라도 분명한건 성장하고 있다는 것. 내가 짠 코드를 진정 내 것을 만들기 위해 복습과 리뷰 그리고 배움을 게을리 하지 말 것.
