YSHUSH

1. yarn create react-app 프로젝트 이름 2. yarn add -D eslint-config-react-app 3. 루트 경로에 .yarnrc.yml 생성 후 packageExtensions: react-scripts@*: peerDependencies: eslint-config-react-app: "*" 4. yarn cache clean 5. yarn install

npm init npm i -D snowpack npm i -D @snowpack/plugin-sass npm i -D eslint npm i --save-exact prettier npm i -D eslint-config-prettier eslint-plugin-prettier · 루트경로에 public, src 폴더를 만들고 public폴더에 index.html파일 생성, src폴더에 js폴더 - index.js, scss폴더 - style.scss생성 후 구조작성 index.html - dist폴더에서 css와 js를 import 해야한다. · snowpack.config.js파일 생성 후 module.exports = { mount: { public: { url: "/", static: true ..

// package.json 초기화 npm init -y // 웹팩 관련 패키지 설치 npm i -D webpack webpack-cli webpack-dev-server // 플러그인 설치 npm i -D terser-webpack-plugin npm i -D html-webpack-plugin npm i -D mini-css-extract-plugin css-loader css-minimizer-webpack-plugin · 루트경로에 webpack.config.js생성 후 const path = require("path"); const TerserPlugin = require("terser-webpack-plugin"); const HtmlWebpackPlugin = require("html-web..

1) Redux https://react-redux.js.org/ React Redux | React Redux Official React bindings for Redux react-redux.js.org npm install @reduxjs/toolkit react-redux 2) MobX https://ko.mobx.js.org/README.html MobX에 대하여 · MobX ko.mobx.js.org npm install --save mobx npm install mobx-react --save https://npmtrends.com/mobx-vs-recoil-vs-redux-vs-zustand mobx vs recoil vs redux vs zustand | npm trends Compari..

모킹(Moking)이란? Mock(모의 데이터)을 만들어서 활용하는 방식이다. 통상적으로 data fetch를 해야하는 경우, 통신을 통해 응답을 내려주는 서버가 있어야 한다. msw https://mswjs.io/ Mock Service Worker Seamless API mocking library for browser and Node. mswjs.io npm install msw --save-dev npx msw init public/ --save

1) Onsen https://onsen.io/ Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools Native look and feel with lots of ready-to-use components and automatic styling A rich variety of UI components specially designed for mobile apps. Onsen UI provides tabs, side menu, stack navigation and tons of other components such as lists and forms. Th onsen.io npm install onsenui react-onsenui --sav..

1) styled-components https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com npm i styled-components 2) emotion https://emotion.sh/docs/introduction Emotion – Introduction (Edit code to see changes) emotion.sh npm i @emotion/styled @emotion/react jsx에서의 임포트문 /** @jsxImpor..

Luxon / Day.js / date-fns / js-Joda 등이 있다. https://npmtrends.com/date-fns-vs-dayjs-vs-luxon-vs-moment date-fns vs dayjs vs luxon vs moment | npm trends Comparing trends for date-fns 2.29.2 which has 14,271,390 weekly downloads and unknown number of GitHub stars vs. dayjs 1.11.5 which has 11,039,539 weekly downloads and unknown number of GitHub stars vs. luxon 3.0.3 which has 3,911,208 weekly dow..

npx degit으로 github저장소에 있는 파일을 다운로드해보자 ls cd Desktop // npm degit 다운받을깃헙폴더 다운받을로컬경로 npx degit yshush/webpack-template-basic webpack-template-test // 해당 폴더로 이동 cd webpack-template-test // vscode에서 실행 code . -r 장점 : npx degit으로 가져올 경우 버전관리가 되어있지 않은 상태로 가져오므로 템플릿 폴더인 경우가 적합하다. 버전이 있는 파일일 경우에는 git clone 으로 가져오는 것이 적합하다.

// npm 프로젝트로 변경 npm init -y // webpack 설치 npm i -D webpack webpack-cli webpack-dev-server@next // 플러그인 설치 npm i -D html-webpack-plugin// html 로드 가능하게 하기 npm i -D copy-webpack-plugin// 정적 파일 연결 npm i -D css-loader style-loader// css 연결 npm i -D sass-loader sass// sass 연결 npm i -D postcss autoprefixer postcss-loader// 오토프리픽서 npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime np..