/react-nodebird

🕊 React로 NodeBird SNS 만들기 🕊

Primary LanguageJavaScript

React로 NodeBird SNS 만들기


섹션 0. Hello, Next.js

  • 1-1. 프로젝트 구조와 배우는 것들
  • 1-2. next와 eslint 설치하기
  • 1-3. next 라우팅 시스템
  • 1-4. ant design 적용하기
  • 1-5. 기본 페이지들 만들기
  • 1-6. 회원가입 폼 만들기
  • 1-7. 회원가입 state와 custom hook

섹션 1. SNS 화면 만들기

  • 2-1. _app.js로 레이아웃 분리하기
  • 2-2. prop-types
  • 2-3. antd 그리드 시스템
  • 2-4. 커스텀 훅 재사용하기
  • 2-5. 메인 화면 만들기
  • 2-6. 프로필 화면 만들기
  • 2-7. 컴포넌트 분리하기

섹션 2. 리덕스 익히기

  • 3-1. redux 주요 개념 소개
  • 3-2. 첫 리듀서 만들기
  • 3-3. 불변성과 리듀서 여러 개 합치기
  • 3-4. redux와 react 연결하기
  • 3-5. redux devtools 사용하기
  • 3-6. react-redux 훅 사용하기
  • 3-7. react-redux connect
  • 3-8. dummy 데이터로 리덕스 사용하기
  • 3-9. 리액트 state와 리덕스 state

섹션 3. 리덕스 사가 배우기

  • 4-1. 리덕스 사가의 필요성과 맛보기
  • 4-2. 사가 미들웨어 리덕스에 연결하기
  • 4-3. ES2015 제너레이터
  • 4-4. 사가의 제너레이터 이해하기
  • 4-5. 사가에서 반복문 제어하기
  • 4-6. takeEvery, takeLatest
  • 4-7. fork, call, 사가 총정리
  • 4-8. 사가 패턴과 Q&A
  • 4-9. eslint-config-airbnb와 코드 정리
  • 4-10. redux state와 action 구조 잡기
  • 4-11. 로그인 리덕스 사이클
  • 4-12. 회원가입 리덕스 사이클
  • 4-13. 게시글 작성 리덕스 사이클
  • 4-14. next Router로 페이지 이동하기
  • 4-15. 댓글 컴포넌트 만들기
  • 4-16. 댓글 작성 리덕스 사이클

섹션 4. 백엔드 서버 만들기

  • 5-1. 백엔드 서버 구동에 필요한 모듈들
  • 5-2. HTTP 요청 주소 체계 이해하기
  • 5-3. Sequelize와 ERD
  • 5-4. 테이블들간의 관계들
  • 5-5. 시퀄라이즈 Q&A와 DB 연결하기
  • 5-6. 백엔드 서버 API 만들기
  • 5-7. 회원가입 컨트롤러 만들기
  • 5-8. 실제 회원가입과 미들웨어들
  • 5-9. 로그인을 위한 미들웨어들
  • 5-10. passport와 쿠기, 세션 동작 원리
  • 5-11. passport 로그인 전략
  • 5-12. passport 총정리와 실제 로그인
  • 5-13. 다른 도메인간에 쿠키 주고 받기
  • 5-14. include와 as, foreignKey
  • 5-15. 로그아웃과 사용자 정보 가져오기
  • 5-16. 게시글 작성과 데이터 관계 연결하기
  • 5-17. 게시글 불러오기

섹션 5. 기능 완성해나가기

  • 6-1. 해시태그 링크로 만들기
  • 6-2. next와 express 연결하기
  • 6-3. getInitiallProps로 서버 데이터 받기
  • 6-4. 해시태그 검색, 유저 정보 라우터 만들기
  • 6-5. Link 컴포넌트 고급 사용법
  • 6-6. 댓글 작성, 댓글 로딩
  • 6-7. 미들웨어로 중복 제거하기
  • 6-8. 이미지 업로드 프론트 구현하기
  • 6-9. multer로 이미지 업로드 받기
  • 6-10. express.static과 이미지 제거
  • 6-11. 폼데이터로 게시글 올리기
  • 6-12. 게시글 이미지 표시하기
  • 6-13. react-slick으로 이미지 슬라이더 구현
  • 6-14. 게시글 좋아요, 좋아요 취소
  • 6-15. 리트윗 API 만들기
  • 6-16. 리트윗 프론트 화면 만들기
  • 6-17. 팔로우, 언팔로우
  • 6-18. 다른 리듀서 데이터 조작하기
  • 6-19. 프로필 및 데이터 로딩하기
  • 6-20. 닉네임 수정하기

참고 : https://www.inflearn.com/course/react_nodebird/dashboard