main/React 썸네일형 리스트형 Babel과 Webpack의 내부 동작 이해하기 - 2 Babel 설정 [실전 리액트 프로그래밍] babel을 사용하는 여러 방법을 직접 설정해보자! 바벨 설정 파일에서 사용할 수 있는 다양한 속성이 있다. extends: 다른 설정 파일을 가져와서 확장 env / overrides: 환경별 또는 파일별로 다른 설정 적용 > extends 속성으로 다른 설정 파일 가져오기 /common/.babelrc { "presets": ["@babel/preset-react"], "plugins": [ [ "@babel/plugin-transform-template-literals", { "loose": true } ] ] } plugins에 옵션을 설정할 때는 배열로 만들어서 두 번째 자리에 옵션을 넣는다. loose 옵션을 주면 문자열을 연결할 때 concat 메서드 대신 + 연산.. 더보기 Babel과 Webpack의 내부 동작 이해하기 - 1 Babel 실행 [실전 리액트 프로그래밍] babel을 실행해보자! babel이란? 리액트의 JSX 문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법 등을 사용할 수 있게 해 주는 자바스크립트 코드의 컴파일러. babel을 실행하는 여러 가지 방법 @babel/cli로 실행하기 웹팩에서 babel-loader로 실행하기 @babel/core를 직접 실행하기 @babel/register로 실행하기 프로젝트를 생성할 폴더에 npm으로 생성한다. npm init -y /package.json 파일이 생성된다. > 다음으로 필요한 패키지를 설치 바벨을 실행하기 위해서 필수적인 @babel/core와, 두 개의 플러그인, 프리셋 하나를 설치한다. npm install @babel/core @babe.. 더보기 [React] Proxy 경로 지정을 통해 Axios 기본 Url 생략하기 package.json "scripts": {}, "proxy": "서버주소", "eslintConfig": {}, ... 요청 보낼 서버 주소를 입력해준다. 이제 Axios 보내던 코드를 수정해준다. 경로를 다 적어 뒀었는데, 아래처럼 비워준 후 / 뒤쪽의 경로만 입력해준다. 더보기 [React] 절대 경로 설정 jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } jsconfig.json 파일을 생성한 후 위 코드를 입력해 주면 src 폴더가 절대경로가 된다. import SignupPage from 'pages/SignupPage'; src/pages/SignupPage 를 import 해 오는 코드 더보기 [React] 기본적으로 3000에서 실행되는 PORT 변경 그리고 React create-react-app 으로 앱을 만들면 기본적으로 포트가 3000번으로 설정되어 있는데 다른 포트로 실행하고 싶다면 package.json 파일을 수정하거나, .env 파일에 설정을 만들어주면 된다. package.json 파일을 수정하게 되면 OS에 따라 명령어가 달라진다. # Mac, linux "scripts": { "start": "export PORT=3001 && react-scripts start", ... } # Windows "scripts": { "start": "set PORT=3001 && react-scripts start", ... } .env 파일을 프로젝트 폴더에 생성해서 다음과 같이 포트를 지정해준다. PORT=3001 더보기 이전 1 2 3 다음
