심화 주차 개인과제: 매거진

매거진그램

코드

https://github.com/cslim0527/magazine

사이트 링크

https://spartagram-89e5b.web.app/

요구사항

✅ 기능 목록

1. 게시글
   1. 목록 가져오기
   2. 추가하기 (+이미지 업로드하기)
   3. 삭제하기
   4. 수정하기
2. 좋아요
   1. 게시글에 좋아요하기
   2. 게시글에 좋아요 취소하기
3. 회원가입하기
4. 로그인하기
5. 파이어베이스 or S3로 배포!

✅ 페이지별 상세페이지별 상세

1. 회원가입 페이지
   1. 이메일 형식 체크, 비밀번호 체크할 것
2. 로그인 페이지
   1. 이메일, 패스워드 미기입 시 로그인 버튼 활성화 막을 것
3. 메인 페이지(게시글 목록 페이지)
   1. 게시글 목록 노출
   2. 무한 스크롤
   3. 게시글 하나는 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성
   4. 게시글 하나를 클릭 시, 게시글 상세 페이지로 이동
   5. 게시글 중 좋아요버튼(분홍색 하트 버튼)을 누르면 [좋아요]를 +1한다. 다시 누르면 분홍색 하트가 회색 하트가 되고 좋아요가 -1개 된다.
4. 글 작성 페이지
   1. 레이아웃 선택 버튼
      1. 3가지 레이아웃 중 선택하도록 한다.
         • 이미지가 오른편에, 텍스트는 왼편에 위치한 레이아웃
         • 이미지가 왼편에, 텍스트는 오른편에 위치한 레이아웃
         • 텍스트가 위에, 이미지는 아래에 위치한 레이아웃
      2. 레이아웃 선택 시, 게시글 레이아웃(모양새)대로 보이도록 한다.
      3. 텍스트, 이미지 중 입력 안된 게 있다면 게시글 작성 버튼 비활성화
      4. 작성 완료 시 메인 페이지로 이동
5. 게시글 상세 페이지
   1. 게시글 레이아웃에 맞춰 이미지, 텍스트 위치 조절해서 노출

➕ 추가로 해보면 좋을 기능(필수❌)

• 이미지 여러장 업로드 (상세 페이지에서는 슬라이더로 이미지 넘겨가며 보도록 처리)
• 알림 기능 만들기 (+알림페이지도 추가할 것!)
• 좋아요 눌렀을 때 게시글 위로 하트 이미지가 나타났다 사라지게 해보기

정리

• 이번주차는 이해해야할 개념도 너무 많고 구현해야할 기능도 너무 많아서 필수요구사항만 간신히 턱걸이 하였다.
• 구현하지 못한 좋아요/ 실시간 알림/ 이미지 여러장 업로드 기능까지 추가적으로 강의를 확인하고 구현해보자
• 5주차 강의의 렌더링 최적화와 SEO 보완작업도 실무에서 꼭 필요한 내용일거같다 다시 체크하고 챙겨보도록