웹팩

모듈화된 코드를 한 파일로 합치는 대표적인 번들러로 웹팩, Parcel 등이 있으며 웹팩이 편의성과 확장성이 다른 도구보다 뛰어나기 때문에 주로 사용합니다.

파일들을 불러오는 것은 웹팩의 로더라는 기능이 담당하는데 로더에는 여러가지 종류가 있습니다. 그 중 3가지를 뽑자면

1. css-loader : css파일을 불러올 수 있다.
2. file-loader : 웹 폰트나 미디어 파일 등을 불러올 수 있게 해 준다.
3. bable-loader : 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 ES5(이전 버전)문법으로 변환해줍니다. (구버전 웹 브라우저와 호환하기 위해서)

웹팩의 로더는 별도의 설치를 안 해도 리액트 프로젝트를 만들 때 사용했던 create-react-app이 번거로운 작업을 모두 대신해 주기 때문에 우리는 별도의 설정을 할 필요가 없습니다.

webpack을 사용하는 이유

1. 병목 현상을 최소화 할 수 있다.
2. 모듈 단위로 개발이 가능하다.
   • 가독성과 유지보수 효율이 좋다
3. 코드를 압축/최적화 할 수 있다.
4. ES6 버전 이상의 스크립트를 사용할 수 있다.
5. scss를 사용할 수 있다.

JSX

리액트로 프로젝트를 개발할때 사용하는 JS 확장 문법(공식적인 JS문법은 아님)

코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

JSX문법 특징

1. 감싸인 요소 : 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. Virtual DOM에서 컴포넌트 변화를 효율적으로 비교할 수 있도록 하기 위해서 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다.
2. 자바스크립트 표현식을 작성 하려면 {}로 감싸주면 됨
3. {}안에 if문 대시 삼항 연산자
4. AND(&&) : 특정 조건을 만족할 때 렌더링
5. OR(||) : 특정 값이 undefined이면 렌더링
6. self-closing

const,let,var

var은 scope(해당 값을 사용할 수 있는 코드 영역)가 함수 단위
const, let은 블록 단위

• const는 한번 지정하고 나면 변경이 불가능
• let은 동적인 값을 담을 수 있는 변수를 선언할 때 사용