🙊 수강권한이 없어요! 🙈

이 수업은 수강신청 이후에 학습할 수 있습니다.
이 배움으로 더욱 많은 것을 이뤄보세요!!

에서 허용하지 않은 강의입니다. 관리자에게 문의해주세요.

77,000원

8-8. 배포전 마지막 준비(IE, 에러 표시)

강의명 : React로 NodeBird SNS 만들기

수강 기한 : 무제한

진도율 : 0강/111강 (0%) | 시간 : 0분/1419분

나가기

미수강

이전수업

다음수업

React로 NodeBird SNS 만들기

수강 기한 : 무제한

진도율 : 0강/111강 (0%) | 시간 : 0분/1419분

Hello, Next.js

1-1. 프로젝트 구조와 배우는 것들

11분

1-2. next와 eslint 설치하기

11분

1-3. next 라우팅 시스템

12분

1-4. ant design 적용하기

13분

1-5. 기본 페이지들 만들기

7분

1-6. 회원가입 폼 만들기

11분

1-7. 회원가입 state와 custom hook

11분

SNS 화면 만들기

2-1. _app.js로 레이아웃 분리하기

15분

2-2. prop-types

13분

2-3. antd 그리드 시스템

13분

2-4. 커스텀 훅 재사용하기

12분

2-5. 메인 화면 만들기

11분

2-6. 프로필 화면 만들기

7분

2-7. 컴포넌트 분리하기

14분

리덕스 익히기

3-1. redux 주요 개념 소개

9분

3-2. 첫 리듀서 만들기

13분

3-3. 불변성과 리듀서 여러 개 합치기

9분

3-4. redux와 react 연결하기

11분

3-5. redux devtools 사용하기

10분

3-6. react-redux 훅 사용하기

10분

3-7. react-redux connect

5분

3-8. dummy 데이터로 리덕스 사용하기

13분

3-9. 리액트 state와 리덕스 state

13분

리덕스 사가 배우기

4-1. 리덕스 사가의 필요성과 맛보기

16분

4-2. 사가 미들웨어 리덕스에 연결하기

11분

4-3. ES2015 제너레이터

10분

4-4. 사가의 제너레이터 이해하기

9분

4-5. 사가에서 반복문 제어하기

10분

4-6. takeEvery, takeLatest

10분

4-7. fork, call, 사가 총정리

9분

4-8. 사가 패턴과 Q&A

12분

4-9. eslint-config-airbnb와 코드 정리

10분

4-10. redux state와 action 구조 잡기

12분

4-11. 로그인 리덕스 사이클

11분

4-12. 회원가입 리덕스 사이클

5분

4-13. 게시글 작성 리덕스 사이클

12분

4-14. next Router로 페이지 이동하기

4분

4-15. 댓글 컴포넌트 만들기

10분

4-16. 댓글 작성 리덕스 사이클

16분

백엔드 서버 만들기

5-1. 백엔드 서버 구동에 필요한 모듈들

11분

5-2. HTTP 요청 주소 체계 이해하기

14분

5-3. Sequelize와 ERD

14분

5-4. 테이블간의 관계들

12분

5-5. 시퀄라이즈 Q&A와 DB 연결하기

15분

5-6. 백엔드 서버 API 만들기

14분

5-7. 회원가입 컨트롤러 만들기

11분

5-8.실제 회원가입과 미들웨어들

12분

5-9. 로그인을 위한 미들웨어들

9분

5-10. passport와 쿠키, 세션 동작 원리

10분

5-11. passport 로그인 전략

13분

5-12. passport 총정리와 실제 로그인

21분

5-13. 다른 도메인간에 쿠키 주고받기

10분

5-14. include와 as, foreignKey

11분

5-15. 로그아웃과 사용자 정보 가져오기

18분

5-16. 게시글 작성과 데이터 관계 연결하기

19분

5-17. 게시글 불러오기

12분

기능 완성해나가기

6-1. 해시태그 링크로 만들기

13분

6-2. next와 express 연결하기

13분

6-3. getInitialProps로 서버 데이터 받기

23분

6-4. 해시태그 검색, 유저 정보 라우터 만들기

17분

6-5. Link 컴포넌트 고급 사용법

14분

6-6. 댓글 작성, 댓글 로딩

24분

6-7. 미들웨어로 중복 제거하기

5분

6-8. 이미지 업로드 프론트 구현하기

12분

6-9. multer로 이미지 업로드 받기

10분

6-10. express.static과 이미지 제거

7분

6-11. 폼데이터로 게시글 올리기

11분

6-12. 게시글 이미지 표시하기

8분

6-13. react-slick으로 이미지 슬라이더 구현

18분

6-14. 게시글 좋아요, 좋아요 취소

22분

6-15. 리트윗 API 만들기

14분

6-16. 리트윗 프론트 화면 만들기

13분

6-17. 팔로우, 언팔로우

13분

6-18. 다른 리듀서 데이터 조작하기

6분

6-19. 프로필 및 데이터 로딩하기

22분

6-20. 닉네임 수정하기

14분

서버 사이드 렌더링

7-1. 서버 사이드 렌더링(SSR)

13분

7-2. SSR을 위해 쿠키 넣어주기

11분

7-3. 리덕스 사가 액션 로깅하기

8분

7-4. SSR에서 내 정보 처리하기

11분

7-5. 회원가입 리다이렉션과 포스트 제거

19분

7-6. 페이지네이션

11분

7-7. 더보기 버튼

10분

7-8. 인피니트 스크롤링

18분

7-9. 쓰로틀링(throttling)

19분

7-10. immer로 불변성 쉽게 쓰기

16분

7-11. 프론트 단에서 리덕스 액션 호출 막기

6분

7-12. 개별 포스트 불러오기

14분

7-13. react-helmet으로 head 태그 조작하기

13분

7-14. react-helmet SSR

13분

7-15. styled-components

15분

7-16. styled-components SSR

6분

7-17. 기타 기능 구현과 Q&A

16분

7-18. 폴더 구조와 _error.js

15분

AWS에 배포하기

8-1. favicon 서빙과 prefetch

6분

8-2. next.config.js

6분

8-3. next-bundle-analyzer

13분

8-4. tree shaking 예제와 gzip

14분

8-5. 최적화 예제 1

8분

8-6. 최적화 예제 2

12분

8-7. 최적화 예제 3

11분

8-8. 배포전 마지막 준비(IE, 에러 표시)

16분

8-9. ec2 생성, 접근하기

11분

8-10. node, mysql 설치하기

9분

8-11. 프론트 서버 구동하기

14분

8-12. pm2 서버 구동과 MySQL 에러 해결

17분

8-13. 도메인 연결하기

12분

8-14. S3에 이미지 업로드

17분

8-15. 프론트, 백엔드 쿠키 통일하기

7분

8-16. lambda 사용해보기

12분

8-17. lambda 배포와 마무리

23분

질문 게시판

올라온 질문이 없습니다!
수업 내용에 궁금한 점이있다면
질문을 작성해주세요!

질문

폴리필을 붙일 때 느려지는 이유가 궁금합니다. 혹시 폴리필을 하지 않고 속도에 구애 안받고 최적화 시키는 방법은 있나요? css 이슈에 대해서는 조금 손이 더 간다고 하셨는데 그러면 모든 브라우저에 대해서 테스팅을 하면서 다 맞추려면 너무 힘들지 않을 까요?? 실무에서는 어떻게 진행이 되는지요? 감사합니다.

andrewlee 0 1

질문이요

npm run start 할때요, 서버쪽은 npm run dev로 해도되나요.. 현재 서버쪽에는, "main": "index.js", "scripts": { "dev": "nodemon" }, 프론트쪽 "main": "index.js", "scripts": { "dev": "nodemon", "build": "cross-env ANALYZE=true next build", "prestart": "npm run build", "start": "cross-env MODE_ENV=production next start -p 3070" }, 프론트쪽 npm start 하면, 제가 임의로 넣은 그림 파일, 파비콘이 안뜨는데 원인이 무엇일까여... npm run dev하면 또 잘 뜹니다... server.js server.use('/',express.static(path.join(__dirname,`images`))) 이것도하고, 이미지 소스에는, <img className = "hi" src= 'http://localhost:3070/BG.png'/> 이런식으로 했는데,, 나오지가 않네요.. 이상한거는 구글 포튼도 적용해놨는데, 이것역시 적용이 풀려버리네요...

hsjo12 0 1

배포 전 질문 2가지 드려요

1. 로그인한 상태에서 새로고침을 하면, 로그인은 풀리지 않는데 state.user.me 에서 posts, 팔로워, 팔로윙값이 없어지면서 여러기능들이 동작하지 않는데요 저녁내내 이것저것 해봤는데 왜그런지 모르겠어요.. 로그인할때 서버에서 fulluser를 받은뒤에 다시 load_user를 하면서 me가 변하는걸까요..? 로그아웃하고 다시 로그인해야 me에 값이 들어있습니다. 반면 다른유저의 정보를 불러온 state.user.userInfo는 새로고침 해도 그대로입니다. 2. 해당 에러는 왜 발생하는건지 궁금해요..

최철웅 0 1

배포 모드 질문입니다.

개발 모드에서는 해시태그나 유저 포스트 페이지에 직접 주소를 치거나 새로고침해도 정상이었는데, 배포모드에서는 위와 같이 했을 때 404페이지가 뜹니다. (메인페이지나 프로필은 둘 다 정상 동작합니다.) 제가 실수한 부분이 있는건가요? 아님 다른 설정이 필요한가요? 딱히 에러메세지가 뜨는게 없어서 감을 못잡겠습니다.

MinHyung 0 5

포트 관련 질문이요!

그럼 3060포트는 개발용 프론트 서버이고, 3000포트는 빌드용 프론트 서버인게 맞나요? 추가 개발하고 테스트 할때는 3060포트에서 하고, 결과물 확인은 3000포트에서 하면되나요 ?

castlehill 0 4

질답

멘토링

멘토링 신청
조현영

🙊 수강권한이 없어요! 🙈

이 수업은 수강신청 이후에 학습할 수 있습니다.이 배움으로 더욱 많은 것을 이뤄보세요!!

이 수업은 수강신청 이후에 학습할 수 있습니다.
이 배움으로 더욱 많은 것을 이뤄보세요!!