맨동이

템플릿 문법 1. 보간법(Interpolation) 1.1 문자열 데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문) 기법을 사용한 문자열 보간법(text interpolation)입니다. 메시지: {{ msg }} Mustache 태그는 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체됩니다. 또한 msg 속성이 변경될 때 마다 갱신됩니다. 반응성의 개념이 적용된다는 의미입니다. 1.2 v-once v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행할 수 있습니다. 다만, 이런 경우 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 합니다. 결코 변하지 않을 것입니다: {{ msg }} 1.3 코드 Hello world! 를 클릭할 때마다 느낌..

조건문과 반복문 1. 조건문 1.1 코드 {{ count }} 4보다 큽니다! 숫자 클릭시 0 부터 1씩 증가하면서 4 보다 커지면 v-if 조건에 따라 div가 출력 되는 코드입니다. 1.2 v-if 4보다 큽니다! 이는 1씩 증가하는 count 데이터가 4보다 크게 되면 4보다 큽니다! 라는 글자를 보이게 하는 조건문입니다. 이렇게 태그 옆에 조건문을 코딩할 수 있습니다. v-로 시작하는 속성들을 디렉티브(directive)라 부릅니다. 2. 반복문 2.1 코드 {{ fruit }} 2.2 v-for {{ fruit }} 이는 script 태그에서 명시한 배열 데이터인 fruits를 참고합니다. 태그에서 명시한 friut in fruits에서 배열 아이템의 개수만큼 {{ fruit }} 데이터를 순서..

1. 기본 구성 //App.vue App.vue는 3가지의 태그로 구성되어있습니다. template는 HTML, script는 JavaScript, style에는 CSS(SCSS)에 대한 내용을 명시해주면 됩니다. 2. 코딩 간단한 Vue 문법을 이용하여 숫자 0을 화면에 출력해보도록 하겠습니다. 2.1 //App.vue {{ count }} // h1 태그 내에 count라는 변수 입력 3. 클릭 시 숫자 증가 위에서 만든 코드에 숫자 0 부분을 클릭하면 숫자가 1씩 증가하는 페이지를 구현해보도록 하겠습니다. 3.1 script methods에 increase라는 함수를 만들어서 실행될 때마다 count라는 데이터를 this라는 키워드로 접근하여 숫자 1씩 증가시키고 있습니다. 여기서 this는 scr..

ESLint 1. 패키지 설치 더보기 $ npm i -D eslint eslint-plugin-vue babel-eslint 2. .eslintrc.js 루트 경로에 .eslintrc.js 파일을 만들고 구성 옵션을 추가합니다. 2.1 구성 옵션 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 'eslint:recommended' ], parserOptions: { parser: 'babe..

참조 https://ko.parceljs.org/cli.html#%EB%AA%85%EB%A0%B9%EC%96%B4 🖥 커맨드 라인 인터페이스(CLI) 시작하기 기능 📦 애셋 유형 고급 🖥 커맨드 라인 인터페이스(CLI) 명령어 Serve 개발용 서버를 시작합니다. 앱이 수정되면 자동으로 다시 빌드하고, 빠른 개발을 위해 빠른 모듈 교체를 지원합니 ko.parceljs.org Serve 개발용 서버를 시작합니다. 앱이 수정되면 자동으로 다시 빌드하고, 빠른 개발을 위해 빠른 모듈 교체를 지원합니다. 더보기 parcel index.html Build 애셋을 한 번 빌드합니다. 이 과정에서 코드 최소화(미니파이케이션)가 활성화되고 환경변수가 NODE_ENV=production 로 설정됩니다. 프로덕션에서 보다..