NUXT (3) 썸네일형 리스트형 NUXT 알아보기(3): Routing routing이란 무엇일까??? routing은 쉽게 생각하면 경로에 페이지를 매칭시키는 것이다. Nuxt없이 Vue로 개발할 때는 이 routing을 위해서 router 설정 파일(router.js)에 경로와 vue 파일을 하나하나 적어줘야 했다. 하지만 Nuxt와 함께라면 그럴 필요가 없다!!!!!! 먼저 pages 폴더 아래에 cool.vue를 만들어보자!!!! 좋았어!!! 이번에는 pages 폴더 밑에 easy 밑에 index.vue 파일을 만들어보자!!!! 완벽하다!!!! yarn dev를 통해 어플리케이션을 실행시켜보자~~~ (참고로 nuxt는 코드를 자동으로 반영해주기때문에 yarn dev 명령어를 이미 실행 중이라면 재실행할 필요가 없다.) 이제 localhost:3000/cool과 loc.. NUXT 알아보기(2): index 페이지 만들기 NUXT는 Vue로 웹 개발을 하기 위한 프레임워크라고 말했다!!! 프레임워크인만큼 구조들에 대한 규칙이 이미 정해져있다. 만들어보면서 알아보도록 하자~~~~ vue 파일들은 pages 폴더 밑에 작성해야 한다. 먼저 pages 폴더를 만들어주자!!!! 그리고 index.vue라는 파일을 만들어주자~~~ 이는 홈페이지에서 기본적으로 보여질 것으로 반드시 이름을 index.vue로 해야 한다. Hello world! index.vue 파일 내용은 국룰인 Hello world로 했다. 이제 실행을 시켜보자!!! 터미널에 yarn dev라고 입력해주자!!! 이렇게 나오면 성공이다!!!! 자 이제 터미널에 표시된 주소로 접속해보자!!!! 혹시 페이지가 제대로 나오지 않았다면 폴더명이나 파일명, package.j.. NUXT 알아보기(1): 프로젝트 설정 NUXT가 뭘까요??? Vue.js를 통해 웹 개발을 할 때 사용하는 프레임워크입니다. 갑자기 회사에서 공부하래요... (앗 TMI) NUXT로 프로젝트를 만들 때 boilerplate 코드를 통해 만들 수도 있지만, 나는 한땀한땀 만들 거다. 공부하는 거니까!!!! 먼저 프로젝트를 만들 폴더부터 만들어주자!!!! 나는 nuxt-tutorial이라는 폴더 아래 만들 것이다. (참고로 툴은 자유롭게 쓰면 된다. 나는 webstorm을 사용한다. 사실 그냥 jetbrain 거 좋아한다. 너무 편해~~~ 또한 package manager로는 yarn을 사용할 것이다.) package.json 작성하기 먼저 package.json을 프로젝트 폴더 바로 아래에 작성해준다.(package.json 뭔지 모르겠으면 .. 이전 1 다음
