Thumbnail
BEST 개발 · 프로그래밍 웹 개발
Slack 클론 코딩[실시간 채팅 with React!]
(5.0)
14개의 수강평 ∙ 469명의 수강생

39,600원

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

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일)
수강평 총 14개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
14개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
김흰둥이 thumbnail
CRA없는 리액트 개발환경 셋팅을 배울 수 있습니다 프론트엔드 개발에 대한 노하우를 얻을 수 있습니다 백엔드 자료가 준비되어있어 프론트엔드 개발자가 되어 프로젝트를 진행하는 기분이 드는 강의였습니다. 감사합니다
2021-03-13
하수빈 thumbnail
개인적으로 강의가 더 발전하고 좋아진 느낌입니다. 뺄 거 빼고 알려주실 거 또 제대로 알려주셔서 만족도가 크네요. 배우는 게 정말 많습니다 ㅎㅎ 개인프로젝트나 회사업무에서도 제로초님 덕을 많이 봤습니다 추후에 나오는 nuxt 강의도 기대되네요!!! 감사합니다 :)
2021-03-10
이지우 thumbnail
모르는 부분을 많이 알고갑니다 좋아요!
2021-06-07
넉리 thumbnail
원래는 제가 인터넷 강의랑 잘 안맞는다고 생각을 했습니다 왜냐하면 완강한 강의가 거의 없기 때문이죠.... 하지만 이 강의는 현재 완전 재미있게 수강하고 있습니다.
2021-05-24
Ju Young Lee thumbnail
다른 강의도 전부 구매할게요 왜 zerocho님을 이제야 알았지?
2021-06-13

39,600원

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