Vue.js18 [Vue.js 프로젝트 투입 일주일 전] 9장 - Reusability & Composition 9.1 Composition API - Composition API란? - 컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 Vue 3에 추가된 함수 기반의 API - Setup 메소드 안에서 한 덩어리로 코드 구현 가능 (코드 관리 쉬워짐) - 특정 기능을 갖는 함수를 정의하고, API 처럼 사용할 수 있게 해줌 - 코드에 대한 재활용성을 높이고, 코드의 가독성을 높임, 코드 추적 및 유지 관리 쉬워짐 (연관성 있는 로직 모아놓음) - Setup - 컴포지션 API 구현하는 곳 - reactive 이용 - reactive, computed 이용 - reactive, computed, toRefs 이용 - Lifecycle Hooks - setup()는 beforeCr.. 2022. 4. 30. [Vue.js 프로젝트 투입 일주일 전] 8장 - 컴포넌트 심화 학습 8.1 컴포넌트 안에 다른 컴포넌트 사용하기 - 부모 컴포넌트와 자식 컴포넌트 - 사용할 컴포넌트를 import 한 후 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 components에 등록 - 개발하면서 각 페이지의 타이틀의 색상이나 레이아웃 변경 등 디자인 변경이 필요한 경우, 페이지 타이틀 컴포넌트만 수정하면 모든 화면에 반영되므로 효율적으로 관리 가능 - 컴포넌트는 페이지 하나 전체가 될 수도 있고, 하나의 페이지를 이루고 있는 단위 요소일 수도 있음 - 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기: Props - 정적/동적 Prop 전달 - v-bind나 약어 : 문자를 사용해서 prop에 동적인 값 전달 가능 - 숫자형(Number) 전달 - v-bind를 통해서만 가능 - 전달되는 데이.. 2022. 4. 30. [개품 부트캠프 스터디] - 일곱 번째 미팅 2022.04.30.토 개품 부트캠프 스터디 일곱 번째 미팅에 참여했습니다. 오늘부터 약 한 달간 네트워크와 함께 Vue.js도 병행하게 되었습니다. 스터디 예상 종료 일자는 동일하게 5/29 일요일입니다. 네트워크 스터디에서는 IP 프로토콜 위주로 네트워크 계층에 대해 살펴봤습니다. 패킷의 전달 경로를 결정하는 라우팅 프로토콜의 종류들에 대해 알아보면서 혼잡 제어 기능을 학습했습니다. Vue.js 스터디에서는 전반적인 스터디 진행 절차 공유와 목차를 간단히 살펴보면서 개념을 조금 복기하고, 첫 단원인 Vue.js 의 소개와 장점에 대해 알아봤습니다. 확실히 컴퓨터 사이언스 이론 말고 Vue.js 스터디도 병행해서 더 재밌는 것 같습니다. 남은 한달 동안 열심히 잘 참여하겠습니다. 2022. 4. 30. [Vue.js 프로젝트 투입 일주일 전] 7장 - 서버 데이터 바인딩 실습 7.1 서버와의 데이터 통신을 위한 API 호출 메소드 만들기 - Axios란? - Axios: 서버와 데이터를 송수신할 수 있는 HTTP 비동기 통신 라이브러리 - Promise 객체 형태로 값 return - Axios 설치 - Axios 사용법 - 믹스인 (Mixins) 파일 생성 - Mixin: 다수의 컴포넌트에서 공통으로 사용하는 함수 구현 7.2 서버 데이터 렌더링 - Mock 서버에 API 등록하기 - 서버 데이터 호출 및 리스트 렌더링 2022. 4. 29. 이전 1 2 3 4 5 다음 반응형