Front-end/Vue (4) 썸네일형 리스트형 Nuxt 정의 vue.js 프레임워크 기반의 개발환경 구축에 도움을 주는 프레임워크 즉, vjue.js 프로젝트 구성시 사용되는 여러 라이브러리들을 기본적으로 탑재 특징 렌더링 모드 → Universal SSR로 SSR 과 CSR 간의 전환이 가능 프로젝트 구조화 → 프로젝트 구조에 대한 고민이 적어짐, 협업하기 좋음 SEO 친화적 → SSR 기반의 서비스로 검색 엔진 최적화 page기반 라우팅 → 디렉토리 구조의 직관적인 라우팅 개념 Views nuxt의 view구성 page pages 디렉토리 내 .vue 파일들을 읽고 자동으로 라우터 구성을 생성 속성 asyncData created() 이전에 실행 비동기식일 수 있으며 context를 인수로 받음(this 사용 불가능) return 된 객체는 data 객체.. Composition API 정의 컴포넌트 로직을 유연하게 구성할 수 있는 API의 모음 로직의 재사용성과 가독성을 높여줌 하나의 기능에 대한 코드들이 data, methods, computed, … 에 각각 흩어진 로직을 모아줌 인스턴스 옵션 단위가 아닌 기능이나 논리 단위의 코드로 그룹화 하는것 Setup 컴포넌트가 생성되기 전에 props가 반환 되면 실행되는 컴포넌트 옵션으로 진입점 역할 setup()에 전달된 인자에 대한 타입을 추론하려면, defineComponent를 사용 composition api 사용 비교 사용 전 ... 사용 후 ... 반응형 데이터 reactive 오직 객체만을 인자로 받음 이자로 받은 객체와 완전히 동일한 프록시 객체를 반환(원본 내부에 Vue옵저버만 추가하여 그대로 반환) 생성된 객체는 Vu.. Vuex 정의 vue.js의 상태 관리를 위한 패턴이자 라이브러리 중앙 집중식 저장소 역할 컴포넌트 개수가 많아지면서 컴포넌트간 데이터 전달(props, emit)이 어려워짐 여러개의 컴포넌트에서 같은 데이터를 동기적으로 업데이트 flux패턴에서 영감을 받음(단방향 데이터 흐름) flux: MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 MVC: 하나의 컨트롤러가 여러개의 model, view를 컨트롤하는데 제약이 없어 기능 추가 및 변경시 생기는 문제점 예측이 어려움 actions mutations에 대한 커밋 비동기적 작업 포함 mutations 스토어의 상태를 변경할 수 있는 유일한 방법 반드시 동기적이어야함 commit 메소드의 호출되어 상태의 변경이 비동기적이면 상태 추적이 어려워지기 때문 .. Vue Core 정의 approachable - 접근하기 쉬운(프로그레시브 framework특징 - 점진적 도입 가능) versatile - 다재다능한 performant - 효율적인(virtual dom 기반의 효율적 랜더링) maintainable - 유지보수 가능한(컴포넌츠 기반 설계로 유지보수에 용이하도록 개발가능) testable - 테스트 가능한 특징 reusable components - 재사용 가능한 컴포넌트들 reactive - 반응형 기능 선언적 렌더링 DOM 과 데이터를 연결시켜 반응형이 되도록 함 v- 접두어가 붙어있는 속성을 디렉티브 라고함 텍스트 보간 {{ message }} 일회성 보간 // 하위 요소들 까지 한번만 렌더링되기 때문에 주의 필요 // 성능 최적화에 좋음 {{ msg }} 속성 .. 이전 1 다음
