고코몽의 프론트엔드 저장소 고코몽의 프론트엔드 저장소

분류 전체보기

• React - 개발환경 셋팅

  React/Settings 2021. 5. 30. 20:30

  nodejs 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org NVM 설치(Node Version Manager) https://github.com/coreybutler/nvm-windows coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com Chrome 설치 https://www.google.co.kr/chrome/?brand=CHBD&gclsrc=aw...

  Read More
• Webpack - 프로젝트 설정

  Bundler/Webpack 2021. 5. 30. 13:00

  npm init -y npm i -D webpack webpack-cli webpack-dev-server@next webpack-dev-server는 webpack-cli 와 메이저 버전을 일치시켜야 하기 때문에 @next 추가 package.json 설정 // package.json { "name": "webpack-bundler", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --mode development", // 개발용 서버 실행 "build": "webpack --mode production" // 빌드 }, "dependencies": { "webpack": ..

  Read More
• Parcel - Babel

  Bundler/Parcel 2021. 5. 30. 00:02

  Babel ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러 npm i -D @babel/core @babel/preset-env .babelrc.js 파일 생성 .babelrc.js 설정 후 package.json의 browserslist 옵션에 설정된 내용에 영향을 받음 // .babelrc.js module.exports = { presets: ['@babel/preset-env'], }; // package.json { "name": "parcel-bundler-study", "version": "1.0.0", "description"..

  Read More
• Parcel - autoprefixer

  Bundler/Parcel 2021. 5. 29. 23:45

  npm i -D postcss autoprefixer pacakge.json에 browserslist 옵션 설정 browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도 이 옵션을 autoprefixer 패키지가 활용하게 됨 // package.json { "name": "parcel-bundler-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, "devDependencies": { "autoprefixer": "^10.2.6", "parcel-bundler..

  Read More
• Parcel - 정적 파일 연결(이미지, favicon)

  Bundler/Parcel 2021. 5. 29. 23:23

  favicon 이미지 추출 https://icoconvert.com/ Parcel build 시 dist 폴더 생성 정적 파일이 자동으로 dist 폴더에 삽입되어야 함 npm install -D parcel-plugin-static-files-copy https://www.npmjs.com/package/parcel-plugin-static-files-copy // package.json { "name": "parcel-bundler-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, "devDep..

  Read More
• Parcel - 프로젝트 설정

  Bundler/Parcel 2021. 5. 29. 23:15

  npm init -y npm i -D parcel-bundler package.json에 scripts 설정 "dev": "parcel index.html" // 개발용 서버 실행 "build": "parcel build index.html" // 빌드 // package.json { "name": "parcel-bundler-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, "devDependencies": { "parcel-bundler": "^1.12.5" } } Parcel CLI http..

  Read More
• Bundler 란 무엇인가?

  Bundler 2021. 5. 29. 22:48

  웹사이트에서는 HTML, CSS, JavaScript가 동작 좀 더 효율적으로 프로젝트를 진행하기 위해 SCSS, React, TypeScript 등의 라이브러리나 프레임워크 사용이 필요 번들러를 통해 HTML, CSS, JavaScript로 변환하여 웹에서 동작할 수 있도록 함 번들러가 직접 변환시키는 것은 아니고, 번들러가 자동으로 외부 패키지를 설치하여 변환 과정을 거침

  Read More
• Bootstrap - Optimize(최적화)

  Bootstrap 2021. 5. 29. 21:10

  https://getbootstrap.com/docs/5.0/customize/optimize/ Optimize Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs. getbootstrap.com 예) Dropdown 컴포넌트 최적화 bundle로 import 하던 것을 Dropdown만 import 하도록 변경 Dropdown 초기화 https://getbootstrap.com/docs/5.0/components/dropdowns/#via-javascript bundle로 import를 하지 않기 때문에 popperjs 모듈 설치 ..

  Read More