Books/Vue.js 프로젝트 일주일 ✔️14 [Vue.js 프로젝트 투입 일주일 전] 10장 - Proxy 사용하기 10.1 프록시(proxy) 서버 - 프록시 서버: 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속 가능하게 해주는 응용 프로그램 - 클라이언트와 서버 사이에서 HTTP 요청과 응답을 대신 처리해주는 역할을 하는 서버 10.2 CORS란 - CORS: 웹 애플리케이션에서 도메인, 포트, 프로토콜이 다른 곳으로 HTTP 요청을 보낼 수 없도록 브라우저가 요청을 막는 보안 정책 10.3 CORS 해결방법 - 서버에서 접근 허용 - 프록시 서버 이용 10.4 Proxy 설정하기 - Vue에서 proxy 설정하고 클라이언트에서 HTTP 요청 (포트: 8080)하면 Proxy 서버가 웹 서버로 HTTP 요청 (포트: 3000)을 대신 함으로써 CORS 문제 해결 - 운영 환경에서는 제대로 실행 .. 2022. 4. 30. [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. [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 다음 반응형