열이의 개발블로그

프론트엔드 개발자를 희망하는 사람이라면 누구나 들어봤을 법한 기술 스택인 React.js 프론트엔드 라이브러리, 프레임워크로 주로 사용되는 React.js와 Vue.js를 비교해보는 글입니다. ✅ React.js란? React.js는 Facebook에서 개발한 오픈소스 자바스크립트 라이브러리입니다. React.js는 사용자 인터페이스를 구축하기 위해 사용되며, 웹 애플리케이션에서 동적이고 반응형 UI를 만드는데 매우 유용합니다. ✅ React.js의 특징 컴포넌트 기반(Component Based) 아키텍처를 기반으로 하며, 이는 UI를 작은 조각으로 분할하고 각 조각을 독립적으로 관리할 수 있게 합니다. 다른 프레임워크와 다르게 MVC(Model - View - Controller) 아키텍처가 아닌 V..

Vuex란? Vue.js용 상태 관리 라이브러리 Vuex는 Vue.js 애플리케이션의 상태(데이터)를 관리하기 위한 중앙 저장소 역할을 합니다. Flux 아키텍처 패턴을 따르며 상태는 저장소라는 단일 정보 소스에 저장되고 컴포넌트는 actions 및 mutations을 통해 상태를 업데이트하고 접근할 수 있습니다. ✅ Vuex를 사용해야 하는 이유 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다. Vue를 기준으로 컴포넌트끼리 데이터를 주고 받기 위해서는 부모 컴포넌트가 자식 컴포넌트로 데이터를 넘겨주어 처리합니다. 하지만 중간에 거쳐야할 컴포넌트가 많아지거나 같은 레벨 간에 데이터의 이동이 필요할 경우 데이터 흐름이 복잡해집니다. 이를 더 효율적으로 해결하기 위..

Vue는 자바스크립트 레벨에서 데이터를 취급하기 때문에 페이지를 새로고침하면 값이 사라집니다. 데이터를 새로고침 시에도 유지를 하고 싶다면 localStorage 혹은 sessionStorage를 사용해야 합니다. ✅ 로컬스토리지(localStorage) 사용자 세션 데이터 유지 가능 브라우저를 닫았다가 다시 열어도 유지 가능 탭을 여러 개 열어도 공유됨 삭제될 때까지 지속 ✅ 세션스토리지(sessionStorage) 브라우저 세션 기간 동안만 사용 가능 탭이나 창을 닫으면 삭제 새로고침을 해도 유지 영원한 저장이 필요 없을 경우 사용 ✏️ 사용 예시 // App.vue methods: { selectCountry(country) { this.country = country; localStorage.se..

https://eslint.vuejs.org/rules/no-multiple-template-root.html vue/no-multiple-template-root | eslint-plugin-vue eslint.vuejs.org Vue 2에서는 템플릿 내에서 여러 개의 루트 노드를 가지면 안된다. 즉, 하나의 태그(루트 태그) 안에 다른 태그를 작성해야 오류를 막을 수 있다. 🚨 오류 위의 코드를 예로 3번째 줄에 오류가 생긴 것을 확인할 수 있다. 오류를 찾아서 확인해보면 위와 같이 "no-multiple-template-root"라는 오류로 템플릿에서는 하나의 태그를 루트로 가진다. 라고 나와있다. ✅ 해결 이런 식으로 하나의 태그를 만들어 안에 다른 태그들을 넣어주면 된다.

Vue3에서 등장한 composition api에서 사용하는 데이터를 반응형으로 만드는 방법 ✏️ composition api가 등장한 배경 Vue2에서는 options api를 사용하고 있었음 객체 내에 다양한 속성을 사용하고 있는 형태 라이프 사이클을 제어하기 위해 사용하는 created, mounted, updated 그리고 컴포넌트 내에서 여러 메서드(methods)들을 정의하고 데이터(data)들을 참조할 때 정해진 속성에 정의해 사용 ✏️ options api 사용 예시 // 태그 안 export default { components: { // 컴포넌트 정의 }, data() { return { // 데이터 정의 } }, created() { // created 시점 정의 }, methods(..

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

Do it! Vue.js 뷰 컴포넌트 통신 ✏️ 컴포넌트 간 통신과 유효 범위 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없음 컴포넌트마다 자체적으로 고유한 유효 범위(scope)를 갖기 때문 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접 참조할 수 없음 2개의 지역 컴포넌트를 등록하고, 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조하는 예제 my-component2 컴포넌트 내용에서 {{ cmp2Data }}는 my-component1 컴포넌트의 data.cmp1Data를 참조하고 있음 자바스크립트의 객체 참조 방식을 생각해 보면 참조 값 100이 화면에 표시되어야 하지만 아무것도 표시하지 않음 {{ cmp2Data }}에 아무것도 출력되지..

Do it! Vue.js ✏️ 뷰 컴포넌트 컴포넌트란? 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역) 자료구조의 트리(Tree) 모양과 유사 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 코드의 재사용성이 증가함 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해 가능 컴포넌트 등록 컴포넌트 등록 방법에는 전역과 지역, 두 가지가 있음 지역(Local) 컴포넌트 특정 인스턴스에서만 유효한 범위를 갖음 전역(Global) 컴포넌트 여러 인스턴스에서 공통으로 사용할 수 있음 전역 컴포넌트 등록 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록 전역..