혼자 적어보는 노트

Babel 바벨(bable)은 최신의 자바스크립트 문법을 구형의 브라우저에도 동작할 수 있도록 ES5문법들으로 변환시키는 트랜스파일러이다. 이렇게 코드를 변환해줌으로써 개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩을 할 수 있다. babel은 단독으로도 사용할 수 있지만 보통 webpack과 같은 빌드 시스템과 함께 사용된다. * 바벨은 ES5버전 이전 문법으로 변환하는 용도이며, 브라우저에 지원하지 않는 기능을 만들어 주는 것은 아니기 때문에 브라우저에 지원하지 않는 기능을 사용하려면 별도의 폴리필을 적용해야한다. 바벨 설치 바벨의 코어 패키지와 바벨을 터미널에서 동작시킬 수 있게 도와주는 babel cli을 설치한다. npm i -D @babel/core @babel/cl..

✅ 오늘의 학습 📌 Vue (7) - Vue Router - Vue Router Navigation Guards/ Meta fields - Vue Router 스크롤 동작 - Babel 구성 - PostCSS, Autoprefixer 구성 Vue Router 공식 문서: Vue Router $route - page에 대한 정보를 가지고 있는 객체 $router - page에 대한 조작을 할 수 있는 메소드를 가지고 있다. route 설정하기 route에는 Hash(#) 방식과 HTML방식으로 설정을 할 수 있는데 기본적으로 많이 사용하는 HTML방식으로 route를 구성할 것이다. [routes/index.js] import { createRouter, createWebHistory } from 'vue..

vue에서 테스트로 컴포넌트들을 만드는데 컴포넌트 명이 한 단어여서 ESlint에서 표시를 해주는데 꽤나 거슬렸다. 기본 vue3-recommened 플러그인 안에 설정이 되어있는 모양인데 이 부분이 뜨지 않게 하려면 eslint 설정을 변경해주어야 한다. 지정한 컴포넌트 감시하지 않기 "vue/multi-word-component-names": ["error", { "ignores": ["Home"] }] 전체 multi-word 감시하지 않기 "vue/multi-word-component-names": "off"

✅ 오늘의 학습 📌 Vue (6) - 플러그인 - 믹스인 - Teleport - Provide / Injext - Store - Vuex 플러그인 사용 app.config.globalProperties에 원하는 플러그인의 이름을 붙여주면 컴포넌트 내부에서 this로 접근할 수 있다. [plugins/fetch.js] export default { install(app, option) { // 첫번째 인자는 app 객체, 두 번째 인자는 option app.config.globalProperties.$fetch = (url, opts) => { return fetch(url, opts).then(res => res.json()); }; } }; [main.js] const app = createApp(Ap..

✅ 오늘의 학습 📌 Vue (5) - 컴포넌트 등록 - Props - Non-Props - 커스텀 이벤트 - Slots - 동적 컴포넌트 - Refs 전역 컴포넌트 - main.js에서 생성한 app에 component 메서드를 통해 등록한 컴포넌트. - 전역으로 컴포넌트를 등록하면 컴포넌트 어디에서든지 import를 하지 않고 등록한 컴포넌트를 사용할 수 있다. import { createApp } from 'vue'; import App from '~/App'; import Btn from '~/components/Btn'; const app = createApp(App); app.component('Btn', Btn); app.mount('#app'); 지역 컴포넌트 - 컴포넌트 내부에서 compo..

eslint/eslint-plugin-vue 설치 npm i -D eslint eslint-plugin-vue 루트 경로에 .eslintrc.json 파일 생성 { "env": { "browser": true, // window에서 사용하는 전역 객체 허용 "node": true // node에서 사용하는 전역 api 허용 }, "extends": [ "eslint:recommented", "plugin:vue/vue3-recommended" ] } json으로 작성했지만 js로도 작성이 가능하다. extends에서는 일단 eslint와 vue plugin의 추천 설정을 기본으로 작성했다. VSCode 확장프로그램 설치 .eslintrc.json에서 설정한 규칙이 적용될 수 있게 확장프로그램을 설치한다...

💻 기본 환경 설정 package.json 파일 생성 npm init -y 현재 프로젝트에 webpack설치 npm i -D webpack webpack-cli 루트 경로에 webpack.config.js 파일 생성 const path = require("path"); module.exports = { entry: "./src/main.js", // 진입점 output: { path: path.resolve(__dirname, "dist"), // 반환되는 경로 clean: true, // true 시 매번 dist폴더를 정리 // filename: '', // 반환되는 파일의 이름. 생략 시 entry의 파일 명으로 지정 }, }; path의 경우 최종 결과를 내는 파일이 webpack.config.j..

일단 뷰 자체의 환경을 처음 만들어 본다는 가정으로 작성을 할 예정이다. Parcel의 경우 패키지와 구성옵션을 신경쓰지 않고 간단하게 프로젝트를 시작할 수 있는 환경을 제공한다 1. npm init -y를 통해 package.json 생성 2. 최신버전의 vue 설치 npm i vue@next 3. src폴더 생성 후 하위 파일들 생성 src ㄴ App.vue ㄴ index.html ㄴ main.js index.html * parcel 세팅에서는 script부분의 type을 module로 설정하고 main.js를 불러온다. App.vue {{ msg }} main.js import * as Vue from "vue"; import App from "./App.vue"; Vue.createApp(App)..