프로젝트 소개

작년 5월에 노마드코더 JS챌린지에 참여했던 제 프로젝트를 업그레이드하고 싶어서 리액트로 다시 한번 만들어 보았습니다. 제가 아직 firebase를 잘 다루지 못해서 테스트 아이디/비밀번호를 준비하지는 못했습니다. 피드백을 받고 더 열심히 하고 싶어 우선 올려보려합니다.

제가 만들면서도 아직 부족함을 많이 느끼지만, 많은 피드백을 받고 더 열심히 공부하고 싶습니다.

많은 관심 부탁드립니다 👍

프로젝트 주소:(https://choi2021.github.io/lalaland/)

프로젝트 설명

1. Login 페이지

로그인은 firebase를 이용해서 구글,페이스북,깃헙아이디를 이용할 수 있습니다.

2. Home 페이지

• To-Do list

  작년에 만들 때에는 To-Do-list는 사용자의 local storage에 저장되게 설정했지만 이번에는 firebase기능을 적극적으로

  사용하고 싶어서 firebase의 real-time database와 연결해 로그인한 사용자의 to-do를 불러오고 업데이트/삭제 기능까지 추가했습니다.

• 위치와 날씨

  날씨는 전 버전과 동일하게 openWeather API를 이용했습니다. 제가 그당시에는 문서를 읽는게 더 어려웠어서 잘 몰랐지만 자체적인 아이콘 추가 API가

  제공되는 것을 이번에 알게되어 일일히 아이콘을 추가하는게 아니라 API를 이용해서 추가했습니다.

• 시간/메뉴바, 라라랜드 관련 링크들, 음악플레이어

  전 버전과 동일한 코드 로직과 애니메이션으로 구성했습니다.

3. Videos 페이지

전 버전에 너무너무 넣고 싶었던 동영상 기능을 넣었습니다. 유튜브에 올라와 있는 다양한 라라랜드 영상중 가장 인기 있는 12개를 먼저 보여주고, 버튼을 통해 세부적인 세가지 테마:OST making, famous scene으로 관련 영상을 불러올 수 있게 했습니다. 영상 클릭시 세부 영상으로 넘어가 유튜브 영상을 볼 수 있습니다.

4. Detail 페이지

비디오 페이지에서 클릭한 영상의 비디오코드를 react-router를 통해 불러와 연결해 비디오로 보여줍니다.

5. Photo 페이지

전버전의 경우 자바스크립트만으로 슬라이더를 만들어보고 싶어 슬라이더로 구성했지만 이번에는 자연스럽게 사진들이 지나가는 애니메이션으로만 구성했습니다.

* 마지막으로

노마드코더를 통해서 코딩을 처음 제대로 공부해보고, 무언가를 만든다는 것의 즐거움을 느꼈습니다. 제 전공과는 달랐지만, 계속해서 개발을 하면서 살고 싶다는 마음에 졸업후에 계속해서 공부하고 있습니다. 공부하다보면 한번씩 '나는 안되는 걸까' 생각이 들고 자괴감에 빠지기도 하지만, 노마드코더 챌린지에 걸린 제 프로젝트를 보고 '나는 인정받았다고' 저에게 '잘할 수 있다'고 혼자 칭찬하고 토닥이곤 합니다. 이 글을 통해서 너무너무 좋은 강의만들어준 니꼬와 노마드코더에게 감사하다고 전하고 싶습니다. 부족한 글 읽어주시고 프로젝트 봐주셔서 감사합니다 ㅎㅎ