박재형 / IT 개발 공부

Vue.js 선택한 이유접근성 & 낮은 러닝커브 ( 쉽다 그렇지만 성능이 뛰어나다 )협업에 있어서 약속된 기능들을 사용하기 때문에 코드가 명시적이다. Vue.js 구조SPA - 싱글 페이지 어플리케이션 HTML 파일 body 태그 안에서 보여지는 것들이 유저의 요청에 의해서 바꿔치기 SFC - 싱글 파일 컴포넌트 확장명은 .vue, 하나의 컴포넌트 안에서 HTML, CSS, JS 세가지가 관리됌. Vue.js  개발스타일Options API data, methods, mounted 같은 객체를 사용하여 컴포넌트 로직을 정의하는 개발 스타일 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출  data 메서드 : 해당 컴포넌트에서 사용될 state, 즉 데이터들을 관리해주는 곳..

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. 타입스크립트 친화적 ---------------------------------..