Frontend/Vue
[Vue] Vue.js 프로젝트 생성
✅ 사전 준비- Node.js 설치 ✅ Vue.js 설치1. cmd 창에서 vue 설치> npm install vue 2. Vue cli (SPA를 빠르게 구축할 수 있는 CLI 환경 제공) 설치> npm install -g @vue/cli 3. vue 설치 완료 확인(하이픈 2개 하거나, 대문자)> vue --version 또는 vue -V 4. Vue 프로젝트를 생성할 폴더로 이동> cd [프로젝트 생성 할 경로] 5. Vue 프로제긑 생성 - Vue 3 선택 - Use Yarn 선택 - 프로젝트 생성 경로로 이동> cd vue_csr - vue 실행> yarn serve프로젝트 생성 경로로 이동 후에 yarn serve명령어 실행해야 한다.
[Vue3] Typescript / router.push 방법
리스트에서 row 선택 시 상세화면으로 넘어가는 기능입니다. 이때 router.push 를 사용합니다. ■ 데이터 넘기기 projectList.vue > template 1. 리스트에서 row-click 시 특정 함수를 호출합니다. projectList.vue > script ● router 선언 ● 프로젝트 상세정보(projectForm.vue)으로 이동하기 위한 함수 선언 1. router.push 할 때, 이동할 router의 name으로 설정(router.ts에 설정한 name 값)하고, 2. 넘길 데이터는 별도의 query(or params)로 명명하고 json 형식으로 넘겨야 합니다. Ex. router.push(name:'project-form', param:{key:value, key:va..
[Vue3] Typescript / DB 조회 후 특정 컬럼 split 하여 리스트에 랜더링 하기
DB에서 조회 한 데이터 중 특정 컬럼 을 split 하여 리스트에 랜더링 하는 방법입니다. Ex. A 라는 컬럼에 데이터가 {01,02,03} 처럼 콤마 구분자로 들어있다고 했을 때 리스트에 각각 {네이버, 카카오, 쿠팡} 으로 맵핑해서 출력하는 방법입니다. 조건 1. 사용자 리스트에 사용자가 소속된 업체명을 출력합니다. 2. 사용자는 여러 업체에 소속될 수 있습니다. 3. 사용할 페이지 - index.ts, userList.vue index.ts index.ts : 공통 인터페이스 및 공통 API 관리 페이지 1. InfCustomer 인터페이스 선언 : 업체정보를 맵핑하기 위한 인터페이스 2. getCustomerList() API 등록 : 업체정보를 조회하는 API 3. 작성한 인터페이스 및 AP..
