개발 공부/Do it! Vue.js 입문
-
4장. 상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신 - 2개발 공부/Do it! Vue.js 입문 2025. 5. 24. 09:00
4장 - 2 04-2 뷰 HTTP 통신요즘 웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능이다.과거의 웹 사이트는 정적이었으나 이제는 사용자와의 상호작용에 따라 데이터를 동적으로 화면에 표시해 줘야 하기 때문이다. HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜(protocol)이다.프로토콜 : 컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙위 그림처럼 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식으로 동작한다.웹 앱 HTTP 통신의 대표적인 사례로는 제이쿼리(jQuery)의 ajax가 있다.ajax는 서버에서..
-
4장. 상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신 - 1개발 공부/Do it! Vue.js 입문 2025. 5. 23. 09:00
4장 - 1 04-1 뷰 라우터라우터(Router)를 이해하기 위해서는 먼저 라우팅(Routing)이 무엇인지 알아야 한다.라우팅이란 웹 페이지 간의 이동 방법을 말하며, 현대 웹 앱 형태 중 하나인 SPA(Single Page Application)에서 주로 사용하고 있다.SPA : 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션일반적으로 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타난다.이러한 부분들을 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할..
-
3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 3개발 공부/Do it! Vue.js 입문 2025. 5. 22. 09:00
3장 - 3 03-3 뷰 컴포넌트 통신앵귤러1이나 백본(Backbone.js)과 같은 초창기 자바스크립트 프레임워크에서는 한 화면을 1개의 뷰(View)로 간주했다. 따라서 한 화면의 데이터를 해당 화면 영역 어디서든 호출할 수 있었다.백본: MV*(Model-View-Controller 또는 Presentational) 자바스크립트 프레임워크로, 앵귤러1이 유행하던 시기에 쌍벽을 이루던 오픈 소스 라이브러리하지만 뷰(Vue.js)의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위(Scope)를 갖기 때문이다.이는 뷰 프레임워크 내부적으로 정의된 특징임으로, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의..
-
3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 2개발 공부/Do it! Vue.js 입문 2025. 5. 21. 09:00
3장 - 2 03-2 뷰 컴포넌트컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미한다.컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다.화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드 재사용이 편리하다.또한 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다. 뷰에서는 웹 화면을 구성할 때 흔히 사용하는 내비게이션 바(navigation bar), 테이블(table), 리스트(list), 인풋 박스(input box) 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다.위의 왼쪽 그림은 화면 전체를 Header, Content..
-
3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 1개발 공부/Do it! Vue.js 입문 2025. 5. 20. 09:00
3장 - 1 "인스턴스와 컴포넌트를 레고에 비유한다면 인스턴스는 레고를 조립하는 기본 판을, 컴포넌트는 레고 블록을 의미한다." 03-1 뷰 인스턴스뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 뷰 인스턴스 생성뷰 인스턴스를 사용하기 위해서는 아래와 같이 뷰 인스턴스를 생성해야 한다. new Vue({ ... })이전 장에서 작성한 코드를 다시 살펴보자. {{ message }} 'Hello Vue.js!' 텍스트를 화면에 표시하기 위해 new Vue( )로 뷰 인스턴스를 생성하였다. 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정하고..
-
2장. 개발 환경 설정 및 첫 번째 프로젝트개발 공부/Do it! Vue.js 입문 2025. 5. 19. 09:00
2장 02-1 뷰 학습을 위한 개발 환경 설정하기뷰로 웹 앱을 개발하기 위한 환경을 구성해보자. 우선 다음과 같은 도구들을 설치한다.크롬(Chrome) 브라우저텍스트 에디터나 통합개발환경(IDE, Intergrated Development Environment) - Atom, vscode....Node.js뷰 개발자 도구(Vue.js devtools, 크롬 확장 플러그인) 뷰로 화면 개발을 하려면 첫 번째로 구성해야 할 환경이 바로 브라우저이다.구글에서 개발한 크롬 브라우저는 최신 웹 트렌드와 문법을 빠르게 반영하고 있는 브라우저이며, 웹 개발 시 편리한 기능을 제공하는 크롬 개발자 도구를 지원한다.크롬 브라우저 공식 사이트https://www.google.co.kr/chrome/ Chrome 웹브라..
-
1장. Vue.js 소개개발 공부/Do it! Vue.js 입문 2025. 5. 18. 09:00
1장 01-1 Vue.js란 무엇인가?Vue.js(뷰)는 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크이다.기존 웹 개발자뿐만 아니라 HTML, CSS, 자바스크립트 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉽게 만들어졌다.뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있다.라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집프레임워크 : 개발자들의 개발 생산성을 높이기 위해 일정한 툴과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구위 그림은 뷰의 창시자인 에반 유(Evan You)가 2017년 Vue.js 컨퍼런스에서 발표한 프레젠테이션에 사용한 그림이다.뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프..
