차마시는 개발자

React + TypeScript + Babel + ESLint & Prettier With Webpack 세팅 (CRA X) CRA(Create-React-App)을 사용하여 쉽게 개발을 진행하였지만 생각보다 사용하지 않고 알지도 못하는 library 등이 너무 많아 Boilerplate로 만들게 되었습니다. Github Repository https://github.com/GeonWooPaeng/React-TypeScript-Boilerplate What is inside? Webpack Babel React TypeScript ESLint & Prettier 📍 React & TypeScript 설정 1. package.json 생성 npm init -y 2. React 설치 node-modules..

PostCss, Autoprefixer (w. webpack) 🦊 1. webpack으로 실행을 위한 "webpack", "webpack-cli", "webpack-dev-server", "html-webpack-plugin", "style-loader", "css-loader" 🐯 > 설치 여기 요기 설치 설명 보세요 > npm i -D webpack webpack-cli webpack-dev-server > npm i -D html-webpack-plugin > npm i -D style-loader css-loader 🐯 > package.json 실행을 위한 것 제작 & browser 범위 지정 "browserslist":[ "> 1%", "last 2 versions", ], "scripts":..

Babel 최신 JS -- 변환 --> 구형 JS => 구형 browser에서 사용할 수 있게 변환 시켜준다. 🦊 1. babel 기본을 위한 "@babel/core, @babel/cli" 🐯 > 설치 @babel/core : babel package @babel/cli : terminal에서 명령 동작 시킬 수 있게 하는 것 > npm init -y > npm i -D @babel/core @babel/cli 🐯 > package.json browserslist : 프로젝트가 어느 browser까지 가능하게 할 것인가(browser 범위 지정) "browserslist":[ // global browser 점유율의 1%이상에 해당하는 모든 browser에 적용 "> 1%", //죽지 않은 browser..

webpack(Vue~) 🐱 4. webpack Vue setting 🐯 1. vue파일을 가져오는 vue-loader vue파일을 가져와서 읽을 준비까지만 한다. > 설치 'npm info vue-loader`을 이용하여 버전 확인 후 설치한다. > npm i -D vue-loader@next > webpack.config.js 설정 test: 정규표현식 : 정규표현식과 같은 파일 찾아준다. (정규표현식.test(문자)이렇게 사용하면 문자 내부에 정규표현식과 일치하는 내용 확인하는 것) use: 'vue-loader': test를 잘 할 수 있게 vue-loader의 도움을 받는다. // const path = require('path'); const { VueLoaderPlugin } = requir..

webpack 해당 부분을 읽어보면 좋아서 우선적으로 적어 놓았고 이것 또한 파일을 모아서 처리하는 방식입니다. 차근차근 진행을 해보겠습니다. 🐱 1. npm 기본 설정 > npm init -y > npm i vue@next npm init -y: 프로젝트를 시작하기 위한 기본 설정 => package.json 생성 npm i vue@버전: vue의 버전 설치(@next) => node_modules, package-lock.json 생성 🐱 2. 폴더 및 파일 관리 다음과 같이 기본적으로 폴더, 파일을 제작해서 관리를 해보겠습니다. 📦src ┣ 📜App.vue ┣ 📜index.html ┗ 📜main.js > main.js //별 사용 이유: vue의 모든 정보 가져오기 => CommonJS로 이루어졌기..