패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프 javascript 과제 후기 동물원 동물관리페이지

[과제 소개]

지금 수강하고 있는 패스트캠퍼스 X 야놀자: 프론트엔드 개발 부트캠프에서 두번째 과제로 javascript와 firebase 혹은 aws를 활용한 사진관리 기능이 있는 페이지를 만드는 것이 과제였고 나는 firebase를 활용하여  동물원 동물관리 페이지로 주제를 정하고 진행했다.

 

• 프로젝트 링크 :https://third-bb997.web.app/index.html/

Welcome to Firebase Hosting

[동물 관리 페이지 소개]

로그인 페이지

• 가입 및 로그인, 로그아웃 기능이 있습니다.
• 로그인이 성공적으로 완료되면 로그인상태일 때 navbar에 가입시 작성한 name이 로그아웃 전까지 나타납니다.
•  
•  
• 로그인전

• 로그인후 (navbar에 이름이 나타납니다)
  
  

등록 페이지

• 동물들의 정보 및 사진을 등록하기 버튼을 통해 등록합니다
  
  

메인 페이지(동물소개)

• 등록된 동물들의 이미지나 정보들을 볼 수 있습니다.
• 수정 및 삭제버튼을 통해 수정페이지로 이동 게시물 삭제 등을 진행할 수 있습니다.
  
  

수정페이지

• 각 동물별 정보 및 사진을 수정할 수 있는 페이지로 수정 후 수정 버튼을 클릭하면 수정된 메인페이지에 수정되어 나타납니다.
  
  

프로젝트를 진행하면서 느낀점

1.유저 플로우를 미리 생각하자!

이번 과제를 user flow를 생각하지 않고 막연하게 진행한 결과 로그인에 따른 flow를 구현하는데 코드를 수정하고 또 수정하고 이러한 불편한 부분들을 겪었다. 앞으로 서비스의 틀을 짤 때 user flow를 생각한다면 틀의 구조를 좀 더 상세하게 짤 수 있을 것 같다.

2.공식문서를 읽는 습관을 들이자

이번 파이어베이스 공식문서를 읽으면서 생각보다 보고 이해하거나 코드를 짜기가 매우 힘들었다 . 평상시에도 다른 모르는 부분이나 반영해야할 일이 생길 때 단순 searching이 아닌 library나 framework들의 공식문서를 자주 읽으면서 반영하는 습관을 들이는 게 좋은 것 같다.