Vue.js 썸네일형 리스트형 [Vue.js] BroadcastChannel 이슈는 한 사용자가 같은 컴퓨터에서 탭을 여러 개 띄워놓고 같은 계정 or 다른 계정 을 같이 로그인 할 수 있어 ATab에서 데이터를 변경하거나 어떤 처리를 했을 경우 다른 탭에 적용이 안되는 문제가 있었다. -> 필요한 해결 니즈 프로젝트에서 A탭에서 로그아웃 하고 다른 계정으로 로그인 했을 때 B탭에도 이를 동기화 하는 방법 ATab, BTab 이 있는 상황에서 ATab이 로그아웃 할 경우 브라우저 내의 토큰 제거하는 로직으로 되어있었다. 하지만 이렇게 할 경우 BTab 에선 ATab 에서 일어난 로그아웃 이벤트가 전달되지 않았다 (cookie 나 storage에 토큰 제거 되어있는 상태) 그래서 로그인 되어 있는거 같은 화면에서 새로고침을 해야하는 상황인데 vueuse 의 BroadcastChan.. 더보기 [Vue.js] 뷰 컴포넌트 컴포넌트란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다 재사용성 직관적 이해 뷰에서는 웹 화면을 구성할 때 흔히 사용하는 네비게이션 바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리 컴포넌트 등록하기 📌 전역(Global) 컴포넌트 등록 여러 인스턴스에 공통으로 사용할 수 있다 뷰로 접근 가능한 모든 범위에서 사용 가능 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue생성자에서 .component()를 호출하여 수행하면 된다 Vue.component('컴포넌트 이름', { //컴포넌트 내용 .. 더보기 [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 다음
