39,600원
중급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.
Slack 서비스를 따라 만들며 본격적인 리액트 웹 개발을 시작해봅시다! 회원가입, 로그인, 방 만들기, 실시간 채팅까지!
이런 걸
배워요!
내 손으로 만드는 채팅 애플리케이션,
효과적으로, 더 간단하게! 💬
이 강의에서는?
Slack(슬랙) 서비스를 따라 만들며
본격적인 리액트 웹 개발을 시작해봅시다!
(슬랙+리액트, 일명 Sleact!)
리액트 웹 개발,
어떻게 배워야 하는 걸까요?
요즘 리덕스를 잘 안 쓰는 추세라던데...
자바스크립트에서 타입스크립트로 넘어가고 있다던데...
진짜인가요?
이런 말 많이 들어보셨나요? 슬프게도 사실입니다. 그래서 이 강의에서도 리덕스(Redux)를 걷어내고, 자바스크립트 대신 타입스크립트를 적용했습니다. 리덕스 없이도 리액트 앱 개발이 가능하고, 타입스크립트도 생각보다 어렵지 않다는 걸 보여드릴게요!
이런 분들에게 추천드려요!
![](https://cdn.inflearn.com/public/files/courses/326931/cb635b52-ecea-409f-832a-765c2965b181/326342-5.png)
React 웹 개발 방법을 배워보고 싶은 분
![](https://cdn.inflearn.com/public/files/courses/326931/cb635b52-ecea-409f-832a-765c2965b181/326342-5.png)
TypeScript를 새로 배워보고 싶은 분
![](https://cdn.inflearn.com/public/files/courses/326931/cb635b52-ecea-409f-832a-765c2965b181/326342-5.png)
클론코딩을 통해 프론트엔드 파트를 구현해보고 싶은 분
제로초 슬랙 클론,
프론트엔드 고민 완벽 해결!
- 최신 프론트엔드 트렌드에 맞춰 타입스크립트로 서비스를 제작합니다. 단, 타입스크립트가 꺼려지는 분들을 위해 자바스크립트로도 진행할 수 있게끔 강의를 구성했습니다. (자바스크립트 소스 코드 제공!)
- 리덕스를 사용하지 않습니다. SWR이라는 라이브러리를 대신 사용합니다.
- 회원가입, 로그인, 채팅방 생성, 사용자 초대, 실시간 채팅, 사용자 멘션, 이미지 업로드 등 채팅 애플리케이션 구현에 필요한 기능을 모두 구현합니다.
- 강의에서 설명하지는 않지만, 백엔드 소스 코드도 함께 제공합니다.
이런 스킬을 배워요.
![326673-4.png](https://cdn.inflearn.com/public/files/courses/326673/3204b2ed-ded4-4448-adcb-403b4309a0cc/326673-4.png)
React
![326673-5.png](https://cdn.inflearn.com/public/files/courses/326673/12d11f01-70df-4177-b52d-847bdeeb4ab6/326673-5.png)
SWR
![326673-6.png](https://cdn.inflearn.com/public/files/courses/326673/a534cc54-6848-4e7e-9cc8-35aaab58a94a/326673-6.png)
Socket.io
![326673-7.png](https://cdn.inflearn.com/public/files/courses/326673/1a3333a1-4f24-4457-aefa-9c404633673b/326673-7.png)
Emotion
![326673-8.png](https://cdn.inflearn.com/public/files/courses/326673/cc146d12-6751-47a7-8197-5e74c75d3394/326673-8.png)
TypeScript
![326673-9.png](https://cdn.inflearn.com/public/files/courses/326673/2c8f6280-aa03-427b-830a-3157c1b5dcbd/326673-9.png)
Webpack+Babel
직접 만들어보세요!
![](https://cdn.inflearn.com/public/files/courses/326673/19f772f7-e685-4ec5-953b-c89008243fff/Honeycam 2021-03-04 02-10-57.gif)
![](https://cdn.inflearn.com/public/files/courses/326673/03ed0645-6cce-414f-911b-c0bbcca3dff3/Honeycam 2021-03-04 02-12-50.gif)
실시간 채팅 및 온라인 리스트
#1
소스 코드를
제공합니다.
https://github.com/zerocho/sleact (바로가기)
#2
질문에 빠르게
대답해 드립니다.
제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드려요.
강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부해 보세요.
내용을 이해하기에 더 도움이 될 거예요!
지식공유자를 소개합니다.
자주 묻는 질문 💬
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 에서 확인 가능합니다.
- 자주 묻는 질문은 FAQ로 정리해서 인프런 블로그에 올리겠습니다.
- 영상이나 내용에 문제가 있는 경우 문의하시면 재편집해서 올립니다.
- 강의에 없는데 구현이 궁금하신 것이 있는 경우, 많은 분들이 질문하시면 보너스 영상을 제작합니다.
선수 지식 & 연계 강의
필수 선수 지식
타입스크립트를 더 배우시려면!
다른 클론 코딩 강의가 궁금하다면?
이런 분들께 추천드려요!
학습 대상은
누구일까요?
선수 지식,
필요할까요?
조현영 입니다.
![조현영의 썸네일](https://cdn.inflearn.com/wp-content/uploads/avatars/14793/5bbebf0cc0f37-bpfull.png)
제 강의의 장점은 Q&A입니다. 24시간 이내에 무조건 답변드립니다! 다만 여러분들도 질문을 잘 해주셔야 합니다.
https://www.zerocho.com/lecture
제로초 강의 전체 로드맵
– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 개발 관련 방송중
– 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 개발파트장)
- 스모어톡 CTO