코딩 공부 기록

vue의 ref는 반응형(reactive) 상태를 만드는 데 사용되는 기능이다. 1. 반응형이란?변수가 반응형인 경우, vue에서 다음과 같은 기능을 사용할 수 있다.1) template에서 {{ 변수명 }} 사용 → UI 자동 업데이트- 변수가 반응형이 아닌 경우, 변수의 값이 변경되어도 UI에는 반영되지 않는다.2) 관련된 computed 값 자동 재계산3) watch로 변경 감지 가능  2. ref 사용 방법1) 선언//문자, 숫자const stringNumberRef = ref('');//booleanconst isTrue = ref(true);//배열const arrayRef = ref([]);//객체const emptyObject = ref(null);const filledObject = re..

1. 데이터 가공1) 페이지가 로드될 때 서버에서 데이터를 받아 옴created(){ getAllData()}methods: { async getAllData(){ try{ const response = await axios.post(`${this.baseUrl}/api/data`, { opt: 'all' //통신에 필요한 파라미터 }) console.log('데이터 조회 응답: ', response) this.allData = response.data this.data1 = response.data } catch(error){ ..

1) 데이터export default{ data(){ keyValueData:{ A: valueA B: valueB C: valueC } }} 2) select의 option 생성: v-for {{ valueD }}  ① v-for="value in keyValueData"- keyValueData라는 객체/배열의 각 항목을 순회하면서 반복- 각 반복에서 현재 항목을 value라는 변수로 참조(for문의 i)② :key="valueD"- Vue의 가상 DOM 업데이트를 위한 고유 키 설정- 각 option 요소를 구별하는 데 사용- ':'는 v-bind와 같음(단축 문법)③ :value..

1. Vuexvue.js 애플리케이션을 위한 상태관리 패턴 + 라이브러리모든 컴포넌트에 대한 중앙집중식 저장소 역할을 함 2. vuex 설치npm install vuex@next --save  3. 시작하기저장소의 상태를 직접 변경할 수 없음명시적인 커밋을 통해서만 변경할 수 있음 스토어 작성import {createStore} from 'vuex'const store = createStore({ state(){ return { count: 0 } }, mutations: { increment(state){ state.count++ } }})export default store; 컴포넌트에서 스..

1. Composition API1.1. Composition API컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 하는 함수 기반의 API ex) 숫자 2개를 입력받아 더해서 출력하는 코드1) 컴포지션 x Calculator + = {{result}}  2) 컴포지션 API의 reactive 이용 Calculator + = {{state.result}} ..

1. 컴포넌트 안에 다른 컴포넌트 사용하기1.1. 부모 컴포넌트와 자식 컴포넌트1.1.1. 사용법① 사용할 컴포넌트를 importimport ComponentA from './ComponentA' ② 사용할 컴포넌트를 components에 등록export default{ components: { ComponentA, ComponentC }} ③ html에 컴포넌트 이름으로 태그 생성  1.1.2. Props: 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 {{title}}props: 부모 컴포넌트로부터 전달받은 데이터 저장- type: 저장될 데이터의 타입- default: 데이터가 전달되지 않았을 때의 기본값 부모 컴포넌트에서 props로 값 넣기 숫자, 불린,..

1. 컴포넌트view + data + javascript- views 폴더에 페이지 담당 vue 컴포넌트 파일 생성- components 폴더에 다른 vue 파일에서 호출해서 공통으로 사용할 수 있는 vue 컴포넌트 파일 생성 2. 컴포넌트 구조1) 기본 구조기본 프로퍼티: name, components, data, computed라이프사이클 훅: 메소드 등  : html 코드 작성name: 컴포넌트 이름(필수 x)components: 외부 컴포넌트 사용시 해당 컴포넌트를 import한 후 components에 배열로 등록data: html 코드와 자바스크립트 코드에서 전역 변수로 사용할 데이터 선언. this로 접근setup: 컴포지션 API를 구현하는 메소드created: 컴포넌트 생성시 실행m..

1. 공공데이터포털 API 사용const getHolidays = async (year) => { const serviceKey = '인증키'; const url = `http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getHoliDeInfo?serviceKey=${serviceKey}&solYear=${year}&numOfRows=100`; try { const response = await axios.get(url); const holidays = {}; response.data.response.body.items.item.forEach(item => { const date = item.locda..

1. 쿼리 파라미터const goToDetailPage = (schedule) => { router.push({ name: 'scheduleDetail', // 이동할 라우트의 이름 query: { // URL 쿼리 파라미터 projectId: schedule.id, analysisItem: schedule.section } });};이동 url: /scheduleDetail/1/공부  2. 라우트 파라미터// 라우터 설정{ path: '/Schedule/:scheduleId/:section', name: 'scheduleDetail'}// goToDetailPage 함수const g..

url 주소와 vue 파일 매칭하는 방법① src/router 파일의 index.js에서 설정 정의(routes > path, name, component)② main.js에서 라우터를 애플리케이션에 등록 1. 라우팅- 클라이언트에서 url 주소에 따라 페이지가 전환되는 것.- 주소마다 vue 페이지를 연결한다. 2. Vue-Router 설치명령어 입력vue add router 히스토리 사용 여부를 묻는 질문이 나오면 Y 입력  3. 라우터를 설치하면서 추가된 파일1)App.vuevue-project/src/App.vue Home | About  에 주소 설정되어있음 2) vue-project/src/router/index.jsimport { createRouter, createWeb..