[WIL] 내일배움캠프 넷째 주_기초 프로젝트 결과물 정리

기초프로젝트

내일배움캠프 React B반 3조 The Leaders팀

팀원: 이희령, 이학경, 배성완, 박성환, 박상우

 

 

프로젝트 소개

웹페이지 명: 먹을텐데~

컨셉: 내가 먹은 음식의 사진을 올려서 사용자들과 공유한다.

 

도메인 http://yourfood.site/

 

 

github 링크 https://github.com/baesee0806/the-leaders

S.A 및 체크리스트 https://www.notion.so/S-A-Starting-Assignments-5731fd349cc94067b68b5667eb65c0b5

KPT 회고 https://velog.io/@baesee0806/%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%BA%A0%ED%94%84-Reate-B%EB%B0%98-3%EC%A1%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%9A%8C%EA%B3%A0%EB%A1%9D

 

 

와이어 프레임

 

 

 

구현 기능

• 메인 페이지에 게시물 최신순으로 불러오기
• 로그인 (소셜 로그인 포함) 및 회원가입 
• 글 작성 시 이미지 업로드 가능
• 글 수정 시 기존 데이터 불러오기 및 수정 가능
• 글 삭제 가능 -
• uid 확인하여 내가 작성한 글에만 수정, 삭제 버튼 나타남
• 프로필 이미지, 닉네임 변경 가능 (헤더의 이미지도 바로 업데이트됨)
• 프로필 페이지에서 내가 작성한 글 모아보기
• Firestore 에서 제공하는 api를 이용한 CRUD 데이터베이스 핸들링
• AWS S3와 Route 53를 이용해 도메인 연결하여 배포

 

프로젝트 진행 과정

프로젝트 시작

어떤 컨셉의 웹페이지를 만들지 팀원들과 상의 후 최종적으로 '오늘 뭐 먹었지?'라는 주제로 음식 사진을 올리는 웹페이지를 만들기로 했다. 주제를 잡고 나서는 어떤 페이지를 만들어야 할지 와이어 프레임을 짜면서 웹페이지의 구조를 파악했다. 그 후에는 각자 어떤 페이지와 기능을 담당할지 역할을 분배했다. 프로젝트를 본격적으로 시작하기 전에 코드 컨벤션을 정하고 각자 체크리스트를 작성해서 효율적으로 진행하기 위해 노력했다. 그리고 github의 레파지토리에 각자 브랜치를 생성하여 작업을 진행한 후 main 브랜치에 merge하는 방식으로 진행하기로 결정했다.

 

초기 단계

일단 주말 동안 시간을 내서 이번 프로젝트의 바탕이 되는 SPA와 FIREBASE를 공부했다. 그 후에는 각자 담당한 페이지의 기본 틀을 잡고 기능을 구현하기 위한 시간을 가졌다. 초반에는 하루에서 이틀에 한 번 정도 각자의 진행 상황을 공유했다.

 

본격적인 협업 진행

각자 담당한 페이지를 구현하며 어느 정도 기본 틀을 잡고 난 이후에는 서로 어디까지 완성했고 어떤 부분에서 어려움을 겪고 있는지를 실시간으로 공유했다. 후반부에 가서는 자신이 담당한 페이지가 아니더라도 해결하지 못한 부분이나 에러가 생길 때마다 팀원 전체가 함께 문제를 해결하기 위해 노력했다. 작은 것이라도 문제가 생길 때마다 실시간으로 공유했기 때문에 혼자 해결하려고 하는 것보다 효율적으로 프로젝트를 진행할 수 있어서 좋았던 거 같다. 이러한 과정을 통해 우리 팀 웹페이지의 전체적인 코드 구조를 파악할 수 있었다.

 

 

프로젝트를 진행하며 겪었던 문제와 해결 방법

내가 겪었던 거의 모든 문제를 TIL에 기록해두었기 때문에 링크로 대신한다.

[TIL] 내일배움캠프 React 과정 2022.11.29

[TIL] 내일배움캠프 React 과정 2022.11.28

[TIL] 내일배움캠프 React 과정 2022.11.27

[TIL] 내일배움캠프 React 과정 2022.11.26

[TIL] 내일배움캠프 React 과정 2022.11.25

[TIL] 내일배움캠프 React 과정 2022.11.24

[TIL] 내일배움캠프 React 과정 2022.11.23

[TIL] 내일배움캠프 React 과정 2022.11.22

[TIL] 내일배움캠프 React 과정 2022.11.21

[TIL] 내일배움캠프 React 과정 2022.11.20

[TIL] 내일배움캠프 React 과정 2022.11.19

[TIL] 내일배움캠프 React 과정 2022.11.18

 

 

발표 후 튜터님의 피드백

최원장 튜터님

1. 최초 팀 규칙을 정하신 부분, 룰 같은 부분. 현업과 유사하게 개발하려는 노력이 보여서 기특했어요.
2. 와이어프레임 관련 툴을 사용했는데, figma 등의 툴도 있으니 시간 나실 때 공부해 보는 것도 좋을 것 같아요.
3. 회원가입, 로그인 등 : 정규표현식 잘 들어갔고, 필수적인 내용들은 모두 깔끔하게 들어간 것 같습니다. 파이어베이스 활용을 잘했네요.
4. 마이페이지에 꼭 필요한 정보들을 모아놓아서, 사용자로 하여금 직관적으로 홈페이지의 기능을 파악할 수 있었던 것 같아요.
5. 최근에 작성한 글을 맨 앞으로.. 별거 아닌 것 같아도 이런 부분이 쌓여야 사용성 높은 홈페이지.
6. 로그인 여부에 따라 권한을 나누어 적절하게 사용자의 편의성을 확보했어요.
7. 구현 체크리스트를 그래도 거의 대부분 완성한 부분은 아주 멋졌고, 이후 프로젝트가 많이 기대가 됩니다.
8. 파이어베이스가 처음 접할 때 어려웠을 텐데도, 이 정도의 필수적인 기능들을 잘 보여줘서.... 굳굳
9. 약간의 디테일, 예를 들면 작성 시간 보여줄 때 시분초가 보이는 부분들. 그리고 필수 필드에 대한 유효성 검증 등이 제대로 됐는지 이런 부분들은 아쉽긴 하지만 발전의 여지가 상당합니다.

 

박민수 튜터님

1. 소셜 로그인, 로그인, 회원가입을 전부 잘 구현해주신 것 같습니다.
2. 필수 구현 기능들 너무 잘 구현해주신 것 같습니다. 앞으로가 더 기대되네요.
3. 다만, github에 commit log를 보니, 진짜 최종, 발표전 최최종, 일단 해봄 등의 의미를 알아보기 힘든 commit 들이 있어 이 부분은 나중에 좀 더 신경 써주시면 좋을 것 같습니다.
4. 삭제를 할 때 confirm, alert 등을 띄워주는 것은 너무 좋았습니다. 다만, 게시글 등록이나 닉네임 변경 등이 완료되었을 때는 스타일이 커스텀된 모달을 띄워서 알림을 주는데 삭제 시 띄워주는 confirm과 UI 적으로 통일되지 않아 아쉬움이 좀 있는 것 같습니다. 이를 좀 더 발전시켜서 직접 개발해서 커스텀해보면 더 좋을 것 같습니다. 그리고 크롬 특정 버전 이상부터는 iframe에서 브라우저의 confirm, alert를 막고 있기도 하니 참고하시면 좋을 것 같습니다.
5. 마지막으로 유저 권한에 따라 접근할 수 없는 페이지를 UI적으로만 접근을 막고 끝내는 것(로그인 버튼, 마이페이지 진입 버튼 등이 사라지는 것)이 아니라, url로 직접(강제로) 접근했을 때 어떻게 처리해줄 건지도 고민해보면 좋을 것 같습니다.

 

 

피드백 분석하기

마이페이지 구성

마이페이지에 대한 칭찬이 들어있어서 너무 뿌듯했다! 간단한 구조 같아 보이지만 마이페이지를 구현하기 위해 초기에 엄청나게 고생했었다😥

 

게시물 최신순 정렬

메인 페이지에 최신순으로 글을 정렬하는 것은 사실 당연한 선택이라고 생각했다. 작성 날짜뿐만 아니라 시간까지 포함해서 최신순으로 정렬하기 위해서 데이터 필드 형식을 수정하는 등의 노력이 있었다.

 

로그인하지 않았을 때 프로필 페이지, 글 작성 페이지 등 접근 차단하기

로그인 여부에 따라 헤더 자체를 다르게 설정했는데 아쉬웠던 부분은 로그인하지 않았을 때 프로필 페이지나 글 작성 페이지의 접근 자체를 막는 것은 구현하지 못했다는 것이다. 원래 구현하고 싶었던 부분이었는데 이것 외에 신경 쓸 부분이 많아 아쉬웠었는데 역시나 튜터님이 피드백에서 언급해주셨다.

 

필수 필드에 대한 유효성 검증

게시물의 작성일 뿐만 아니라 작성 시간까지 넣도록 수정해보고 싶고, 필수 필드에 대한 유효성 검증도 하고 싶었는데 시간이 없어서 못했다ㅠㅠ 오늘 먹은 음식의 사진을 올리는 것이 목적인 사이트인데 만약에 사진을 안 올리면 어떻게 되는 거지? -> 글을 작성할 때 사진을 필수로 넣도록 해야겠다! 라는 생각을 했었지만 필수 기능 구현하느라 시간이 없었기 때문에 구현하지 못해서 아쉬웠는데 필수 필드에 대한 유효성 검증 부분을 피드백으로 받았다.

 

commit message 관련

안 그래도 다른 조의 발표를 보면서 commit message에 대한 팀 규칙을 정한 것을 보고 나도 다음 프로젝트 때는 규칙을 정해서 commit 해야겠다는 생각을 했었다.

 

alert 디자인 통일성 주기

이건 마지막 날에 alert 창을 전체적으로 급하게 수정하느라 UI적으로 통일성을 주지 못했는데 이 부분을 눈치채실 줄은 몰랐다. 매의 눈을 가지신 튜터님..! 이 부분도 수정하고 싶다.

 

 

추가적으로 구현하고 싶은 기능들

프로젝트 발표는 끝났지만 아쉬운 부분들이 너무 많아서 혼자 수정하고자 하는 계획이 있다. 

1. 메인 페이지에 카테고리에 따른 네비게이션 바 추가하기
2. 원래 계획했던 메인 페이지 게시물 호버 효과 구현
3. 프로필 페이지에 내가 작성한 글 좌우 스크롤 기능으로 넘겨볼 수 있게 구현
4. 상세 페이지 안에 이전글, 다음글로 넘겨볼 수 있는 버튼 추가
5. 게시물 작성 시 카테고리, 제목, 내용, 이미지 필수 값으로 설정
6. 게시물 작성 후 닉네임 변경하면 게시물에 뜨는 닉네임도 업데이트되도록 구현
7. 이미지 업로드 시 용량 줄일 수 있는 방법 있는지 찾아보기
8. 미디어 쿼리로 반응형 웹페이지 구현!
9. 게시물 삭제할 때 '정말 삭제하시겠습니까?' 확인하기
10. 로그인하지 않았을 때 프로필, 글 작성 페이지 접근 차단
11. 게시물 링크를 버튼 클릭하여 복수할 수 있는 기능 추가
12. 메인 페이지에 페이지네이션 혹은 무한 스크롤 방식 구현

원래 계획했던 메인 페이지 디자인

 

 

회고

막판에는 주말 내내 모든 팀원이 새벽 3시가 넘어서까지 고생했을 정도로 열정적으로 매달렸었는데 프로젝트가 끝나니 시원하기도 하고 섭섭하기도 하다. 처음에는 내가 과연 할 수 있을까, 결과물을 완성할 수 있을까 막막했었는데 프로젝트가 진행될수록 팀원들에게 많은 힘을 얻었던 거 같다. 내가 해결하지 못했던 부분을 구현하는 팀원들의 모습을 보며 많이 배우기도 했고, 모두가 고민하던 문제를 내가 해결했을 때의 성취감도 느낄 수 있었다. 완벽한 결과물이라고 할 수는 없지만 우리에게 주어진 시간 안에서 모든 팀원들이 정말 최선을 다했기 때문에 후회는 없다. 이제 프로젝트가 끝나고 시간이 생겼으니 아쉬웠던 부분들을 수정하고 싶다.

 

이번 프로젝트를 통해 github의 branch 이용와 merge 기능은 제법 익숙해진 거 같다. 다만 다음 프로젝트에는 commit message 규칙을 지킨다든가 pull requests까지 활용해보고 싶은 마음이 있다. 그리고 제대로 사용해보지 않아서 막연한 두려움을 가지고 있었던 javascript를 어떻게 사용해야 하는지 이번에 감이 좀 잡힌 거 같다. 다음번에는 더욱 깔끔한 코드를 작성하기 위해 노력해야 겠다. 다음 프로젝트 때는 더욱 발전한 개발자가 되고 싶다!

 

새벽 2시까지 열코딩🔥