A Full Stack Develpor

https://medium.com/@Taha_Shashtari/hide-navbar-on-scroll-down-in-vue-fb85acbdddfe

1. 

<template>
  <div class="app">
    <div
      class="navbar"
      :class="{ 'navbar--hidden': !showNavbar }"
    ></div>
  </div>
</template>

Navbar는 간단하게 showNavbar가 false일 때, 사라질 것이다. 아직 관련 기능을 구현하지 않았다. 

2.

<style>
* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
}
.app {
  width: 100vw;
  height: 500vh;
  background: hsl(200, 50%, 90%);
}
.navbar {
  height: 60px;
  width: 100vw;
  background: hsl(200, 50%, 50%);
  position: fixed;
  box-shadow: 0 2px 15px rgba(71, 120, 120, 0.5);
  transform: translate3d(0, 0, 0);
  transition: 0.1s all ease-out;
}
.navbar.navbar--hidden {
  box-shadow: none;
  transform: translate3d(0, -100%, 0);
}
</style>

translate3d() :

translate3d() 메소드는 현재 위치에서 해당 요소를 주어진 x축과 y축, z축의 거리만큼 이동시킨다.

주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킨다.

http://tcpschool.com/css/css3_transform_3Dtransform

3. 

<script>
export default {
  data () {
    return {
      showNavbar: true,
      lastScrollPosition: 0
    }
  }
}
</script>

4. 

mounted () {
  window.addEventListener('scroll', this.onScroll)
},
beforeDestroy () {
  window.removeEventListener('scroll', this.onScroll)
}

5. 

methods: {
  onScroll () {
    const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop
    if (currentScrollPosition < 0) {
      return
    }
    // Stop executing this function if the difference between
    // current scroll position and last scroll position is less than some offset
    if (Math.abs(currentScrollPosition - this.lastScrollPosition) < 60) {
      return
    }
    this.showNavbar = currentScrollPosition < this.lastScrollPosition
    this.lastScrollPosition = currentScrollPosition
  }
}

https://joshua1988.github.io/vue-camp/nuxt/data-fetching.html#%E1%84%82%E1%85%A5%E1%86%A8%E1%84%89%E1%85%B3%E1%84%90%E1%85%B3%E1%84%8B%E1%85%B4-rest-api-%E1%84%92%E1%85%A9%E1%84%8E%E1%85%AE%E1%86%AF-%E1%84%87%E1%85%A1%E1%86%BC%E1%84%89%E1%85%B5%E1%86%A8

https://aomee0880.tistory.com/185

https://balmostory.tistory.com/13

https://nuxtjs.org/docs/concepts/nuxt-lifecycle/

Rendering

https://nuxtjs.org/docs/features/rendering-modes/

https://www.youtube.com/watch?v=iZ9csAfU5Os 

1. CSR <Client Side Rendering>

처음 HTML에는 화면에 필요한 정보가 담긴 js링크와 id 루트 정보만 들어있다. 그래서 처음에 화면을 볼 때에는 빈화면이 보여지게 된다. 그 다음 링크된 자바스크립트를 서버로부터 받아오게 되는데 화면 구성에 필요한 모든 정보를 서버로 부터 받아온다. 추가로 필요한 정보가 있을 때에는 서버에 요청하여 데이터를 다시 받아오고 화면을 구성해서 사용자에게 보여주게 된다. 

단점

처음 사용자에게 화면을 보여주기까지 시간이 오래걸리고 나쁜 SEO <Search Engine Optimization>가 문제로 꼽힌다. 

여기서 SEO란 구글이나 네이버 같은 검색엔진들은 사이트를 돌아다니면서 타이틀과 Description을 분석하며 검색 엔진에 등록하는데 CSR로 작성된 HTML은 텅텅 비어있어서 웹페이지를 분석하는데 어려움이 있다. 

흐름

1) 사이트에 접속

2) 서버에게서 인덱스 파일을 받아옴. (하지만 비어져 있기 때문에 사용자에게 아무것도 보이지가 않는다.)

3) 웹페이지에 필요한 모든 로직이 담겨 있는 자바스크립트를 서버에 요청.

4) 동적으로 웹사이트를 구성하고 나면 드디어 사용자가 화면을 볼 수 있고 클릭이 가능하게 된다. 

TTV <Time To View>와 TTI <Time To Interaction> 이 동시에 가능하다. 

2. SSR <Server Side Rendering>

CSR방식처럼 서버에서 필요한 정보를 가져와서 Client에서 구성하는 것이 아니라 이미 Server에서 완성된 형태의 HTML파일을 동적으로 제어할 수 있는 약간의 소스코드와 함께 Client에 보내주게 된다. 

첫 번째 페이지의 로딩이 빨라지는 장점이 있고 모든 컨텐츠가 HTML에 담겨져 있기 때문에 효율적인 SEO가 가능하다. 

단점

사용자가 클릭을 했을 때에 전체적인 웹사이트를 다시 받아오는 것이기 때문에 깜빡임 ISSUE가 발생한다. 그리고 서버에 과부하가 걸리기가 쉽다. 하지만 가장 치명적인 단점으로는 사용자가 빠르게 웹 사이트를 받아볼 수 있지만 동적으로 데이터를 처리하는 자바스크립트를 아직 다운로드 받지 못해서 이리저리 클릭했는데 반응이 없는 경우가 있을 수 있다. 

흐름

1) 서버에서 이미 만들어진 인덱스 파일을 받아옴. (하지만 아직 동적으로 화면을 처리할 수 있는 JS를 받아오지 못했으므로 사용자가 화면을 클릭해도 처리할 수 없음.)

2) 최종적으로 자바스크립트를 받아와야지만 사용자의 클릭을 처리할 수 있다. 

TTV와 TTI의 공백기간이 꽤 길다.

3. Nuxt.js는 SSR

https://aomee0880.tistory.com/185

https://balmostory.tistory.com/13

https://joontae-kim.github.io/2021/03/18/nuxt-lifecycle/

https://webruden.tistory.com/926

Lifecycle

Server

SSR을 위해서 아래의 단계가 여러분의 어플리케이션에서 모든 초기요청(request) 동안에 실행될 것입니다.

• 서버 시작 The server starts (nuxt start)

정적 사이트 생성모드를 사용하면, 서버 단계에서는 오직 빌드타임에만 실행되나 모든 페이지에 대해 단 한번만 실행될 것입니다.

• 생성 프로세스 시작 (nuxt generate)
• Nuxt hooks
• serverMiddleware
• Server-side Nuxt 플러그인(plugins)
  • nuxt.config.js에 정의된 순서대로 (in order as defined in nuxt.config.js)
• nuxtServerInit
  • 만약 Vuex store를 설정했다면 서버 사이드에서 요청되는 첫번째 생명주기 훅(lifecycle hook)이다
  • 스토어(store)를 미리 채우기(pre-populate) 위해 서버 사이드에서 Vuex 호출한다.
  • 첫번째 인자(argument)는 Vuex context, 두번째 인자는 Nuxt.js context 입니다.
    • 서버 사이드에서 연속적인 스토어 액션(action)을 위해 오직 “entry point”에서 다른 액션을 Dispatch 합니다.
  • 오직 store/index.js에 정의할 수 있습니다.
• 미들웨어 (Middleware 또는 Route Middleware)
  • 페이지 컴포넌트가 렌더링되기 전에 호출됩니다.
  • 조건을 설정하거나 체크할수도 있으며 페이지를 리다이렉트(redirect)하는데 사용할 수 있습니다.
  • 전역 미들웨어(Global middleware) - 모든 라우트에 영향을 끼치며, route.config.js에 정의합니다.
  • 레이아웃 미들웨어(Layout middleware) - 라우트 그룹에 영향을 끼치며, layout에 정의합니다.
  • 페이지 미들웨어(Page middleware) - 싱글 라우트에 영향을 끼치며, page component에 정의합니다.
• validate
  • 동적 라우트 파라미터(dynamic route parameter)를 검증하는데 유용합니다.
  • 페이지 컴포넌트가 렌더링 되기 전에 호출됩니다.
• asyncData
  • 페이지 컴포넌트가 로딩되기 전에 매번 호출됩니다.
  • 컴포넌트 data 프로퍼티와 병합(merge)됩니다.
• beforeCreate (Vue 라이크사이클 메서드)
  • Vue 인스턴트(instance)가 초기화(initialized) 될때 호출됩니다.
• created (Vue 라이크사이클 메서드)
• The new fetch (top to bottom, siblings = parallel)
• 상태의 일렬화(Serialization of state) (render:routeContext Nuxt.js hook)
• HTML을 렌더링 할때 일어난다. (render:route Nuxt.js hook)
• render:routeDone 훅: HTML 파일을 브라우저로 보낼때 일어난다.
• generate:before Nuxt.js hook
• HTML 파일들을 생성한다.
  • Full static generation
    • e.g. 정적 페이로드(static payloads)를 추출한다.
• generate:page (HTML 편집가능(editable))
• generate:routeCreated (Route가 생성된다.)
• generate:done 훅: 모든 HTML 파일들이 생성될때 일어난다.

Client

여러분이 Nuxt.js의 어떤 모드를 선택하든, 이 부분은 라이프사이클 중에 완전히 브라우저에서 실행된다.

• HTML 파일을 받는다(Receives).
• assets 로딩하기 (e.g. JavaScript)
• Vue Hydration
• 미들웨어 (Middleware 또는 Route Middleware)
  • 페이지 컴포넌트가 렌더링되기 전에 호출됩니다.
  • 조건을 설정하거나 체크할수도 있으며 페이지를 리다이렉트(redirect)하는데 사용할 수 있습니다.
  • 전역 미들웨어(Global middleware) - 모든 라우트에 영향을 끼치며, route.config.js에 정의합니다.
  • 레이아웃 미들웨어(Layout middleware) - 라우트 그룹에 영향을 끼치며, layout에 정의합니다.
  • 페이지 미들웨어(Page middleware) - 싱글 라우트에 영향을 끼치며, page component에 정의합니다.
• 클라이언트 사이드(client-side) Nuxt.js 플러그인
  • nuxt.config.js에 정의된 순서대로 (in order as defined in nuxt.config.js)
• asyncData (비동기, blocking)
  • 페이지 컴포넌트가 로딩되기 전에 매번 호출됩니다.
  • 컴포넌트 data 프로퍼티와 병합(merge)됩니다.
• beforeCreate (Vue 라이크사이클 메서드)
  • Vue 인스턴트(instance)가 초기화(initialized) 될때 호출됩니다.
• created (Vue 라이크사이클 메서드)
• The new fetch (top to bottom, siblings = parallel) (동기, non-blocking)
• beforeMount (Vue 라이크사이클 메서드)
• mounted (Vue 라이크사이클 메서드)

NuxtLink 컴포넌트(component)를 사용한 네비게이트(Navigate)

클라이언트 사이드 부분과 동일하게 브라우저에서 모든것이 발생하지만 오직 <NuxtLink>를 통해 네비게이팅 될때만 발생합니다.

<NuxtLink> 에 대한 더 자세한 정보는 컴포넌트 챕터에서 확인하세요

• middleware (비동기, blocking)
• 전역 미들웨어(Global middleware)
• 레이아웃 미들웨어(Layout middleware)
• 라우트 미들웨어(Route middleware)
• asyncData (비동기, blocking)
• asyncData (비동기, blocking) [또는 완전히 정적 페이로드(static payload)가 로딩된 후]
• beforeCreate & created (Vue 라이크사이클 메서드)
• fetch (동기, non-blocking)
• beforeMount & mounted

중간 정리

Nuxt의 라이프사이클은 전체적으로 서버와 클라이언트 사이드 부분으로 나뉘는 것을 알 수 있으며 각 부분에서 공통으로 실행되는 과정과 아닌 과정이 있음을 확인할 수 있었습니다. 또한, 정적 (Static) 어플리케이션를 만드느냐 SSR(Server-Side Rendering) 또는 유니버설(universal) 어플리케이션을 만드느냐에 따라 과정이 달라질 수 있다.

추가 공부

라이프사이클에 대해 공부 및 정리하면서 봤던 내용들에 대해 정리해보자.

1. 활용도가 높고 중요한 몇가지 훅

• middleware(클라이언트, 서버)
  • 클라이언트와 서버 모두 훅들이 본격적으로 호출되기 전에, 앱을 만드는 과정에서 미리 정의해놓은 미들웨어들이 먼저 동작합니다.
  • 만약 serverMiddlware을 정의했다면 서버 사이드에서만 렌더링 과정에서 일반 미들웨어가 동작하기 전에 먼저 동작합니다.
• asyncData(서버 or 클라이언트)
  • 서버 혹은 클라이언트 사이드에서 생명주기 통틀어 한번씩만 호출되는 훅입니다.
  • Vue 인스턴스의 생명주기 이전에 먼저 데이터를 가져와서 렌더링을 하고싶은 경우에 사용합니다.
  • 컴포넌트를 로드하기 전에 항상 호출되며, 페이지 컴포넌트의 경우에만 사용할 수 있습니다.
  • asyncData 의 리턴값은 Vue 인스턴스의 data()와 병합됩니다.
• beforeCreated, created(클라이언트, 서버)
  • 서버에서 새로운 vue 인스턴스를 생성한 뒤 이를 프리랜더링 하기 때문에 Vue 인스턴스가 서버에서 만들어지는 시점에 created와 beforeCreated 훅이 호출됩니다.
  • 또한 클라이언트에서도 인스턴스를 만들고 $mount 메소드가 호출될 때도 따라 호출됩니다.
  • 즉 서버와 클라이언트 사이드 양쪽에서 호출되는 훅입니다.
• beforeMount 이후의 훅(클라이언트)
  • 클라이언트 사이드에서만, 하이드레이션 이후에 $mount 메소드가 호출될 때 나머지 Vue 생명주기 훅들이 실행됩니다.

출처: 참조 1

2. Nuxt.js 비동기 데이터

Nuxt.js에는 비동기데이터 가져 오기를 위해 설계된 3가지 후크가 있다.

• nuxtServerInit : 모든 페이지에 호출되는 VueX 저장소를 미리 채우는 데 사용됩니다.
• fetch : 페이지 내에서 호출 된 데이터로 VueX 저장소를 미리 채우는 데 사용됩니다.
• asyncData : data 페이지의 객체와 동기 데이터를 병합하는데 사용된다. 비동기 방식으로 미들웨어를 사용할 수도 있습니다. 즉, 미들웨어를 사용하여 VueX 저장소를 채울 수 있습니다.

Nust-SSR

asyncData 메소드

서버사이드에서 데이터를 가져와서 렌더링하고 싶을 때, 이때 pages 컴포넌트를 로딩하기 전에 매번 호출되는 asyncData를 사용하면 된다.

• pages 컴포넌트에서만 지원됩니다.
• 서버사이드에서 호출되거나 페이지를 이동할 때 호출
• 컴포넌트가 렌더링 되기 전에 호출
• context 인자 사용가능
• nuxt.js가 컴포넌트와 데이터를 자동으로 Merge하는 개념

!! asyncData 안에서 컴포넌트가 생성되기 전에 호출하기 때문에 this를 엑세스할 수 없다.

출처: 참조 2

3. asyncData()와 fetch()

• 두 개의 Hook은 매우 비슷해보이면서 목적은 다름
  • 공통점: 컴포넌트가 로딩되기 전에 매번 호출된다는 점, 첫번째 인자로 컨텍스트 오브젝트를 받음
• asyncData
  • 페이지가 로딩되기전에 컴포넌트 data를 미리 지정하여 컴포넌트가 생성될 때 병합하는데에 목적
  • 즉 필요한 컴포넌트의 data를 컴포넌트가 랜더링 되기 전에 미리 지정하여 보다 빠르게 구성한다는 데에 목적을 둠
• fetch
  • 주로 비동기 작업을 작성하게 되면, 컴포넌트가 랜더링 되기전에 이 작업을 기다리게 됨
  • 예를들어 유저정보가 필요한 컴포넌트라면 fetch 부분에 유저정보를 가져오는 API를 호출하여 활용할 수 있음
• 요약하자면,
  • asyncData는 컴포넌트가 랜더링 되기전에 컴포넌트 데이터를 구성하는데에 목적이 있고,
  • fetch는 컴포넌트가 랜더링 되기전에 비동기로직을 호출하는데에 목적이 있다고 생각합니다!

4. Vue LifeCycle (CSR)

beforecreate()

인스턴스가 생성되기 전이다. 데이터에 접근할 수 없다.

created()

인스턴스가 생성된 후 동기적으로 호출된다. 이 단계에서는 data, computed속성 methods, watch/이벤트 콜백 등의 설정이 준비된다. 그러나 $el 속성을 사용할 수 없다. DOM을 제외한 초기 데이터 설정이 완료된 상태이다.

컴포넌트 초기에 외부에서 부여받은 설정에 의해 기본 값 변경이 필요하다면 이 단계에서 변경하는 것이 좋다.

beforeMount()

div태그 #app의 html 코드가 생성되기 전 상태

Mounted()

인스턴스가 마운트 된 후 호출된다. DOM이 생성되긴 했지만 모든 자식 컴포넌트가 마운트되었음을 보장하지는 않는다. 그래서 mounted $nextTick을 사용하기도 한다.

beforeupdate(), updated()

데이터가 업데이트 되기 전, 후 (보통 watch를 사용한다.)

beforedestroy(), destroy()

해당 페이지를 종료하기 전, 후

1. 

<img src="~assets/svg/fire-extinguisher.svg" alt="fire-extinguisher" class="image">

Tag에서 파일경로 Project 루트로 가는 방법은 '~' 이다. 

Script에서는 @이다.

2. 

Git hub에서 파일 가져오는 방법

클릭해서 코드 붙여넣기.

3. 문법 참고

https://joshua1988.github.io/web-development/translation/essential-es6-features-for-vuejs/

4. require()

https://m.blog.naver.com/jdub7138/221022257248

5. NuxtLink

동적일 경우 :to, 정적일 경우 to

https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components

Component?

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록을 의미.

Vue에 강력한 기능이다. Component를 적절히 사용하면 화면을 구조화하여 일괄적인 패턴으로 개발 할 수 있으며, 코드를 쉽게 이해하고 재사용이 용이해진다.

컴포넌트 분류 방법

이름 규칙

kebab-case와 pascal-case로 정의한다.

Props

페이지에서 컴포넌트로 데이터를 전달할 때, props를 사용한다.

정적 전달

<blog-post title="Vue와 떠나는 여행"></blog-post>

동적 전달

<!-- 변수의 값을 동적으로 할당 -->
<blog-post :title="post.title"></blog-post>

<!-- 복잡한 표현을 포함한 동적 값 할당 -->
<blog-post :title="post.title + ' by ' + post.author.name"></blog-post>

https://v3.ko.vuejs.org/guide/component-props.html#%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%8C%E1%85%A5%E1%86%A8-%E1%84%83%E1%85%A9%E1%86%BC%E1%84%8C%E1%85%A5%E1%86%A8-prop-%E1%84%8C%E1%85%A5%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AF

페이지에서 컴포넌트로 전달하는 데이터 값이 바뀌었을 때, Component에서 watch를 사용하여 데이터 변경을 감지하고 동작을 정의하면 된다.

Props 선언에는 Camel case, 템플릿에는 케밥 케이스를 사용한다.

<!-- Nuxt 예시 --> 

<Component full-stack='hello world!' />

props: {
	fullStack: {
    	type: String,
        required: true
    }
}

Emit

컴포넌트에서 페이지로 데이터를 전달하고 싶을 때에는 emit을 사용하면 된다.

component.vue

this.$emit('updated', this.usercode.id, this.usercode.password)

page에 updated라는 명칭으로 페이지에 값을 전달하는 코드이다.

page에서는 다음과 같이 받는다.

page.vue

<Component @updated='getFunction' />

...
methods: {
	getFunction(id, password) {
    	console.log(id, password);
        }
    }
}

컴포넌트에서 템플릿으로 $emit할 때에 이름은 케밥 케이스를 사용해야한다.

<!-- Component -->

this.$emit('full-stack');

<!-- Template -->

<Component @fullStack="doSomething()" />

Vue에서 사용되는 문법을 정리한 문서이다. 개인적으로 몰랐거나 헷갈렸거나 정리할만한 내용이 있는 문법만 정리한다.

1. v-if와 v-show

v-if는 조건식이다. 변수를 적어주고 false이면 거짓이 되므로 태그가 출력되지 않는다. 일반적인 프로그래밍 언어의 if문과 비슷하게 생각하면 된다. vue의 기능은 'v-'로 표시한다. 태그를 단순히 감추는 것이면 v-show를 사용하면 된다.

2. v-cloak

v-cloak은 VueJS에서 렌더딩 되기 이 전에 브라우저에서 감추는 역할을 한다.