본문 바로가기

전체 글79

$nextTick() Vue DOM 조작 시 주의해야 할 점 Vue.js에서 data 가 업데이트되고 난 직후 UI가 갱신될 때 Vue가 DOM을 찾지 못하는 경우가 발생하기도 한다. DOM의 변경사항을 비동기적으로 업데이트하기 때문이다. 예를 들어, created 훅에서 DOM을 조작하려고 할 때는 아직 DOM 생성이 되기 전이므로 태그를 찾지 못하게 된다. created는 인스턴스가 작성된 후 동기적으로 호출되며 mounted보다 먼저 호출되기 때문에 가상돔을 조작할 수는 없다. mounted는 el에 인스턴스가 마운트된 직후 호출되어 가상돔 조작이 가능하다. created: function() { var dom = document.getElementById('item1'); dom.style.backgroundColor.. 2022. 4. 18.

Promise 패턴 자바스크립트 동작 자바스크립트는 어떻게 동작할까? 자바스크립트를 사용할 거면 기본적인 동작 원리에 대해서는 알아야 한다고 생각했다. 간단하게 요약하면, 자바스크립트는 싱글 스레드 기반이고 콜백 큐를 사용한다. 자바스크립트 엔진 V8 자바스크립트 코드를 실행하기 위해서는 인터프리터 역할을 하는 자바스크립트 엔진이 필요하다. 대중적으로 알려진 엔진은 구글의 V8 엔진으로 크롬 웹 브라우저, Node.js 등에서 사용되고 있다. V8 엔진의 내부 구조를 간단히 나타내면 이렇다. Memory Heap 과 Call Stack 이 주요 구성요소이다. Memory Heap: 변수와 객체에 대한 메모리 할당이 일어나는 곳 Call Stack: 함수가 호출되면 순서대로 쌓이는 곳 자바스크립트는 기본적으로 싱글 스레드 기.. 2022. 4. 14.

Vue 생명주기 Vue 인스턴스 라이프 사이클 인스턴스 생성 시 데이터 관찰, 템플릿 컴파일, DOM 에 객체 연결, 데이터 변경 시 DOM 을 업데이트 하게 된다. ① Creation: 컴포넌트 초기화 단계 컴포넌트가 DOM에 추가되기 전, 클라이언트단과 서버단 렌더링 모두에서 처리해야 할 일로 아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근하거나 this.$el를 사용할 수 없다. - beforeCreate Vue.JS의 라이프 사이클 훅 중에서 가장 먼저 실행 되는 훅입니다. data와 이벤트($on, $once, $off, $emit), 감시자($watch)등이 설정 되기 전에 호출되는 라이프 사이클 훅이다. - created data, computed, methods, watch 등과 같은 옵션 설정이 .. 2022. 4. 13.

Vue3 Composition API Composition API 란? Composition API는 컴포넌트 로직을 유연하게 구성할 수 있도록 하는 함수 기반 API이다. 기존에는 data, methods, computed에 로직이 분리되어 있어 데이터가 어디에서 사용되는지 파악하기 힘들었다. 컴포넌트의 계층구조가 복잡해지거나 프로젝트 규모가 커지면 추척 및 관리에 어려움이 있다. 컴포지션 API는 setup() 이라는 메서드 안에 로직을 모아놓는 구조이다. 데이터가 어떻게 변화하고 사용되는지 그룹핑하여 데이터의 흐름 파악이 쉽고 유지보수에 용이하다. Setup 함수 컴포넌트 객체에서 속성으로 분리되었던 기능 대부분(data, methods, computed)을 setup 함수 안에서 사용할 수 있다. 또한, setup는 beforeCre.. 2022. 4. 6.

Vuex / 상태관리 / Vuex 패턴 및 요소 Vuex 란? Vue.js 의 상태 관리를 위한 패턴이자 라이브러리이다. 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. Vuex 를 사용하지 않은 경우 컴포넌트 기반 프레임워크는 한 화면을 작은 단위의 컴포넌트 여러 개로 쪼개어 구성한다. 예를 들어, 뷰에서는 컴포넌트 간 데이터 전달을 위해 emit, props 등을 사용하는데 여기서 몇 가지 문제점이 있다. 데이터의 움직임을 확인할 수 없다. 부모-자식 컴포넌트의 관계가 복잡해지면 데이터의 이동을 파악하기 어렵다. 컴포넌트로부터 데이터를 전달받기 위해 중간에 거쳐야 할 컴포넌트가 많아진다. 먼저, 자식 컴포넌트의 깊이에 따라 props, emit 의 수가 많아지며 관리에 어려움이 생긴다. 게다가 부.. 2022. 4. 5.

Vue 라우터 / SPA / Router 값 전달 SPA (Single Page Application) 일반적인 웹 어플리케이션은 클라이언트가 웹 페이지를 요청하면 서버로부터 html 을 전달 받아 렌더링 엔진을 통해 화면에 보여준다. 한 페이지에 해당하는 페이지 용량이 커지면 요청마다 매번 새로운 페이지를 전달 받기 버겁다. 이러한 문제를 해결하는 것이 SPA, Single Page Application 이다. SPA 는 단일 페이지로 구성된 웹 어플리케이션으로 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다. 페이지 변경이 일어난다는 것이 최초 로드되었을 때 미리 브라우저에 올라간 템플릿만 교체하는 것이다. 화면 이동 시에 필요한 데이터를 html 로 전달(서버사이드 렌더링) 받지 않고 필요한 데이터만 서버로부터 전달 받아 동적.. 2022. 4. 4.

Vue 컴포넌트 / 컴포넌트 간 통신 Vue 컴포넌트 컴포넌트는 화면의 영역을 일정한 단위로 쪼개어 재활용 가능한 형태로 관리하는 것이다. Vue 에서 최상위 컴포넌트는 root 고 이를 시작으로 트리 구조로 형성된다. - 전역 컴포넌트 여러 인스턴스에서 공통으로 사용, 모든 자식 컴포넌트에서 사용 가능하다. 주로 플러그인, 라이브러리 등 앱 전역에서 사용할 공통 컴포넌트를 작성한다. vue 인스턴스 생성 전에 컴포넌트를 만들어주어야 한다. Vue.component('component-a', { template: ' hello world AAA !!!'}) Vue.component('component-b', { template: ' hello world BBB !!!'}) Vue.component('component-c', { templat.. 2022. 4. 4.

Vue 사용법 / 문법 / 옵션 / 디렉티브 Vue.js 적용 방법 👆CDN 방식으로 Vue 시작하기 - 개발용 // 최신버전 불러오기 // 특정버전 불러오기 - 상용 ✌️Webpack 방식으로 Vue 시작하기 npm으로 cli를 설치해 vue 라이브러리를 불러오는 방식이다. npm install -g @vue/cli # OR yarn global add @vue/cli 🔎 npm(Node Package Manager) node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통해서 관리하고 배포한다. 직접 개발한 모듈이나 다른 사용자들이 미리 만들어놓은 모듈을 간편하게 다운받아 사용할 수 있다. 🔎 Node.js 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼으로 자바스크립트를 활용하고 내장 http 서버 라이브러리를 가지고 있어 웹 .. 2022. 3. 28.

DevOps DevOps 데브옵스란? 개발(Development) 과 운영(Operations) 의 합성어로, 개발팀과 운영팀이 병합되어 개발팀은 서비스 개발에 매진하고 운영팀은 인프라 구축에 집중하여 효율적인 배포와 원활한 의사소통을 하기 위한 개발 방법론이다. 개발과 운영을 합쳐 비지니스 요구사항을 단기간에 반영하여 팀 내 협업이 증진된다. DevOps 이점 변화에 빠르게 대처하고 비지니스 성과를 창출하는 빠른 속도 새로운 릴리즈와 버그픽스를 빠르게 배포 모니터링, 로깅을 통한 안정적인 서비스 품질 복잡하고 변화하는 시스템을 효율적으로 관리 개발팀과 운영팀이 협력하여 책임 공유, 효율성 강화 참고자료 및 출처 🙇‍♂️ https://blog.sonim1.com/231 2022. 3. 23.

하드웨어 가상화 종류 가상화란? 물리적인 하드웨어 장치를 논리적인 객체로 추상화하는 것이다. 하드웨어 기능을 애뮬레이팅하여 추상화된 여러 개의 게스트 OS 를 가동할 수 있다. 하나의 하드웨어를 여러 개의 하드웨어처럼 쪼개어 사용하거나 반대로 여러 장치를 묶어 하나인 것처럼 제공한다. 가상화 대상이 되는 자원은 프로세서(CPU), 메모리(Memory), 스토리지(Storage), 네트워크(Network)를 포함한다. 가상화를 사용하면 1개의 하드웨어에서 여러 개의 가상 머신(VM) 을 구동하여 원하는 운영체나 애플리케이션을 실행할 수 있다. * 1개의 머신에서 여러 개의 애플리케이션을 구동하는 구조는 좋지 않음 가상화 종류 - 호스트 OS 가상화 물리적 하드웨어 위에 OS 를 설치 (Host OS)하고 그 위에 가상화 소프트.. 2022. 3. 22.

이전 1 2 3 4 5 6 ··· 8 다음

티스토리툴바