구현 기능 목록
- 게시글
- 목록 가져오기
- 추가하기 (+이미지 업로드하기)
- 삭제하기
- 수정하기
- 회원가입하기
- 로그인하기
- 파이어베이스 or S3로 배포!
✅ 페이지별 상세페이지별 상세
- 회원가입 페이지
- 이메일 형식 체크, 비밀번호 체크할 것
- 로그인 페이지
- 이메일, 패스워드 미기입 시 로그인 버튼 활성화 막을 것
- 메인 페이지(게시글 목록 페이지)
- 게시글 목록 노출
- 게시글 하나는 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성
- 게시글 하나를 클릭 시, 게시글 상세 페이지로 이동
- 글 작성 페이지
- 레이아웃 선택 버튼
- 3가지 레이아웃 중 선택하도록 한다.
- 이미지가 오른편에, 텍스트는 왼편에 위치한 레이아웃
- 이미지가 왼편에, 텍스트는 오른편에 위치한 레이아웃
- 텍스트가 위에, 이미지는 아래에 위치한 레이아웃
- 레이아웃 선택 시, 게시글 레이아웃(모양새)대로 보이도록 한다.
- 텍스트, 이미지 중 입력 안된 게 있다면 게시글 작성 버튼 비활성화
- 작성 완료 시 메인 페이지로 이동
- 3가지 레이아웃 중 선택하도록 한다.
- 레이아웃 선택 버튼
- 게시글 상세 페이지
- 게시글 레이아웃에 맞춰 이미지, 텍스트 위치 조절해서 노출
➕ 추가로 해보면 좋을 기능(필수❌)
- 메인 페이지 (게시글 목록 페이지)
- 무한 스크롤
- 좋아요 기능 : 게시글 중 좋아요버튼(분홍색 하트 버튼)을 누르면 [좋아요]를 +1한다. 다시 누르면 분홍색 하트가 회색 하트가 되고 좋아요가 -1개 된다.
- 이미지 여러장 업로드 (상세 페이지에서는 슬라이더로 이미지 넘겨가며 보도록 처리)
- 알림 기능 만들기 (+알림페이지도 추가할 것!)
- 좋아요 눌렀을 때 게시글 위로 하트 이미지가 나타났다 사라지게 해보기
더보기
1단계 (~월요일 19시)
- 인증 (로그인/로그아웃)
- 포스트 CRD (U는 2단계)
- 포스트 목록 보여주기
- 포스트 상세페이지
- 포스트 추가 : 레이아웃 설정은 2단계
- 포스트 삭제
2단계 (~수요일 19시)
- 포스트 수정
- 포스트 추가 시 레이아웃 설정
- 목록에서도 설정한 레이아웃으로 보여주기
- ‘상세페이지별 상세’에 적혀있는 디테일들 확인하면서 적용
3단계 = 과제제출 (~목요일 21시)
- 완성 및 배포
- 반응형 확인
CRA로 프로젝트 생성
node install과 use [node version]
- nvm install [node version]
- nvm use [node version]
yarn 설치
- npm install -g yarn
creact-react-app 설치
- yarn add global create-react-app
CRA로 프로젝트 생성
- yarn create react-app image-community
패키지 설치
- yarn add react-router-dom@5.2.1
-yarn add styled-components
📍 react 버전이 18로 업그레이드 되면서.. 혼동이 많이 오고 있는거 같다...;;
그래도 일단 react와 react-dom 버전을 이전 버전으로 다운그레이드를 해서 진행한다.
다운그레이드 버전은 17.0.2 이다.
- 컴포넌트이름.defaultProps
: 페이지를 그리는 데 꼭 필요한 데이터를 defaultProps에 담아두면 데이터가 없어서 나는 오류를 방지 할 수 있습니다.
리덕스 설치 패키지들
yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0
yarn add immer redux-actions
📍 2-8 ~ 2-9 사이에 user 모듈을 구축하면서 잘못된 방식으로 코드를 짠거 같다.
한글자 차이란.... 🤯
더보기
파이어 베이스 연동
강의에서는 옛날 버전을 사용한다...
yarn add firebase
댓글