소설

러브레터 | 이와이 슌지 지음

완독 : 2026.01.12 ~ 2025.01.28

멜로 영화는 당연 일본이라고 생각한다. 워낙 유명한 영화지만 항상 생각만 했지 찾아 볼 생각은 못했다. 영화와 소설, 보는거와 읽는건 차이가 있다고 생각했고 항상 소설을 보고 영화를 보면 감동과 여운이 덜 하다고 생각한다. 그래서 먼저 소설을 읽었다. 눈, 편지 깨끗한 느낌의 멜로의 영화 글로써 읽어보길 잘 했다고 생각이 든다. 꼭 영화도 찾아봐야지😀

노인과 바다 | 어니스트 헤밍웨이 지음

완독 : 2026.03.30 ~ 2025.04.09

아무 것도 없었다.. 허탈하고 허망한 느낌? 노인 스스로 바다에서의 독백(?)이 가장 기억에 남는다.

혼모노 | 성해나 지음

완독 : 2026.04.12 ~ 2026.04.24

재미있게 읽었다. 소설의 마지막 끝맺음에서의 항상 여운이 남았다고 해야하나?? 정리가 됐다는 느낌보다 뭔가를 두고왔다?라는 느낌이 더 많이 들었다.

세상의 마지막 기차역 | 무라세 다케시 지음

완독 : 2026.04.24 ~ 2026.05.05

탈선사고로 인해 사랑하는 사람을 잃은 사람들의 이야기 4개의 이야기, 상황이 있지만 조금씩 서로가 연결되어 있어 이야기에 흥미가 더욱 더 생겼던 거 같다. 어렵지 않은 단어들로 편하게 읽을 수 있었고 현실과 판타지를 잘 섞어 만든 소설 같다.

인문

죽음이란 무엇인가 | 셸리 케이건 지음

완독 : 2026.04.12 ~ 🏃🏻‍♂️

다양한 이미지 사이즈를 비율에 맞게 센터 정렬하며 화면을 줄였을 때 비율에 맞게 줄어들게 만든다

<div class="card">
  <div class="imgbox">
      <img src="" alt="사진">
  </div>
  <div class="txtbox">
    <strong class="title"></strong>
    <p class="date">2025.01.01</p>
  </div>
</div>

.imgbox{padding-top:54%; position: relative; overflow: hidden;}
.imgbox img{width:100%; height:100%; object-fit: cover; position: absolute; top:0;}

<div class="mobile-menu">
  <div class="inner">
    <div class="logobox">
        <img class="logo" src="" alt="">
          <button type="button" class="close"></button>
    </div>
    <div class="listbox">
        .......
    </div>
  </div>
</div>

.mobile-menu{display: block; position: absolute; top:0; left:0; background:#fff;}
.logobox{ /* 로고박스에 맞는 css 입력*/}
.listbox{ position: fixed; top: /* 로고 박스만큼 */; left: 0; width: 100%; height: 100%; overflow-y: auto; -ms-overflow-style: none; -ms-overflow-style: none; scrollbar-width: none; box-sizing: border-box;}

소설

브람스를 좋아하세요... | 프랑수아즈 사강 지음

완독 : 2025.01.06 ~ 2025.01.11

고전문학을 그리 좋아하지 않지만(재미있게 읽히지 않지만) 오랜만에 재미있게 읽을 수 있었던 소설이었다. 남녀간의 사랑에 대한 내용을 풀어 쓴 소설이지만 소설에 많은 함축적인 내용이 많았다. 사람의 감정과 행동에 대한 세밀한 부분들이 보였고 남자는 단순한, 여자는 안정적인 그런 부분들이 돋보이지 않았나 생각이 든다.

참을 수 없는 존재의 가벼움 | 밀란 쿤데라 지음

완독 : 2025.01.12 ~ 2025.02.05

정치적 억압과 네명의 주인공의 사랑 이야기를 담은 작품으로써 정서적(?)인 분의 심리 묘사가 어려우면서 최고라고 할 수 있다. 읽으면서 모든 내용을 이해할 수 없었지만 확실한건 작가의 심리적 묘사가 정말 뛰어나다는 걸 알 수 있었다.

이별하는 방법을 가르쳐줘 | 이치조 미사키 지음

완독 : 2025.02.06 ~ 2025.02.13

항상 나올때마다 읽게되는 이치조 미사키 최근 소설보다 아쉽긴 하지만 너무 잘 읽히는 소설

소년 | 가와바타 야스나리 지음

완독 : 2025.03.17 ~ 🏃🏻‍♂️

한 소년의 깨끗한 사랑(?) 일기 형식의 글들이 읽기에 참 신박하고 재미있었다. 나도 나중에 내가 쓴 읽기를 복기한다면 이런 기분일까?

백야행1 | 히가시노 게이고 지음

완독 : 2025.09.24 ~ 2025.10.17

초반에 여러 사건을 보여주며 이야기의 흐름을 겹겹이 쌓아가는 느낌? 2권이 기대되는 느낌 과연 결말은 어떨까?

백야행2 | 히가시노 게이고 지음

완독 : 2025.10.20 ~ 2025.11.05

마지막 결말은 좀 어이없다. 이야기의 흐름으로 볼 때 좀 더 큰 사건이 있거나 마무리에 대한 기대감이 컸는데 생각한 만큼의 크기가 아니라 아쉬웠던 거 같다.

어둠 뚫기 | 박선우 지음

완독 : 2025.11.13 ~ 2025.11.25

중고 서점 알라딘에서 처음 구매 후 읽어본 국내 소설이다. 퀴어 가족사 소설인지 몰랐고 어머니에 대한, 따듯한(?) 소설인 줄 알았다. 어려운 내용 없이 술술 읽혔고 정말 어느 가정에 있을 법한 내용을 가지고 있는 소설이었다.

에세이

당신은 결국 무엇이든 해내는 사람 | 김상현 지음

완독 : 2025.02.14 ~ 2025.03.10

상황에따라 읽었을 때 느끼는 점이 달라지 듯 마음에 와닿는 부분들이 있었다.

인문

고독에 관하여 | 요한 G. 치머만 지음

완독 : 2025.04.01 ~ 🏃🏻‍♂️

태도의 철학 | 샤를 페팽 지음

완독 : 2025.06.01 ~ 2025.07.19

실패에 대해 두려워하지말자 실패 또한 성공이다.

경제/경영

1%를 읽는 힘 | 메르 지음

완독 : 2025.07.22 ~ 🏃🏻‍♂️

json?

json은 테스트를 하거나 프로토타이핑을 해야할 때 REST API 서버를 빠르게 생성해주는 프론트엔드 개발자를 위한 라이브러리다. 명령어로 쉽게 API 서버를 생성 할 수 있다. json다운로드

💡 REST API?

• API의 리소스 즉 URL이 HTTP 메서드와 함께 표현되도록 정한 API 규격을 말한다.

//터미널 json 설치
npm install json-serve 

//api 서버 실행 -> root 디렉토리에 `db.json` 파일이 설치됨
npx json-server --watch db.json

//localhost port 변경 (5000번으로 port를 변경했다.)
npx json-server --watch db.json --port 5000

package.json파일에 "db": "json-server --watch db.json --port 5000"를 저장하여 필요할 때 명령어를 따로 길게 적지 않아도 사용할 수 있다. 다음에 사용할 때 npm run db명령어를 사용하면 된다.

// package.json 파일
{
      "scripts": {
        "dev": "vite",
          "db": "json-server --watch db.json --port 5000",
          ...
      }
      },

Axios

API 서버와 통신을 하기 위한 비동기 통신 모듈 Axios 설치

Router 이스턴스를 생성할 때 history 옵션을 사용하면 다양한 history mode 중에서 선택할 수 있다.

• Hash - createWebHashHistory()
• History - createWebHistory()
• Memory - createMemoryHistory()

1-1. Hash 모드

Vue Router를 통해 URL로 페이지를 전환할 때 히스토리 관리 기법을 해시(#)형으로 쓸 수 있게 해준다. 해시모드는 createWebHashHistory()를 사용하여 생성

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(),
      router: [
        ....  
    ]
})

내부적으로 전달되는 실제 URL 앞에 해시 문자(#)를 사용한다. URL의 이 섹션은 서버로 전송되지 않으므로 서버 수준에서 특별한 처리가 필요하지 않는다. ** 그러나 그것은 SEO에 나쁜 영향을 미친다.** Hash는 지양하며 HTML5모드(createWebHistory())를 사용하자

1-2. History 모드(html5 모드)

Vue Router를 통해 URL로 페이지를 전환할 때 히스토리 관리 기법을 해시(#)없이 쓸 수 있게 해준다. Web API인 history.pushState()를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있다. HTML5 모드는 createWebHistory()로 생성되며 권장 모드이다.

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
      routes: [
      ...
    ]
})

createWebHistory()를 사용하면 URL은 "정상"으로 보인다. 하지만 여기에 문제가 있다. 우리의 앱이 적절한 서버 설정이 없는 단일 페이지 클라이언트 앱이기 때문에 사용자가 직접 http://oursite.com/user/id에 접속하면 404 오류가 발생한다. 이 문제를 해결하려면 서버에 간단하게 포괄적인 대체 경로를 추가하면 된다. URL이 정적 에셋과 일치하지 않으면 앱이 있는 동일한 index.html페이지를 제공해야 한다.

💡 hash와 history의 차이는 #이 붙고 안 붙고의 차이다. 정확한 차이는 운영 서버에 배포할 때 일어난다.

동적 라우트

주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있다. 예를 들어 ** 사용자 목록(User List) ** 는 /users와 같은 경로에 매핑되면 되지만 ** 사용자 상세(User Detail) ** 는 ** 사용자 식별자 별로 같은 컴포넌트에 매핑 ** 되어야 한다. 이럴때 Vue Router에서는 경로에서 동적 세그먼트를 사용하여 해결할 수 있다. 이를 param라고 한다.

ex) /user/alice, /user/alice2, /user/alice3 .... -> UserComponent.vue

index.js

// router/index.js

    // ':' <- 동적 라우팅이라도하며 여러 개의 URL을 하나의 페이지 컴포넌트에 맵핑하고 싶을때
    // 표현하는 표현 방식이다.
    // 이 세미콜론은 파라미터라고해서 라우트 객체에 params로 받을 수 있다. -> {{ $route.params }}
    {
        path: '/posts/:id',
        name: 'PostDetail',
        component: PostDetailView,
    },
    {
        path: '/posts/:id/edit',
        name: 'PostEdit',
        component: PostEditView,
    },

• 동적 세그먼트는 콜론(:)으로 표시한다.
• 그리고 컴포넌트에서 동적 세그먼트의 값은 $route.params 필드로 접근할 수 있다.

<template>
    <div>
        <h2>제목</h2>
        <p>{{ $route.params }}</p>
        .....
</template>

이렇게 $route.params 사용하여 파라미터를 받을 수 있다.

1-1. query, hash

$route.params외에도 $route 객체는 $route.query(쿼리스트링), $route.hash(해시태그) 등과 같은 다른 유용한 정보도 노출한다.

** query **

<template>
    <div>
        <h2>제목</h2>
        <p>params: {{ $route.params }}</p>
        <p>query: {{ $route.query }}</p>
        <p>query value: {{ $route.query.searchText }}</p>
      .....

** hash **

<template>
    <div>
        <h2>제목</h2>
        <p>params: {{ $route.params }}</p>
        <p>query: {{ $route.query }}</p>
        <p>query value: {{ $route.query.searchText }}</p>
        <p>hash: {{ $route.hash }}</p>
      .....

프로그래밍 방식 네비게이션

<RouterLink>를 사용하여 선언적 네비게이션용 anchor 태그를 사용하는 것 외에도 라우터 인스턴스 메소드를 사용하여 프로그래밍 방식으로 수행할 수 있다.

router.push

다른 URL로 이동하려면 router.push를 사용할 수 있다. 이 메소드는 새로운 항목을 히스토리스택에 넣기 때문에 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 이전 URL로 이동하게 된다. 이 메소드는 <RouterLink>를 클릭 할 때 내부적으로 호출되는 메소드이므로 <RouterLink :to="..">를 클릭하면 router.push(..)를 호출하는 것과 같다.

404 Not Found Route

일반 파라미터(:id)는 슬래쉬(/)로 구분된 URL 사이의 문자만 일치 시킨다. 무엇이든 일치시키려면 param바로 뒤에 괄호 안에 정규식(regexp)을 사용할 수 있다.

//404 Not found
    {
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: NotFoundView,
    },

중첩 라우트(Nested Routes)

실제 앱 UI는 일반적으로 여러 단계로 중첩 된 컴포넌트로 이루어져 있다. URL의 세그먼트가 중첩 된 컴포넌트의 특정 구조와 일치한다는 것은 매우 일반적이다.

//중첩 Router
    {
        path: '/nested',
        name: 'NestedView',
        component: NestedView,
        children: [
            {
               //기본 nested를 클릭 했을 때 처음 보여지는 페이지 설정
                path: '',
                name: 'NestedHome',
                component: NestedHomeView,
            },
            {
                path: 'one', // /nested/one
                name: 'NestedOne',
                component: NestedOneView,
            },
            {
                path: 'two', // /nested/two
                name: 'NestedTwo',
                component: NestedTwoView,
            },
        ],
    },

뷰 라우터는 Vue.js를 이용하여 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 Vue.js의 공식 라우터다. Vue Router 공식문서

💡 라우터(Router)란?

라우터는 일반적으로 네트워크간에 데이터를 전송하는 장치를 말한다. 뷰에서 말하는 라우터는 쉽게 말해서 URL에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리라고 보면 된다. 예를 들어 " /home 경로로 요청이 왔을 때 Home.vue 컴포넌트를 화면에 렌더링 해라" 라는 역할을 수행하는 라이브러리라고 생각하면 된다. 그리고 이때 /home -> Home.vue 이러한 매핑정보를 라우트(Route)라고도 한다.

라우트(Route)란?

• 어떤 URL에 대해 어떤 페이지를 표시해야 하는지에 대한 정보

설치

npm install vue-router

1-1. 페이지 컴포넌트 생성

HomeView.vue와 AboutView.vue 페이지(컴포넌트)를 생성한다. 경로는 root에 폴더를 만들어 넣어준다 src/views/

** HomeView.vue **

src/views/HomeView.vue

<template>
    <div>Home view</div>

</template>

<script setup>
</script>

<style lang="scss" scoped></style>

** AboutView.vue **

src/views/AboutView.vue

<template>
    <div>About View</div>
</template>

<script setup>
</script>

<style lang="scss" scoped></style>

1-2. 라우터(router) 설정

** index.js **

// src/router/index.js

//라우트 정보를 담고 있는 라우터 객체를 생성
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

//router설정
const routes = [
    {
        path: '/', //root로 들어왔을 때
        name: 'Home',
        component: HomeView,
    },
    {
        path: '/about', //about로 들어왔을 때
        name: 'About',
        component: AboutView,
    },
];

//라우터 객체 생성
const router = createRouter({
    history: createWebHistory('/'),
    routes, // 키와 값이 같으면 값을 빼고 적어도 됨
});

//생선된 router 객체를 외부에서 사용할 수 있도록 export
export default router;

설정한 라우터 객체를 Vue 인스턴스에 추가해보자

** main.js **

// src/main.js

//bootstrap 설치 후 import
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';

import { createApp } from 'vue';
import App from './App.vue';

//router/index.js에서 설정한 router 객체를 가져옴
import router from '@/router';

//use 메서드를 통해서 설정한다.
createApp(App).use(router).mount('#app');
import 'bootstrap/dist/js/bootstrap.js';

app.use(router)를 호출 함으로써 컴포넌트 내부에서 $router, $route 객체에 접근할 수 있다.

RouterLink, RouterView

RouterLink

Vue Router 에서는 페이지를 이동할 때는 일반 a태그를 사용하는 대신 ** 커스텀 컴포넌트인 <RouterLink>를 사용하여 다른 페이지 링크를 만들어야 한다. ** 이를 통해 ** Vue Router는 페이지를 리로딩 하지 않고 URL에 매핑된 페이지를 렌더링 ** 할 수 있다.

RouterView

<RouterView>는 URL에 매핑된 컴포넌트를 화면에 표시한다.

push, replace

router.push와 같은 역할을 하지만 유일한 차이는 새로운 히스토리 항목에 추가하지 않고 탐색한다는 것이다. 이름에서 알 수 있듯이 현재 항목을 대체한다.

// router.push 메소드에 replace: true 속성을 추가하여 동일하게 동작 시킬 수 있다.
router.push({ path: '/home', replace: true})
// equivalent to
router.replace({ path: '/home'})

컴포넌트를 동적으로 변경하고 싶을 때 v-bind:is 속성을 사용해서 변경할 수 있다. 동적 컴포넌트는 탭 인터페이스와 같이 컴포넌트간에 동적으로 전환해야 할 때 유용하다.

<component> :is="currentTabComponent"></component>

위 예시에서 :is 속성에 전달된 값은 다음 중 하나를 포함할 수 있다.

• 등록된 컴포넌트의 문자열 이름 string
• 실제 가져온 컴포넌트 객체 object

💡 <component :is="..."를 사용하여 여러 컴포넌트간 전환하면 컴포넌트의 마운트가 매번 해제된다. 이때 <KeepAlive> 내장 컴포넌트를 사용하여 "비활성 컴포넌트"들의 "활성" 상태를 유지할 수 있도록 강제할 수 있다.

<script setup>은 Single-File-Component 내에서 Composition API를 사용하기 위한 ** syntactic-sugar(문법적 설탕) ** 입니다. SFC와 CompositionAPI를 사용하는 경우 <script setup>을 사용하는 것을 권장한다. 왜냐면 일반 <script> 구문보다 많은 장점을 제공해준다.

• 간결한 문법으로 사용구(boilerplate)를 줄일 수 있다.
• 타입스크립트를 사용한 props와 emits 선언 가능
• 런타임 성능의 향상(템플릿이 setup 스크립트와 같은 스코프(scope)에 있는 render 함수로 컴파일되므로 프록시가 필요없음)
• 더 뛰어난 IDE 타입 추론 성능 (language 서버가 코드로부터 타입을 추론해내는데 비용이 덜 든다)

📌 syntactic-sugar는 기능은 그대로인데 읽는 사람을 위해 직관적으로 쉽게 코드를 읽을 수 있게 만든다는 것이다.

<script setup>
  import { ref } from "vue";

  // script에 setup을 선언하면 된다.
  console.log('Hi!');

  //반응형 데이터 또한 잘 작동한다.
  const message = ref("");

  //따로 return을 하지 않더라도 사용할 수 있다. (상용구를 줄일 수 있다)
  const msg = 'hi';
</script>


<script>
  //위의 setup을 사용했을 때 아래처럼 컴파일된다.
  export default {
      import { ref } from "vue";

      setup() {
          console.log('Hi!');

          const message = ref("");

          const msg = 'hi';
          return{ msg, message };
      },
  }
</script>

1-1 defineProps() & defineEmits()

defineProps()와 defineEmits() API를 <script setup>내에 선언하여 props와 emits을 사용할 수 있다.

<script setup>
  const props = defineProps({
      foo: String
  })

  const emit = defineEmits(['change', 'delete'])
</script>

• defineProps와 defineEmits는 <script setup> 내부에서만 사용할 수 있는 컴파일러 매크로다. 그렇기에 import할 필요가 없으면 <script setup>이 처리될 때 컴파일 된다.
• defineProps는 props옵션과 동일한 값을 허용한다. 그리고 defineEmits는 emits 옵션과 동일한 값을 허용한다.
• defineProps와 defineEmits는 전달된 옵션을 기반으로 타입 추론을 제공한다.
• defineProps와 defineEmits에 전달된 옵션은 setup()에서 모듈 영역(module scope)으로 호스팅된다. 따라서 옵션은 setup() 영역에 선언된 지역 변수를 참조할 수 없다. 만약 그렇게 하면 컴파일 오류가 발생한다. 하지만 import된 옵션은 사용할 수 있다. 왜냐면 import도 모듈 영역으로 호스트가 되기 때문이다.

1-2 defineExpose()

<script setup>을 사용하는 컴포넌트는 기본적으로 Template Refs나 $parent와 같이 컴포넌트간 통신이 닫혀 있다. <script setup>을 사용하는 컴포넌트의 내부 데이터나 메서드를 명시적으로 노출하려면 defineExpose()컴파일러 매크로를 사용할 수 있다.

<script setup>
  import { ref } from 'vue';

  const a = 1
  const b = ref(2)

  defineExpose({
      a,
      b
  })
</script>

expose는 일반 < script >에서도 사용할 수 있다.

<script>
  export default{
      setup(props, context){
      //Expose public properties (Function)
      console.log(context.expose)
      }
  }
</script>

1-3 useSlots() & useAttrs()

slots과 attrs는 <template> 내부에서 $slots과 $attrs로 직접 접근해서 사용할 수 있다. 만약 <script setup> 내부에서 slots과 attrs를 사용하고 싶다면 각각 useSlots(), useAttrs() helper 메서드를 사용할 수 있다.

<script setup>
  import { useSlots, useAttrs } from 'vue'

  const slots = useSlots()
  const attrs = useAttrs() // fallthrough 속성 접근
</script>

slots과 attrs는 일반 <script>에서도 사용할 수 있다.

<script>
  export default{
      setup(props, context){
          //Attributes (Non-reactive object, equivalent to $attrs)
          console.log(context.attrs)

          //Slots (Non-reactive object, equivalent to $slots)
          console.log(context.slots)
      }
  }
</script>

1-4 < script >와 < script setup>함께 사용

<script setup>은 nomal <script>와 함께 사용할 수 있다. 예를 들면 다음과 같은 경우에 nomal <script>가 필요할 수 있다.

• 예를 들어 <script setup>에서 표현할 수 없는 inheritAttrs옵션이나 Plugin을 통해 활성화된 Custom 옵션을 사용하고자 할때 nomal <script>를 함께 선언합니다.
• named export를 선언 했을 때(예: export const data)
• 한 번만 실행되어야 하는 로직이 있을 때

<script>
  //일반 스크립트, 모듈 범위에서 한 번만 실행
  runSideEffectOnce()

  //옵션 선언
  export default {
      inheritAttrs : false,
      customOptions: {}
  }
</script>

<script setup>
  //각 인스턴스 생성시 setup() 범위에서 실행
</script>

1-5 Top-level await

<script setup>내의 Top-level에서 await을 사용할 수 있습니다. 그리고 코드는 async setup()이렇게 컴파일 된다.

<script setup>
  const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>

Vue의 선언적 렌더링 모델은 대부분의 직접적인 DOM의 작업을 대신 수행한다. 하지만 때론 기본 DOM요소에 직접 접근해야 하는 경우가 있을 수 있다. 이때 ref 특수 속성을 사용해서 쉽게 접근할 수 있다.

<input type="text" ref="input" />

ref는 특수 속성이다. 이 ref특수 속성을 통해 마운트된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을 수 있다.

1. Refs 접근하기

Composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 한다.

• 컴포넌트가 마운트된 후에 접근할 수 있다.
• <template> 안에서 input으로 Refs 참조에 접근하려는 경우 렌더링되기 전에는 참조가 null일 수 있다.
• <template> 안에서 $refs 내장 객체로 Refs 참조에 접근할 수 있다.

2. V-for 내부 참조

v3.2.25 이상에서 동작 v-for내부에서 ref가 사용될 때 ref는 마운트 후 요소 배열로 채워진다.

<script>
  import { ref, onMounted } from 'vue'

  export default {
      setup() {
          const list = ref([1, 2, 3]);
          const itemRefs = ref([]);

          onMounted(() => console.log(itemRefs.value))

          return{ list, itemRefs }
      }
 }
</script>

3. 컴포넌트 Refs

ref를 자식 컴포넌트에도 사용할 수 있다. ref로 자식 컴포넌트에 참조값을 얻게 되면 자식 컴포넌트의 모든 속성과 메서드에 대한 전체를 접근할 수 있다. 이러한 경우 부모/자식 컴포넌트간 의존도가 생기기 때문에 이러한 방법은 반드시 필요한 경우에만 사용해야 한다. 그리고 일반적으로 ref보다 표준 props를 사용하여 부모/자식간 상호작용을 구현해야 한다.

child.vue

<template>
  <div>Child Component</div>
</template>

<script>
  import { ref } from `vue`;

  export default {
      setup() {
          const message = ref('Hello Child!');
          const sayHello = () => {
              alert(message.value);
          };
          return { message, sayHello };
      },
  };
</script>

부모 컴포넌트에서 자식 컴포넌트의 상태나 메서드에 접근할 수 있다.

다음은 인스턴스 수명 주기에 대한 다이어그램이다. 지금 진행 중인 모든 것을 완전히 이해할 필요는 없지만 더 많이 배우고 구축함에 따라 유용한 참고 자료가 된다. 자세한 내용은 Vue.js 생명주기 훅을 참고하자

1. Lifecycle Hooks 단계

Lifecycle Hooks은 크게 4단계로 나눠진다. Creation(생성) > Mounting(장착) > Updating(수정) > Destruction(소멸)

1-1. Creation

컴포넌트 초기화 단계이며 Creation Hooks은 라이플사이클 단계에서 가장 먼저 실행된다.

• 아직 컴포넌트가 DOM에 추가되기 전이므로 DOM에 접근할 수 없다.
• 서버렌더링에서 지원되는 단계
• 클라이언트나 서버 렌더 단에서 처리해야 할 일이 있으면 이단계에서 진행

🔨 beforeCreate

컴포넌트 인스턴스가 초기화 될 때 실행된다. data() 또는 computed와 같은 다른 옵션을 처리하기 전에 즉시 호출된다.

🔨 created

컴포넌트 인스턴스가 초기화를 완료한 후 호출되는 훅이다.

🔨 setup

Composition API의 setup() 훅은 Options API 훅 보다 먼저 호출된다. beforeCreate와 created 라이프사이클 훅은 Options API에서 사용하는 라이프사이클 훅으로 Vue3 Composition API를 활용하여 개발을 진행할 때는 setup()함수로 대체할 수 있습니다.

<script>
  export default {
      beforeCreate(){

      },
      created(){

      },
      setup(){
          //coding....
      }
  }
</script>  

1-2. Mounting

DOM에 컴포넌트를 삽입하는 단계이다. onBeforeMount와 onMounted가 있다.

• 서버렌더링에서 지원되지 않는다.
• 초기 렌더링 직전에 돔을 변경하고자 한다면 이 단계에서 활용할 수 있다.

🔨 onBeforeMount

컴포넌트가 마운트되기 직전에 호출된다.

• 대부분의 경우 사용을 권장하지 않는다.

🔨 onMounted

컴포넌트가 마운트된 후에 호출된다. DOM에 접근할 수 있다.

• 모든 자식 컴포넌트가 마운트되었음을 의미한다.
• 자체 DOM 트리가 생성되어 상위 컴포넌트에 삽입되었음을 의미한다.

<template>
    <div class="container py-4">
        <input ref="inputRef" type="text" value="안녕하세요. " />
    </div>
</template>

<script>
import { onBeforeMount, onMounted, ref } from "vue";

export default {
    setup() {
        console.log("setup");
        const inputRef = ref(null);
        //onBeforeMount는 mount되기 전이라 출력X
        onBeforeMount(() => {
            console.log("onBeforeMount", inputRef.value);
        });
        //onMounted는 mount된 이후이기 때문에 출력
        onMounted(() => {
            console.log("onMounted", inputRef.value.value);
        });

        return { inputRef };
    },
    // beforeCreate() {
    //     console.log("beforeCreate");
    // },
    // created() {
    //     console.log("created");
    // },
};
</script>

<style lang="scss" scoped></style>

출력화면

부모 컴포넌트 아래에 자식 컴포넌트가 있을경우 어떻게 처리가 되는지 확인해보자.

부모 컴포넌트의 setup과 onBeforeMount가 먼저 처리가 된 후 자식 컴포넌트가 처리가 된다. 자식 컴포넌트의 처리가 끝나면 부모 컴포넌트의 onMount가 마지막으로 처리된다.

1-3. Updating

컴포넌트에서 사용되는 반응형 데이터가 변경되거나 어떠한 이유로 재렌더링이 발생될 때 호출된다.

• 디버깅이나 프로파일링 등을 위해 컴포넌트 재 렌더링 시점을 알고 싶을 때 사용하면 된다.

🔨 onBeforeUpdate

반응형 상태 변경으로 인해 컴포넌트가 DOM 트리를 업데이트하기 직전에 호출된다.
컴포넌트에서 사용되는 반응형 상태 값이 변해서, DOM에도 그 변화를 적용시켜야 할 때가 있다. 이 때, 변화 직전에 호출되는 것이 바로 onBeforeUpdate 훅이다.

🔨 onUpdated

반응 상태 변경으로 인해 컴포넌트가 DOM 트리를 업데이트한 후에 호출된다.
상위 컴포넌트의 onUpdated 훅은 하위 컴포넌트의 훅 이후에 호출된다. (Child > Parent) 이 훅은 다른 상태 변경으로 인해 발생할 수 있는 컴포넌트의 DOM 업데이트 후에 호출된다. 특정 상태 변경 후에 업데이트된 DOM에 엑세스해야 하는 경우 대신 nextTick()을 사용하자

<template>
    <div class="container py-4">
        <p id="message">{{ message }}</p>
    </div>
</template>

<script>
import { onBeforeUpdate, onUpdated, ref } from "vue";

export default {
    setup() {
        const inputRef = ref(null);
        const message = ref("");

        onBeforeUpdate(() => {
            console.log("onBefroeUpdate", message.value);
            console.log(
                "DOM Content:",
                document.querySelector("#message").textContent,
            );
        });
        onUpdated(() => {
            console.log("onUpdated", message.value);
            console.log(
                "DOM Content:",
                document.querySelector("#message").textContent,
            );
        });

        return { inputRef, message };
    },
};
</script>

<style lang="scss" scoped></style>

출력화면

반응형 데이터 message를 수정하게되면 콘솔에서 값을 확인할 수 있다. onBeforeUpdate는 DOM 트리를 업데이트하기 이전이기 때문에 DOM 컨텐츠를 가져왔을 때 아직 이전 데이터인 빈값인 걸 확인할 수 있다. onUpdated은 DOM 트리가 변경된 이후의 호출되는 HOOK이기 때문에 DOM 컨텐츠를 가져오는 것을 확인할 수 있다. 다시 한번 변경해보자.

반응형 데이터는 변경된 걸 확인할 수 있지만 DOM 컨텐츠는 변경되기 이전의 데이터를 가져오는 것을 확인할 수 있다. onUpdated은 변경된 후의 데이터를 가져오는 것을 확인할 수 있다.

!!WARNING!! onUpdated 훅에서 컴포넌트 상태를 변경하지 말자. 그러면 무한 업데이트 루프가 발생 할 수 있다.!

1-4. Destruction

해체(소멸)단계 이며 onBeforeUnmount와 onUnmounted가 있다.

🔨 onBeforeUnmount

컴포넌트가 마운트 해제되기 직전에 호출

🔨 onUnmounted

컴포넌트가 마운트 해제된 후 호출

부모

<template>
    <div class="container py-4">
        <button @click="visible = !visible">Toggle Child</button>
        <LifeCycleChild v-if="visible"></LifeCycleChild>
        <p id="message">{{ message }}</p>
    </div>
</template>

<script>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from "vue";
import LifeCycleChild from "./LifeCycleChild.vue";

export default {
    components: {
        LifeCycleChild,
    },
    setup() {
        const inputRef = ref(null);
        const message = ref("");
        const visible = ref(false);

        return { inputRef, message, visible };
    },

};
</script>

<style lang="scss" scoped></style>

자식

<template>
    <div class="card">
        <div class="card-body">Lifecycle Child</div>
        <input id="input" type="text" />
    </div>
</template>

<script>
import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted } from "vue";
export default {
    setup() {
        onBeforeMount(() => {
            console.log("[child] onBeforeMount");
        });
        onMounted(() => {
            console.log("[child] onMount");
        });
        onBeforeUnmount(() => {
            console.log("[Child] onBeforeUnmount");
            console.log(document.querySelector("#input"));
        });
        onUnmounted(() => {
            console.log("[Child] onUnmounted");
            console.log(document.querySelector("#input"));
        });
        return {};
    },
};
</script>

<style lang="scss" scoped></style>

출력화면

Toggle Child 클릭 시 LifeCycleChild.vue 컴포넌트가 생성되며 마운트 되었기 때문에 [Child] onBeforeMount와 [Child] onMount가 실행되는 걸 볼 수 있다.

Toggle child 를 다시 클릭해서 마운트 해제, 소멸시키면 \

[Child] onBeforeUnmount과 [Child] onUnmounted이 호출되는 걸 볼 수 있다. [Child] onBeforeUnmount은 마운트를 해제하기 직전에 호출하는 HOOK이기 때문에 아직 DOM을 가져올 수 있지만 [Child] onUnmounted는 마운트를 해제한 HOOK이기 때문에 DOM을 가져왔을 때 없는 걸 확인할 수 있다.

1-5. ETC

• onErrorCaptured()
• onRenderTracked()
• onRenderTriggered()
• onActivated()
• onDeactivated()
• onServerPrefetch()

하위 컴포넌트 항목에 데이터를 제공하려면 provider 역할을 하는 상위 컴포넌트 setup() 함수 내부에 쓸 수 있다.

<script>
  import { provide } from 'vue';

  export default {
      setup(){
          provide('message', 'hello!')
      },
  };
</script>

provide() 함수는 두 개의 파라미터를 받는다.

• 첫 번째 파라미터는 주입 키:문자열 또는 Symbol이 될 수 있다. 주입 키는 하위 컴포넌트에서 주입된 값을 조회하는데 사용된다.
• 두 번째 파라미터는 제공된 값: 값은 refs와 같은 반응성 데이터를 포함하여 모든 유형이 될 수 있다.

1-1. Reactivity

Provide / Inject를 반응성 데이터로 제공할 때 가능한 모든 변경을 provider 내부에서 하는 것이 좋다. 이렇게 Provider 내부에 배치되면 향후 유지관리가 용이하다.
만약에 Injector 내부 컴포넌트에서 반응성 데이터를 변경해야 하는 경우 데이터 변경을 제공하는 함수를 함께 제공하는 것이 좋다.

<script>
  // Provider
  const message = ref('Hi two');
  const updateMessage = () => {
      message.value = 'world!';
  };
  provide('message', {message, updateMessage});
</script>

<script>
  // Injector
  const { message, updateMessage } = inject('message');

그리고 주입된 컴포넌트에서 제공된 값을 변경할 수 없도록 하려면 readonly() 함수를 사용할 수 있다.

<script>
  import { provide, readonly, ref } from 'vue';
  provide('count', readonly(count));
</script>

1-2. Symbol 키 사용

대규모 애플리케이션에서 다른 개발자와 함께 작업할 때 잠재적 충돌을 피하기 위해 Symbol 주입 키를 사용하는 것이 가장 좋다.

<script>
  // keys.js
  export const myInjectionKey = Symbol()
</script>

<script>
  // in provider component
  import { provide } from 'vue'
  import { myInjectionKey } from './keys.js'

  provide(myInjectionKey, {
   /* data to provide */
  })
</script>

<script>
  // in injector component
  import { inject } from 'vue'
  import { myInjectionKey } from './keys.js'

  const injected = inject(myInjectionKey)
</script>

1-3. App-level Provide

컴포넌트에서 데이터를 제공하는 것 외에 App-level에서 제공할 수도 있다.

<script>
  import { createApp } from 'vue';
  import App from './App.vue'
  const app = createApp(App);
  app.provide('appMessage', 'hello app message')
  app.mount('#app');
</script>

🔨 Provide / Inject 사용 예

App-level에서의 Provide는 앱에서 렌더링되는 모든 컴포넌트에서 사용할 수 있다. 이것은 Plugin을 작성할 때 유용합니다. Vue2에서 컴포넌트 인스턴스 객체를 추가할 때 global property에 추가 했으나, Vue3에서 Composition API setup 함수에서는 컴포넌트 인스턴스에 접근할 수 없다. 이때 대신하여 Provide / Inject를 사용할 수 있다.

HTML 요소와 마찬가지로 우리가 만든 컴포넌트에 콘텐츠를 전달할 수 있으면 유용하다. <FancyButton>컴포넌트를 만든 후 콘텐츠를 전달해보자.

<!-- FancyButton.vue -->
<template>
  <button class="fancy-btn">
      <slot></slot>
  </button>
</template>

-> Style 위에 정의한 컴포넌트를 부모 컴포넌트에 사용해보자

<FancyButton>
    <!-- 슬롯 콘텐츠 -->
      Click!!
</FancyButton>

slot 요소는 부모 컴포넌트에서 제공하는 콘텐츠를 나타내는 슬롯 콘텐츠다. 그리고 슬롯은 텍스트 뿐만아니라 HTML요소, 컴포넌트 등 다양한 모든 콘텐츠가 될 수 있다.

Named Slots

<slot> 요소에 이름을 부여하여 여러개의 <slot>을 정의할 수 있다.

<!-- BaseCard.vue -->
<template>
  <article>
    <div>
      <slot name="header"></slot>
    </div>
    <div>
      <slot></slot>
    </div>
    <div>
      <slot name="footer"></slot>
    </div>
  </article>
</template>

• slot에 name 속성을 부여하여 특정 슬롯 콘텐츠가 렌더링 되어야 할 위치를 설정할 수 있다.
• name이 없는 <slot>의 이름은 암시적으로 default다.

  <!-- 부모 컴포넌트 사용 예시 -->
  <template>
  <BaseCard>
    <template v-slot:hedaer>제목</template>
    <template v-slot:default>내용</template>
    <template v-slot:footer>푸터</template>
  </BaseCard>
  </template>

  위 예시처럼 name이 부여된 <slot>에 콘텐츠를 전달하려면 v-slot 디렉티브를 사용하여 전달할 수 있다. 그리고 v-slot:전달인자를 사용하여 지정한 슬롯 콘텐츠에 전달할 수 있다.
  
  v-slot은 # 단축키로 표현할 수 이있다.

  <!-- 부모 컴포넌트 사용 예시 -->
  <template>
  <BaseCard>
    <template #hedaer>제목</template>
    <template #default>내용</template>
    <template #footer>푸터</template>
  </BaseCard>
  </template>

  그리고 default 슬롯은 암시적으로 처리할 수 있다.

  <!-- 부모 컴포넌트 사용 예시 -->
  <template>
  <BaseCard>
    <template #hedaer>제목</template>
    <!-- 암시적으로 default slot -->
    내용
    <template #footer>푸터</template>
  </BaseCard>
  </template>

Render Scope

슬롯 콘텐츠는 상위 컴포넌트에 정의되어 있으므로 상위 컴포넌트의 데이터 영역에 접근은 가능하지만 하위 컴포넌트의 영역에는 접근할 수 없다.

Scoped Slots

Render Scope에서 언급했던 것처럼 슬롯 콘텐츠는 자식 컴포넌트의 데이터에 접근할 수 없다. 하지만 슬롯 콘텐츠에서 상위 컴포넌트와 하위 컴포넌트 데이터를 모두 사용할 수 있다면 우리는 개발할 때 매우 유용하다. 이러한 방법으로 우리는 자식 컴포넌트에서 <slot> 요소를 사용할 때 props를 전달하는 것처럼 속성을 슬롯 콘텐츠에 전달할 수 있다.

<!-- MyComponent.vue -->
<template>
  <div>
    <slot :text="greetingMessage" :count="count"></slot>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
      setup() {
          const greetingMessage = ref('Hello!!');
          const count = ref(1);
          return{ greetingMessage, count};
      },
  };
</script>

Non-Prop 속성은 props 또는 event에 명시적으로 선언되지 않은 속성 또는 이벤트다. 예를 들어 class, style, id와 같은 것들이 있다.

1. 속성 상속

컴포넌트가 단일 루트 요소로 구성되어 있으면 fallthough 속성은 루트 요소의 속성에 자동으로 추가된다. 예를들어 <MyButton>이라는 컴포넌트가 있다고 가정해보자.

<!-- template of <MyButton> -->
<button>click me</button>

그리고 이 컴포넌트를 사용하는 부모 컴포는트는 다음과 같다.

<MyButton class="large">

최종 렌더링된 DOM은 다음과 같다.

<button class="larg">click me</button>

1-1. class, style 속성 병합

• 만약 자식 컴포넌트 루트요소에 이미 calss와 style속성이 정의되어 있으면, 부모로 받은 class와 style속성과 병합한다.

  <!-- template of <MyButton> -->
  <button class="btn">click me</button>

  최종 병합된 DOM은 다음과 같다.

  <button class="btn larg">click me</button>

1-2. v-on 이벤트 리스너 상속

• v-on 이벤트 리스너도 동일하게 상속된다.

  <MyButton @click="onClick">

  @click 리스너는 <MyButton>의 컴포넌트 루트요소인 <button>요소에 추가된다.
  만약 <button>요소에 이미 바인딩된 이벤트가 있다면 이벤트가 추가되어 두 리스너 모두 트리거 된다.

1-3. 속성 상속 비활성화

• 컴포넌트가 자동으로 Non-Prop 속성을 상속하지 않도록 하려면 컴포넌트의 inheritAttrs: false 옵션을 설정할 수 있다.

  <template>
  <button class="btn" data-link="hello">Click me</button>
  </template>
  <script>
  export default{
      inheritAttrs: false,
  }
  </script>

  컴포넌트에 Non-Prop 속성을 비활성화 하는 일반적인 경우는 자식 컴포넌트의 루트요소에 이외의 다른 요소에 Non-Prop 속성을 적용하고 싶을 때다.
  
  그리고 적용해야 하는 요소에 <template>에서 Non-Prop속성에 접근할 수 있는 내장 객체 $attrs로 직접 접근할 수 있다.

  <template>
  <p>fallthrough 속성: {{ $ attrs }}</p>
  </template>

  $attrs객체에는 컴포넌트에 선언되지 않은 모든 속석 props, emits(예:class, style, v-on등)을 포함하고 있습니다.

  몇가지 참고 사항:

• props와 달리 Non-prop 속성은 JavaScript에서 원래 대소문자를 유지하므로 foo-bar와 같은 속성은 $attrs['foo-bar']로 접근해야한다.
• @click과 같은 v-on리스너는 $attrs.onClick과 같이 함수로 접근할 수 있다.

props를 활용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고 자식 컴포넌트에서는 부모 컴포넌트로 데이터를 전달하거나 또는 트리거의 목적으로 이벤트를 발생 시킬 수 있다. 그리고 이벤트는 컴포넌트의 emit 메서드를 통하여 발생 시킬 수 있다.

상위 컴포넌트에서 하위 컴포넌트로 전달할 때 props로 전달이 가능하다. 그리고 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 올릴 때는 emit을 활용하여 올릴 수 있다.

템플릿 안에서 사용할 때 컴포넌트 인스턴스의 메서드인 $emit을 사용하였고

<template>
  <button @click="$emit('someEvent')">버튼</button>
</template>

그러면 부모 컴포넌트에서 v-on(또는 @)을 사용하여 이벤트를 수신할 수 있다.

<MyComponent @some-event="callFunction">

.once 수식어는 컴포넌트 커스텀 이벤트에서도 지원됩니다.

<MyComponent @some-event.once="callFunction">

이벤트와 함께 특정 값을 내보낼 수 있다. $emit함수 이벤트명에 추가로 파라미터를 넘길 수 있다.

<template>
  <button @click="$emit('someEvent', 'Hello', 'Hi', '~')">버튼</button>
</template>

그런다음 부모 컴포넌트에서 이벤트와 함께 파라미터를 받을 수 있다.

<template>
    <MyComponent @some-event="callFunction" />
</template>

<script setup>
  export default{
      setup(){
          const callFunction = (word1, word2, word3) => {
              alert(word1, word2, word3);
          };
          return {
              callFinction
          }
      }
  }
</script>

이벤트 선언하기

emits 옵션을 사용하여 이벤트를 선언할 수 있다. 이때 이벤트 선언하는 방법은 두가지 형식으로 선언할 수 있다.

• 문자열 배열 선언
• 객체문법 선언

그리고 JavaScript 코드에서 이벤트를 내보낼 때는 setup() 함수의 파라미터로 넘어온 context.emit()메서드를 사용할 수 있다.

문자열 배열 선언

<script>
    export default{
          emits: ['someEvent'],
          setup(props, context){
              context.emit('someEvent', 'Hello World!')
          }
      }
</script>

<script>
    export default{
          emits: ['someEvent'],
          setup(props, { emit }){
              emit('someEvent', 'Hello World!')
          }
      }
</script>

객체문법 선언 (유효성 검사가 필요할 때)

• 객체문법으로 선언할 경우 validation로직을 추가할 수 있다. 만약 validation이 없다면 null로 설정하면 된다.

  <script>
    export default{
          emits: {
              //유효성 검사가 없는 이벤트 선언
              someEvent: null,
  
              //유효성 검사가 있는 이벤트 선언
              someSubmit: (result) => {
                  if (email && password) {
                      return true
                  } else {
                      console.warn('result 값이 비어있습니다!')
                      return false
                  }
  
              }
          },
          setup(props, context){
              context.emit('someEvent', 'Hello World!')
          }
      }
  </script>

  선택 사항이지만 컴포넌트가 작동하는 방식을 더 잘 문서화하기 위해 모든 이벤트를 정의하는 것이 좋다. 또한 Vue가 fallthrough속성에서 알려진 리스너를 제외할 수 있다.
  
  

  v-model 만들기

  컴포넌트를 만든 후 해당 컴포넌트에 v-model을 적용하려면 @update:modelValue이벤트를 사용하여 v-model을 만들 수 있다. 일반적으로 기본 HTML 요소인 <input> 태그에 v-model은 아래와 같이 사용한다.

<input v-model="username">

위에 선언된 v-model은 아래와 같이 동작한다.

<input :value="username" @input="username = $event.target.value">

위에 기본 동작 대신 우리가 만든 컴포넌트는 아래와 같이 수행한다.

<LabelInput :modelValue="username" @update:modelValue="newValue => username = newValue">
<!-- props로는 :modelValue 이벤트로는 @update:modelValue를 구현하면 된다.-->

이 <LabelInput>을 실제로 동작하게 하려면 아래와 같이 컴포넌트를 정의해야한다.

• modelValue props를 :value속성에 바인딩
• @input 이벤트에서 새 @update:modelValue 이벤트로 내보낸다.

  <template>
  <label>
    {{ label }}
    <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  </label>
  </template>
  

그리고 아래와 같이 우리가 만든 컴포넌트에 `v-model`을 적용할 수 있다.
```html
<LabelInput label="이름" v-model="username">

Computed 이용하기

• 컴포넌트 안에서 computed를 사용하여 v-model을 구현할 수 있다.

  <template>
  <label>
    {{ label }}
    <input type="text" :value="value">
  </label>
  </template>
  

전달 할 수 있다. 이럴때 `emit`를 사용할 수 있다.

<br>

### v-model 전달인자
- 기본적으로 `v-model`은 컴포넌트에서 `modelValue` `props`와 `update:modelValue`이벤트로 사용한다. 하지만 `전달인자(Arguments)`를 사용하여 이러한 이름을 수정할 수 있다.
```html
<BookComponent v-model:title="bookTitle">

이 경우 자식 컴포넌트에서는 :title을 속성으로 정의하고 update:title로 이벤트를 내보내야 한다.

<template>
  <article>
    <strong>책 이름</strong> :
    <input type="text" :value="title" @input="$emit('update:title', $event.target.calue)" >
  </article>
</template>

<script>
    export default {
          props: ['title'],
          emits: ['update: title'],
      }
</script>

블로그를 구축하는 경우 블로그 게시글을 나타내는 컴포넌트가 있다고 가정해보자 이때 모든 블로그 게시글의 UI나 레이아웃은 동일하지만 게시글의 제목, 내용과 같은 데이터는 각각 다르다. 그러면 컴포넌트에 각각 제목이나 내용과 같은 데이터를 전달해야 하는데 이때 props를 사용하여 컴포넌트로 데이터(속성)을 전달할 수 있다.

Props 란?

• Props란? 컴포넌트에 등록할 수 있는 사용자 정의 속성입니다. 블로그 게시글 컴포넌트에 사용자 정의 속성을 선언하면 이 컴포넌트를 사용하는 부모 컴포넌트에서 데이터(속성)을 전달 할 수 있습니다.

1. Props 선언

• Vue 컴포넌트에는 명시적 Props 선언이 필요합니다. 왜냐하면 컴포넌트에 전달된 외부 props가 fallthrough 속성으로 처리되어야 함을 알 수 있습니다.

  🔧 fallthrough 속성 props 또는 emits에 명시적으로 선언되지 않은 속성 또는 이벤트

1-1. 문자열 배열 선언

• 컴포넌트에 props 옵션을 사용하여 선언할 수 있다.

<script>
export default{
    props: [title],
      setup(props){
          console.log(props.title)
      }
}
</script>

1-2. 객체문법 선언

• 문자열 배열을 사용하여 props를 선언하는 것 외에도 객체 문법을 사용하여 속성 타입과 함께 선언 할 수 있다.

<script>
export default{
    props: {
          //key: value
          title: String,
          likes: Number
      },
      setup(props){
          console.log(props.title)
          console.log(props.likes)
      }
}
</script>

porps 선언시 key는 속성명이고 value는 속성 타입이다. 더 자세히 선언하고 싶으면 value에 고급 옵션인 객체를 선언할 수 있다. vue 스타일 가이드에서는 문자열로 간단히 선언하는 것 보다 객체 타입으로 디테일하게 선언하는 것을 권장하고 있다.

• type: String, Number, Boolean, Array, Object, Date, Function, Symbol 모든 기본 생성자 또는 모든 사용자 정의 타입이 올 수 있다.(예: Person, Animal) 그리고 [Number, String] 배열을 이용하여 여러개의 타입을 선언할 수 있다.

• default: 속성값이 비어 있거나 undefined를 전달 받는 경우 기본값을 선언할 수 있다. 그리고 객체 또는 배열 타입인 경우 기본값을 팩토리 함수를 사용하여 반환해야 한다.
• required: 속성이 필수값이라면 true로 해서 설정할 수 있다.
• validator: 속성값의 유효성 검사가 필요할 때 사용할 수 있다.

✨ 컴포넌트 사용 시 type, required, validator 명시된 사항을 위반할 때 개발모드에서 콘솔 경고가 발생한다.

AppCard.vue

//AppCard.vue

<template>
    <div class="card">
        <div class="card-body">
              <!-- 항목에 맞게 넣어준다. -->
            <h5 class="card-title red">{{ title }}</h5>
            <p class="card-text">{{ contents }}</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</template>

<script>
export default {
      //props라는 속성을 선언한다.
    props: ["title", "contents"],
    setup() {
        return {};
    },
};
</script>
<style></style>

TheView.vue

<script>

//TheView.vue

<template>
    <main>
        <div class="container text-center py-4">
            <div class="row g-3">
                <div class="col col-4">
                      //AppCard.vue 파일에서 props 선언한 것을 가져와 정적인 값을 줄 수 있다.
                    <AppCard title="제목1" contents="내용1"></AppCard>
                </div>
                <div class="col col-4">
                      //반응형 데이터를 선언하여서도 넣을 수 있다.(바인딩하여 사용)
                    <AppCard :title="post.title" :contents="post.contents"></AppCard>
                </div>
                <div class="col col-4">
                    <AppCard></AppCard>
                </div>
                <div class="col col-4">
                    <AppCard></AppCard>
                </div>
                <div class="col col-4">
                    <AppCard></AppCard>
                </div>
                <div class="col col-4">
                    <AppCard></AppCard>
                </div>
                <div class="col col-4">
                    <AppCard></AppCard>
                </div>
            </div>
        </div>
    </main>
</template>

<script>
import AppCard from "@/components/AppCard.vue";
import { reactive } from "vue";
export default {
    components: {
        AppCard,
    },
    setup() {
          //바인딩하여 사용할 수 있다.
        const post = reactive({
            title: "제목2",
            contents: "내용2",
        });
        return { post };
    },
};
</script>

<style></style>

v-for을 이용해서 루프를 돌릴 수 있다.

TheView.vue

<template>
    <main>
        <div class="container text-center py-4">
            <div class="row g-3">
                <div v-for="post in posts" :key="post.id" class="col col-4">
                    <AppCard :title="post.title" :contents="post.contents"></AppCard>
                </div>
            </div>
        </div>
    </main>
</template>

<script>
import AppCard from "@/components/AppCard.vue";
import { reactive } from "vue";
export default {
    components: {
        AppCard,
    },
    setup() {
        //v-for을 이용한 루프
        const posts = reactive([
            { id: 1, title: "제목1", contents: "내용1" },
            { id: 2, title: "제목2", contents: "내용2" },
            { id: 3, title: "제목3", contents: "내용3" },
            { id: 4, title: "제목4", contents: "내용4" },
            { id: 5, title: "제목5", contents: "내용5" },
        ]);

        return { posts };
    },
};
</script>

<style lang="scss" scoped></style>

** v-for을 이용한 결과화면**

객체문법을 이용한 방법 AppCard.vue

<template>
    <div class="card">
        <div class="card-body">
            <!-- type : new, notice -->
            <!-- <span class="badge text-bg-secondary">{{
                type == "news" ? "뉴스" : "공지사항"
            }}</span> -->
            <span class="badge text-bg-secondary"> {{ typeName }}</span>
            <h5 class="card-title red mt-2">{{ title }}</h5>
            <p class="card-text">{{ contents }}</p>

            <!-- v-if를 통해서 isLike가 true일 경우 위에 아닐경우 밑에 태그가 노출된다.-->
            <!-- <a href="#" v-if="isLike" class="btn btn-danger">좋아요</a>
            <a href="#" v-else class="btn btn-outline-danger">좋아요</a> -->

            <!-- computed를 이용한 태그 묶기 -->
            <a href="#" class="btn" :class="isLikeClass">좋아요</a>
        </div>
    </div>
</template>

<script>
import { computed } from "vue";

export default {
    //객체 타입으로 선언
    props: {
        //속성을 정의
        type: {
            type: String,
            default: "news",
            //타입이 명확히 들어가 있는지 유효성 검사를 진행한다. 만약 타입이 잘못 들어가 있으면 콘솔에 'Invalid prop'라는 오류를 볼 수 있다.
            validator: value => {
                return ["news", "notice"].includes(value);
            },
        },
        title: {
            type: String,
            required: true,
        },
        contents: {
            type: String,
            required: true,
        },
        isLike: {
            type: Boolean,
            default: false,
        },
        //레퍼런스타입(객체, 배열 등) 디폴트를 설정할 때는 기본값을 반환하는 팩토리 함수를 선언해야 한다.
        obj: {
            type: Object,
            default: () => {
                return;
            },
        },
    },
    // setup() 함수의 첫 번째 매개변수로 porps 객체를 받아 사용할 수 있다.
    setup(props) {
        // computed를 이용해 좋아요를 하나로 묶어보자
        const isLikeClass = computed(() =>
            props.isLike ? "btn-danger" : "btn-outline-danger",
        );

        const typeName = computed(() =>
            props.type === "news" ? "뉴스" : "공지사항",
        );
        return { isLikeClass, typeName };
    },
};
</script>
<style></style>

2. 단방향 데이터 흐름

모든 props는 상위 속성과 하위 속성간에 단방향 바인딩으로 형성되어 있다. 만약 상위 속성이 업데이트되면 하위 속성도 업데이트되지만 그 반대는 아니다. 이러한 성질은 하위 속성 변경 실수로 상위 속성을 변경하여 앱의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있다.

또한 상위 컴포넌트가 업데이트될 때마다 하위 컴포넌트의 모든 props는 최신 상태도 최기화 된다. 그렇기 때문에 자식 컴포넌트 내부에서 props를 변경하지 않아야 한다.

3. Boolean Casting

Boolean타입의 Props는 특별한 캐스팅 규칙이 있습니다. <MyComponet>가 다음과 같이 선언되어 있다.

<script>
    export default{
          props: {
              disabled: Boolean
          }
      }
</script>

MyComponent는 다음과 같이 사용할 수 있다.

<!-- :disabled="true" 전달하는 것과 동일하다. -->
<MyComonent disabled>
<!-- :disabled="false" 전달하는 것과 동일하다. -->
<MyComonent>

Vue에서 Single File Component(SFC, *.vue)는 Vue 컴포넌트의 템플릿(template), 로직(script), 스타일(style)을 하나의 파일로 캡슐화하는 특수파일 형식이다. 확장자는 *.vue이다.

언어 블록

1. <template>

1. 각 *.vue파일은 한 번에 최대 하나의 top-level <template>블록을 포함할 수 있다.
2. 콘텐츠는 추출되어 @vue/compiler-dom으로 전달되고, JavaScript 렌더 기능으로 사전 컴파일되고, render옵션으로 내보내어 컴포넌트에 첨부된다.

2. <script>

1. 각 *.vue파일은 한 번에 최대 하나의 <script>블록을 포함할 수 있다.(< script setup >제외)
2. 스크립트는 ES 모듈로 실행된다.
3. defaulte export는 일반 객체 또는 defineComponent의 반환 값으로 Vue 컴포넌트 옵션 객체여야 한다.

3. <script setup>

1. 각 *.vue 파일은 한 번에 최대 하나의 <script setup>블록을 포함할 수 있다.
2. <script setup>은 사전에 처리되어 컴포넌트의 setup()함수로 사용된다. 즉 컴포넌트의 각 인스턴스에 대해 실행된다. <script setup>의 최상위 바인딩은 템플릿에 자동으로 노출된다.

4. <style>

1. 단일 *.vue파일에는 여러 <style>태그가 포함될 수 있다.
2. <style> 태그는 현재 컴포넌트에 스타일을 캡슐화하는데 도움이 되도록 scoped 또는 module 속성을 가질 수 있다. 캡슐화 모드가 다른 여러 <style> 태그를 동일한 구성 요소에서 혼합할 수 있다.

Custom Blocks

프로젝트별 요구사항에 따라 *.vue파일에 사용자 정의 블록을 추가할 수 있다. 예를 들면 다음과 같은 사용자 정의 블록 예가 있다.

• Gridsome: <page-query>
• vite-plugin-vue-gql: <gql>
• vue-i18n: <i18n>

전처리기

<script>의 lang속성을 사용하여 전처리기 언어를 선언할 수 있다. 일반적인 경우에는 TypeScript를 사용하는 것이다.

<script lang="ts">
   //use TypeScript
</script>

lang속성은 모든 블록에 적용할 수 있다. 예를 들어 SASS와 Pug를 <style>과 <template>에 적용할 수 있다.

<template lang="pug">
  p {{ msg }}
</template>

<style lang="scss">
    $primary-color:#333;
      body{
          color: $primary-color;
      }
</style>

Src 가져오기

*.vue 컴포넌트를 여러 파일로 분할하려는 경우 src속성을 사용하여 language block에 대한 외부 파일을 가져올 수 있다.

<template src="./templatye.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

src로 가져오는 것은 webpack 모듈 요청과 동일한 경로 확인 규칙을 따릅니다. 즉, 다음을 의미한다. 상대 경로는 ./ 로 시작해야 한다.
npm 종속성에서 리소스를 가져올 수 있습니다.

<!-- import a file from the installed "todomvc-app-css" npm package -->
<style src="./style.css"></style>

src 가져오기는 사용자 정의 블록에서도 작동합니다.

<unit-test src="./unit-test.js">
</unit-test>

CSS 기능

Scoped CSS <style>태그에 scoped속성이 있는 경우 해당 CSS는 현재 컴포넌트의 요소에만 적용된다.

<template>
  <p class="greeting">greeting</p>
</template>
<style scoped>
  .greeting{ color:red; font-weight:bold;}
</style>

원리는 PostCSS 사용하여 아래와 같이 변환 된다.

<template>
  <p class="greeting" data-v-7ba5bd90>greeting</p>
</template>
<style scoped>
  .greeting[data-v-7ba5bd90]{ color:red; font-weight:bold;}
</style>

CSS 모듈 <style module>은 CSS 모듈로 컴파일되고, CSS 클래스 $style객체의 속성으로 노출한다.

<template>
  <p :class="$style.red">This should be red</p>
</template>
<style module>
  .red{ color: red;}
</style>

결과 클래스는 충돌을 피하기 위해 해시되어 CSS 범위를 현재 컴포넌트로만 지정하는 것과 동일한 효과를 얻습니다. 전역 예외 및 구성과 같은 자세한 내용은 CSS 모듈 사양을 참조 Custom Inject Name 모듈 속성에 값을 제공하여 주입된 클래스 객체의 속성 키를 변경할 수 있다.

<template>
  <p :class="classes.red">red</p>
</template>
<style module="classes">
  .red{ color: red;}
</style>

v-bind() in CSS SFC <style> 태그는 v-bind CSS 기능을 사용하여 CSS 값을 동적 구성 요소 상태에 연결하는 것을 지원한다.

<template>
  <div class="text">hello</div>
</template>
<script>
    export default {
          data(){
              return{
                  color: 'red'
              }
          }
      }
</script>

<style>
.text{ color: v-bind(color);}
</style>

• 컴포넌트를 정의하는 방법은 Single-File Component(SFC)를 사용하는 방법과 문자열 템플릿(String template)으로 정의하는 방법이 있다.
  
  

1. Single-File Component(SFC)

빌드 도구를 사용할 때 컴포넌트는 일반적으로 Single-File Component(SFC)로 정의할 수 있다. SFC는 확장 *.vue를 가진 단일 파일이다.

<template>
</template>

<script>
</script>

<style></style>

이렇게 template, script, style로 나눠져 있다.

1-1. 컴포넌트 등록

• Vue 컴포넌트는 <template>안에서 발견 되었을 때 Vue가 구현 위치를 알 수 있도록 등록해야합니다. 그리고 컴포넌트를 등록하는 방법은 전역(Global) 및 지역(Local) 두 가지가 있다.

1) 전역 등록

• 우리는 app.componet()메서드를 사용하여 현재 Vue 애플리케이션에서 전역적으로 사용할 수 있도록 할 수 있다.

2) 지역 등록

• 전역 등록은 편리하지만 다음과 같은 몇가지 단점이 있다.

1. webpack(또는 Vite)과 같은 빌드 시스템을 사용하는 경우 컴포넌트를 전역 등록하는 것은 컴포넌트를 사용하지 않더라도 계속해서 최종 빌드에 해당 컴포넌트가 포함되는 것을 의미한다. 이는 사용자가 다운로드하는 자바스크립트 파일의 크기를 불필요하게 증가시킨다.

2. 전역 등록을 계속 하게 되면 애플리케이션의 컴포넌트간 종속 관계를 확인하기 힘듭니다. 상위 컴포넌트, 하위 컴포넌트 구분이 힘들면 유지보수를 하기에 매우 어려워지게 된다.

2. 문자열 템플릿(String Template)

빌드 도구를 사용하지 않을 때 컴포넌트는 Vue 옵션인을 포함하는 일반 JavaScript 객체로 정의할 수 있다.

• Bootstrap은 UI Framesork다. 사전에 정의된 CSS를 사용하여 최소한의 노력으로 쉽게 HTML Markup을 도와준다.

터미널을 통해 설치해준다.

npm install bootstrap

main.js에 import를 한다.

import "bootstrap/dist/css/bootstrap.min.css";

createApp(App).mount("#app");
//아래 코드는 마운트 바로 아래에 넣어준다.
import "bootstrap/dist/js/bootstrap.js";

Bootstrap와 같이 Vuerify를 활용해도 괜찮다. https://vuetifyjs.com/en/