컴퓨터 탐험가 찰리

1. Mock 서버 만들기 목적 Postman을 이용해서 Mock 서버를 만든다. 실무에서는 백엔드가 만들어놓은 서버 API에 프론트가 요청을 보내서 데이터를 받아오는데, 서버가 없으니 가짜로 서버를 만들어놓고 프론트엔드 테스트를 하는 것이다. 실제로, 기획이나 디자인 쪽에서 엑셀로 데이터를 만들어놓고, 이것을 JSON 데이터로 바꾼 뒤, Mock 서버를 만들어서 백엔드에서 개발을 하는 동안 프론트 엔드도 병렬적으로 업무를 진행할 수 있도록 한다고 한다. Mock 서버 만들기 1) new-> mock server를 선택한다. 2) GET, test URL로 API를 만들고, next 클릭, Server name을 설정하여 Mock 서버 생성을 완료한다. 3) Mock Server - 서버 이름 - vie..

1. 라이프 사이클 Vue.js에서 라이프 사이클이란 하나의 인스턴스가 생성되고, 마운트 및 업데이트 되고, 사라지는 일련의 과정을 말한다. 그리고 Vue.js에서는 이러한 과정을 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed로 나누어 구분한다. 각 과정에 대해서 상세히 알아야겠지만, 기초 단계라 정확히 파악하기 보다는 전체적인 흐름만 파악하고 실제 프로젝트에서 이러한 과정들을 활용하면서 익숙해지고자 한다. 각 과정의 의미 1. creation(beforeCreate, created) 이 단계는 가장 처음 실행되는 단계로, 컴포넌트들이 DOM에 추가되기 전이다. 클라이언트와 서버의 렌더..

1. Slot의 필요성 Slot은 자식(하위) 컴포넌트를 그대로 유지하면서 다른 부모(상위) 컴포넌트들마다 다른 내용을 적용하고 싶을 때 사용한다. 기본적으로는 부모 컴포넌트의 요소를 자식 컴포넌트에 내려받는 방식으로 사용한다. 아래와 같이 About.vue라는 상위 요소 컴포넌트에 하위 요소로 Header.vue 컴포넌트가 있는 경우를 생각해보자. 이 상황에서 first, second, third의 윗 부분에 요소를 추가하고 싶다면? 하위 컴포넌트인 Header.vue에 요소를 직접 추가하면 된다. 하지만 Header.vue 컴포넌트는 다른 컴포넌트에서도 그대로 사용하고 싶은 상황이라면 slot을 사용하는 것이 유리하다. 아래와 같이 Slot을 이용하여 각 영역에 Here is... 구문을 추가하는 방..

1. 부모로부터 props를 받는 자식 컴포넌트 작성 지난 글에서 다룬 것처럼, 일단 부모로부터 props를 받는 자식 컴포넌트를 작성한다. 자식 컴포넌트로 InputField.vue를 만들고 이것을 부모 컴포넌트 Home.vue에서 불러오는 방식이다. [부모컴포넌트 Home.vue] inputField를 불러오고, 자신의 data인 title을 title 속성으로 바인딩하여 props로 내려준다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Welcome to Home import inputField from '@/components/layout/inputField'; export default { data() { return { title : "" } }..

1. 자식컴포넌트에 props 보내기 1-1. 기본 페이지 및 컴포넌트 구성 props는 React에서와 마찬가지로 부모 컴포넌트의 데이터(상태값)를 자식 컴포넌트로 내려줄 때 사용한다. 작성하게 될 페이지 구성을 표현해보면 다음과 같다. Home.vue, About.vue 내부에 Header.vue 컴포넌트를 삽입한 형태다. 코드를 아래에서 확인해보자. App.vue 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 App.vue에서 표시하는 정보입니다. Home About export default { name: 'App' } h3 { color: red; } Colored by Color Scripter cs Home.vue (부모 컴포넌트) 1 2 3..

1. 파일구조 이제 지엽적으로 Vue 문법만 공부하는 것이 아니라, 전체적인 파일구조를 살펴보자. 기본 구조는 아래와 같다. 전체적인 파악 후, header 만들기를 따라하면서 각 컴포넌트들이 어떻게 구성되어지는가를 살펴보자. 이미 실행해봤지만, 초기 파일에서 console창을 열어서(intelliJ, windows이면 [Alt + F12]), 'npm run serve' 명령어를 입력해보자. localhost:8080/에 접속하면 아래와 같은 화면이 나온다. 이 화면은 public 폴더의 index.html을 표현한 것이며, 여기에 components 폴더의 HelloWorld.vue 컴포넌트를 삽입한 것이다. 정확히 어떤 경로를 거쳐서 이 컴포넌트가 화면에 출력된 것인지 알아보자. 2. index.h..

1. Vue의 특징 Vue.js는 웹프론트엔드 프레임워크이다. ReactJS의 경우 라이브러리로 소개되는데, 이것은 Vue와 React의 특성 차이를 나타내는 것이라고 할 수 있다. 즉 React는 Javascript를 기반으로 하나 자유도가 높고, 필요한 복잡한 컴포넌트가 있으면 직접 만들어 써야되는 특징이 있다. 그러나 Vue는 정해진 규칙이 짜여있어 초보자들이 접근하기 쉽고 생산성이 높은 장점이 있다. 다만 커뮤니티의 경우 React가 더 활발하여 더 다양한 접근이 가능할 수 있다. React와의 비교 공식문서에서의 React와 비교 내용은 다음과 같다(참조2, React 16이전과 비교한 문서임 / 2020.01.15). 비용이 많이 드는 DOM 조작에서, 둘 다 가상DOM을 이용하지만 필요한 D..

1. 인스턴스 여러 개의 인스턴스 생성하기 new Vue 명령어를 통해서 Vue를 생성하고, el 객체에서 적용되는 id값만 바꿔서 적용해주면 된다. id=app 과 id=app2인 요소를 2개 만들고, 같은 인스턴스를 만들고 같은 메서드를 적용하되, el객체의 값을 바꿔주었다.(instance.html 파일) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 {{name}} change {{name}} change new Vue({ el: '#app', data: { name: 'charlie' }, methods: { changeName() { this.name = this.name +..

1. 클래스 바인딩 클래스 바인딩은 어떤 요소의 class 이름을 단순 문자열값으로 지정하는 것이 아니라, data 객체 내부의 변수값으로 지정하는 것을 의미한다. 이렇게 함으로써 data 객체의 변수값이 변하면 자동으로 class 이름이 변하도록 만들 수 있다. 이것은 객체 구문, 배열 구문 또는 삼항연산자를 통해 지정할 수 있다. 객체구문 적용 객체 구문으로 적용하는 방법을 통해 클래스 바인딩을 익혀보자.(class-binding.html 파일) class를 객체형태로 지정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 .red { color : red; } .font-size { font-s..

1. 데이터 양방향 바인딩을 통한 텍스트 미리보기 만들기(v-model) input 입력창에 입력하는 텍스트 정보를 미리 볼 수 있는 요소를 만들어본다. v-model.html 파일로 만들어보자. 비슷하지만 코드를 여러 번 쳐보면서 익숙해지자! 태그에 cdn 코드 넣는 것 까먹지 말고... @keyup으로 바인딩 html에는 input 박스와 {{write}} data를 만들어 놓는다. 그리고 input창에 어떤 입력이 오면 추적을 하도록 @keyup 이벤트를 걸어놓는다(@ 는 v-on:의 단축어로 사용되니 기억하자!). 굳이 @keyup 이벤트에 textModifier라는 함수를 textModifier(event)와 같이 실행문에 파라미터를 넣는 방식으로 작성하지 않더라도, keyup 이벤트에서 알아서..