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파일에 methodscomputed에 필요한 함수를 middleware에 정의하고 import하는 식으로 사용

2017.05.06

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

  1. assets 디렉토리
    컴파일되지 않은 LESS, SASS, JavaScript 등을 포함하는 디렉토리, 레일즈에서의 assets과 같은 역할인 듯 함. 예를들어 이미지 파일을 assets에 넣으면 nuxt는 file-loaderurl-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파일을 만들고 불러와야하는지 잘 모르겠다 ㅜㅜ 유튜브 강의 뒤져볼 예정

'개발 > Vue.js' 카테고리의 다른 글

Vue.js 정리  (0) 2017.04.25
Vue 기본자료 포스팅 완료!  (0) 2017.04.06
10. 컴포넌트  (0) 2017.04.06
9. 폼 입력 바인딩  (0) 2017.03.31
8. 이벤트 핸들링(v-on)  (0) 2017.03.31

'개발 > CSS' 카테고리의 다른 글

CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS / float를 clear하는 방법 네가지(clearfix)  (9) 2017.04.13

'개발 > JavaScript30' 카테고리의 다른 글

29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19

'개발 > JavaScript30' 카테고리의 다른 글

30. Whack A Mole  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19

'개발 > JavaScript30' 카테고리의 다른 글

30. Whack A Mole  (0) 2017.04.21
29. Countdown Timer  (0) 2017.04.21
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19

'개발 > JavaScript30' 카테고리의 다른 글

29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18

+ Recent posts