[ 첫 리액트 프로젝트 ]
Node.js / npm, yarn 설치하기 -> 코드 에디터 설치하기 -> Git 설치하기
-> create-react-app으로 프로젝트 만들기
1.3 작업 환경 설정
1.3.1 Node.js와 npm
🌵 Node.js
-
리액트 프로젝트를 만들 때는 Node.js를 반드시 설치해야한다.
-
Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다.
-
Node.js 출시 이후 자바스크립트는 웹 브라우저 영역 외에 웹 서버는 물론 모바일 애플리케이션, 데스크톱 애플리케이션 영역에서도 활약할 수 있게 되었다.
-
리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치하는 것이다.
- 바벨: ECMAScript를 호환시켜준다.
- 웹팩: 모듈화된 모드를 한 파일로 합치고 코드를 수정할 때마다 웹 브라우저를 리로딩하는 등의 여러 기능을 가진다.
-
백엔드 서버를 구현한다.
🌵 npm
- Node.js패키지 매니저 도구이다.
- 수많은 개발자가 만든 패키지를 설치하고 설치한 패키지의 버전을 관리할 수 있다.
- 리액트 역시 하나의 패키지이다.
- npm 저장소에 등록된 패키지는 약 82만 개로 꾸준히 새 패키지가 등록되고 있다.
🌵 yarn
- yarn은 npm을 대체할 수 있는 도구로 npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다.
$ npm install --global yarn1.3.3 에디터 설치
- 리액트 프로젝트를 진행하면서 많이 사용하는 에디터로는 서브라임 텍스트, 브래킷, VSCode, 아톰 등이 있다.
1.3.5 create-react-app으로 프로젝트 생성하기
$ npm create react-app <프로젝트 이름>
$ npm start다음 링크로 새 창이 열린다.
2.1 코드 이해하기
- import 구문을 사용하여 다른 파일을 불러와 사용할 수 있다.
- 이렇게 모듈을 불러와서 사용하는 것은 원래 브라우저에 없던 기능이지만 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능이다.
- import대신 require라는 구문으로 패키지를 불러올 수 있다.
- 브라우저에서도 사용하기 위해 파일을 묶듯이 연결하는 번들러를 사용한다.
- '번들러'에는 웹팩, Parcel, browserify 등이 있다.
- 리액트 프로젝트에서는 편의성과 확장성이 다른 도구보다 뛰어나기 때문에 주로 웹팩을 사용한다.
- 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해준다.
- 최적화 과정에서 여러 개의 파일로 분리 될 수도 있다.
- 웹팩을 사용하면 SVG파일(화질에 영향받지 않는 벡터이미지)과 CSS 파일도 불러와서 사용할 수 있는데 파일들을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당한다.
- 로더의 종류
- css-loader: CSS파일을 불러올 수 있게 해준다.
- file-loader: 웹 폰트나 미디어 파일 등을 불러올 수 있게 해준다.
- babel-loader: 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해준다.
function App() { return( <div></div> ); }위 와 같이 function 키워드를 사용하여 컴포넌트를 만든것을 함수 컴포넌트라고 한다.
프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 잇는 내용을 나타내는데 이러한 코드를 JSX라고 부른다.
2.2 JSX란?
- JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
function App() {
return(
<div>Hello</div>
);
}function App(){
return React.createElement("div", null, "Hello");
}2.3 JSX의 장점
2.3.1 보기 쉽고 익숙하다
일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드를 비교해보았을 때 JSX를 사용하는 편이 더 가독성이 높고 작성하기도 쉽다.
2.3.2 더욱 높은 활용도
JSX는 우리가 알고 있는 HTML태그를 사용할 수 있을 뿐만 아니라 앞으로 만들 컴포넌트도 JSX 안에서 작성할 수 있다.
개발 기록장