전체 글
-
Vue.js ESLint 구성Vue/Vue.js 문법 2021. 7. 7. 08:18
ESLint ECMAScript/JavaScript 코드에서 코딩 품질과 스타일을 검사하는 정적 코드 분석 도구 설치 및 구성 1. 패키지 설치 $ npm i -D eslint eslint-plugin-vue babel-eslint 2. 루트 경로에 .eslintrc.js 파일 생성 후 구성 옵션 추가 module.exports = { env: { browser: true, node: true, }, extends: [ // vue 코드 검사 규칙, 레벨이 높을수록 엄격함 //'plugin:vue/vue3-essential', // Lv1 "plugin:vue/vue3-strongly-recommended", // Lv2 //'plugin:vue/vue3-recommended', // Lv3 // js ..
-
Vue.js 웹팩을 기반으로 하는 프로젝트 구성Vue/Vue.js 문법 2021. 7. 7. 07:19
프로젝트 구성 순서 1. 터미널에서 프로젝트를 생성할 디렉토리로 이동 (dir ,cd 활용) 2. npx degit 깃-저장소이름 폴더명 ## 예시 ## ## 버전 내역이 삭제가 된 상태로 복제 ## $ npx degit HyungJun-Yoo/webpack-bundler vue3-webpack-template 3. vscode 에서 생성한 폴더 열기 (기존 js 폴더 제거, HTML body 내용 제거) 4. 루트 경로에 src 폴더 생성, 내부에 main.js 파일 생성, App.vue 파일 생성 4-1. static 내부 image 폴더를 .src 내부로 이동 (폴더명 assets로 변경) 5. Vue 설치 $ npm i vue@next 6. Vue 패키지 설치 $ npm i -D vue-loade..
-
Vue.jsVue/Vue.js 문법 2021. 7. 7. 04:16
Vue.js 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스프로그레시브 자바스크립트프레임워크이다. 다른자바스크립트 라이브러리를 사용하는 웹 애플리케이션 프로젝트에 Vue.js를 도입하기 쉽게 설계되어 있는데, 이는 Vue.js가 점진적으로 채택할 수 있게 설계되어 있기 때문이다. 한편 Vue.js는 고성능의싱글 페이지 애플리케이션(SPA)을 구축하는데 이용가능하다. 설치 ## NPM ## ## Vue를 사용하여 대규모 애플리케이션을 구축할 때 NPM를 이용한 설치를 권장 ## $ npm install vue@next ## CLI ## # Vue 3의 경우 npm에서 @vue/cli로 제공되는 Vue CLI v4.5를 이용 # 업그레이드를 하려면 최신버전의 @vue/cli를 전역으로 ..
-
WebpackBundler/Webpack 2021. 7. 5. 05:36
프로젝트 설치 $ npm init -y $ npm i -D webpack webpack-cli webpack-dev-server@next 설치가 완료되면 package.json 내부에 생성됨 "devDependencies": { "webpack": 설치된 버전이 명시, "webpack-cli": 설치된 버전이 명시, "webpack-dev-server": 설치된 버전이 명시 } 프로젝트 실행 ## 세팅 ## package.json 내부에 "scripts" 수정 "scripts": { "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" } ## 구성 설정 ## 프로젝트 루트 경로에 webpack.config..
-
ParcelBundler/Parcel 2021. 7. 3. 20:00
프로젝트 설치 $ npm init -y $ npm i -D parcel@next 설치가 완료되면 package.json 내부에 생성됨 "devDependencies": { "parcel": 설치된 버전이 명시 } 프로젝트 실행 ## 세팅 ## package.json 내부에 "scripts" 수정 "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" } 프로젝트에서 터미널을 열고 npm run dev 입력 엔터로 실행 정적 파일 연결 dist 폴더로 자동으로 넣어줄 수 있는 패키지를 설치한다 (parcel-reporter-static-files-copy) ## 패키지 설치 ## $ npm install -D parcel-re..
-
BundlerBundler 2021. 7. 1. 13:50
Bundler 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미 대표적인 Bundler Parcel - 구성 없는 단순한 자동 번들링 - 소/중형 프로젝트에 적합 Webpack - 매우 꼼꼼한 구성 - 중/대형 프로젝트에 적합 Rollup 참조 https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%97%90%EC%84%9C%EC%9D%98-%EB%AA%A8%EB%93%88 웹팩이란? | 웹팩 핸드북 웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사..
-
BootstrapCSS/BootStrap 2021. 6. 29. 00:45
Bootstrap 부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. 출저 - 위키백과 https://ko.wikipedia.org/wiki/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9_(%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC) CDN 을 통한 Bootstrap 적용 NPM 을 통한 Bootstrap 적용 #npm init..
-
SCSS 문법 알아보기 2CSS/SCSS 2021. 6. 27. 21:31
반복문 /* SCSS */ /* -js- for (let i = 0; i < 10; i += 1) { console.log(`loop-${i}`) } */ // 1~10까지 반복 = 10번 반복 @for $i from 1 through 10 { // #{변수} - 문자 보간 .box:nth-child(#{$i}) { width: 100px * $i; } } /* CSS */ .box:nth-child(1) { width: 100px; } .box:nth-child(2) { width: 200px; } .box:nth-child(3) { width: 300px; } .box:nth-child(4) { width: 400px; } .box:nth-child(5) { width: 500px; } .box:nt..