Thumbnail
개발 · 프로그래밍 웹 개발
Watch Me Code: React x Typescript로 Slack 클론코딩하기
23명이 수강하고 있어요.

59,400원

지식공유자 : 멀티캠퍼스
총 6개 수업˙총 5시간 22분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
내 목록 추가 129 공유
초급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.

Slack 클론앱 라이브코딩으로 보는 프론트엔드 개발의 대세 조합!

✍️
이런 걸
배워요!
React x TS 기반 프로젝트의 개발 프로세스 Overview
Webpack을 포함한 프론트엔드 개발환경 세팅 노하우
각종 플러그인, Profiler 등을 활용한 최적화 스킬
웹소켓을 활용한 실 시간 채팅 기능 구현

■ 본 강의는 실 시간 라이브로 진행된 수업의 편집본으로,
    부분적으로 음성이 고르지 못할 수 있습니다. 양해 부탁드립니다.

■ 완성본 링크(sleact.nodebird.com)은 현재 접근이 불가하지만,
    완성본 소스코드는 강사님의 깃헙에서 확인하실 수 있습니다.

Curriculum


 Day 1   프론트엔드 세팅과 프로젝트 구성
 
    Lesson 1. 프론트엔드 세팅 - 언제까지나 CRA에만 의존할 수는 없다!

        · 개발환경과 프로젝트 소개
        · 프론트엔드 세팅 Ⅰ: 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 적용을 위한 세팅


 Day 3   WebSocket을 활용한 실 시간 연결과 프로젝트 빌드
 
    Lesson 5. DM 기능 구현: 웹 소켓 연결과 Profiler를 활용한 최적화

        · 웹 소켓 연결과 DM 메시지창 구현
        · Profiler를 활용한 최적화


    Lesson 6. Infinite Scrolling + Channel 기능 구현

        · 실시간 연결 확인 + Infinite Scrolling 구현 
        · Channel (그룹챗) 기능 구현 후 프로젝트 마무리
지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
React 프로젝트에 TS를 도입하시고자 하는 분
세팅부터 배포까지, 프론트엔드 개발의 전 과정을 훑어보고 싶은신 분
React와 TS의 기초는 알지만 실제 개발에 적용하기가 어려우신 분
📚
선수 지식,
필요한가요?
React 기초
Typescript 기초

안녕하세요
멀티캠퍼스 입니다.
멀티캠퍼스의 썸네일
커리큘럼 총 6 개 ˙ 5시간 22분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Day 1. 프론트엔드 세팅과 프로젝트 구성
프론트엔드 세팅 - 언제까지나 CRA에만 의존할 수는 없다! 58:49
본격적인 클론코딩 시작하기 - 모든 서비스는 회원가입부터 미리보기 42:48
섹션 1. 회원가입, 로그인, DM 기능 구현
라이브러리, 플러그인을 활용한 최적화와 API 통신 48:30
DM 기능 구현: App 구조 작성하기 62:23
섹션 2. WebSocket을 활용한 실 시간 연결과 프로젝트 빌드
DM 기능 구현: 웹소켓 연결과 Profiler를 활용한 최적화 51:53
Infinite Scrolling + Channel 기능 구현 57:54
강의 게시일 : 2021년 03월 10일 (마지막 업데이트일 : 2021년 03월 10일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️

59,400원

내 목록 추가 129 공유
지식공유자 : 멀티캠퍼스
총 6개 수업˙총 5시간 22분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스