Nuxt Toy Project

문서를 한번씩 훑었다고 생각되어 혼자서 웹페이지를 만들어보려 함(많이 부족한건 팩트 ㅜㅜ)

디자인을 따로 하긴 힘들어 https://startbootstrap.com/template-overviews/grayscale/ 템플릿의 레이아웃을 그대로 하드코딩해서 만들어 볼 예정

틀린 내용이 있을 수 있으니 피드백 부탁드립니다

참고 사이트

Nuxt 공식 한글 문서

Vue 공식 한글 문서

github 주소

진행과정

찾아본 내용과 찾아봐야 할 내용을 정리

2017.05.04

시작 / Nuxt starter로 프로젝트 생성 및 nav바 생성

2017.05.05

프로젝트 구조에 대해 이해할 필요를 느껴 샘플 사이트 코드 분석하려 함
백엔드는 알고있는게 루비온레일즈 밖에 없기 때문에 루비온레일즈의 프로젝트 구조와 비교해 예제 사이트 와 공식문서를 참고해 알게된 내용을 정리

1. layouts폴더의 dafult.vue
   application.html 파일 처럼 페이지 전역에서 보여줄 기본 레이아웃을 설정하는데 사용 / 예를들어 전역에서 상단에 띄워놓을 navbar를 dafault.vue에다가 삽입
   default.vue의 <nuxt/> 태그가 <%= yield %> 같은 기능을 하는 태그 같음

2. nuxt-link
   다른 vue파일로 이동할 때 a태그와 같은 용도로 사용되는것 같음 >> 알아보니 렌더링 되면 a태그가 된다 함

3. middleware
   레이아웃이 렌더링되기 전에 사용할 함수를 정의할 수 있음(js파일), 사용예를 보니 vue파일에 methods나 computed에 필요한 함수를 middleware에 정의하고 import하는 식으로 사용

2017.05.06

결국 자료를 읽어보고 프로젝트 엎고 다시 시작함.
nav바 및 intro 구현

1. assets 디렉토리
   컴파일되지 않은 LESS, SASS, JavaScript 등을 포함하는 디렉토리, 레일즈에서의 assets과 같은 역할인 듯 함. 예를들어 이미지 파일을 assets에 넣으면 nuxt는 file-loader와 url-loader를 통해 자동으로 url주소를 변경해 파일을 불러옴. webpack을 거치지 않고 static파일을 사용할 수도 있는데 둘의 정확한 차이를 모르겠음. 어떨때 assets을쓰고 어떨때 static을 쓰는지..궁금하다

2. cover
   단순한 CSS문제 / 뷰포트에 이미지 cover 방법 찾기

2017.05.07

1. Component화의 문제
   큰일났다. 컴포넌트를 그냥 편한대로 semantic tag에 따라서 쪼갰는데 막상 만들고나서 생각해보니까 컴포넌트는 기능별로 나눠야 한다는 부분에서 현자타임이 왔다..
   일단 쪼개놓고 완성은 해놓고 나중에 실력이 늘었을 때 보면서 반성하는 용으로 완성은 해놓고 생각해야겠다.

2. fontawesome icon
   살짝 픽셀이 밀려서 원하는 모양이 안나오는데 해결 방법을 모색해봐야 할 듯

3. 전역 CSS
   nuxt 가이드대로 CSS를 설정했는데 적용이 안돼서 결국 scoped로 적용하고 있는데 방법을 찾아야 함.

4. 레이아웃 완성 / 자바스크립트 효과 넣으면 끝!

2017.05.08

1. store
   React의 Flux처럼 Vue에서 상태관리를 위해 사용.
   대충 흐름은 파악해 놓았지만 어떻게 사용하는지는 잘 모르겠다.

2. 자바스크립트 구현
   어떻게 어떤 디렉토리에 JS파일을 만들고 불러와야하는지 잘 모르겠다 ㅜㅜ 유튜브 강의 뒤져볼 예정

Arrow function(화살표 함수)

이름 그대로 익명함수를 화살표 형태로 간략하게 쓸 수 있는 새로운 방법

사용 방법

1. 매개변수가 없을 때

   //ES5
   function() {...}
   

   //ES6
   () => {...}
   

2. 매개변수가 한 개일 때

   //ES5
   function(x) {
    return x * x
   }
   

   //ES6
   x => x * x
   x => { return x * x}
   

3. 매개변수가 두 개 이상일 때

   //ES5
   function (x, y) {
    return x + y
   }
   

   //ES6
   (x, y) => x + y
   (x, y) => { return x + y }
   

원래 자바스크립트의 this는 함수 호출 패턴에 따라 this에 바인딩되는 객체가 달라지는데
Arrow function은 항상 자신을 포함하는 외부 scope에서 this를 받는데 이를 Lexical this라 한다.
Arrow function을 사용하면 this를 보다 직관적으로 사용할 수 있다.
(this는 언제봐도 정말 헷갈리는데 나중에 제대로 포스팅 해보려 함)

그냥 함수 표기법으로 this를 바인딩하는 방법이 있지만 따로 작성하지 않고 Arrow function을 쓰는걸로..

ECMAScript, ES6

자바스크립트란?

자바스크립트(Javascript)는 1995년 넷스케이프(Netscape) 웹 브라우져에서 웹페이지에 동적인 요소를 구현하기 위해서 발명 되었다. 그 후 많은 다른 웹 브라우져들 또한 이 언어를 탑재하기 시작했고, 그 결과로 현대의 웹 어플리케이션의 구현을 가능하게 만든 언어이다. 이 언어로 인해 웹 어플리케이션에서 더 이상 사용자가 페이지 새로고침 또는 페이지를 새로 불러오지 않고도 웹과 직접적인 연결이 가능하게 되었다.

ECMAScript가 생긴 이유?

자바스크립트(Javascript)가 넷스케이프(Netscape) 브라우져만이 아니라 다른 웹 브라우져들의 지원까지 받기 시작하면서 다양한 웹 브라우져에서 자바스크립트(Javascript)가 공통되게 잘 작동하기 위해서 표준 규격이 필요해졌는데, 이 때문에, ECMA 국제 기구에서 “ECMAScript Standard”라 불리는 스크립트 표준이 만들어지게 된다. 자바스크립트와 비슷한 뜻으로 많이 들어본 사람들이 있을텐데, Javascript는 ECMAScript와 BOM(Browser Object Model) 와 DOM(Document Object Model)이라는 1개의 코어와, 2개의 모델로 이루어져 있다. ECMAScript 와 Javascript 는 비슷한 뜻으로 자주 쓰이나 작은 차이를 가지고 있다는 걸 알아두자.

ECMAScript란?

ECMAScript는 자바 스크립트를 이루는 코어(Core) 스크립트 언어로, 웹 환경에서만 호스트 되는 언어가 아니다. 웹 환경은 ECMA 스크립트가 호스트되는 환경들 중 하나일 뿐이다. ECMA 스크립트 호스트 환경은 ECMA 스크립트 실행 환경이 구현되있고, 각각 그 환경에 알맞는 확장성을 가지고 있다. 예를들어 웹 브라우져 환경에서는 BOM(Browser Object Model)과 DOM(Document Object Model)이 그 확장성이 되겠다. 이러한 확장성들은 ECMA 스크립트의 문법과 기능에 맞춰 기능의 확장을 가능게 한다. 자바스크립트의 document 객체가 좋은 예이다.

ES6를 포스팅하는 이유

ECMAScript를 ES라 줄여 부르고 버전에 따라서 ES뒤에 숫자가 붙는데 아직까지도 가장 많이 쓰이는 ES5는 2009년에 만들어졌고 ES6은 2015년에 만들어져 널리 사용중이다.
현재 대부분의 자바스크립트의 기준은 ES5로 이루어져있지만 ES6에서 새로운 기술들이 도입되면서 보다 효율적인 코드작성을 위해 개발자들은 공부를 하며 나도 그중 하나가 되기위해 공부하면서 포스팅 해보려한다.

Vue.js 정리

아래 내용은 기본적인 Vue 사용법을 알고있음을 가정해 작성함

v-model vs v-bind

v-model 은 데이터를 동적으로로 바인딩할 때 사용(<input v-model="message"> 와 같이 작성하면 실시간으로 message라는 데이터의 값을 변경할 수 잇음)
v-bind 는 속성을 표현식에 동적으로 바인딩할 때 사용 / 축약형으로 :로 대체 가능 (<img :src="img.jpg" 와 같이 작성하면 이미지의 주소를 불러올 수 있음)

조건문 v-show vs v-if

v-show - 항상 렌더링되며 display: none 속성이 추가되고 사라짐으로써 화면에 보여지고 안보임.
v-if - 조건이 true 일 때 렌더링되고 false 일 때 삭제된다.

역할은 동일하지만 v-show는 초기 렌더링 비용이 높고 v-if는 토글 비용이 높으므로,
자주 변경이 되어아 햔다면 v-show, 자주 변경이 되지 않는다면 v-if를 사용.

또한 v-show는 <template>문법에서 사용이 불가하며,
v-if는 v-else-if,v-else로 추가적인 조건을 생성 가능하다.

반복문 v-for

데이터에서 배열이나, 객체의 내용을 반복해서 출력할 때 v-for을 사용.
예를들어 배열의 이름이 stories이면 <li v-for="story in stories>로 stories의 내용을 각각 story로 하나씩 꺼내서 리스트로 나열하겠다는 뜻이며 객체도 마찬가지로 사용 가능하다.
여기서 배열이나 객체의 이름을 복수형의 의미를 담은 단어로 지으면 직관적으로 알아보기 쉽게 사용할 수 있다.

배열에서 데이터의 index를 표시해야 한다면, <li v-for="(story, index) in stories">로 for문을 작성하고, {{ index }}로 각각의 index를 출력할 수 있다.

객체는 key:value로 구성되어 있기 때문에 필요하다면, <li v-for="(story, key, index) in stories">와 같이 사용 가능.

v-on

자바스크립트로 처리하는 이벤트 핸들링을 v-on로 대체해 사용. / v-on을 @로 대체 가능함.
v-on=" "에서 따옴표 안에는 직접 자바스크립트를 사용 하거나, script단에서 만들어 놓은 methods를 사용할 수 있음.

보통 자바스크립트를 사용 시 submit을 하면 event.preventDefault()로 페이지가 새로고침돼서 날아가는걸 막는데 Vue에서 지원하는 @click.prevent로 대체할 수 있다.
이와 같은 종류의 수식어는 .prevent, .stop, .capture, .self가 있음.

methods vs computed

methods는 실행시 함수의 내용을 통해 결과가 바뀌게 할 때 사용할 수 있고,
computed는 이미 함수로 계산된 결과를 가져올 때 사용함.

필터

배열이나 객체에서 각각의 내용을 불러올 때 사용 가능
HTML 코드에 직접 작성하거나, methods, computed 등으로 사용 가능
이름 그대로 원하는 결과값을 필터링해 렌더링하는 것.

사용자 정의 필터도 사용 가능 (Vue.filter())
컴포넌트를 정의할 때와 비슷하지만 두번째 인자에 함수로 원하는 필터 내용을 삽입
HTML에 {{ name | filter-name }}과 같이 사용

Lodash 라이브러리를 사용해 도움을 받을 수도 있음

컴포넌트

Vue.js의 핵심 기능
기본 HTML 엘리먼트를 확장해 재사용이 가능하도록 캡슐화하는데 사용

생성 방법

1. HTML단에 새로 만든 컴포넌트 작성

   //HTML
   <div class="container">
    <list></list>
   </div>
   //JavaScript
   <script type="text/javascript">
    Vue.component('list',{
        template: '<h1>Hello, World!</h1>'
    });
    new Vue({
        el: '.container'
    })
   </script>
   

2. 스크립트단에서 모두 처리

   //JavaScript
   <script type="text/template" id="item-template">
    <h1>Hello, World!</h1>
   </script>
   <script type="text/javascript">
    Vue.component('list', {
        template: '#item-template'
    });
   </script>
   

3. template태그 사용 (권장)

   //HTML
   <template id='item-template'>
    <h1>Hello, World!</h1>
   </template>
   //JavaScript
   <script type="text/javascript">
    Vue.component('list', {
        template: '#item-template'
    });
   </script>
   

같은 템플릿에서 다른 내용을 전달하고 싶을 때 props를 사용함
예시

//HTML
<div class='container'>
    <list writer="Jung"></list>
    <list writer="Kim"></list>
    <list writer="Lee"></list>
</div>
<template id='item-template'>
    <h1>{{ writer }}</h1>
</template>
//JavaScript
<script type="text/javascript">
    Vue.component('list', {
        props: ['writer'],
        template: '#item-template'
    });
    new Vue({
        el: '.container'
    })
</script>