Adrian's Web Page

1. 컴포넌트(Component)란? Vue.js를 기반으로 했기에 Nuxt.js에서도 당연히 컴포넌트를 사용할 수 있다. 웹페이지에서 반복되는 요소가 존재한다면 우리가 원하는 형태로 컴포넌트롤 만들어 우리가 필요한 웹 페이지의 제작이 가능하다. 반복되는 요소가 존재하는 경우 컴포넌트를 사용하면 된다. 컴포넌트를 사용하기 위해서는 우선 component 디렉터리에서 해당 요소를 가져와야 한다. 웹 페이지에서 사용할 컴포넌트를 정의한다. - component/NavBar.vue 1234567891011121314151617181920212223242526272829303132333435363738 Real World Events List | Create .brand { font-family: 'Montse..

1. 도큐먼트 (Document) Nuxt는 페이지를 기반으로 작동하게 된다. 하지만, 웹 서비스의 구성상 페이지가 개별적으로 구성된다면 서비스를 개발하는데 많은 시간이 소요된다. 게다가 프로젝트의 공동 요소에 대한 로딩이 없다면 페이지 렌더링에도 많은 시간이 소요 될 것이다. Nuxt.js는 이러한 문제점을 해결하기 위해서 프로젝트 구조에 대한 효율성을 제공한다. Nuxt View의 구조는 이러한 개념에서 출발하게 된다. -Nuxt.js Views Nuxt 프로젝트에서 화면 구성은 페이지에 들어가게 된다. 하지만 header나 footer 처럼 여러 페이지에 거쳐 공통으로 들어가는 요소들은 매번 렌더링 하는 작업은 매우 번거롭다. 이러한 반복적인 요소를 모아서 한번에 담을 수 있도록 제공하는 방법이 있..

1. Nuxt.js Pages Nuxt.js 프로젝트를 생성한 뒤 웹 어플리케이션을 만드는 방법에 대해 알아보자. Nuxt.js 프로젝트를 구성하기 위해서는 Package.json 파일과 Pages 디렉터리 안에 페이지를 추가해서 구성 가능하다. 12345678910111213141516{ "name": "test1", "version": "1.0.0", "description": "My delightful Nuxt.js project", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "nuxt": "^..

1. Nuxt.js Project Nuxt.js 프로젝트를 신규로 생성하면 위의 구조를 가진다. nuxt.js는 vue를 이용한 페이지를 만들 수 있는 프레임워크다. 그렇기 때문에 nuxt.js에 대한 기본적인 구성을 알고 개발을 시작해야 한다. - assets SASS, LESS나 빌드에 필요한 JavaScript 파일이 포함한다. - component nuxt.js에서 사용되는 컴포넌트들을 포함한다. 컴포넌트는 화면에서 사용되는 각각의 요소를 의미한다. (vue.js에서 배운 component와 동일하다.) - layouts nuxt.js에서 사용하는 기본 레이아웃이 존재한다. 애플리케이션에서 상단 탭이나 하단 탭과 같이 모든 페이지에서 동일하게 적용되는 레이아웃이 담긴다. 만약 사용자가 새로 레이아..

1. Nuxt.js란? Nuxt.js는 Vue.js 애플리케이션 개발을 보다 강력하고 사용하기 쉽게 만들어 주는 프레임워크이다. 우리는 앞서 Vue.js가 어떻게 구성되고 웹 어플리케이션으로 만들어 지는지 확인해보았다. 이후 개발자들은 조금 더 빠른 개발 속도를 위해 Vue.js를 빠르게 적용하는 방법을 고안했고, 이를 프레임워크로 만들었다. Nuxt.js 개발자들이 소개하고 있는 Nuxt.js의 목표는 다음과 같다. Nuxt.js의 주요 범위는 클라이언트/서버 배포를 추상화 하는 동안의 UI Rendering이다.Node.js 기반의 프로젝트 혹은 기본 프로젝트 베이스로 사용할 수 있을 만큼의 유연한 프레임워크를 만드는 것이다.Nuxt.js는 Vue.js 애플리케이션 서버 렌더링을 보다 즐겁게 개발하는..

웹사이트를 살펴보면 일정한 양식으로 반복되는 객체를 볼 수 있다. 쇼핑몰에서 상품을 소개할 때 보면 일정한 양식으로 반복되는 객체를 쉽게 찾아 볼수 있다. 상품에 대한 사진, 가격, 이름 등 해당 상품에 필요한 필수 정보들을 담고 있어야 한다. 상품에 대한 정보를 데이터베이스에 넣고, 데이터를 부를 수 있는 변수를 지정한다. 그리고 변수를 객체로 넣어주면 자동으로 계산되어 웹 사이트가 만들어 진다면 이를 쉽게 구현할 수 있다. 위에 사진과 동일하게 3개의 반복되는 객체를 만들게 된다면 이를 컴포넌트로 제작 할 수 있다. 위 사진을 컴포넌트를 사용하지 않고, HTML으로 작성하면 아래와 같다. 123456789101112131415 Components box 1 button1 button2 Componen..

클래스 바인딩과 스타일 바인딩은 말 그래도 HTML 속성에 있는 클래스와 스타일을 Vue.Js로 바인딩 하는 것을 의미한다. 우리가 CSS로 만든 클래스나 스타일이 만들고, 우리가 원하는 액션을 취할 때마다 클래스와 스타일 변경이 가능하도록 만들어 주는 기능이다. 주로 액션에 따른 웹 디자인 변화에 쓰이게 된다. 1. 클래스 바인딩 앞서 만들었던 예제에서 버튼을 CSS를 활용 해 위와 같은 디자인으로 변경했다. 이번엔 Number라는 숫자가 음수를 허용해서는 않게 만들기 위해 Minus 버튼을 Number가 0이 되는 경우 더이상 작동하지 않도록 만든다고 가정해보자. 우선 위의 버튼에 CSS는 아래와 같다. 1234567891011 .btn{ height: 30px; width: 80px; font-si..

1. 이벤트 핸들링 조건부 렌더링과 리스트 렌더링을 통해 Vue.Js 렌더링 과정에서 조건문을 어떻게 활용할 것인지와 반복되는 리스트 형태의 테크 노출을 어떻게 구현하는지 알 수 있었다. 이를 활용하기 위해서 라디오 버튼이나 리스트 박스에 렌더링을 할 수 있도록 조건을 걸어서 이에 맞게 동작하는 웹사이트를 구현해보았다. 하지만 사용자들의 요구는 여기서 멈추지 않습니다. 특수한 버튼(혹은 컴포넌트)를 눌렀을 때 특정 동작을 직접 지시 할 수 있도록 원합니다. 예를 들어 버튼 하나를 눌렀을 때 웹 사이트에서 무언가 변화가 일어나고 싶어 합니다. 위에 홈페이지에는 두개의 버튼이 존재한다. Plus를 누르게 되면 Number가 1이 증가하고, Minus를 누르면 1이 감소하게 된다. 버튼을 누를 때 Number..

1. 조건부 렌더링 조건부 렌더링은 렌더링하여 페이지에 보여줄 데이터를 변경할 때 사용하는 방식이다. HTML 코드에 속성으로 v-if, v-else-if, v-else를 선언해주면 된다. 그리고 속성에는 반드시 true 와 false로 떨어질 수 있도록 조건 식을 넣어야 한다. - 조건부 렌더링 기본 구조 텍스트 텍스트 텍스트 조건식 판단을 하기 위해 vue.js에 해당 조건식을 참과 거짓으로 판단할 수 있게 값을 넣어야한다. 즉, 조건식에 선언된 변수가 인스턴스에 반드시 존재해야 하며 이 식이 true / false 판단 여부가 성립되어야 한다. - 조건부 렌더링 예시 234567891011 Vue.js Conditional Rendering {{ player }} James harde..

1. Vue.js 함수 사용 javascript 함수를 통해 Vue.js 구축이 가능하다. javascript에서 기본적으로 제공해주는 함수는 물론이고 우리가 임의로 작성한 함수를 활용해 우리가 원하는 값을 웹 브라우저로 보여줄 수 있다. 두가지 모두 살펴보기로 하자. - Date 함수 사용 javascirpt에서는 Date 오브젝트와 함수를 통해 현재 날짜에 대한 기본 함수를 제공한다.new Date() : 날짜 함수를 사용하기 위한 생성자date.getTime() : 현재 시각 출력 (사용자 입장에서 보기 불편하다.)date.getFullYear() : 연도 출력date.getMonth() : 월 출력date.getDay() : 일 출력 이를 활용한 오늘 날짜를 출력해주는 페이지를 만들 수 있다. 1..