main 썸네일형 리스트형 Babel과 Webpack의 내부 동작 이해하기 - 4 webpack [실전 리액트 프로그래밍] webpack을 설치해보자! 👉🏻 webpack 실행해보기 웹팩은 웹에 들어가는 여러 가지 리소스를 사용자에게 전달하기 좋게 하나의 번들 형태로 만들어준다. mkdir webpack-init cd webpack-init/ npm init -y { "name": "webpack-init", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } npm install webpack webpack-cli webpack-cli.. 더보기 Babel과 Webpack의 내부 동작 이해하기 - 3 polyfill [실전 리액트 프로그래밍] polyfill을 설치해보자! > 바벨과 폴리필 JS의 최신 기능을 모두 사용하면서, 오래된 브라우저에서도 최신 문법을 지원하려면 바벨로 코드 문법을 변환하는 동시에 폴리필도 사용해야 한다. 폴리필은 런타임에 기능을 주입하는 것을 말한다. 기능이 존재하는지 검사하여 없는 경우에만 주입한다. 바벨만으로는 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 없다. 폴리필을 별도 설정해줘야 한다. > 모든 폴리필 사용하기 import '@babel/polyfill'; module.exports = { entry: ['@babel/polyfill', './src/index.js'], //... }; 웹팩 사용하는 경우는 entry 속성에 추가한다. 이 경우 필요하지 않은 폴리필까지.. 더보기 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.. 더보기 [MariaDB] 외부접속 허용 권한(GRANT) 주기 기본적으로 localhost 에서의 접속만 가능하고 이외의 외부 IP에서는 접속이 불가능하다. root서버에서 다른 IP에 권한을 주기 위해 아래와 같이 입력한다. create user 'root'@'%' identified by [user_name]; grant all privileges on *.* to 'root'@[allow IP] identified by [user_password]'; flush privileges; 이때 allow IP에 특정 한 IP를 입력해주어도 되고, '%' 라고 입력하면 모든 IP를 허용하게 되고, '136%' 이라고 입력하면 136으로 시작하는 모든 IP를 허용한다. 어떤 IP가 허용되고 있는지 조회할 수 있고, 삭제할 수도 있다. select host, user F.. 더보기 [React] Proxy 경로 지정을 통해 Axios 기본 Url 생략하기 package.json "scripts": {}, "proxy": "서버주소", "eslintConfig": {}, ... 요청 보낼 서버 주소를 입력해준다. 이제 Axios 보내던 코드를 수정해준다. 경로를 다 적어 뒀었는데, 아래처럼 비워준 후 / 뒤쪽의 경로만 입력해준다. 더보기 [CentOS 7] React build 파일 Node express에 배포하기 먼저 client코드가 저장되어 있는 React 프로젝트에서 build를 해준다. yarn build or npm run build 둘 중 어떤 방식이라도 상관 없음 완료되면 React 프로젝트에 build/ 폴더가 생긴다. 이 build 폴더의 경로를 server인 Node 프로젝트에 입력해줘야 한다. 나는 그 전에 일단 build 폴더를 복사해서 Node 프로젝트에 붙여줬다. cp -r build/ ../server/ # 폴더 복사할 땐 -r 을 붙인다. [복사할 폴더] [복사될 경로] Node의 app.js에서 static 경로로 build/를 추가해준다. app.use(express.static(path.join(__dirname, 'build'))); app.get('*', function (r.. 더보기 [Node] path, __dirname 사용하기 / ReferenceError: path is not defined ERROR '__dirname' 를 사용하게 되면 마지막에 '/'가 없는 현재 경로가 출력된다. path.join을 통해 다른 경로와 연결해서 사용할 수 있다. app.use(express.static(path.join(__dirname, 'build'))); path.join(__dirname, '/build/index.html') '__dirname' 뒤 다른 경로를 입력할 때 '/' 가 앞에 포함되어도, 포함되지 않아도 에러 없이 아래와 같이 정상적인 경로로 표현된다. ReferenceError: path is not defined ERROR const path = require('path'); 내장 모듈이라 바로 require 해 주면 된다. 더보기 이전 1 ··· 9 10 11 12 13 14 다음
