Vue (5) 썸네일형 리스트형 싱글 파일 컴포넌트(SFC)로 VueJS 시작하기 리액트 개발자라면 Vue에도 create-react-app 같은 기능이 있을 거라 짐작할 수 있다. 또한 리액트처럼 컴포넌트로 파일을 손쉽게 나눠서 관리하고 싶을 것이다. 이를 위해서 싱글 파일 컴포넌트(SFC)를 활용할 수 있다. .vue라는 파일을 이용해서 자질구레한 코드없이 개발을 편하게 할 수 있다. SFC를 사용하려면 VueCLI를 설치해야 한다. cli.vuejs.org/guide/installation.html VueCLI를 이용해서 SFC가 장착된 프로젝트를 쉽게 만들 수 있다. VueJS에서 탭을 클릭 했을 때 컴포넌트를 변경하는 방법 is 속성을 이용해 컴포넌트를 선택해서 렌더링 할 수 있다. currentTabComponent가 'home'을 리턴하는지 'blog'를 리턴하는지에 따라서 다른 컴포넌트가 나타난다. Home Blog VueJS의 자식 컴포넌트에서 부모에 이벤트를 주는 방법 자식 컴포넌트의 버튼을 클릭하면 커스텀 이벤트인 @add-number가 호출되어 number가 1씩 더해진다. {{ number }} $emit 메소드의 두 번째 인자를 통해 특정 값을 보낼 수도 있다. $emit 메소드의 두 번째 인자에 넣은 2가 $event 들어가고 이제는 버튼을 클릭할 때마다 2씩 숫자가 오른다. app.component('child-component', { template: ` 더하기 ` }) @add-number에 메소드를 넣으면 메소드의 첫 번째 파라미터로 $event 값을 받을 수 있다. const app = Vue.createApp({ data() { return { number: 1 } }, methods: { onAddNumber(event) { this.number .. VueJS 시작하기 React에 비해 Vue를 실행하는 것은 너무 쉽다. 아래 코드만 입력하면 끝이다. {{ message }} 먼저 head 내부에서 vue를 위한 cdn을 불러오고 나머지는 순수 자바스크립트를 이용한 구현과 유사하다. 위 예제를 입력하면 message에 'Hello World!'가 들어가 빈화면에 Hello World!가 나타나게 된다. 이제 변수 app이 참조하는 인스턴스를 통해서 DOM을 조작할 수 있다. console 창을 열고 app.message에 다른 문자를 넣으면 바뀌는 것을 확인할 수 있다. 이처럼 Vue는 DOM을 간단히 다룰 수 있게 해준다. 아래는 컴포넌트를 이용한 예제다. NuxtJS로 Github에 블로그 만드는 방법 NuxtJS는 VueJS로 SSR(Server Side Rendering)을 가능하게 하는 프레임워크다. 블로그와 같이 정적인 문서를 다루는 웹페이지에 적합하다. 요즘에는 github.io라는 URL 페이지가 심심치 않게 보인다. 보통 jekyll라는 것을 활용하여 좋은 프리셋을 선택해 블로그로 활용하는 듯한데 Nuxt를 이용하면 디자인을 마음대로 바꿀 수 있어서 좋다. 리액트에 대해서 잘 알고 있다면 Vue를 조금 공부하더라도 어렵게만 보이는 Nuxt를 쉽게 구현할 수 있다. Nuxt 설치 아래의 create nuxt-app 명령어로 시작하자. 대부분 필요한 것들을 알아서 설치해준다. npx create nuxt-app 프로젝트-폴더-이름 생성된 프로젝트 폴더에 진입해서 아래 명령어를 입력하면 바로 실.. 이전 1 다음
