우리 같이 입어요! 인프런 후드티 💛
Thumbnail
추석 앵콜 할인 20% 중(D-3)
BEST 개발 · 프로그래밍 웹 개발
Slack 클론 코딩[실시간 채팅 with React!]
(4.9)
25개의 수강평 ∙ 835명의 수강생

20%

31,680원

39,600원
지식공유자 : 조현영
총 44개 수업˙총 10시간 43분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
폴더에 추가 1018 공유
중급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.

Slack 서비스를 따라 만들며 본격적인 리액트 웹 개발을 시작해봅시다! 회원가입, 로그인, 방 만들기, 실시간 채팅까지!

✍️
이런 걸
배워요!
리액트 웹 개발
프론트 초기 세팅(CRA 없이)
SWR(리덕스 대체)
Emotion(스타일드 컴포넌트)
Socket.io 실시간 채팅

내 손으로 만드는 채팅 애플리케이션, 
효과적으로, 더 간단하게! 💬

이 강의에서는?

Slack(슬랙) 서비스를 따라 만들며 
본격적인 리액트 웹 개발을 시작해봅시다!
(슬랙+리액트, 일명 Sleact!)

리액트 웹 개발, 
어떻게 배워야 하는 걸까요?

요즘 리덕스를 잘 안 쓰는 추세라던데... 
자바스크립트에서 타입스크립트로 넘어가고 있다던데...
진짜인가요?

이런 말 많이 들어보셨나요? 슬프게도 사실입니다. 그래서 이 강의에서도 리덕스(Redux)를 걷어내고, 자바스크립트 대신 타입스크립트를 적용했습니다. 리덕스 없이도 리액트 앱 개발이 가능하고, 타입스크립트도 생각보다 어렵지 않다는 걸 보여드릴게요!


고민 완벽 해결!
제로초 슬랙 클론.

“타입스크립트... 자바스크립트랑 많이 다른가요?”
리덕스 떼어 내면 상태 관리 어떻게 하죠? 비동기 요청은요?”
“프론트에서 데이터 관리하기 너무 복잡해요 ㅠㅠ”

  • 최신 프론트엔드 트렌드에 맞춰 타입스크립트로 서비스를 제작합니다. 단, 타입스크립트가 꺼려지는 분들을 위해 자바스크립트로도 진행할 수 있게끔 강의를 구성했습니다. (자바스크립트 소스 코드 제공!)
  • 리덕스를 사용하지 않습니다. SWR이라는 라이브러리를 대신 사용합니다.
  • 회원가입, 로그인, 채팅방 생성, 사용자 초대, 실시간 채팅, 사용자 멘션, 이미지 업로드 등 채팅 애플리케이션 구현에 필요한 기능을 모두 구현합니다.
  • 강의에서 설명하지는 않지만, 백엔드 소스 코드도 함께 제공합니다.

Who is ZeroCho?

웹개발 베스트셀러
<Node.js 교과서> 저자

주식회사 오늘의픽업
CTO


직접 만들어보세요!

회원가입, 로그인, 워크스페이스
각종 워크스페이스 기능 구현

실시간 채팅 및 온라인 리스트


어떤 스킬을 학습하나요?

React

SWR

Socket.io

Emotion

TypeScript

Webpack+Babel


소스 코드를 
제공합니다.

https://github.com/zerocho/sleact (바로가기)


자주 묻는 질문!

Q. 타입스크립트, 꼭 알아야 하나요?

개인적으로 타입스크립트를 배우시는 것을 추천드립니다. 자바스크립트 생태계는 점점 타입스크립트로 옮겨가고 있습니다. 다만 이 강좌에서는 자바스크립트 소스코드를 제공하고, 영상에서 타입스크립트를 적용하는 부분을 알려드리므로, 자바스크립트만으로도 진행하실 수 있습니다. (tsx, ts 파일을 jsx, js로 바꾸고 :타입, <타입> 부분을 지우면 끝입니다. 엄청 간단합니다)

Q. SWR은 검증된 라이브러리인가요?

Next.js와 now.sh를 만든 Vercel(구 Zeit)에서 만든 라이브러리입니다. 믿고 사용하셔도 됩니다. 깃헙 스타가 16,000개예요~

Q. 세팅할 때 CRA를 쓰지 않은 이유가 있나요?

저는 항상 강의에서 CRA를 하지 않고 수동으로 세팅하는 것을 원칙으로 하고 있습니다. 수동으로 세팅하는 법을 알아야 CRA의 원리도 알 수 있으니까요. 원리를 알고 나서 CRA를 쓰는 것을 추천드립니다.

수강 전 참고해주세요!

  • Socket.io는 2버전을 사용합니다. 2버전을 설치하셔야 합니다.
  • 실제 배포된 서비스는 sleact.nodebird.com 에서 확인 가능합니다.
  • 제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드립니다. 강좌만 시청하는 것보다는 강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부하시면 많은 도움이 됩니다. 다만 먼저 구글링을 해보고 나서 질문해주세요. 강좌 내용에서 설명이 부족하거나 이해가 안 가는 부분이 있다면 언제든지 질문주세요. 다른 분들이 이미 했던 질문을 읽어보시는 것도 도움이 됩니다.

2019 인프런 어워드 선정 "가장 많은 질문에 답변한 지식공유자"

  • 자주 묻는 질문은 FAQ로 정리해서 인프런 블로그에 올리겠습니다.
  • 영상이나 내용에 문제가 있는 경우 문의하시면 재편집해서 올립니다.
  • 강의에 없는데 구현이 궁금하신 것이 있는 경우, 많은 분들이 질문하시면 보너스 영상을 제작합니다.

선수 지식 & 연계 강의

필수 선수 지식

웹게임 여덟 개로 리액트, 바벨, 웹팩까지!

타입스크립트를 더 배우시려면!

요즘 대세! JS보다 안정적인 TS의 세계

다른 클론 코딩 강의가 궁금하다면?

어마어마한 22시간 트위터 클론!

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
리액트 문법을 배우고 본격적으로 웹 개발을 하고 싶은 분
단순한 튜토리얼 대신 제대로 된 서비스를 따라 만들고 싶은 분
타입스크립트로 안정성을 높인 개발을 배우고 싶은 분
📚
선수 지식,
필요한가요?
HTML/CSS
JS 기초 지식
React 기본 문법(무료 강좌 듣고 오세요)

안녕하세요
조현영 입니다.
조현영의 썸네일
– Node.js교과서 저자 
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중 
– 스타트업 CTO
커리큘럼 총 44 개 ˙ 10시간 43분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 프론트엔드 초기 세팅하기
sleact 강좌 소개 및 기본 세팅 미리보기 12:43
노드와 MySQL 설치하기(with FAQ) 17:52
프론트엔드 세팅하기 20:28
babel과 webpack 설정하기 25:02
웹팩 데브 서버 세팅하기 10:55
폴더 구조와 리액트 라우터 17:48
코드 스플리팅과 이모션 15:32
Q&A(CRA를 안 쓰는 이유) 09:41
섹션 1. 로그인, 회원가입 만들기
회원가입 페이지 만들기 미리보기 13:58
커스텀 훅 만들기 10:14
axios로 요청 보내기와 CORS, proxy 18:48
로그인 페이지 만들기 08:40
swr 사용하기(쿠키 공유하기) 18:06
swr 설정 살펴보기 07:12
워크스페이스 만들기 + 로그아웃하기 14:35
swr 활용법(optimistic ui) 20:32
섹션 2. 메뉴와 모달 만들기
워크스페이스 만들기(gravatar) 미리보기 18:18
워크스페이스 만들기(중첩 라우터) 10:15
메뉴 만들기 16:59
모달 만들기 29:50
채널 만드는 모달 13:46
라우터 주소 설계(라우트 파라미터) 14:53
사용자 초대 모달 만들기 10:54
섹션 3. DM 보내기
DM 목록 만들기 14:38
채널 목록 만들기 05:50
DM 페이지 만들기 11:29
챗박스 만들기 15:55
채팅 보내기 10:07
섹션 4. 실시간 채팅 + 각종 프론트 기술 배우기
socket.io 전용 훅스 만들기 17:18
socket.io 이벤트 연결하기 16:20
DM 내용 표시하기 07:28
커스텀 스크롤바와 dayjs 12:17
멘션 기능 만들기 16:32
정규표현식으로 문자열 변환하기 14:42
날짜별로 묶어주기(position: sticky) 15:59
리버스 인피니트 스크롤링(useSWRInfinite) 14:44
스크롤바 조절하기 11:54
DM 채팅하기 11:13
섹션 5. 마무리하기
채널 만들기 14:07
타입 점검하기(타입 가드) 15:09
배포 준비하기 20:30
섹션 6. 보너스
이미지 드래그 업로드하기 16:42
안 읽은 메시지 개수 표시하기 17:26
SWR Devtools 소개 06:09
강의 게시일 : 2021년 03월 09일 (마지막 업데이트일 : 2021년 05월 25일)
수강평 총 25개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
25개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
하수빈 thumbnail
개인적으로 강의가 더 발전하고 좋아진 느낌입니다. 뺄 거 빼고 알려주실 거 또 제대로 알려주셔서 만족도가 크네요. 배우는 게 정말 많습니다 ㅎㅎ 개인프로젝트나 회사업무에서도 제로초님 덕을 많이 봤습니다 추후에 나오는 nuxt 강의도 기대되네요!!! 감사합니다 :)
2021-03-10
Ju Young Lee thumbnail
다른 강의도 전부 구매할게요 왜 zerocho님을 이제야 알았지?
2021-06-13
넉리 thumbnail
원래는 제가 인터넷 강의랑 잘 안맞는다고 생각을 했습니다 왜냐하면 완강한 강의가 거의 없기 때문이죠.... 하지만 이 강의는 현재 완전 재미있게 수강하고 있습니다.
2021-05-24
김흰둥이 thumbnail
CRA없는 리액트 개발환경 셋팅을 배울 수 있습니다 프론트엔드 개발에 대한 노하우를 얻을 수 있습니다 백엔드 자료가 준비되어있어 프론트엔드 개발자가 되어 프로젝트를 진행하는 기분이 드는 강의였습니다. 감사합니다
2021-03-13
shut up and squat thumbnail
진짜 짱입니다 프론트의 전반적인 기술을 많이 다뤄줍니다 답변도 거의 슬랙 클론코딩이라 그런지 실시간 소켓통신 하는 수준으로 빨리 달아 주셔서 소통도 엄청 잘되는 편입니다. 제로초님 리액트 무료강좌 듣고 이거 들으시면 엄청 많은걸 얻어 가실수 있을거에요
2021-06-18
추석 앵콜 할인 20% 중(D-3)

20%

31,680원

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