2.1코드 이해하기 2.1.0 import React from 'react'; import 구문은 특정 파일을 불러오는 구문입니다. import를 통해 다른 파일을 불러오고 모듈도 불러와서 사용할 수 있습니다. import React from 'react'; 위의 코드는 React라는 모듈을 react라는 패키지에서 불러온다는 뜻입니다. 2.1.1 번들러와 로더 원래 브라우저에서는 import를 통해 모듈을 불러올 수 없습니다. 이런 기능을 브라우저에서도 사용하기 위해서는 번들러를 사용합니다. 번들러는 묶는다는 뜻으로 import를 통해 불러온 모듈을 모두 합쳐 하나의 파일로 만들어 줍니다. 또한 최적화를 통해 여러 개의 파일로의 분리도 가능합니다. 리액트에서는 주로 웹팩이라는 번들러를 사용합니다. im..

22-23/22-23 리액트 스타터 3 2022. 9. 29. 10:01

INDEX 2장 JSX ● 2.1 코드 이해하기 ● 2.2 JSX란? ● 2.3 JSX의 장점 ● 2.4 JSX 문법 ● 2.5 ESLint와 Prettier적용하기 ● 정리 ● 2.1 코드 이해하기 import React from 'react'; 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. import구분을 통해 리액트를 불러와서 사용 가능하다. *Node.js에서는 import대신 require을 사용한다. 번들러: 파일을 묶는다. 번들러를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. -리액트에서는 주로 웹팩을 사용한다. (편의성, 확장성) 로더:파일을 불러온다. *css-loader, file-loader..

21-22/21-22 리액트 스타터 -2 2021. 11. 1. 13:01

2.1 코드 이해하기 import React from 'react'; 위 코드는 리액트를 불러와서 (import) 사용할 수 있게 해 주는 코드입니다. 리액트 프로젝트 제작 시 node_moudles 디렉터리 생성됨 → 이 디렉터리 안에 있는 react 모듈을 설치합니다. 모듈을 불러와서 사용하기는 브라우저에는 없던 기능입니다. → 브라우저에서도 사용하기 위해 **번들러(bunlder)**를 사용합니다. (Node.js에서 지원합니다.) 번들러 (bundler) 종류: 웹팩, Parcel, browserify 등 이 중, 리액트에서는 웹팩을 사용합니다. import(or require)로 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 줍니다. 최적화 과정에서 여러 개의 파일로 분리..

21-22/21-22 리액트 스타터 -1 2021. 11. 1. 12:01