1. CRA (Create React App) Create React App, 약칭 CRA는 리액트 웹 애플리케이션 개발을 위한 웹팩과 바벨 설정 등을 제공합니다 간단히 말해서 번거로운 리액트 초기 세팅 작업을 대신해주는 고마운 툴입니다 ↓↓↓ > npx 명령어는 기본적으로 패키지를 실행시키는 명령어이지만, 해당 패키지가 설치되어 있지 않다면 설치 후 실행시킵니다 프로젝트명은 폴더명이라고 봐도 무방합니다 설

1. useRef() 사용법 리액트에서 html 요소를 선택하고 싶을 때는 document객체의 querySelector나 getElement 선택자를 사용하는 것을 지양합니다 (컴포넌트가 HTML로 렌더링 되기 전에는 DOM 요소에 접근이 불가능하기 때문에) 대신 리액트는 자바스크립트 선택자를 대체하는 기능으로 useRef()라는 함수를 제공하고 있습니다 먼저 예제 코드부터 살펴보겠습니다 useRef()를 사용하면 최초 렌더링이 되었을 때 input에 접근이 가능해집니다 (클래스형 컴포넌트에서 componentDidMount가 되었을 때) +) ↑ 이런 식의 사용도 가능합니다 여기서 {...obj}, {...submit}의 중괄호({})는 객체가 아닌, 이 안에서 JSX 문법을 사용하겠다는 선언적 의미입니다 (앞으로 자주 사용게 될 방식이니 잘 알아둡시다)

Webpack 2번째 *지난 포스팅 내용의 복습과 정리가 포함되어 있습니다 1. Webpack 먼저 웹팩과 리액트를 설치합니다 [./src/index.jsx] [./src/app.jsx] 기본 설정은 끝. 다음으로 웹팩 환결설정이 필요합니다 루트 디렉토리에 webpack.config.js 파일을 생성합니다 [webpack.config.js] 번들링 결과 dist 디렉토리 안에 bundle.js 파일이 생성됩니다 2. HtmlTemplate 먼저 관련 플러그인을 설치하겠습니다 다음으로 환경설정을 수정합니다 [webpack.config.js] npx webpack 결과 dist 디렉토리

1. Babel > Babel은 자바스크립트 컴파일러입니다 Babel은 JSX 문법을 사용할 수 있게끔 만들어주는 툴로써 사용됩니다 그런데 왜 인터프리터 언어에 별도의 컴파일러가 필요한 걸까요? 우선 그 이유에 대해 알아보겠습니다 1-1. ES6 → ES5 자바스크립트 문법은 꾸준히 진화해왔습니다 그런데 신문법으로 작성된 코드의 경우 브라우저(크롬 버전)에 따라서 실행이 되지 않을 수 있습니다 그렇다면 let, const나 화살표 함수 등을 읽을 수 없는 환경에서 신문법으로 작성한 코드를 실행하려면 어떻게 해야 할까요 단순히 var, function 등으로 코드를 수정하는 것이 아닌, 호이스팅과 같은 순서상의 이슈까지 모두 고려해야 합니다 이 때 bab