2022. 6. 7. 14:42ㆍReact/한입 크기로 잘라 먹는 리액트(React.js)
강의 링크 - https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8
GITHUB - https://github.com/winterlood
목표 1 - JS 프론트엔드 개발자로의 첫 발 딛음
목표 2 - 단순히 기술을 사용하는 게 아닌 이해하는 사람
목표 3 - 처음 만난 문제도 해결할 수 있는 사람
목표 4 - cs 기본 개념을 알고 활용하는 사람
[웹 개발, 프론트엔드] 강의입니다.
개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!
이런 걸
배워요!
리액트, 한 강의로 끝장낼 수 있어요.
한 입 크기로 잘라먹을 수 있도록 도와드릴게요. 🔥
수강평 미리보기! ✨
🧑💻 유감스럽지만, 리액트(React.js)
단순 사용법만 배워선 아무것도 할 수 없습니다.
단순 사용법만 배워 코딩만 하는 사람을 "개발자"라고 부르지 않습니다.
개발자는 맞닥뜨린 문제를 코드로 해결하는 사람입니다.
우리는 이 강의를 통해 리액트로 문제를 해결하는 방법을 배워나갈 것 입니다.
🌌 자바스크립트, Node.js 모르는데
리액트를 배우려 하시나요?
리액트는 Node.js 환경에서 구동되는 자바스크립트 라이브러리입니다.
즉, 이 두 개의 개념에 대한 사전 학습이 되어있지 않다면 이해도 활용도 제대로 할 수 없습니다.
이 강의는 자바스크립트의 아주 기본적인 스펙부터 엔진의 처리 과정과 Node.js 개념을 다루며,
여러분을 탄탄한 기본기를 갖춘 프론트엔드 개발자로 만들어 드립니다.
* 질문에 대한 답을 생각해보세요.
- 비동기 함수와 비동기 함수에 전달된 콜백함수는 어떻게 처리되나요? (웹 환경)
- Node.js는 왜 필요하며, 어떤 자바스크립트 엔진을 이용하여 만들어졌나요?
아주 기초적인 질문임에도 만약 대답이 잘 떠오르지 않다면
아직 리액트를 학습하기에 필요한 기본기가 부족한 것일 수도 있습니다.
그렇다고 기초 강의부터 다시 학습하실 필요 없습니다, 이 강의는 All-in-One이니까요!
학습 내용 📚
1. 자바스크립트 기본
자바스크립트는 어떤 언어이고, 어디서 실행되는가? 초심자도 쉽게 들을 수 있도록 준비했어요!
이미 자바스크립트를 알아도 헷갈리는 부분을 복습하기 좋아요.
2. 자바스크립트 응용
단축표현부터 비동기 처리와 API 호출까지!
앞으로 작성하는 모든 코드가 이해될 수 있도록 자바스크립트 엔진을 직접 하나하나 뜯어볼 거예요.
3. Node.js
Node.js는 리액트의 런타임 (실행 환경)이예요.
피할 수 없다면 즐겨라! 필요한 부분만 쏙 뽑아서 알려드려요!
4. React.js 입문
맹목적으로 리액트 사용법을 빠르게 배우는 것보다 더 중요한 것은
왜 리액트가 필요한지, 어떤 상황에서 유용한지 아는 거랍니다!
5. React.js 기본
아주 간단한 원페이지 프로젝트를 만들어보면서 리액트의 기본 사용법을 배웁니다.
6. React.js 실전 프로젝트
감정일기장 프로젝트를 진행하며 페이지 라우팅, 스토리지, 배포 등의 개념도 같이 다룹니다.
지금까지 배운 모든 지식을 총동원하여 마지막에 실제로 배포해요!
강의 기획 배경 🔧
시중에 이미 출판된 리액트 강의는 많지만 몇가지 안타까운 수강 사례가 보였습니다.
🎯 자바스크립트나 Node.js와 같은 "기본기"는 포함되어 있지 않은 강의가 대다수
혼자 따로 공부해야 하는 번거로움이 존재하며 높은 진입장벽을 느꼈을 거라고 생각합니다.
🎯 너무 진부한 Todo List 만들기
Todo List가 프론트엔드 강의 시장에서 가장 매력적인 튜토리얼 프로젝트 주제였던 것 같습니다.
그러나 수강생의 입장에서는 조금 더 독특한 프로젝트를 만들고 싶은 마음도 있었을 거라는 생각에
감정일기장 프로젝트를 기획하게 되었습니다.
🎯 배포되지 않는 결과물 (프로젝트)
웹서비스는 기획하고 개발하는 것도 중요하지만, 실제 배포하는 과정 또한 매우 중요합니다.
그러나 대다수의 강의가 실제 배포까지 이어지는 과정을 담지 않다보니 아쉬웠습니다.
따라서 위에 언급한 감정일기장을 Firebase를 이용해 간단하게 배포하는 과정을 추가하였습니다.
🎯 Open Graph : 사소한 디테일
우리 사이트를 설명하는 Open Graph 설정은 쉽고 간단하지만,
SNS에 공유 시 더 완성도 있는 서비스처럼 보일 수 있게 해주는 훌륭한 기술입니다.
대부분의 강의가 이를 다루지 않고 있어 간단하게 Open Graph 설정 부분을 포함하였습니다.
혹시, 여러분의 고민은 아닌가요? 😵
HTML, CSS 기초만 배웠는데
프론트엔드 개발자가 되려면 또 무엇을 배워야 하나요?
Vue, Angular, Svelte 등
이렇게 많은 기술 중 어떤 것을 배워야 하나요?
전형적인 프로젝트가 아닌,
독특한 결과물을 만들어보고 싶어요!
강의 특징 ✨
배웠으면 바로 써먹어야죠,
실제 배포되는 프로젝트 개발!
데이터를 추가 / 수정 / 삭제하는 방법과 Local Storage를 이용하여 웹 브라우저를
DB처럼 이용하는 방법까지 배워 firebase를 이용해 무료로 인터넷에 배포합니다.
(데모 : https://winterlood-emotion-diary.web.app/)
감성은 이렇게!
링크까지 예쁜 프로젝트 개발
배포만으로 끝나진 않아요. 언제나 사소한 디테일이 진짜와 가짜를 가르는 법!
Open Graph 설정을 통해 마지막의 마지막인 링크 공유까지 예쁘게 만들어봅니다.
개념 설명은 시각자료가 가장 이해하기 편하기에,
직접 제작한 다크모드 PPT로 알려드립니다.
예상 질문 Q&A 💬
Q. 강의 수강 대상이 어떻게 되나요?
HTML, CSS에 대한 이해가 있으신 분들이 듣기에 최적화된 강의입니다.
다만 강의 중간중간에 설명이 존재하기에 내용 숙지가 빠삭하지 않아도 됩니다!
Q. 이제 막 시작하려 합니다. 자바스크립트, Node.js는 잘 모르는데 들어도 괜찮을까요?
네, 환영합니다! 🙋♂️
본 강의는 리액트를 학습하는데 꼭 필요한 자바스크립트 지식과 Node.js 지식까지 알려드려요.
따라서 본 강의 하나로 리액트에 필요한 기초 지식을 먼저 학습하고, 리액트까지 학습할 수 있습니다.
Q. React 최신버전을 배워야 하는 이유가 있나요?
React를 포함하여 자바스크립트 프론트엔드 생태계는 주기적으로 큰 변화가 일어나게 됩니다.
따라서 이전 버전을 배웠다면, 최신 버전의 사용법과 원리를 다시 파악해야 합니다.
본 강의는 ES8와 React router V6 등 2021년 12월 기준 가장 최신의 내용을 담고 있습니다.
Q. 수업에서 어느 정도의 수준까지 다뤄지나요?
React가 탄생한 이유부터 기본적인 사용법, 실제 프로덕션 개발을 위한 성능 최적화 기법을 다룹니다.
또, Firebase를 이용하여 실제로 배포하고 Open Graph 설정으로 마무리하여
웹 프로젝트의 처음부터 끝까지 개발할 수 있는 모든 지식을 담고 있습니다.
지식공유자 소개 ✒️
이력 사항
- 현) 22Hours CTO | FrontEnd Developer
- 대학생 개발자 지식 공유 커뮤니티 DEVSTU 개발 및 운영
- 가톨릭대학교 컴퓨터정보공학부 졸업
포트폴리오/개인 영상
강의 수강 꿀팁!
이런 분들께
추천드려요!
선수 지식,
필요한가요?
이정환 Winterlood 입니다.
개발자를 위해 개발하는 개발자입니다 🤣
현) 22Hours CTO | FrontEnd Developer
- TypeScript, JavaScript를 정말 사랑하고 React.js, Next.js에서 헤어나오지 못하고 있습니다.
- 강의에 사용될 PPT를 잘 만듭니다(PPT 강의도 3개나 들었음)
- 좋은 발성과 딕션을 항상 연구하고 연습하고 있습니다.
'React > 한입 크기로 잘라 먹는 리액트(React.js)' 카테고리의 다른 글
| 2-4. 연산자 (0) | 2022.06.08 |
|---|---|
| 2-3. 자료형과 형 변환 (0) | 2022.06.07 |
| 2-2. 변수와 상수 (0) | 2022.06.07 |
| 2-1. Helloworld (0) | 2022.06.07 |
| React 소개 (0) | 2022.06.07 |