새롭게 리뉴얼된 "한 입 크기로 잘라먹는 리액트"를 소개합니다.

안녕하세요 벨로그 여러분!
저는 무엇이든 쉽게 설명할 방법은 있다고 믿는 개발자 이정환입니다 😃

오늘은 완전히 새롭게 리뉴얼된 제 강의
"한 입 크기로 잘라먹는 리액트"를 여러분께 소개해 드림과 동시에
리뉴얼 기념으로 진행하는 이벤트도 소개해 드리려고 이렇게 글을 쓰게 되었습니다.

간략하게 이벤트 부터 안내 드리고
그 이후에 강의를 소개하는 순서로 진행하겠습니다

이벤트 안내

리뉴얼 기념 3주간 (~3.25) 무려 50% 할인 이벤트를 진행합니다.
인프런과 유데미 동시에 진행하며 그냥 쿠폰 바로 사용하시면 됩니다!

(인프런) 강의 링크 : https://inf.run/JhBG
(인프런) 쿠폰 번호 : 15305-89a8d6765a4b

(유데미) 할인 링크 : 링크

도움이 되셨다면 좋아요 한번만 눌러주시면 더 감사하겠습니다 🙇‍♂️

강의 소개

한 입 크기로 잘라먹는 리액트는 한입 시리즈의 첫번째 강의로
HTML과 CSS만 알고 있다면, 누구나 React.js를 배울 수 있도록
JavaScript 기초부터 Node.js를 거쳐 React.js까지 배워보는 강의입니다.

📌 섹션 1~2. 자바스크립트 기초 및 심화

React.js를 배우기 앞서 JavaScript의 기초 및 심화 개념을 살펴봅니다.
자료형 및 연산자같은 기본적인 개념부터,
배열메서드나 비동기 작업같은 심화적인 내용도 함께 살펴봅니다.
만약 JavaScript를 이미 알고 있다 하더라도 복습 차원에서 다시둘러보기 좋습니다.

📌 섹션 3. Node.js

React.js는 Node.js를 기반으로 동작하는 기술입니다. 따라서 Node.js를 모르는데 React.js를 알 수는 없죠
3섹션에서는 Node.js란 무엇이고, 왜 탄생하게 되었고, 어떤 기능을 가지고 있는지 실습과 함께 살펴봅니다.

📌 섹션 4. React.js 개론

React.js란 무엇이고 타 기술과 비교해 어떤 차별점을 갖고 있는지 알아보고, 기존의 기술들이 갖던 한계점을 어떻게 해결했는지 자세히 살펴봅니다. 이 과정에서 우리는 React.js에 대해 더 깊이 이해하게 될 것 입니다.

📌 섹션 5. React.js 입문

새로운 React App을 생성하고 React의 Component, State, Props 등의 기본적인 기능에 대해 살펴봅니다.
실습과 함께 모든 기본 기능을 사용해 보고 그림자료와 함께 시각적으로 완벽히 이해합니다.

⛳️ 섹션 6. React.js 프로젝트 1. 카운터 앱

첫번째 리액트 프로젝트 "카운터 앱"을 직접 만들어봅니다.
간단하지만 React.js의 동작 원리와 설계 철학을 엿볼 수 있는 좋은 프로젝트입니다.

📌 섹션 7. 라이프사이클

모든 인간이 태어나 유아기, 청소년기, 청년기, 노년기를 거쳐 황혼에 도달하는 것 처럼 모든 리액트 컴포넌트도 태어나, 변화되고, 사라집니다. 이런 컴포넌트의 생애주기를 라이프사이클 이라고 표현합니다.

컴포넌트의 라이프사이클을 이해하고 제어할 수 있게 되면 원하는 타이밍에 원하는 동작을 수행시킬 수 있게 됩니다. 따라서 7섹션에서는 라이프사이클에 대해 살펴보고 실습과 함께 이를 제어하는 방법을 살펴봅니다.

⛳️ 섹션 8. React.js 프로젝트 2. 투두리스트

두번째 리액트 프로젝트 "투두리스트 앱"을 직접 만들어봅니다.
이 프로젝트를 구현하면서 데이터 CRUD(추가, 조회, 수정, 삭제) 및 검색 기능 등의
React에서 배열 형태의 데이터를 다루는 여러가지 방법을 살펴봅니다.

📌 섹션 9. useReducer - 상태관리 로직 분리하기

역할에 따른 코드의 분리는 언제나 소프트웨어 개발의 미덕입니다.
복잡한 상태 관리 코드를 분리할 수 있도록 도와주는 useReducer에 대해 살펴보고
투두리스트 프로젝트에 직접 적용해 보며 실습합니다

📌 섹션 10. 최적화

우리 프로젝트에 불필요한 연산이 존재한다면? 과감히 제거해야 겠죠!
낭비되는 연산을 제거하는 React App의 여러가지 최적화 기법을 살펴보고
투두리스트 프로젝트에 직접 적용해 보며 실습합니다

📌 섹션 11. Context

더 간결하고 더 깔끔하게 다양한 컴포넌트에 데이터를 공급하는 Context에 대해 살펴보고
투두리스트 프로젝트에 직접 적용해 보며 실습합니다

⛳️ 섹션 12. React.js 프로젝트 3. 감정 일기장

지금까지 배운 개념을 총 동원 해최종 프로젝트 감정 일기장을 직접 만들어봅니다.
추가로 브라우저의 데이터베이스를 사용하고, 프로젝트를 배포해 사용자들이 접속할 수 있도록 만듭니다.
데모 링크 : https://emotion-diary.winterlood.com/

📌 섹션 13. 마치면서

강의는 끝나지만 우리의 학습은 끝나지 않습니다.
앞으로 어떤 방향성을 가지고 나아가야 할지 이야기 해 봅니다.

닫는 말

마지막으로 리뉴얼을 끝까지 마무리 할 수 있도록 계속해서 응원해주신
제 기존 강의의 수강생 분들 그리고 주변 지인 분들께 모두 감사드립니다.
또 이 글을 보고 관심을 가져주신 모든 벨로그 여러분께도 감사드립니다.