열이의 개발블로그

✏️ 라우터를 사용하기 전, Vue.js에 대해서 알아보자. Vue.js는 SPA(Single Page Application) 개발을 위한 프레임워크이다. SPA, 즉 Single Page Application이란 단일 페이지 애플리케이션으로 페이지 하나에서 동작하는 애플리케이션을 의미합니다. 가장 처음 웹 사이트를 접속했을 때, 웹 사이트 전체에 필요한 자원들을 모두 서버로부터 가져와 로딩하여 페이지를 나타냅니다. 그 후 페이지의 변경이 있을 경우 페이지 전체가 변경되는 것이 아닌 필요한 부분만 바뀌게 되는 것입니다. SPA에서는 CSR(Client Side Rendering), 즉 클라이언트 사이드 렌더링을 통해 클라이언트인 브라우저가 렌더링을 처리하는 방식으로 동작합니다. CSR과 반대되는 MPA(..

뷰 컴포넌트를 생성할 때 컴포넌트의 이름은 반드시 여러 개의 단어를 사용해야 한다. 프로젝트를 생성한 뒤 프로젝트/src/components 안에 컴포넌트를 하나 생성해 보자! Test라는 이름을 가진 컴포넌트를 하나 생성하면 이렇게 빨간색으로 오류가 뜨게 된다. 이유는 무엇일까? 위의 오류를 읽어보면 "Test"라는 컴포넌트는 반드시 여러 개의 단어를 조합해 이름을 지어야 한다고 한다. 그렇다면 위와 같이 이름의 규칙은 어떤게 있을까? ✅ 컴포넌트 이름 규칙 컴포넌트 이름은 항상 여러 문자로 지어야 한다. 하지만 루트 컴포넌트인 App과 기본으로 제공되는 또는 와 같은 것은 제외한다. 이는 이미 존재하거나 미래에 존재할 HTML 요소들과의 충돌을 막기 위함이다. (HTML 요소는 한 단어이기 때문) 자..

Vue를 사용하여 프로젝트를 생성해보자! 우선 터미널에 아래와 같은 코드를 입력하자. $ vue create test 필자는 Vue CLI 5.0.8버전을 사용하고 있다. create 명령어를 입력했다면 위와 같은 화면을 볼 수 있다. 이때 Vue의 버전을 골라 선택해주면 된다. [Vue 2]를 사용하여 프로젝트를 생성해보도록 하자. 위와 같은 코드가 나타나며 프로젝트가 생성되었다!! 생성된 프로젝트는 위와 같다. 이제 Vue를 이용하여 프로젝트를 진행해보자

Do it! Vue.js 뷰 HTTP 통신 ✏️ 웹 앱의 HTTP 통신 방법 웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해줘야 하기 때문 HTTP란? 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식 서버에 '해당 데이터를 보내주세요.'라는 메시지를 보내는 것이 'HTTP 요청을 보낸다.'와 같은 의미 웹 앱 HTTP 통신의 대표적인 사례로 제이쿼리(jQuery)의 ajax ajax는 서버에서 받아온 데이터를 표시할 때 화면 전..

Do it! Vue.js 뷰 라우터 ✏️ 라우팅이란? 라우팅이란 웹 페이지 간의 이동 방법 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용 싱글 페이지 애플리케이션(SPA) 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션 라우팅을 이용하면 화면 간 전환이 매끄럽고 애플리케이션의 사용자 경험을 향상시킬 수 있음 라우팅 사용시 웹 페이지 요청과 응답 과정에서 화면 상 깜빡거림 없이 매끄럽게 전환 가능 대표적인 라우팅 라이브러리 router.js, navigo.js ✏️ 뷰 라..

Do it! Vue.js ✏️ 뷰 인스턴스 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 ✏️ 뷰 인스턴스 생성 뷰 인스턴스를 사용하기 위한 코드 new Vue({ ... }); 예제 // 인스턴스 new Vue({ // el 속성 el: '#app', // data 속성 data: { message: 'Hello Vue.js!' } }); 'Hello Vue.js!' 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정 data 속성에 message 값을 정의하여 화면의 {{ message }}에 연결 ✏️ 뷰 인스턴스 생성자 new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 함 Vue 생성자는 뷰..

Do it! Vue.js ✏️ Vue.js를 사용하는 이유 "Vue.js의 초점은 더 많은 사람들이 쉽게 웹 앱을 만들 수 있도록 도와주는 데 있다." - 에반 유(Vue.js 창시자) 진입 장벽이 낮다 ✏️ Vue.js란? 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있음 ✏️ 뷰의 장점 배우기가 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. 리액트의 장점과 앵귤러의 장점을 갖고 있다. ✏️ 뷰의 특징 1. UI 화면단 라이브러리 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리 화면의 표현에 주로 관여하는 라이브러리이기 때문에 화면단 라이브러리라고도 함 MVVM 패턴이란 마크업 ..