[Day 40] Netlify Serverless Functions, 환경변수
2022. 12. 15. 17:15
데브코스
Netlify Serverless Functions 보안을 위해 API_KEY와 같은 민감한 정보들이 노출되지 않도록 서버리스 함수를 적용해보자. Netllify 서버를 통해 배포를 하지 않고도 배포 결과를 확인할 수 있도록 명령(script)를 등록한다. // package.json "scripts": { "dev": "webpack-dev-server --mode development", "dev:netlify": "netlify dev", "build": "webpack --mode production" }, 해당 명령을 사용하려면 Netlify CLI를 설치해야 한다. npm i -D netlify-cli Get started with Netlify CLI Install our CLI (comma..
[Day 38] Vue Router, Babel, PostCSS
2022. 12. 11. 18:54
데브코스
Vue Router 기초 Vue Router를 이용해서 SPA를 만드는 것은 매우 쉽다. 다음 명령어를 통해 vue router를 설치한다. npm i vue-router@next // main.js import { createApp } from 'vue' import App from '~/App' import router from '~/routes' const app = createApp(App) app.use(router) app.mount('#app') 라우터를 구성해서 플러그인으로 연결하면 $route와 $router 객체를 접근해서 사용할 수 있다. $route 객체는 현재 그 라우트 객체가 사용되는 컴포넌트의 페이지에 대한 정보를 가지고 있다. $router 객체는 페이지에 대한 조작을 할 수..
[Day 37-2] Provide/Inject, Vuex(Store)
2022. 12. 10. 21:25
데브코스
Provide / Inject 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달할 때 props를 사용한다. 만일 조상 요소에서 후손 요소로 데이터를 전달할 때 props로 일일이 전달한다면 굉장히 복잡해질 것이다. 이럴 때 사용할 수 있는 것이 provide와 inject이다. 부모 컴포넌트는 데이터 제공을 위해 provide(제공)옵션을 사용하며, 자식 요소는 데이터 사용을 위해 inject(주입) 옵션을 사용한다. Child {{ msg }} 하지만 provide와 inject를 사용해서 전달된 데이터는 반응형 데이터가 아니다. 반응형 작업 상위 컴포넌트의 변경사항에 반응하게 하려면 computed 함수를 사용한다. Child {{ msg.value }} computed 함수를 사용하게 되면 계산된..
[Day 37-1] Slots, Refs, Plugin, Mixin, Teleport
2022. 12. 10. 18:41
데브코스
컴포넌트 Slots 컴포넌트 태그 사이에 콘텐츠을 입력하면 slot 태그 위치에 작성된다. 만일 작성된 콘텐츠가 없다면 slot 태그 사이에 작성한 내용이 출력되는데 이를 Fallback 콘텐츠라고 한다. {{ msg }} Hello Vue? Hello 이름을 가지는 슬롯 slot에는 이름을 부여할 수도 있다. 상위 컴포넌트에서 v-slot 디렉티브로 접근이 가능하다. v-slot 디렉티브는 #의 약어를 사용할 수 있다. ABC 범위를 가지는 슬롯 slot은 범위를 가질 수 있다. 범위는 해당 슬롯이 사용되는 구간을 의미한다. Hello {{ slotProps.hello }} Hello {{ hello }} 슬롯의 이름은 동적으로 관리할 수도 있다. 동적 컴포넌트 컴포넌트를 동적으로 전환하는 것은 is라..
[Day 36-2] 컴포넌트 등록, props, 커스텀 이벤트
2022. 12. 9. 13:08
데브코스
컴포넌트 등록 컴포넌트는 전역 등록, 지역 등록이 가능하다. 컴포넌트로 등록을 하기 위해서는 컴포넌트의 이름을 지정해야 하는데 파스칼 케이스 혹은 케밥 케이스(= 대쉬 케이스)로 작성이 가능하다. 전역 등록 전역으로 컴포넌트를 등록하면 컴포넌트 어디에서든지 import를 하지 않고 등록한 컴포넌트를 사용 가능하다. main.js에서 생성한 app에 component 메소드를 통해 등록한다. // main.js import {createApp} from 'vue' import App from '~/App' import Btn from '~/components/Btn' const app = createApp(App) app.component('Btn', Btn) // 전역 등록 app.mount('#app'..
[Day 36-1] Node.js, npm, Parcel, Webpack
2022. 12. 7. 21:49
데브코스
Node.js와 NPM Node.js는 크롬 v8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다. 상황에 따라 Node.js의 버전을 변경할 수 있는 환경을 구축해야 한다. 이럴 때 사용할 수 있는 패키지가 nvm으로 Node Version Manager의 약자이다. npm은 Node.js를 설치하면 같이 설치되는데 Node.js Package Manager의 약자이다. npm init npm init은 Node.js 환경에서 npm이라는 Node.js Package Manager을 통해 init, 즉 초기화 하는 것은 현재 프로젝트를 npm으로 관리하겠다라는 것이다. 터미널에 명령어를 입력하면 패키지 이름을 입력하라고 하는데 이는 중복되지 않게 짓는 것이 좋다. 프로젝트라는 것은 어디까지나 하나의..
[Day 35] 렌더링, 이벤트 핸들링, 폼 바인딩, 컴포넌트
2022. 12. 6. 15:09
데브코스
조건부 렌더링 v-if, v-else-if, v-else 디렉티브를 이용해서 조건부 렌더링이 가능하다. v-if Hello Vue! Application.. 1234 987 Good Morning const App = { data() { return { isShow: null, }; }, }; const vm = Vue.createApp(App).mount("#app"); 특정한 요소에 wrapping 되어서 출력되는 것을 원하지 않을 경우 div 대신 template 태그를 사용할 수 있다. template 태그를 사용하면 본인은 출력되지 않고 그 안에 있는 요소들만 출력된다. v-show v-show는 요소의 스타일 속성에 display: none을 추가하여 엘리먼트를 조건부로 표시합니다. Hello..
[Day 34] computed, watch, 데이터 바인딩
2022. 12. 5. 23:00
데브코스
Computed computed는 계산된 데이터를 의미한다. computed 속성은 data의 변화를 감지하여 동적으로 계산된 값을 이용할 때 사용된다. const App = { data() { return { count: 3, }; }, computed: { double() { return this.count * 2; }, }, }; const vm = Vue.createApp(App).mount("#app"); computed 옵션 안에 작성되어 있는 double 함수는 더 이상 함수가 아니라 계산된 데이터로 취급된다. 캐싱 위 예제와 동일한 결과를 내고 싶다면 computed 말고도 다른 방법이 더 존재한다. 표현식 {{ this.count * 2 }} methods 옵션에 double 함수 생성하..
[Day 33] 반응성, 디렉티브, 라이프 사이클, data & methods
2022. 12. 2. 21:43
데브코스
VueJS Vue.js는 사용자 인터페이스를 만들기 위한 자바스크립트 프레임워크다. 소개 | Vue.js v3-docs.vuejs-korea.org CDN을 사용하여 HTML의 상단에 script를 불러와서 간단하게 사용할 수 있다. Vue 시작하기 반응성 {{ counter }} 예제의 결과를 브라우저에서 확인하면 1초마다 1이 증가하는 것을 확인할 수 있다. 현재 couter라는 데이터와 DOM이 연결된 상태이고 이렇게 데이터가 변경이 되면 연결되어 있는 화면도 같이 변경되는 것을 반응성이라고 한다. 디렉티브 {{ counter }} Click Me! v-로 시작하는 속성들을 디렉티브라고 부른다. 디렉티브는 VueJS의 문법으로 렌더링 된 DOM에 반응형 동작을 하도록 도와준다. v-bind 디렉티브..
[Day 32] SCSS (2)
2022. 11. 30. 16:04
데브코스
@mixin @mixin은 여러번 재활용 할 스타일들을 정의해서 필요한 곳에서 사용하는 개념이다. 만들어 둘 스타일을 @mixin 규칙으로 정의하고 필요한 곳에서 @include 규칙을 통해 사용할 수 있다. @mixin은 특정한 값을 인수로 보내고 매개변수로 받아서 사용할 수 있다. 이 매개변수에는 기본값을 지정해줄 수 있다. 조건문을 통해서 조건을 줄 수 있다. 조건문은 삼항 연산자를 사용해서 작성할 수도 있다. if(condtion, true, false) 참고로 if 뒤에 괄호를 쓸 때 띄어쓰기를 하면 expected "(" 라는 에러가 난다. @mixin은 단순히 css의 속성과 값만 적는 것이 아니라 Sass에서 정의할 수 있는 다양한 내용을 @mixin 내부에서 활용할 수 있다. @mixin..