[React 완벽 가이드] section 1: 시작하기

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

2.react.js란?

react? 

• 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용된다.

전통적인 웹 사이트

• 링크나 버튼을 클릭하면 그 요청이 서버에 전송되고 새로운 html 페이지가 브라우저로 보내져 화면에 보여진다.
• 무겁고 불편하게 느껴진다. 

javascript

• DOM이라고 불리는 것을 조작할 수 있고, 이를 통해 html의 요소들이 화면에 렌더링 된다.
• DOM을 JavaScript 를 통해 조작할 수 있고, 새로운 Html 페이지를 불러오지 않고도 사용자들이 보는 것들을 변경할 수 있다. 

3.왜 "JavaScript" 대신 리액트 일까요?

• A client-side JavaScript library
• All about building modern, reactive user interfaces for the web
• Declarative, component-focused approach

4. 리액트로 단일 페이지 애플리케이션(SPA) 구축하기

• 서버로부터 html 파일을 받지 않고 사용이 가능하다

5. react.js 대안 탐색하기(Angular/ Vue)

react.js

• Learn and focused compoonent-based UI library. Certain features (e.g. routing) are added via community packages.

Angular

• Complete component-based UI framework, packed with features. Uses TypeScript. Can be overlikk for smaller projects

Vue.js

• Vue.js is kind of like the mixture of Angular and React
• Complete component-based UI framework, includes most core features. A bit less popular than React & Angular.

6. Join our Online Learning Community

• Discord

7. 강의 소개 및 강의 개요

Basics & Foundation

Introducing Key Features

• Components & Building UIs
• Working with Events & Data: "props" and "state"
• Styling React Apps & Components
• Introduction into "React Hooks"

Advanced Concepts

Building for Production

• Side Effects "Refs" & More React Hooks
• React's Context API & Redux (Third-party API)
• Forms, Http Request & "Custom Hooks"
• Routing, Deployment, Next.js & More

Summaries & Refreshers

Optimizing your Time

• javaScript Refresher
• ReactJs Summary

8. 강의를 수강하는 두 가지 방법

1. Standard Approach
2. Summary Approach

9. 강의를 최대한 활용하는 방법

How to Get The Most Out Of the Course

• Watch the Videos
• Code Along & Practice
• Debug Errors & Explore Soulations
• Help Each Other & Learn Together

10. 강의 개발 환경 설정(코드 편집기)

• Visual Studio Code (free)
• prettier
• Material Icon Theme

---

https://www.udemy.com/course/best-react/