클래스, 이렇게 들었어요!

React 로
총 2개의 작품 만들기

한 작품을 만들어 보는데에 1일~3일 정도가 소요됩니다.

To-do 웹앱 만들기

메모 앱 만들기

이런 걸 배울 거예요

React 공부와 동시에 웹앱 만들기

Todo 앱을 만들면서 React 를 다루는 방법을 알려드립니다.

macOS 메모앱을 웹앱으로 구현하기

강의로 배웠던 내용을 바탕으로 메모앱 만드는 방법을 알려드립니다.

개발자라면 필수 소양, Git

개발자라면 무조건 사용하게 되는 Git 을 알려드립니다.

Typescript 로 더 안정적인 개발

React 개발을 Typescript 로 하는 방법을 알려드립니다.

Redux 로 상태 관리 마스터

현업에서 주로 사용하는 상태 관리 도구 Redux 사용법을 알려드립니다.

PWA 로 모든 플랫폼에서 작동하는 웹앱 개발

요즘 많이 뜨고있는 PWA 구현 방법을 알려드립니다.

안녕하세요!

제 강의를 찾아 주셔서 감사합니다 ☺️

웹 개발을

왜 배워야 할까요?

여러분들은 평소에 컴퓨터로 어떤 걸 하시나요? 유튜브나 넷플릭스로 시간을 보내실 수도 있고, 또는 음악을 들으면서 하루를 보내실 때도 있을 겁니다. 또는 구글 독스나 노션으로 업무를 하시거나, 인스타그램이나 페이스북으로 일상을 공유할 때도 있을 겁니다.

여러분이 컴퓨터 또는 스마트폰을 많이 사용하신다면, 대부분 모두 웹(Web) 기반의 플랫폼을 사용하고 있으실 겁니다. (심지어 여러분들이 보고 있는 이 화면 조차도 웹 플랫폼입니다 😆)

_{internetlivestats.com}_{, 전 세계 인터넷 사용자 수와 웹사이트 수}

웹은 브라우저가 있는 모든 플랫폼 (PC, 스마트폰, TV 등)에서 사용할 수 있는 굉장한 접근성을 가지고 있다는 장점이 있습니다. 이러한 장점으로 더욱 많은 웹 사이트와 플랫폼이 앞으로 생겨날 텐데, 웹에 대한 기초부터 최신 트렌드까지 알아야 빠르게 적응할 수 있을 것입니다.

당신을 위한 최신 웹 개발 방법

저는 기초를 갈고닦는 것 만큼 개발 트렌드에 민감하게 반응해야 한다는 것도 중요하다고 생각합니다. 따라서, 해당 수업에서는 2021년 기준 현업에서 사용하고 있는 최신 언어, 프레임워크들을 가지고 여러분들께 알려드릴 계획입니다.

1. React (리엑트)

페이스북에서 개발한 'React'를 통해 웹사이트를 개발하는 방법을 알려드리는 강의입니다. 카카오페이, 티스토리, 산타토익, 마이리얼트립 등 유명한 스타트업에서 사용하는 웹 개발 라이브러리입니다 🕶

2. Typescript (타입스크립트)

요즘 트렌드인 'Typescript'를 통해 개발합니다. class101 최초로 Typescript를 사용한 웹 개발 강의입니다! 카카오, 토스, 당근마켓 등 유니콘 스타트업부터 대기업까지 모두 사용하는 프로그래밍 언어입니다 😮

3. Redux (리덕스)

C언어에서는 Pointer를 처음에 이해하기 어렵듯이, React 를 개발하면서 이해하기 어려운 예측가능한 상태 컨테이너 'Redux' 에 대해서 실습과 함께 알려드릴 계획입니다 🛠

4. PWA (Progressive Web Apps)

React 로 웹사이트뿐만 아니라 웹앱 만드는 방법도 알려드립니다. 'PWA(Progressive Web Apps)'를 통해 PC 앱과 모바일 앱으로도 사용될 수 있는 방법을 전수해 드리겠습니다 ✨ (사진처럼 유튜브 뮤직에서도 사용중인 기술입니다!!!)

5. Git (깃)

협업뿐만 아니라 버전 관리에 있어 필수적으로 알아야 하는 'Git'에 대해서도 알려드리는 강의입니다. Git 은 상대적으로 최신 기술은 아니지만, 사용하지 않는 IT기업은 (아마) 전 세계에 없을 정도의 기초입니다. 🍗

배웠으면 써먹어보자

강의를 모두 수강하게 되신다면 여러분은 2가지의 웹앱을 완성하고 프로덕션까지 올리셨을 겁니다.

To-Do 앱

To-Do 앱을 만들면서 React 와 HTML, CSS에 대한 기초 지식과 더불어 Redux로 상태 관리 및 기능 구현 방법을 터득하실 수 있으실 겁니다. 추가로 PWA로 모바일 앱처럼 작동할 수 있도록 할 예정이며, 모든 코드는 Git으로 관리합니다!

macOS 메모앱

To-Do 앱을 통해 웹 개발에 대한 지식을 깨닫게 되신다면, 직접 한번 메모앱을 구현하실 수 있는 단계에 오셨을 겁니다! 물론, 처음은 당연히 어렵듯이 CSS 가 잘 안 따라 준다든지 state 가 안 바뀐다든지에 대한 오류부터 Type 설계와 컴포넌트 설계를 하면서 어려움에 처하실 수 있으실 겁니다.

하지만 막히시는 부분이 있을 경우 메모 앱 실습 강의 영상을 보시거나, 저에게 질문해 주신다면 해결한 후 앞으로 나아갈 수 있으실 겁니다!

개발 환경에 대한 설명

강의에서 사용하는 PC 는 macOS (맥북에어 M1 기본형) 이지만, 윈도우OS 도 문제없이 강의를 수강할 수 있도록 할 예정입니다!
Microsoft 에서 개발한 Visual Studio Code 를 사용할 예정이며, 유용한 익스텐션은 강의에서 알려드립니다.
그 외로는 Chrome (개발자 도구), node.js, npm, yarn, git 을 사용하실 겁니다.

준비물 · 코칭권

🔥 어디 가서 물어보거나 검색하기 어려웠던 질문들을 1:1로 알려드립니다.

1개의 코칭권에 2개의 질문을 해주실 수 있습니다.
클래스에서 개발하셨던 웹 개발 코드에 대해 리뷰해 드리겠습니다. (Github 레포지토리 링크를 첨부해 주시면 리뷰해 드리겠습니다.)
이해가 어려웠던 부분에 대해 완벽하게 이해시켜 드리겠습니다.
원하시는 대로 구현이 안 되는 기능 또는 컴포넌트에 대해 코칭 해 드리겠습니다.
기획하신 웹 서비스에 대해 리뷰 및 방향성을 알려드리겠습니다.
이 외에도 리엑트, 프론트엔드 개발과 관련된 질문이라면 정성껏 코칭 해 드리겠습니다.

코칭권 FAQ

Q 1. 추가 답변할 때 또 코칭권 써야 하는 거 아닌가요?

답변이 완벽하게 되지 않았을 경우 답변에 첨부된 이메일로 연락을 주시면 더 상세하게 답변해 드리겠습니다. (최대 1번)

Q 2. 강의 실습하다가 오류가 나서 질문을 드리고 싶은데, 그때도 코칭권을 써야 하나요?

강의 실습 중 발생한 오류 또는 궁금증은 커뮤니티 댓글로 남겨주시면 빠른 시일 내로 답변 드리겠습니다.

커리큘럼

크리에이터

kidevelop

안녕하세요! 개발자 kidevelop 입니다.

안녕하세요😄

2012년부터 프로그래밍을 시작하여 계속해서 배워나가고 있는 풀스택 개발자 kidevelop입니다.

완벽하고 정교한 소프트웨어를 구현하기 위해 디자인부터 프론트엔드, 백엔드, 서버, 인공지능까지 모두 다루어 보았습니다.

웹 개발은 15년도, HTML5 와 CSS3 가 한창 떠오르고 있을 때 중학생의 단순 호기심으로 시작하게 되었습니다. 그러면서 PHP 와 같은 백엔드 언어도 공부하였고 지인의 웹사이트 개발을 맡고 직접 서비스 되고 있는 사이트들을 클론코딩 하면서 스스로 익혀나갔습니다.

그리고 17년도에 React 와 Vue 라는 가상 돔 기반 웹 개발 라이브러리가 나오게 되면서 새로운 웹 개발을 알게 되었습니다. 처음에는 이전에 했던 웹 개발이랑 너무 달라 어색하기도 하고 쩔쩔 고민하면서 하나하나 찾아보고, 열심히 했던 기억이 남습니다.

이러한 기억을 되살려서 웹 개발에 관심을 가지고 있는 분들에게 좋은 지식을 쉽고 정확하게 전달해 주고자 강의를 개설하게 되었습니다. 잘 부탁드립니다! 🙌