본문 바로가기
관리자

Programming-[Frontend]

 (62)
Vue.js / 기초 / 11. 서버 데이터 바인딩 하기 (w/postman Mock Server) 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..
Vue.js / 기초 / 10. 라이프 사이클, Life cycle 1. 라이프 사이클 Vue.js에서 라이프 사이클이란 하나의 인스턴스가 생성되고, 마운트 및 업데이트 되고, 사라지는 일련의 과정을 말한다. 그리고 Vue.js에서는 이러한 과정을 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed로 나누어 구분한다. 각 과정에 대해서 상세히 알아야겠지만, 기초 단계라 정확히 파악하기 보다는 전체적인 흐름만 파악하고 실제 프로젝트에서 이러한 과정들을 활용하면서 익숙해지고자 한다. 각 과정의 의미 1. creation(beforeCreate, created) 이 단계는 가장 처음 실행되는 단계로, 컴포넌트들이 DOM에 추가되기 전이다. 클라이언트와 서버의 렌더..
Vue.js / 기초 / 9. Slot의 필요성과 사용 방법 1. Slot의 필요성 Slot은 자식(하위) 컴포넌트를 그대로 유지하면서 다른 부모(상위) 컴포넌트들마다 다른 내용을 적용하고 싶을 때 사용한다. 기본적으로는 부모 컴포넌트의 요소를 자식 컴포넌트에 내려받는 방식으로 사용한다. 아래와 같이 About.vue라는 상위 요소 컴포넌트에 하위 요소로 Header.vue 컴포넌트가 있는 경우를 생각해보자. 이 상황에서 first, second, third의 윗 부분에 요소를 추가하고 싶다면? 하위 컴포넌트인 Header.vue에 요소를 직접 추가하면 된다. 하지만 Header.vue 컴포넌트는 다른 컴포넌트에서도 그대로 사용하고 싶은 상황이라면 slot을 사용하는 것이 유리하다. 아래와 같이 Slot을 이용하여 각 영역에 Here is... 구문을 추가하는 방..
Vue.js / 기초 / 8. Emit으로 자식 -> 부모 컴포넌트에 데이터 보내기 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 : "" } }..
Vue.js / 기초 / 7. props로 부모 -> 자식 컴포넌트에 데이터 보내기 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..
Vue.js / 기초 / 6. 파일, 컴포넌트 및 router 구조 1. 파일구조 이제 지엽적으로 Vue 문법만 공부하는 것이 아니라, 전체적인 파일구조를 살펴보자. 기본 구조는 아래와 같다. 전체적인 파악 후, header 만들기를 따라하면서 각 컴포넌트들이 어떻게 구성되어지는가를 살펴보자. 이미 실행해봤지만, 초기 파일에서 console창을 열어서(intelliJ, windows이면 [Alt + F12]), 'npm run serve' 명령어를 입력해보자. localhost:8080/에 접속하면 아래와 같은 화면이 나온다. 이 화면은 public 폴더의 index.html을 표현한 것이며, 여기에 components 폴더의 HelloWorld.vue 컴포넌트를 삽입한 것이다. 정확히 어떤 경로를 거쳐서 이 컴포넌트가 화면에 출력된 것인지 알아보자. 2. index.h..
Vue.js / 기초 / 1. Vue.js의 특징, Vue-cli 설치하기 1. Vue의 특징 Vue.js는 웹프론트엔드 프레임워크이다. ReactJS의 경우 라이브러리로 소개되는데, 이것은 Vue와 React의 특성 차이를 나타내는 것이라고 할 수 있다. 즉 React는 Javascript를 기반으로 하나 자유도가 높고, 필요한 복잡한 컴포넌트가 있으면 직접 만들어 써야되는 특징이 있다. 그러나 Vue는 정해진 규칙이 짜여있어 초보자들이 접근하기 쉽고 생산성이 높은 장점이 있다. 다만 커뮤니티의 경우 React가 더 활발하여 더 다양한 접근이 가능할 수 있다. React와의 비교 공식문서에서의 React와 비교 내용은 다음과 같다(참조2, React 16이전과 비교한 문서임 / 2020.01.15). 비용이 많이 드는 DOM 조작에서, 둘 다 가상DOM을 이용하지만 필요한 D..
Typescript / 기초 / 보호되어 있는 글입니다.

티스토리툴바