[REACT] REACT 학습 (DAY1)

REACT 학습 DAY1

[색션1]

 

REACT

- 사용자 인터페이스 구축을 위한 라이브러리 (A library for builiding user interfaces) 

- 전환이 자연스럽고, 즉각적이야! 새페이지를 서버에서 로딩받을 때까지 기다리지 않아도 장점이 있다.

 

자바스크립트에서 가능한 이유는?

자바스크립트는 페이지를 재로딩하거나 나가지 않고도 백그라운드의 영화 데이터를 가져와서 화면을 데이터로 업데이트하고,

페이지를 부드럽게 전환함.

 

자바스크립트만 사용하는게 좋은 옵션이 아닌 이유  

UDEMY의 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript 해당 강의에서 퍼왔다.

 

*cumbersome = 번거롭다.  (awkward because of being large, heavy, or not effective)

 

vanillajs 코드로 보면 -- 그냥 html 파일 따로 / javascript 파일 따로 분리해서 개발을 진행했는데, 

- REACT 코드의 특징 - html 코드와 javascript 코드를 섞어쓰는 것 !  (app.js)

동적코드가 Html 코드랑 섞여 있는 것을 볼 수 있다. 

 

REACT = Declarative UI Programming 

UDEMY의 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript 해당 강의에서 퍼왔습니다.

 

 

수업에서 공유해준 Github

https://github.com/academind/react-complete-guide-course-resources

GitHub - academind/react-complete-guide-course-resources: React - The Complete Guide Course Resources (Code, Attachments, Slides

 

수업에서 공유해준 Discard

https://academind.com/community

Academind Community

 

 

react 로컬에서 세팅하는 법

 

- visual studio code 를 통해 세팅함

- vite 로 react 프로젝트 생성 방법 

UDEMY의 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript 해당 강의에서 퍼왔습니다! *

 

 

+프로젝트 github 에서 다운받아서 실행하는 경우,

 

1) 일단 npm install 을 실행하고

2) npm run dev 를 실행하여 로컬 작업이 가능하다. 

 

 

단순히 html js 소스 넣어서 그냥 프로젝트 세팅하면 안될까..?

왜 vite 를 쓰고 그래야하나..?

--> 자바스크립트 기능에 있는 특수한 html 을 사용해야 하기 때문에 불가해!! 

( 이 문법은 jsx 임!)

 

안타깝게도 브라우저에서는 사용할 수 없음.

브라우저에서 실행 가능한 코드로 변환을 시켜야함!

 

이 코드를 최적화해야하는데.. 웹사이트 성능 향상시키는 것!