공개되지 않은 강의로
수강이 제한됩니다.
수강이 제한됩니다.
초급자를 위해 준비한
[프론트엔드] 강의입니다.
Slack 클론앱 라이브코딩으로 보는 프론트엔드 개발의 대세 조합!
✍️
이런 걸
배워요!
이런 걸
배워요!
React x TS 기반 프로젝트의 개발 프로세스 Overview
Webpack을 포함한 프론트엔드 개발환경 세팅 노하우
각종 플러그인, Profiler 등을 활용한 최적화 스킬
웹소켓을 활용한 실 시간 채팅 기능 구현
■ 본 강의는 실 시간 라이브로 진행된 수업의 편집본으로,
부분적으로 음성이 고르지 못할 수 있습니다. 양해 부탁드립니다.
■ 완성본 링크(sleact.nodebird.com)은 현재 접근이 불가하지만,
완성본 소스코드는 강사님의 깃헙에서 확인하실 수 있습니다.
Curriculum
Day 1 프론트엔드 세팅과 프로젝트 구성
Day 2 회원가입, 로그인, DM 기능 구현
Day 3 WebSocket을 활용한 실 시간 연결과 프로젝트 빌드
Day 1 프론트엔드 세팅과 프로젝트 구성
Lesson 1. 프론트엔드 세팅 - 언제까지나 CRA에만 의존할 수는 없다!
· 개발환경과 프로젝트 소개
· 프론트엔드 세팅 Ⅰ: package.json, eslintrc, prettierrc, tsconfig.json
· 프론트엔드 세팅 Ⅱ: Webpack 세팅하고 서버에 띄워보기
Lesson 2. 본격적인 클론코딩 시작하기 - 모든 서비스는 회원가입부터
· 프로젝트 폴더 구성과 라우터 적용
· 회원가입 페이지 만들기 (ft. Styled Components)
· 개발환경과 프로젝트 소개
· 프론트엔드 세팅 Ⅰ: package.json, eslintrc, prettierrc, tsconfig.json
· 프론트엔드 세팅 Ⅱ: Webpack 세팅하고 서버에 띄워보기
Lesson 2. 본격적인 클론코딩 시작하기 - 모든 서비스는 회원가입부터
· 프로젝트 폴더 구성과 라우터 적용
· 회원가입 페이지 만들기 (ft. Styled Components)
Day 2 회원가입, 로그인, DM 기능 구현
Lesson 3. 라이브러리, 플러그인을 활용한 최적화와 API 통신
· 최적화를 위한 라이브러리, 플러그인과 커스텀 hook 활용
(@loadable/component, fork-ts-checker-webpack-plugin 등)
· Axios로 회원가입 진행하기 + CORS 문제 해결을 위한 팁
· 회원가입 페이지를 응용해서 로그인 페이지 마무리 하기 (ft. SWR)
Lesson 4. DM 기능 구현: App 구조 작성하기
· DM 관련 구조 작성 (+Channel과 공유하는 기능은 미리 구현)
· DM 보내보기 (ft. Optimistic UI)
· DM 로딩하기 + Infinite Scrolling 적용을 위한 세팅
· 최적화를 위한 라이브러리, 플러그인과 커스텀 hook 활용
(@loadable/component, fork-ts-checker-webpack-plugin 등)
· Axios로 회원가입 진행하기 + CORS 문제 해결을 위한 팁
· 회원가입 페이지를 응용해서 로그인 페이지 마무리 하기 (ft. SWR)
Lesson 4. DM 기능 구현: App 구조 작성하기
· DM 관련 구조 작성 (+Channel과 공유하는 기능은 미리 구현)
· DM 보내보기 (ft. Optimistic UI)
· DM 로딩하기 + Infinite Scrolling 적용을 위한 세팅
Day 3 WebSocket을 활용한 실 시간 연결과 프로젝트 빌드
Lesson 5. DM 기능 구현: 웹 소켓 연결과 Profiler를 활용한 최적화
· 웹 소켓 연결과 DM 메시지창 구현
· Profiler를 활용한 최적화
Lesson 6. Infinite Scrolling + Channel 기능 구현
· 실시간 연결 확인 + Infinite Scrolling 구현
· Channel (그룹챗) 기능 구현 후 프로젝트 마무리
· 웹 소켓 연결과 DM 메시지창 구현
· Profiler를 활용한 최적화
Lesson 6. Infinite Scrolling + Channel 기능 구현
· 실시간 연결 확인 + Infinite Scrolling 구현
· Channel (그룹챗) 기능 구현 후 프로젝트 마무리
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
React 프로젝트에 TS를 도입하시고자 하는 분
세팅부터 배포까지, 프론트엔드 개발의 전 과정을 훑어보고 싶은신 분
React와 TS의 기초는 알지만 실제 개발에 적용하기가 어려우신 분
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
React 기초
Typescript 기초
안녕하세요
멀티캠퍼스 입니다.
멀티캠퍼스 입니다.
커리큘럼
총 6 개
˙ 5시간 22분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Day 1. 프론트엔드 세팅과 프로젝트 구성
2 강
∙ 1시간 41분
프론트엔드 세팅 - 언제까지나 CRA에만 의존할 수는 없다!
58:49
본격적인 클론코딩 시작하기 - 모든 서비스는 회원가입부터
미리보기
42:48
섹션 1. 회원가입, 로그인, DM 기능 구현
2 강
∙ 1시간 50분
라이브러리, 플러그인을 활용한 최적화와 API 통신
48:30
DM 기능 구현: App 구조 작성하기
01:02:23
섹션 2. WebSocket을 활용한 실 시간 연결과 프로젝트 빌드
2 강
∙ 1시간 49분
DM 기능 구현: 웹소켓 연결과 Profiler를 활용한 최적화
51:53
Infinite Scrolling + Channel 기능 구현
57:54
강의 게시일 : 2021년 03월 10일
(마지막 업데이트일 : 2021년 03월 10일)
수강평
총 3개
수강생분들이 직접 작성하신 수강평입니다.
3.7
3개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순