박재형 / IT 개발 공부

1. src - api 폴더 생성 후 index.js 설정파일 생성  2. API 요청을 목적별로 분리하여 파일로 관리합니다.예: 사용자 관련 API (src/api/users.js)  3. Composable 로 API 활용 ( Vue3 Composition API에서 권장하는 방법)src - api      - composables 폴더 생성

vue와 같은 프레임워크는 싱글 페이지 방식 ( Client Side Rendering - 클라이언트 측 렌더링)서버는 데이터만 제공해서 부담이 줄고클라이언트는 페이지 전환이 빨라 상호 보완적인 관계 또, 보통 페이지를 요청하면 서버에서 해당 페이지를 처리하는 라우팅이 필요한데서버에서 이런 역할을 하지 않아서 클라이언트에서 처리해야함   설치 1. node.js - 자바스크립트를 서버측에서 실행 시켜주는 런타임 환경 ( npm )2. npm install -g @vue/cli3. vscode 확장팩  1.  Vue - Official    2. vue 3 snippets 4. vue create 프로젝트명 App.vue에서 코드 시작npm run serve로 프로젝트 실행  프레임워크 문법으로 개발하면 ..

근데 이렇게하면 로직이 어려우니까더 쉽게 하면 v-model과 defineModel로 쉽게 할 수 있음

하위 컴포넌트 import 후 props 변수 하나 만들고 ( title )ref() 안에 값을 넣어줌 h1 태그 안에 {{  }} 를 통해서 props 변수값을 보여줄 수 있고자식 컴포넌트 Comp 안에 title을 바인딩 시키고 title props를 내려보냄   defineProps( { 받을 변수명 : 자료형 } )자식이 부모 props 받을 때 사용 props: {  title: {    type: String,      required: true,},}  props에 required 추가 설명 부모 컴포넌트에서 prop을 반드시 전달해야 한다는 뜻이고컴포넌트 간 명확한 데이터 전달 규칙을 설정하고 코드의 안정성을 높일 수 있다. 하지만,매번 넣는게 아니라반드시 필요한 데이터 일때 넣어야한다자식..

1. v-calendar 설치 2. main.js에 등록 3. 사용 만약, 달력을 커스텀할거면vue 페이지 하나 만들고 커스텀하고같은 이름의 js 파일에 디렉티브 정의,main.js에 디렉티브 등록 후 사용

vue install vue create 프로젝트이름  ( 대문자 사용불가 ) npm run serve로 실행  app.vue 시작다 지우고 router로 연결할 생각 npm install vue-router@4         app.use(router)는 내부적으로 Vue Router가 제공하는 플러그인 시스템을 통해 동작하며, Vue 애플리케이션의 모든 컴포넌트에서 와 같은 컴포넌트를 사용할 수 있도록 등록한다.    HelloWorld.vuetemplate>  div class="hello">    h1>{{ msg }}h1>    p>      For a guide and recipes on how to configure / customize this project,br>      check o..

전역 등록 방법 (main.js) 컴포넌트, 디렉티브 차이    v-calendar 라이브러리를 사용한다고 예를 들면, npm install v-calendar  설치 후  main.js에 전역 등록 해야된다 전역 등록하는 방법은 2가지 1. app.use 2. app.directive 3. export const 디렉티브 ( 이 방법은 디렉티브 정의하는 방법, main.js에서 전역 등록하는 방법 아님 )   v-calendar를 바로 전역 등록해서 사용하는 방법 외에 커스텀 달력 컴포넌트를 만들어서커스텀 컴포넌트를 전역 등록해서 사용 할 수도 있다.라이브러리 설치,커스텀 컴포넌트 작성 후main.js에 전역 등록 후 사용     정리     X  메인 화면에 v-calendar를 사용해서 달력을 구현..

https://v3-docs.vuejs-korea.org/tutorial/#step-8 Vue2, Vue3에서 data 사용 가능하지만,Vue3에서는 setup이 권장된다. vue3 ( setup ) 문법 setup 함수 내에서 Composition API를 사용해 상태와 로직을 정리, 반응형 상태를 만들기 위해 ref, reactive를 사용하고,  this를 사용하지 않는다.   data ( Option API ) 장점1. 간단하고 직관적2. methods, computed, watch 등 다른 옵션을 사용하기 편하다. setup ( Composition API ) 장점1. this가 필요없다.2. 코드 재사용성 증가3. 타입스크립트 친화적 ---------------------------------..