React Native with Expo: ゼロチョから正しく学ぶ
zerocho
Web開発者が(特にReact開発者であれば)本当に簡単にアプリをリリースできる時代になりました。Expoと一緒なら、より一層速くAndroidとiOSアプリの両方をリリースできます。Expoを通じて迅速にアプリまでリリースできる開発者になりましょう。
초급
React, React Native, Hybrid App
BEST
Slack 클론 코딩[실시간 채팅 with React]
Slack 서비스를 따라 만들며 본격적인 리액트 웹 개발을 시작해봅시다! 회원가입, 로그인, 방 만들기, 실시간 채팅까지!
먼저 경험한 수강생들의 후기
이런 걸 배울 수 있어요
리액트 웹 개발
프론트 초기 세팅(CRA 없이)
SWR(리덕스 대체)
Emotion(스타일드 컴포넌트)
Socket.io 실시간 채팅
내 손으로 만드는 채팅 애플리케이션,
효과적으로, 더 간단하게! 💬
이 강의에서는?
Slack(슬랙) 서비스를 따라 만들며
본격적인 리액트 웹 개발을 시작해봅시다!
(슬랙+리액트, 일명 Sleact!)
리액트 웹 개발,
어떻게 배워야 하는 걸까요?
요즘 리덕스를 잘 안 쓰는 추세라던데...
자바스크립트에서 타입스크립트로 넘어가고 있다던데...
진짜인가요?
이런 말 많이 들어보셨나요? 슬프게도 사실입니다. 그래서 이 강의에서도 리덕스(Redux)를 걷어내고, 자바스크립트 대신 타입스크립트를 적용했습니다. 리덕스 없이도 리액트 앱 개발이 가능하고, 타입스크립트도 생각보다 어렵지 않다는 걸 보여드릴게요!
이런 분들에게 추천드려요!
React 웹 개발 방법을 배워보고 싶은 분
TypeScript를 새로 배워보고 싶은 분
클론코딩을 통해 프론트엔드 파트를 구현해보고 싶은 분
제로초 슬랙 클론,
프론트엔드 고민 완벽 해결!
- 최신 프론트엔드 트렌드에 맞춰 타입스크립트로 서비스를 제작합니다. 단, 타입스크립트가 꺼려지는 분들을 위해 자바스크립트로도 진행할 수 있게끔 강의를 구성했습니다. (자바스크립트 소스 코드 제공!)
- 리덕스를 사용하지 않습니다. SWR이라는 라이브러리를 대신 사용합니다.
- 회원가입, 로그인, 채팅방 생성, 사용자 초대, 실시간 채팅, 사용자 멘션, 이미지 업로드 등 채팅 애플리케이션 구현에 필요한 기능을 모두 구현합니다.
- 강의에서 설명하지는 않지만, 백엔드 소스 코드도 함께 제공합니다.
이런 스킬을 배워요.
React
SWR
Socket.io
Emotion
TypeScript
Webpack+Babel
직접 만들어보세요!
실시간 채팅 및 온라인 리스트
#1
소스 코드를
제공합니다.
#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로 정리해서 인프런 블로그에 올리겠습니다.
- 영상이나 내용에 문제가 있는 경우 문의하시면 재편집해서 올립니다.
- 강의에 없는데 구현이 궁금하신 것이 있는 경우, 많은 분들이 질문하시면 보너스 영상을 제작합니다.
선수 지식 & 연계 강의
필수 선수 지식
웹게임 여덟 개로 리액트, 바벨, 웹팩까지!
타입스크립트를 더 배우시려면!
요즘 대세! JS보다 안정적인 TS의 세계
다른 클론 코딩 강의가 궁금하다면?
어마어마한 22시간 트위터 클론!
이런 분들께
추천드려요
학습 대상은
누구일까요?
리액트 문법을 배우고 본격적으로 웹 개발을 하고 싶은 분
단순한 튜토리얼 대신 제대로 된 서비스를 따라 만들고 싶은 분
타입스크립트로 안정성을 높인 개발을 배우고 싶은 분
선수 지식,
필요할까요?
HTML/CSS
JS 기초 지식
React 기본 문법(무료 강좌 듣고 오세요)
65,776
명
수강생
1,623
개
수강평
9,709
개
답변
4.8
점
강의 평점
22
개
강의
제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!
One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.
👉ZeroCho Lectures
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.
– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자
– ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중
– 현) 스모어톡 CTO
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)
Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook
Operator of ZeroCho.com
Currently running a YouTube channel ZeroCho TV, covering development topics
CTO at SmoreTalk
Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)
커리큘럼
전체
46개 ∙ (11시간 1분)
2. 필수시청[에러질문법]
15:53
4. 프론트엔드 세팅하기
20:28
6. ts + webpack 실행하기
09:57
7. 웹팩 데브 서버 세팅하기
10:55
8. 폴더 구조와 리액트 라우터
17:48
9. 코드 스플리팅과 이모션
15:32
11. 회원가입 페이지 만들기
13:58
12. 커스텀 훅 만들기
10:14
14. 로그인 페이지 만들기
08:40
16. swr 설정 살펴보기
07:12
21. 메뉴 만들기
16:59
22. 모달 만들기
29:50
23. 채널 만드는 모달
13:46
25. 사용자 초대 모달 만들기
10:54
강의 게시일:
마지막 업데이트일:
수강평
전체
95개
4.8
95개의 수강평
dyonglove수강평 25
∙
평균 평점 4.2
4
100% 수강 후 작성手ごろな価格ではないのに、クラスを聴くのは難しいです。 YouTubeで無料で公開する講義なら十分に聞くことができるだろうが、整頓もされておらず、毎回公式文書にすべて出ていると言われるが…ありますか？定石があるので、誰もが一等級を受けるわけではないですね。定石に全部出ているので見ればいいと、ある部分は大まかに説明すれば聞く人によっては非常に難しくて混同して感じることもあります。バックエンドとフロントエンドをあえて分けるのも値上げする方便だと思います。二つの講義が自然に繋がらない感じですが、まずバックエンドを作ったのですがフロントに来てみると、講師様が作った部分にコンフィグ部分が私が作った側にはないとか。また、その前のレベルに該当するのはすでに知っている内容なので、忙しい会社員として、すべての講義に多時間を投資することはできません。まるで数学をめちゃくちゃうまくやっているわけではありませんが、毎回集合だけ見ているとは思えません。前講義より上位レベルの講義を撮っても独立した講義で作っていただきたいです。実は色々な講義を聞いて、私が感じる不便さを最大限過ぎないように伝えるためにたくさん悩んだので、この部分はタイプスクリプト講義を聞いて感じた感想が出てきたようですが。全講義を知らなかった私としてはあまり得られる感じではありませんでした。だから何度も聞いて把握しようとしているのですが、本業も忙しいのでそれほど講義を聞く負担が上がり、その不満が講師様に向けられて申し訳ない心もありますが、こういう意見もあることをご確認ください。最後の配布部分も、それでどのように実質的に配布し、目に見える結果を見ることができるのか気になることが解決されない感じです。それぞれスタイルが違うと思いますが、個人的に価格に比べて良い質の講義ではないと思います。しかし、私が今まで聞いたゼロチョの講義の中で、今回のフロントエンド講義が一番良かったと思います。前後の部分に音楽を取り出してくださったことも、受講生たちの意見を聞いて心配してくださったという考えに感謝した気がしました。これからも発展するゼロチョ様になりますように。
- zerocho지식공유자
大切なコメントありがとうございます。私が最近講座は講義教案も作成し、より体系的に授業を作っていますが、タイプスクリプトの方は初創期講座なので、はるかに精神のない感じが強く召されたようです。私が最近講座を出したとしたら、JavaScript+タイプスクリプトを合わせて講座を出してJavaScript部分はYouTubeに無料で解放されたようですね。この部分は私が次第にリニューアルしながら改善していくようにします。スラッククローンコーディング講座については、もともとフロントとバックエンドを合わせて9～10万ウォンに発売しようとしたが、フルスタック講座の負担になる方が多く、ターゲット層を分離しました。ところが分離したまま発売してみると、それぞれバグや講座改善事項が積み重ねられ、二つのつながりが少しずれた部分があったようですね。もう一度練習して修正します。知っている部分を教えてください。苦情が多かったのですが、できるだけ配慮して受講評を残してくださったのが感じられます。誠実なスカンピョン残してくれてありがとうと申し訳ありません。
- dla14347593
수강평 4
∙
평균 평점 4.3
- ckdduf6651459
수강평 2
∙
평균 평점 5.0
- milkyway
수강평 6
∙
평균 평점 5.0
5
100% 수강 후 작성まだ講義は全部聞いていませんが、十分に良い講義だと思われ、インフラで受講評してほしいポップアップが浮いて事前に少ないです。 まず講座紹介そのままタイプスクリプトを書いたが、与えるリアクト、ウェブパック、SWR、Emotion、Socket.IO講座と考えればいいと思います。リアクト+タイプスクリプトを勉強しに講座を聞くと少し残念です。逆に言えば、タイプスクリプトを知らなくても講義を聞くには何の問題もありません。 ただ、私のおすすめはオールインワンタイプスクリプト講座を進め、リアクト+タイプスクリプトの勉強をしようとする方が軽くタイプスクリプトも書いて聴きやすい講座という気がします。 長所を先に言えば、まずはリアクトに忠実な講義であるだけにリアクト構造、開発方向をつかむのに最適です。 2つ目はWebパックの初期設定を知らせて起動するのには分からなくても開発するのに支障はありませんが、後で本当に重要なのが初期設定だと思うほど初期設定に関する内容が本当に良かったです。 3つ目は、スタイルを身に着けるときにどの単位でスタイルコンポーネントを作るかを提示し、そのまま授業進行するのもよかったです。最後にソケット通信に関する基本説明とヒントを与えるのも良かったのですが、これは今聞いているので確信はありませんね。 欠点は、私が見たときに出てきたか、ちょっとした講義とコードが変わっていることです。ただ、FitHubにアップデートコードを着実に上げておいて、詰まっていることがあるなら、インフラの質問掲示板やSlackに質問すれば、答えを早くしてくれるので、一人で勉強する気があれば十分補完可能で、私は講義内容と並行してFetHub react-query内容も一緒に反映して聞いているのにライブラリアップデートに変わった内容は十分に検索して解決できるレベルでした。 最後に講義聞くヒントを言えば初期セッティングのような場合には変わり点があるので、追いつきながら聞かないで一旦フェイトハブコードを貼り付けてからじっくりと講義を聞いてみて一人でセッティングしてみる方法も良いと思います。 そして基礎講義であるだけに、すでにリアクトとタイプスクリプトを実務でうまく使用中であり、ソケット通信も適用してうまく書いたことがあれば、思ったより内容が少ないでしょう。 個人的に前に得ていくことが多く、良い経験になった講義でした。
- dongwooklee96
수강평 3
∙
평균 평점 4.3
2025 추석맞이 감사할인 중
₩3,508
25%
₩39,600
제로초(조현영)님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
![[改訂3版] Node.js教科書 - 基本からプロジェクト実習まで강의 썸네일](https://cdn.inflearn.com/public/courses/330181/cover/47e0125e-75ad-4946-96d3-54bbc444a188/330181-eng.jpg?f=avif&w=420)
![[リニューアル]タイプスクリプトオールインワン：Part1。강의 썸네일](https://cdn.inflearn.com/public/courses/329282/cover/08ece3d3-46fe-4a46-932b-8aca91135e8e/329282-eng2.png?f=avif&w=420)
![[リニューアル]タイプスクリプトオールインワン：Part2。実戦分析編강의 썸네일](https://cdn.inflearn.com/public/courses/329424/cover/5ae4e14d-c643-46be-9d4d-be3987a1f883/329424-eng.png?f=avif&w=420)
![Slack クローン コーディング [NestJS + TypeORM を使用したバックエンド]강의 썸네일](https://cdn.inflearn.com/public/courses/327193/cover/010c8faf-bfc5-4c6a-9623-a68dc3b38697/327193-eng.png?f=avif&w=420)
![[リニューアル]コーディング自律学習ゼロ秒のJavaScript入門강의 썸네일](https://cdn.inflearn.com/public/courses/327126/cover/edca2ab2-47b4-45b7-92c6-5bb00fd125eb/327126.jpg?f=avif&w=420)
![配信アプリ クローンコーディング [with React Native]강의 썸네일](https://cdn.inflearn.com/public/courses/328411/cover/b51a3e0d-e2b3-49b3-8f7c-7677fb920434/328411-eng.png?f=avif&w=420)
![[リニューアル] ReactでNodeBird SNSを作成する강의 썸네일](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?f=avif&w=420)
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
![[React 2部] 高度なトピックとフック강의 썸네일](https://cdn.inflearn.com/public/courses/332123/cover/62407827-5375-47cf-91fa-4877bf72c139/332123-eng.png?f=avif&w=420)
![[React/VanillaJS] UI要素を直接作成する Part 1강의 썸네일](https://cdn.inflearn.com/public/courses/333258/cover/1b33bae1-68fa-4b4d-b089-199eab988c84/333258.png?f=avif&w=420)
![[コードファクトリー] [初級] 8時間で終わるコードファクトリのTypescript完全征服フルコース강의 썸네일](https://cdn.inflearn.com/public/courses/330970/cover/3c24c2b8-9dc1-44ed-af4e-2b58542a6504/330970-eng.png?f=avif&w=420)
![[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?f=avif&w=420)
![[Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core강의 썸네일](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
![[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
