Vue.js 썸네일형 리스트형 [vue.js] storybook 도입 한 서비스를 여러 개발자가 거쳐가다보니 비슷한 성격의 공통컴포넌트가 여러 개 생기고 관리가 안되는 불상사가 생겨버렸다...(+문서화의 중요성을 깨달았다.)공통 컴포넌트 관리를 위해 스토리북도 도입해서 ui 컴포넌트, 기능 컴포넌트 분리하여 관리해보고자 한다. 이번 개발 Feature 는 대용량 파일 업로드 시 진행 상황 프로그래스바 다이어로그를 띄워주는 작업이다.해당 개발을 진행하기에 앞써, 스토리북도 같이 진행하려고 한다. 필요성컴포넌트 관리 효율화: 여러 개발자가 개발한 비슷한 컴포넌트들을 통합하고 관리하기 위해 필요재사용성 향상: 공통 컴포넌트를 만들어 다른 프로젝트에서도 재사용할 수 있다.시각적 테스트 용이성: 컴포넌트를 독립적으로 시각적으로 테스트할 수 있어 개발 및 디자인 프로세스를 향.. 더보기 [Vue.js] BroadcastChannel 이슈는 한 사용자가 같은 컴퓨터에서 탭을 여러 개 띄워놓고 같은 계정 or 다른 계정 을 같이 로그인 할 수 있어 ATab에서 데이터를 변경하거나 어떤 처리를 했을 경우 다른 탭에 적용이 안되는 문제가 있었다. -> 필요한 해결 니즈 프로젝트에서 A탭에서 로그아웃 하고 다른 계정으로 로그인 했을 때 B탭에도 이를 동기화 하는 방법 ATab, BTab 이 있는 상황에서 ATab이 로그아웃 할 경우 브라우저 내의 토큰 제거하는 로직으로 되어있었다. 하지만 이렇게 할 경우 BTab 에선 ATab 에서 일어난 로그아웃 이벤트가 전달되지 않았다 (cookie 나 storage에 토큰 제거 되어있는 상태) 그래서 로그인 되어 있는거 같은 화면에서 새로고침을 해야하는 상황인데 vueuse 의 BroadcastChan.. 더보기 v-model 공식문서 v-model new Vue({ data: { inputText: '' } }) 사용자의 입력을 받는 UI 요소에 v-model 속성 사용하면 입력 값이 자동으로 뷰 데이터 속성에 연결된다 v-model 동작 방식 v-bind + v-on 기능의 조합으로 동작 위의 코드와 같은 기능을 하는 코드이다. new Vue({ data: { inputText: '' }, methods: { updateInput: function(event) { var updateText = event.target.value; this.inputText = updateText; } } }) - v-bind 속성 : 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용한다 - v-on 속성 : 해당 HTML 요.. 더보기 [Vue.js] Options API vs Composition API Vue3 에서 애플리케이션을 만들 수 있는 방법은 크게 2가지가 있습니다. 1️⃣ vue2 에서 사용해왔던 Options API 2️⃣ vue3 에서 새롭게 등장한 Composition API Vue2에서는 Options API 의 단점을 보완하기 위해 Composition API 가 등장했으며, Vuu3에서는 Composition API 를 권장하고 있다. Options API vs Composition API 비교 Options API data, methods, mounted 와 같은 옵션을 사용한다. Composition API 반응형 코드를 작성하는 단일 setup 함수가 있다. Compositions API는 옵션(data, methods, mounted ...) 을 선언하는 대신 가져온 함수 .. 더보기 [Vue.js] 컴포넌트에 대해 HTML -> Vue 로 변환해서 컴포넌트의 이점을 알아보자. 컴포넌트란? 컴포넌트를 왜 사용? 컴포넌트는 어떻게 사용? 컴포넌트 정의 ➜ 컴포넌트 등록 ➜ 컴포넌트 사용 컴포넌트 시스템이란? 컴포넌트 (Component) 자바스크립트에서 재사용할 수 있도록 코드를 분리한 파일을 모듈이라고 한다. Vue 에서도 UI(HTML, CSS, JS) 를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다. 📌 JavaScript 코드를 재사용하는 모듈과 다르게, 컴포넌트는 JavaScript 뿐만 아니라 HTML, CSS 도 함께 캡슐화하여 재사용이 가능하게 한다. 컴포넌트를 사용하는 이유 컴포넌트를 사용하면 UI를 재사용할 수 있다. ➜ 프론트엔드 개발을 하다보면 JavaScript 뿐만 아니라 HTML, CS.. 더보기 [Vue.js] 뷰 컴포넌트 컴포넌트란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다 재사용성 직관적 이해 뷰에서는 웹 화면을 구성할 때 흔히 사용하는 네비게이션 바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리 컴포넌트 등록하기 📌 전역(Global) 컴포넌트 등록 여러 인스턴스에 공통으로 사용할 수 있다 뷰로 접근 가능한 모든 범위에서 사용 가능 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue생성자에서 .component()를 호출하여 수행하면 된다 Vue.component('컴포넌트 이름', { //컴포넌트 내용 .. 더보기 [Vue.js] Vue Instance 뷰 인스턴스 (Vue Instance) 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위 뷰 인스턴스 생성 new Vue({ ... }); 🍀 'Hello World' 를 출력하는 코드 더보기 [Vue.js] Vue.js 개발 환경 설정 Vue.js로 웹 앱을 개발하기 위해 필요한 환경을 구성해보겠다 Vue.js 로 웹 앱을 개발하기 위한 도구 설치 크롬 브라우저 Node.js 개발자 도구(Vue.js devtools. 크롬 확장 플러그인) Visual Studio Code 📌 Node.js 설치하기 node.js에서는 서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경 vue CLI를 이용하여 쉽게 뷰 프로젝트를 구성하려면 Node.js가 설치되어 있어야 한다 (+ 뷰 CLI로 생성한 프로젝트에서 프로토타이핑을 할때에도 Node.js 서버 사용) CLI 커맨드 라인 명령어 윈도우의 명령 프롬프트 창과 맥의 터미널 등 명령어로 특정 동작을 수행할 수 있는 콘솔 창을 의미 서버 사이드 웹 화면과 관계된 서버 로직을 처.. 더보기 [Vue.js] Vue.js 란 회사에서 쓰는 프론트엔드 프레임워크는 '뷰'를 쓰고 있다. 무엇보다 프론트엔드는 자바스크립트만 잘 할 줄 안다면(물론, HTML, CSS 도 알아야 하지만) 어느 프레임워크를 쓰던지 쉽게 적응이 가능하다 그야말로 프레임워크는 자바스크립트를 유용하게 쓰기위한 '프레임워크' 일뿐! 틈틈이 자바스크립트를 얼른 마스터해야겠다... 📌 Vue.js 란? 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크 뷰는 화면단 라이브러리이자 프레임워크이다 프레임워크 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 라이브러리 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 돔 HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있.. 더보기 이전 1 다음
