깃허브에 저장된 탬플릿 가져와서 새로운 프로젝트 생성하기 깃에서 제공하는 명령어 git clone 은 프로젝트를 손쉽게 가져올 수 있지만, 이전 git 버전까지 함께 가져와진다는 문제가 있다. 때문에 이전 git 버전 기록 없이 다운로드 받아 사용하려면, 실제 깃헙주소에 들어가서 다운로드 버튼을 통해 zip 파일로 폴더를 다운 받아 사용해야하는데, Node.js의 npx degit 명령어를 사용하면 쉽게 CML로 설치 할 수 있다. npx : node.js 명령 degit: 원격저장소를 현제 위치에 다운로드 기능 npx degit 저장소 계정이름 / 저장소이름 다운로드 받을 폴더명 npx degit min-log/webpack-template-basic webpack-template-test

Webpack 프로젝트 생성 웹팩은 오픈소스 자바스크립트 모듈 번들러로 여러개로 나누어져 있는 파일들을 하나의 자바스크림트 코드로 압축하고 최적화하는 라이브러리 이다. 모듈단위로 개발이 가능하여 가독성과 유지보수가 쉽다. 1. Webpack 번들러 설치 npm i -D webpack webpack-cli webpack-dev-server@next 3개의 패키지 설치가 필요하다. webpack webpack-cli : 터미널에서 입력할 수 있는 기능 webpack-dev-server@next : 개발 할 때 수정사항 새로고침 기능 1-1 . scripts 부분 설정 "dev": "webpack-dev-server --mode development", "build" : "webpack --mode produ..

번들러(bundler) 개발시 SASS , vue , react ,svg ,... 등의 기능들을 이용해 작업을 하는데, 실제로 웹에서 동작하지는 않기 때문에 번들러를 통해 변환하는 과정으로 웹 (HTML / CSS/ JS)에서 사용된다. ex ) sass = > package ( 번들러 sass 설치 ) = > css로 변환 parcel : 구성 없는 단순한 자동 번들링 (소/중형 프로젝트에 적합) webpack : 매우 꼼꼼한 구성 (중/대형 프로젝트에 적합) 1. parcel bundler 설치 터미널에서 번들러 설치 npm i -D parcel-bundler 2. Parcel - 정적 파일 관리 추가하기 파비콘등 이미지의 정적 파일들을 dist 폴더로 자동으로 넣어주는 기능 추가하기 2-1. npm..

필요기능만 가져와 사용할 수 있고 커스텀 할 수 잇다. 1. 프로젝트 생성 하여 Bootstrap 추가 1) NPM 프로젝트 생성 2) Bootstrap 사이트 에서 npm 명령어 복사 Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 3) 터미널에서 설치 실행 해당 package.json파일에서 내용이 확인 가능하다. npm install bootstrap@5..

Node.js chrome v8 javascript 엔진으로 빌드된 javascript 런타임 자바스크립트 문법해석 및 동작하는 자바스크립트 프로그래밍 언어 동작하는 컴퓨터 환경이다. 동작 환경은 node.js 컴퓨터 환경과 브라우저이다. 모듈들을 가져와서 웹페이지를 작업할 때 node.js 를 사용해 모듈을 동작시킨다. 1. Node.js 설치방법 1-1. Node.js 홈페이지 설치 하나의 버전만 설치 할수 있다. 안전성있는 짝수 버전 설치를 권장한다. 하지만 설치한 버전 말고 다른 버전의 node.js 환경에서 개발을 진행해야할 수도 있다. 때문에 해당 페이지에서 하나의 버전을 다운 받는 것보다 노드 버전 메니저를 설치하는 것을 권장한다. Node.js Node.js® is a JavaScript ..