배포 주소

배포 사이트

블로그 회고 링크

💻 설치 방법

yarn/npm install
yarn/npm start

📋프로젝트 사진

로그인 화면

---

메신저 화면

---

프로필 화면

---

투 두 리스트 화면(22년 3월 15일 업데이트)

변경 전

변경 후

---

📝 기능

회원가입 , 로그인 , 소셜 로그인 기능 구현

• firebase를 이용한 회원가입과 로그인을 구현하였고 구글과 깃허브를 통한 소셜 로그인을 구현했습니다.

메신저 기능 구현

• firebase 백앤드를 통해 다른 사람들의 글을 읽을 수 있고 자신의 글을 쓸 수 있습니다.
• javascript의 reader 기능을 이용해 이미지 파일의 URL을 백앤드로 보내 업로드하고 글을 불러올 때 URL을 불러와 사진을 보여지게 구현하였습니다.
• 자신이 작성한 글에만 삭제, 수정 버튼이 보이도록 구현하였습니다.

프로필 수정하는 기능 구현

• firebase 백앤드를 통해 자신의 보여지는 이름 ,프로필 이미지를 변경할 수 있습니다.

투두리스트 기능

Firebase를 이용한 백앤드 구현

• firebase의 필터 기능을 이용하여 작성자 자신이 작성한 글만 보여지게 하여 투두리스트 기능을 만들었습니다.
• firebase의 setDoc을 사용하였고 스프레드 문법으로 기존의 데이터와 수정된 데이터를 객체로 만들어 서버 데이터에 보냈습니다.

라이브러리 없이 만든 달력 데이터

• 달력을 만들어 월에 해당하는 시작하는 요일과 일 수에 맞춰 데이터가 생성됩니다.
• 날짜를 눌렀을 때 해당되는 날짜로 이동하며 해당되는 데이터를 불러와 표시합니다.

해당 되는 날짜의 투두리스트 완료율 제공

• 유저가 누른 날짜에 해당되는 완료한 투두리스트/생성된 투두리스트 % 값으로 완료율을 유저에게 표시합니다.

카테고리 및 투두리스트 기능 설명

• 카테고리를 추가할 수 있으며 클릭으로 카테고리 변경, 더블클릭으로 카테고리 이름 수정 기능을 이용할 수 있습니다.
• 유저는 생성된 투두리스트 데이터를 완료, 삭제, 수정을 할 수 있습니다.
• 과거의 날짜에는 생성 및 투두리스트 데이터를 아예 수정할 수 없으며 , 오늘 오전 6시를 기준으로 전 날에 해당하는 투두리스트를 완료 및 삭제 수정 기능을 사용할 수 있습니다.

API 설계

• 투두리스트 데이터 설계 시에 많은 유저와 많은 날짜 그리고 많은 카테고리 및 투두리스트 데이터들을 어떻게 효율적으로 설계해야할 지 고민을 많이 했었습니다.
• 큰 틀에서는 유저의 이름으로 모든 데이터가 각각 들어가 있고 유저안의 투두리스트 배열에서 각각 날짜에 해당되는 데이터가 있게끔 설계하여 적용중에 있습니다.

반응형 사이트

• 태블릿(1024px), 모바일(768px) 의 반응형 스크린을 제공하게 구현하였습니다.

현재 화면의 URL에 따라 달라지는 네비게이션 기능 구현

• React router dom 의 useMatch를 이용하여 현재 어떤 사이트에 있는 지에 따라 글 색과 폰트 굵기를 다르게 하여 사용자에게 현재 어느 페이지에 있는 지 정보를 제공하였습니다.

사용자의 닉네임,프로필 이미지가 없을 경우 손님으로 표시되도록 구현.

• 사용자의 닉네임과 프로필 이미지가 없을 경우 default 값으로 손님 닉네임, 손님 이미지가 나오도록 구현하였습니다.

사이트의 보안 설정

• api key 나 다른 필요한 값들을 .env 파일에 넣어 관리하였고 github 의 secrets 탭에 정보를 저장해놓았습니다.
• google에서 제공하는 기능을 활용하여 firebase의 사이트에서 사용되는 api 를 제가 배포한 사이트에서만 작동되도록 하였습니다.
• firebase에서 설정할 수 있는 규칙을 활용하여 프론트에서뿐만 아니라 백앤드에서도 유저가 로그인 상태가 아니면 읽고,쓰기,업로드를 하지 못하게 하였습니다.