Books/Vue.js 프로젝트 일주일 ✔️14 [Vue.js 프로젝트 투입 일주일 전] 14장 - 미니프로젝트: 제품 판매 웹앱 구현 (마지막) 14.1 애플리케이션 Overview - 제품 등록 페이지 - 제품 리스트 페이지 - 제품 상세 페이지 14.2 프로젝트 소프트웨어 구성 - 클라이언트: Vue.js, Bootstrap - 서버: Node.js, Express.js - 데이터베이스: MariaDB 14.3 클라이언트(Vue 프로젝트) - Vue CLI로 프로젝트 생성 - vue create 명령어 - Bootstrap 추가하기 - index.html - css, js 파일에 대한 cdn 주소 추가 - 화면 레이아웃 만들기: Header, Main, Footer - Header: 애플리케이션 로고, 메뉴에 해당하는 네비게이션 등 위치 - Main - Footer: 애플리케이션을 제공하는 회사 정보 - 라우터 구성 - / (ProductLi.. 2022. 5. 3. [Vue.js 프로젝트 투입 일주일 전] 13장 - 미니프로젝트: 로그인 처리 13.1 카카오 계정으로 로그인하기 - 카카오 개발자 센터 가입 - 애플리케이션 등록 - 앱 키 - 네이티브 앱 키: Android, iOS SDK에서 API 호출할 때 사용 - JavaScript 키: 자바스크립트 SDK에서 API를 호출할 때 사용 - REST API 키: REST API를 호출할 때 사용 - Admin 키: 모든 권한을 가지고 있는 키 - 플랫폼 설정하기 - 카카오 로그인 활성화 - 동의항목 설정 - 카카오 JavsScript SDK 및 앱 키 등록 - 로그인 컴포넌트 구현 - window.Kakao.Auth.login 함수 호출 => 카카오 계정으로 로그인 팝업 호출 - window.Kakao.Auth.logout 함수 호출 => 로그아웃 13.2 네이버 아이디로 로그인하기 - 오.. 2022. 5. 2. [Vue.js 프로젝트 투입 일주일 전] 12장 - 프로젝트 배포하기 12.1 프로젝트 빌드(build) 하기 - npm run build 명령어 - 호스팅 서버에 dist 폴더의 파일을 업로드 해서 서비스 구동 - index.html이 Vue 프로젝트의 실행 파일이 됨 2022. 4. 30. [Vue.js 프로젝트 투입 일주일 전] 11장 - Vuex (v4.x) 11.1 Vuex란? - Vuex: Vue.js 애플리케이션을 위한 상태관리 패턴 + 라이브러리 - 모든 컴포넌트에 대한 중앙집중식 저장소 역할, 예측 가능한 방식으로 상태 변경 가능 11.2 Vuex 설치 - npm install vuex@next 명령어 11.3 시작하기 - store(저장소): 애플리케이션 상태를 저장하고 있는 컨테이너 - 반응형 - 저장소의 state에 정의된 값 변경 여부 바로 알 수 있음, 직접적으로 상태 값 변경은 불가 - commit를 통해서만 변경 가능 - 모든 상태에 대한 추적이 가능한 기록이 남을 수 있음 11.4 State - state: 프로젝트 전체에서 공통으로 사용할 변수 정의 - Vue 컴포넌트에서 computed 속성을 이용하여 변경사항 항상 추적 가능 11.. 2022. 4. 30. 이전 1 2 3 4 다음 반응형