✅ Vue Router

1. 세팅 및 라우터 인스턴스 생성

• 설치 : npm install vue-router
• main.js 설정

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

const app = createApp(App);
app.use(router);
app.mount('#app');

// router/index.js

const router = createRouter({
    history: createWebHistory(), // HTML5 History API를 기반으로 하는 라우팅 모드
    routes: [ ]
});

2. router 생성

• 정적 import
  • 장점 : 미리 불러오기 때문에 리소스에 대한 로딩이 빠르다
  • 단점 : 필요없는 페이지에 대한 컴포넌트도 모두 불러온다
• 동적 import
  • 장점 : 필요한 페이지만 불러와서 초기 로딩 속도가 빠르다
  • 단점 : 페이지 이동 시마다 컴포넌트를 불러와야 한다
• vue 파일 내에서 vue-router 관련 import는 따로 하지 않아도, 전역으로 깔려있다.

형식

const routes = createRouter({
  history: // 히스토리 관리 방식식 정의
  routes: // 라우트 객체 포함
});

history 속성

• 지정할 수 있는 값 종류
  • createWebHistory : HTML5 히스토리 모드 사용. 슬래시(/)로 URL 관리
  • createWebHashHistory : 해시 모드 사용. 해시(#)로 URL 관리
• 인자에 baseURL를 넣어 기본 URL 설정 가능

코드

routes: [ // 라우트 정의
  { // 정적 import
    path: '/', // URL 경로
    name: 'Home', // 라우터 고유한 이름
    component: Home, // URL로 접근했을 때 표시될 컴포넌트
  },
  { // 동적 import
      path: '/about',
      name: 'About',
      component: () => import ("@/pages/About.vue"),
      redirect: { name: 'AboutNew' }, // path를 바꾸는 과도기 단계, 리다이렉트 시키기
    },
    {
    // 기존 /about을 이 경로의 이름을 바꾸고 싶을 때
    path: '/about-new',
    name: 'AboutNew',
    component: () => import('@/pages/About.vue'),
    meta: { // 라우트에 대한 추가 정보 제공
      title: 'About',
      key: 'value',
  },
  {
    path: '/profile/:id', // 동적 params
    name: 'Profile',
    redirect: (to) => {
      return {
        name: 'Profile-new',
        params: { id: to.params.id }, // 리디렉션 할 때, 동적 params 전달 방식
        query: { q: to.query.q }, // 리디렉션 할 때, query 전달 방식
      };
    },
  },
  {
    path: '/profile-new/:id',
    name: 'Profile-new',
    component: () => import('@/pages/Profile.vue'),
    props: (route) => ({
        ...route.params, // URL 파라미터를 그대로 props로 전달
        customProp: 'someValue', // 추가적인 props
      }),
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    components: {
        // 동일한 이름의 RouterView로 매칭되어 렌더링
      default: () => import('@/pages/Dashboard.vue'),
      header: () => import('@/components/DashboardHeader.vue'),
      footer: () => import('@/components/DashboardFooter.vue'),
    },
    alias: '/dash', // URL 경로 별칭 설정 (/dashboard, /dash 둘 다 가능, 배열로 여러 개 설정 가능)
  },
  {
    path: '/product',
    name: 'Product',
    component: () => import('@/pages/Product.vue'), // 이게 없으면 묶어주는 역할로만
    children: [ // 하위 path
      {
        path: 'info',
        name: 'ProductInfo',
        component: () => import('@/pages/ProductInfo.vue'),
      },
      {
        path: ':item',
        name: 'ProductItem',
        component: () => import('@/pages/ProductItem.vue'),
        props: true, // URL 파라미터를 props로도 내려줌
      },
    ],
  },
  {
    path: '/:pathMatch(.*)*', // 와일드카드 경로 매칭 (사용자 정의 외 다른 모든 경로)
    name: 'NotFound',
    component: () => import('@/pages/NotFound.vue'),
  },
  {
    path: '/user-:afterUser(.*)', // user-* 형식의 url 매칭
    component: () => import('@/pages/UserGeneric.vue'),
  },
],

3. vue 에 라우팅 적용

라우팅된 컴포넌트 렌더링

<template>
    <RouterView />
</template>

혹은

<template>
    <RouterView name="header" />
    <RouterView />
    <RouterView name="footer" />
</template>

링크 생성

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink :to="{ name: 'About' }">About2</RouterLink> // 이 방식도 가능
    <RouterLink
      :to="{
        name: 'User',
        params: { user: 'mike', id: '1' },
        query: { lang: 'ko' },
      }">
      User
    </RouterLink>
    <RouterLink :to="{ name: 'ProductInfo' }">Product</RouterLink>
    <RouterLink :to="{ name: 'ProductItem', params: { item: '2' } }"
      >Product2</RouterLink
    >
  </nav>
</template>

프로그래밍 탐색

• useRouter 사용
  • Vue Router에서 제공하는 컴포저블(composable) 훅
  • 라우터 인스턴스에 접근할 수 있도록 해주는 훅
  • 프로그래밍적으로 라우팅을 변경하거나, 라우트 탐색 제어
• useRouter로 사용할 수 있는 메서드
  • push
  • replace : 이전 페이지의 히스토리를 남기지 않음
  • forward, back, go

<script setup>
  const router = useRouter();
  const handleMethod = () => {
    //router.push('/');
    //router.replace('/');
    router.push({
      name: 'User',
      params: { user: 'mike', id: '1' },
      query: { lang: 'ko' },
    });
  };
</script>

<template>
  <h1>Not Found</h1>
  <button @click="handleMethod">홈으로 돌아가기</button>
</template>

동적 라우트 파라미터 & 쿼리 스트링

• useRoute 사용
  • 현재 라우트 정보를 가져오는 컴포저블(composable) 훅
  • 현재 경로, 동적 파라미터, 쿼리 문자열 등 현재 라우트와 관련된 정보 접근
• useRoute로 사용할 수 있는 속성
  • path : 현재 경로
  • params : 동적 세그먼트
  • query : 쿼리 파라미터
  • name : 라우트 이름

<script setup>
  const route = useRoute(); // 리액트에서는 훅, vue에서는 컴포져블
  const { id, user } = route.params;
  const { lang } = route.query;

  // 라우트 설정 시, props: true하면 사용 가능
  // props는 params만 가능 (즉, 세그먼트만 가능)
  // query string은 불가
  const props = defineProps({
    user: String,
    id: String,
  });
</script>

<template>
  <h1>User</h1>
  <p>{{ id }} / {{ user }} / {{ lang }}</p>
  <p>{{ props.id }} / {{ props.user }}</p>
</template>

4. 네비게이션 가드

• 라우팅 과정 중에 특정 지점에서 라우팅 전환을 가로채서 사용자 정의 기능을 추가할 때 사용
  • 라우트 접근 제어 가능
  • 다른 라우트로 리다이렉션 가능
  • 라우트 변경 전에 데이터 불러오기 가능

전역 가드

• 모든 라우트가 공통적으로 영향 받음
• 라우트 전환 전 방식 : beforeEach((현재값, 이전값, 이동 함수) => {})
• 라우팅 전환 직전 방식 : router.beforeResolve((현재값, 이전값, 이동 함수) => {})
  • beforeEach로 라우트 확정된 이후 호출
• 라우트 전환 후 방식 : afterEach((현재값, 이전값, 실패 정보}) => {})

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

// 라우트 전환 전 방식
router.beforeEach((to, from, next) => {
    // next를 반드시 호출해야 페이지 이동 가능
    // next(false)로 의도적으로 페이지 이동 막기 가능

    // 권한 체크를 하는 등의 로직
    const isAuthenticated = false;
    if (to.path === '/dashboard', && !isAuthenticated) {
      next('/login')
    }

    // meta 속성을 이용해 탭 이름 변경 가능
    if(to.meta.title) {
      document.title = to.meta.title
    }

    next()
})

// 라우트 전환 직전 발생
router.beforeResolve((to, from, next) => {})

// 라우트 전환 후 실행
router.afterEach((to, from, failure) => {
  // ...
});

라우트별 가드

• 특정 라우트 전환에서만 호출됨
• 라우트 객체 내에서 직접 설정
• beforeEnter(현재값, 이전값, 이동 함수)

{
  path: '/about',
  name: 'about',
  component: () => import('../views/AboutView.vue'),
  beforeEnter: (to, from, next) => {
    // beforeEach와 동일
    // ...

    next()
  },
},

컴포넌트 내 가드

• onBeforeRouteUpdate((미래값, 현재값) => {}) : 동적 경로 매칭 - 동적 세그먼트 값 변경 시 호출
• onBeforeRouteLeave() : 라우트 벗어나기 전 호출

<script setup>
onBeforeRouteUpdate((to, from) => {
  // 동적 세그먼트 값 변경 시 호출
    return true; // 페이지 이동 허용
    return false; // 페이지 이동 금지
}

onBeforeRouteLeave((to, from) => {
    // 라우트 떠나기 전 호출
    return true; // 페이지 전환 허용
    return false; // 페이지 전환 금지
})
</script>

5. 스크롤 동작

• SPA 기반이기 때문에 라우트 전환 시 페이지가 새로고침 되지 않고 DOM만 업데이트 됨. 따라서 페이지가 전환되어도 스크롤이 유지됨
• 스크롤을 다시 상단으로 올리고 싶다면 스크롤 동작 함수 사용 가능
  • scrollBehavior((미래값, 현재값, 스크롤 위치 객체) => {})

const router = createRouter({
    history: ...
  routes: ...
  scrollBehavior((to, from, savedPosition) => {
      // savedPosition은 브라우저의 앞/뒤 버튼을 눌렀을 때만 사용 가능
      // 일반적인 라우트 전환에서는 undefined

      // 브라우저 앞/뒤 버튼 누를 시, 스크롤 유지
      // 그 외 라우트는 맨 위로
      if(savedPosition) return savedPosition;
      esle return { top: 0; }
  })

`

해시 주소를 이용해서 스크롤 이동

scrollBehavior((to, from, savedPosition) => {
    if(savedPosition) return savedPosition;

    // id의 속성값과 to.hash가 일치한 요소로
    // 위치에서 10px 만큼 위로 이동
    // 부드러운 스크롤 이동
    if(to.hash) return { el: to.hash, top:10,  behavior: 'smooth' }
})

✅ Pinia

• Vue의 전역 상태 관리 라이브러리

1. 세팅

• 설치 : npm install pinia
• main.js 설정

const pinia = createPinia(); // pinia 인스턴스 생성
const app = createApp(App);

app.use(pinia); // pinia 인스턴스 등록
app.mount('#app');

2. 스토어

• 애플리케이션의 상태를 중앙에서 관리하기 위한 것
• 보통 stores 폴더를 만들어 관리
• 기본 형태 (셋업 스토어)

export const useCountStore = defineStore('countStore', () => {});

예시

export const useCountStore = defineStore('countStore', () => {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    const increment = () => count.value++;

    return { count, doubleCount, increment };
});

3. 전역 상태 사용

• store를 호출하여 사용
• 객체 비구조화 할당
  • 반응형이 깨져 화면에 업데이트가 되지 않음. 함수는 가능
  • storeToRefs로 해결 가능

<script setup>
  const countStore = useCountStore();
</script>
<template>
  <p>{{ countStore.count }}</p>
  <button @click="countStore.increment">증가</button>
</template>

<script setup>
  const countStore = useCountStore();
  const { count, doubleCount } = storeToRefs(countStore);
  const { increment } = countStore;
</script>
<template>
  <p>{{ count }} / {{ doubleCount }}</p>
  <button @click="increment">증가</button>
</template>

📌 출처

수코딩(https://www.sucoding.kr)

1. 슬롯이란

• 컴포넌트의 특정 영역을 대체하는 기술
• 리액트의 Children과 동일한 역할
  • 부모가 템플릿 조각을 자식 컴포넌트에 전달
  • 자식 컴포넌트가 전달받은 템플릿 조각을 렌더링할 수 있게 하는 기능
• 슬롯을 설정해두지 않으면 자식 컴포넌트로 감싸도 렌더링되지 않음
• 부모 컴포넌트에서 동일한 슬롯 이름으로 여러번 호출 시, 마지막 요소만 적용

2. 슬롯 사용 방식

이름이 없는 슬롯

• <slot></slot>
• 자식 컴포넌트 사이에 들어가는 콘텐츠가 <slot></slot> 대신에 들어가게 됨

// 부모 컴포넌트
<Button>버튼</Button>

// Button 컴포넌트
// <slot></slot> 대신 버튼이 들어감
<slot></slot>

이름이 있는 슬롯

• <slot name="값"></slot>
• 부모 컴포넌트에서 v-slot으로 전달하는 값과 자식 컴포넌트의 name이 동일한 곳에 콘텐츠가 대신 들어감
• 단, 부모 컴포넌트에서의 v-slot 는 반드시 <template> 태그에 선언해야 함
• 일치하는 슬롯이 없으면 보여지지 않음
• 축약형 : v-slot:값 ⇒ #값

// 부모 컴포넌트
<template v-slot:값>
    어쩌구 저쩌구
</template>

// Layout 컴포넌트
<slot name="값"></slot>

혼합 슬롯

• 이름이 없는 슬롯 + 이름이 있는 슬롯을 함께 사용하는 것
• <slot></slot>은 name="default"가 자동으로 적용된 상태
• v-slot 혹은 #으로 넘어오는 값이 유효하지 않거나 없는 경우, default로 정의된 slot에 들어감

<slot name="name"></slot>
<slot></slot> // 디폴트

슬롯의 기본값

• 부모에서 콘텐츠 없이 자식 컴포넌트만 호출한 경우, 보여질 기본값
• 콘텐츠가 있다면 기본값은 적용되지 않음

// 부모 컴포넌트
<Child></Child> // "기본값"으로 렌더링
<Child>안녕</Child> // "안녕"으로 렌더링

// Child 컴포넌트
<slot>기본값</slot>

동적 슬롯

• 슬롯의 이름을 동적으로 지정하는 것
• 동적으로 지정한다 === 슬롯의 이름을 변수로 지정해 넣는다
• 자식 컴포넌트의 slot 이름은 지정이 되어야함
• v-slot="데이터" 아님 유의

<template v-slot:[dynamicName]></template>
<template #[dynamicName]></template>

슬롯 기본 범위

• 정리) 스타일, 데이터 모두 기본적으로 부모 컴포넌트의 영향을 받음
• 슬롯 자리에 들어가 렌더링 되는 요소는 각각 고유한 범위가 있음
• 슬롯의 스타일은 부모 컴포넌트의 영향을 받음
  • 부모에서 사용된 요소들은 자식 컴포넌트 스타일이 적용되지 않음
• 슬롯의 데이터는 부모 컴포넌트의 영향을 받음
  • 부모에는 없으면서 자식에는 있는 데이터를 사용하는 경우에도 전혀 적용되지 않음
• 슬롯의 범위를 지정하면 자식 컴포넌트의 데이터 사용 가능

슬롯 범위 지정

• 자식 컴포넌트의 범위에 접근할 수 있는 방법 제공
  • 부모에 전달할 데이터를 슬롯에 v-bind로 미리 정의 (computed를 포함한 모든 데이터 가능)
  • 부모는 전달된 데이터를 v-slot을 통해 객체 형식으로 받음

// 자식 컴포넌트
// 데이터는 이미 정의되었다고 가정
<slot :childData="childData"></slot>

// 부모컴포넌트
// 자식 컴포넌트가 전달하는 데이터들은 객체 형식으로 받음
// 받을 데이터 명은 원하는대로 지정 가능
<Child v-slot="myKey">{{ myKey.childData }}</Child>

// 객체 분할로 사용 가능
<Child v-slot="{ childData }">{{ childData }}</Child>

• 이름있는 슬롯으로 사용할 경우 아래와 같음

// 자식 컴포넌트
<slot name="section" :childData="childData"></slot>

// 부모 컴포넌트
<Child #section="myKey">{{ myKey.childData }}</Child>
<Child #section="{ childData }">{{ childData }}</Child>

✅ 컴포지션 API

• Vue3에 추가된 문법 ⇒ setUp() 훅을 통해 사용 가능
• Vue3.2에 추가된 설탕 문법 ⇒ <script setup></script>

1. 반응형 데이터, ref와 reactive

• ref : 기본 자료형을 반응형 데이터로 정의할 때
• reactive : 참조 자료형을 반응형 데이터로 정의할 때
  • 기본 자료형은 변경 감지 안 됨

script 내부에서 반응형 데이터 접근

• ref로 정의된 데이터는 value를 통해서 접근
• reactive로 정의된 데이터는 일반 객체처럼 접근

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

    const count = ref(0);
    const array = reactive([1, 2, 3]);

    console.log(count.value, array[0]);
</script>

template 내부에서 반응형 데이터 접근

<template>
  <div>{{ count }}</div>
  <div>{{ array[0] }}</div>
</template>

2. 계산된 속성, computed

• 데이터 가공, 캐싱에 사용 (읽기 전용)
• computed 함수 사용
• script 태그 내부에서 사용할 때, value를 통해서 접근
• template 태그 내부에서는 바로 사용

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

  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

  console.log(doubleCount.value)
</script>
<template>
  <div>{{ doubleCount }}</div>
</template>

• computed 속성을 직접 변경하는 방법 ⇒ get과 set 함수로 세분화

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

  const firstName = ref("Minha");
  const lastName = ref("An");

  const fullName = computed({
      get() {
          return `${lastName.value} ${firstName.value}`
        },
      set(value) {
          [lastName.value, firstName.value] = value.split(" ");
        },
  });
</script>
<template>
  <div>{{ doubleCount }}</div>
</template>

3. 함수

• 함수 선언식, 함수 표현식, 화살표 함수 모두 사용 가능
• ref, reactive, computed 모두 접근 가능

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

    const count = ref(0);
    const increment = count.value++;
</script>

4. 감시자 속성 1 - watch

• 반응형으로 선언된 데이터의 값이 변경되었을 때, 이를 감시하여 코드를 실행시키는 속성
• 인자 목록
  • 첫번째 인자 : 감시할 반응형 데이터
  • 두번째 인자 : 콜백함수 (감시한 데이터가 변경될 때 실행 / 현재값, 이전값이 순서대로 인자로 들어옴)
  • 세번째 인자 : (선택) 보통 deep 여부 선택.
• 참조 차료형을 감시하는 경우, 현재값과 이전값이 동일한 점 유의

ref 감시

• 변수 자체를 감시
• 기본 : 참조 자료형을 ref로 선언하는 경우, 변경 감지 불가
• { deep: true } 설정 : 참조 내부까지 변경 감지

reactive 감시

• 참조 자료형 감시
• 기본 : 참조 내부까지 변경 감지

옵션

• deep(true) : 참조 내부까지 감시 (ref)
• immediate(true) : 처음 디폴트 값을 넣을 때 부터 감시 및 실행 (기본값은 변경될 때만)
• once(true) : 최초 한 번만 실행
• flush(선택값) : 감시자가 실행되는 시점 설정
  • pre : (기본값) 감시자가 DOM 업데이트 이전에 실행
  • post : 감시자가 DOM 업데이트 후에 실행
  • sync : 반응형 데이터가 변경되는 즉시 동기적으로 실행 (DOM에 반영 전)

5. 감시자 속성 2 - watchEEffect

• watch와 비슷한 역할
• watch와 다른 점
  • deep 옵션 사용하지 않음
  • immediate 옵션을 true로 고정 ⇒ 처음 디폴트 값을 넣을 때 부터 감시 및 실행
  • 감시 대상을 따로 지정하지 않으나, 콜백 함수 내에서 사용하고 있는 반응형 데이터들을 자동 감시

watchEffect(() => {
  console.log(count.value); // count 변수 감시
  console.log(state.count); // state 객체 중에서 count의 변경 감시
  console.log(state); // state의 참조값 변경 감시

6. 감시자 속성 3 - watchPostEffect

• watchEffect와 flush를 ‘post’의 결합
• DOM이 갱신된 후 실행

7. 라이프사이클 훅

• Options API에서 사용하던 beforeCreate()와 create()는 setup 영역으로 대체
• 나머지 훅은 on + 기존 메서드명 으로 변경

8. props 전달

• defineProps() 함수를 사용하여 props 받음

<script setup>
  import { defineProps } from 'vue';
  const props = defineProps({
      count: Number // 여러 자료형을 지정하고 싶다면 [Number, String]
      text: {
        type: String,
        default() { return '기본' }
    })
</script>
<template>
    <p>{{ props.count }}</p>
    <p>{{ props.text }}</p>
</template>

9. 이벤트 받기

• defineEmits() 함수를 사용하여 이벤트를 받음

<script setup>
  import { defineEmits } from 'vue';
  const emit = defineEmits(['event1', 'event2'])

  const handler = () => {
    emit('event1')
  }
</script>
<template>
    <button @click="handler">버튼1</button>
    <button @click="emit('event1')">버튼2</button>
    <button @click="emit('event2', 10, [20])">버튼3</button>
</template>

10. provide & inject

• props drilling을 방지할 수 있는 방법
• props를 사용하지 않고 데이터를 전달할 수 있는 방법
• provide를 사용한 컴포넌트부터 하위 컴포넌트들이 inject로 접근해서 사용 가능
• 형식
  • provide(고유한 식별자, 제공할 데이터) ⇒ 데이터는 일반, ref, reactive, coumputed 모두 가능
  • const value = inject(고유한 식별자, 기본값) ⇒ 기본값은 생략 가능

<script setup>
    const count = ref(0);
    const array = reactvie([1, 2, 3])
    const increment = () => (count.value++)

    provide('provideCount', count)
    provide('provideArray', array)
</script>

<script setup>
    const count = inject('provideCount', 0);
    const array = inject('provideArray');
</script>

✅ 플러그인

unplugin-auto-import

• 모든 컴포넌트에서 메서드를 import 하지 않아도 사용 가능

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [ ..., AutoImport({ imports: ['vue'] })],
  ...

📌 출처

수코딩(https://www.sucoding.kr)

1. 사용자 정의 속성

• 컴포넌트 호출과 함께 속성 정의 ⇒ 원하는 값 전달
• 기본 자료형 : 문자열(String) 자료형
• String형이 아닌 다른 데이터 타입으로 전달받고 싶다면
  • v-bind 디렉티브로 바인딩해서 정의 (ex. :age="20")
  • 단 문자열 자료형을 v-bind로 넘겨줄 땐, 반드시 백틱으로 한 번 감싸야 함

호출 방식

<ChildComponent name="Minha" age="20" />
<ChildComponent :name="`Minha`" :age="20" />

속성 받는 방식

• 2가지 방식
  • props 속성을 배열로 할당
  • props 속성을 객체로 할당 (간단하게 자료형만 지정하거나 더 상세하게 지정 가능)
• 속성값은 전달받은 속성명 그대로 사용
• 전달받은 값은 data 속성처럼 사용 가능
• 부모 컴포넌트가 전달해준 속성을 자식 컴포넌트가 받지 않는다면
  • String형 데이터로 전달한 속성은 자식 컴포넌트의 루트 요소의 속성으로 적용됨
  • 루트 요소가 2개 이상이면 적용되지 않음
• props 속성
  • type : 속성의 타입 지정 (강제성이 없기 때문에 경고만 띄워짐)
    • String, Number, Array. Object, Boolean, Function, Symbol
  • default : 속성을 받지 못할 때의 기본 값 (값 혹은 함수로 지정)
  • required : 속성 전달의 필수 여부
  • validator : 속성 값의 유효성 검사 (Boolean 반환, 유효하지 않으면 경고 발생)

<script>
  export default {
    props: ['name', 'age']
  }
</script>

<script>
  export default {
    props: {
      name: String,
      age: {
        type: Number, // 여러 타입 지정 가능 => [Number, String]
        default() {
          // 로직이 필요할 때 작성
          return 10
        },
        required: true
      }
    }
  }
</script>

속성 이름 작성 시 유의사항

• 컴포넌트 속성은 케밥 케이스에 따라 작성 (kebab-case)
• data 옵션 속성이나, props 옵션 속성에서는 카멜 케이스에 따라 작성 (calmelCase)
  • 컴포넌트 속성명을 케밥 케이스로 작성했어도, 받을 때 카멜 케이스로 받을 수 있음

사용자 정의 속성 기본값

• 속성 지정만 하고 값을 입력하지 않으면 자동으로 true(Boolean)로 값이 정해짐
• 자식 컴포넌트에서 특정 속성을 Boolean으로 처리 & 부모가 속성 지정을 하지 않으면 false로 처리

2. 사용자 정의 이벤트

• 컴포넌트에 함수를 전달하는 방법 2가지
  • props로 전달
  • 사용자 정의 이벤트로 전달
• v-on 디렉티브로 특정 이벤트 타입에 해당하는 이벤트 연결 가능
  • 컴포넌트에 전달하는 것이기 때문에 Web API에 정의된 이벤트 이상으로 전달 가능
  • 이벤트 타입은 사용자가 직접 지정
  • 이벤트 핸들러도 당연히 사용자가 직접 지정

호출 방식

<script>
  // import ~
  export default {
    components: {
      ChildComponent,
    },
    data() {
      return { };
    },
    methods: {
      printHello() {
        console.log('Hello');
      },
    },
  };
</script>
<template>
    <ChildComponent @print-hello="printHello" />
</template>

함수 받는 방식

• props로 전달 : props 옵션 객체에 할당
• 이벤트로 전달 : emits 옵션에 할당 (꼭 하지 않아도 되나, 하기를 권장)
  • 배열 할당, 객체 할당 가능
  • 객체 할당의 경우 유효성 검증이 필요할 때 사용

// emits 옵션 - 배열로 할당
export default {
    emits: ['printHello'],
};

// emits 옵션 - 객체로 할당
export default {
  emits: {
    printHello: null;
    printHello() {
      // 검증 로직
  },
};

함수 사용 방식

• $emit() 내장 메서드를 이용해 함수 사용
• 인라인 핸들러 방식
  • <button @onClick="$emit('printHello')">클릭</button>
• 메서드 핸들러 방식
  • methods 옵션 객체에서 this.$emit('printHello') 사용하는 메서드 정의
  • 새롭게 만든 메서드를 이벤트 핸들러로 지정
• 인자 전달은 $emit() 내장 메서드의 2번째부터 인자로 전달
  • ex) $emit('printHello', value1, value2)

✅ provide와 inject

• props drilling을 방지할 수 있는 방법
• props를 사용하지 않고 데이터를 전달할 수 있는 방법

1. provide

• 컴포넌트에서 정의한 데이터(함수도 가능)를 하위 컴포넌트에 공유하는 기능
• provide 옵션 속성 이용
  • 객체 형식 가능 ⇒ data나 computed 활용 불가
  • 함수 형식 가능 ⇒ this 키워드를 통해 data나 computed 활용 가능

provide: {
  message: "Hello",
  name: "Minha",
}

provide() {
  return {
    message: "Hello",
    name: this.name,
    // 함수 형식일 때만 data 속성, computed 속성에 있는 값 사용 가능
  }
}

2. inject

• 상위 컴포넌트에서 provide 옵션 속성으로 제공하는 데이터를 가져오는 기능
• inject 옵션 속성 이용
  • 배열 형식 가능
  • 객체 형식 가능 ⇒ 다른 이름으로 받기 가능
• 하위 컴포넌트의 provide는 inject로 받을 수 없음
  • 상위 컴포넌트가 먼저 렌더링 → 하위 컴포넌트 렌더링
  • 하위 컴포넌트가 렌더링 되기 전에 상위 컴포넌트가 렌더링되어 참조 시도 ⇒ 실패

inject: ['message', 'name'],

inject: {
  newKey: {
    from: 'message', // 다른 이름으로 받기 가능
    default: 40, // 기본값 설정
  },
},

3. 반응형

🔍 반응형이란? 데이터 변경에 따라 UI를 자동으로 업데이트하는 메커니즘

• Vue는 데이터와 DOM 간의 연동을 자동으로 처리됨
  • data : 객체에 정의된 모든 속성은 기본적으로 반응형
  • computed : 의존하는 데이터가 변경될 때만 다시 계산 (캐싱)
  • watch : 특정 데이터가 변경될 때 실행
• 데이터가 변경되면 이를 감지하고 UI를 다시 렌더링
• 궁금) props도 반응형으로 동작?
  • props : 부모 컴포넌트에서 반응형이면 자식 컴포넌트에서도 반응형
• 궁금) 반응형으로 동작하지 않는 건 어떤 것?
  • 데이터가 변경되어도 이를 감지하지 못하고 UI 업데이트 발생 X
  • 데이터가 변경되고 있긴 함

provide와 inject에서의 반응형

• provide에 데이터를 일반 객체로 제공하면 반응형으로 동작하지 않음
• 데이터를 computed로 감싸야 inject로 받는 곳에서 반응형으로 동작

provide() {
  return {
    value: computed(() => this.value)
  }
}

4. Symbol 활용

• 여러 상위 컴포넌트에서 동일한 이름으로 데이터를 제공하고 있다면?
  • 가장 가까운 컴포넌트의 값을 받아옴
• 그런 일이 없도록 하려면?
  • Symbol 활용
  • js 파일 하나 만들어서 고유한 키값을 Symbol로 만들고 모아두기
  • Symbol을 키로 하여 provide 객체에 데이터 정의
  • inject는 객체로 정의하여 사용하고 싶은 키로 변경

export const key = Symbol();
export const func = Symbol();

// key랑 func import 하기
provide() {
  return {
    [key]: computed(() => this.value),
    [func]: this.func
  }
}

// key랑 func import 하기
inject: {
  // Symbol 활용 시, 반드리 객체 형태로
  newKey: { from: key },
  fn: { from: func },
}

✅ 컴포넌트 참조

자식 컴포넌트가 부모 컴포넌트로 값을 전달할 방법은 없음 그러나 부모 컴포넌트가 자식 컴포넌트의 값을 참조할 방법은 있음

1. 자식 컴포넌트 참조

• 자식 컴포넌트 호출 시, ref 속성 사용
  • <ChildComponent ref="ref명" />
  • ref 속성으로 등록한 ref명은 $refs 라는 객체에 등록 (ref명 중복 주의)
  • $ref 객체를 통해 자식 컴포넌트의 data, computed, methods 옵션 속성 접근 가능
  • console.log(this.$refs.ref명.data명) / this.$refs.ref명.method명()
  • ref를 통해 접근한 data는 직접 조작도 가능 (computed는 readonly이므로 조작 불가)
• ref 참조하는 시점은 자식 컴포넌트가 마운트 된 이후여야 함
  • 그 전에 ref를 참조하면 에러가 발생하지는 않으나, 자식 컴포넌트와 미연결 상태
• 그러나 자식 컴포넌트의 데이터에 직접 접근하거나 조작하는 건 권장하지 않음

2. 부모 컴포넌트 참조

• $parent 객체를 통해 부모 컴포넌트 접근 가능 (따로 설정 필요 X)
  • 자식 컴포넌트와 내용 동일 (접근 가능, 직접 조작 가능, 함수 호출 가능)
  • console.log(this.$parent.data명)
• 역시나 권장하지 않음

📌 출처

수코딩(https://www.sucoding.kr)

1. 전역 컴포넌트 등록

• main.js에서 컴포넌트 등록
• import문 없이 언제든지 어디서든 자유롭게 사용 가능
• 컴포넌트 이름 마음대로 지정 가능
• 장점 : 별도의 컴포넌트 등록 과정없이 쉽게 사용 가능
• 단점 : 컴포넌트가 필요없어도 불러옴

import { createApp } from 'vue';
import App from './App.vue';
import First from '@/components/First.vue';
import Second from '@/components/Second.vue';

const app = createApp(App);

// 컴포넌트 등록 1 - 하나씩 등록
app.component('First', First);
app.component('Second', Second);

// 컴포넌트 등록 2 - 체이닝 등록
app.component('First', First).component('Second', Second);

app.mount('#app');

2. 지역 컴포넌트 등록

• script 태그 내에서 컴포넌트 import
• components에 불러온 컴포넌트 등록

<script>
  import First from './components/First.vue';
  import Second from './components/Second.vue';

  export default {
    name: 'App',
    components: {
      First,
      Second,
    },
    data() {
      return {};
    },
  };
</script>

✅ 그 외 컴포넌트 관련

1. 컴포넌트 스타일 범위 - scoped 속성

• scoped 속성을 설정하면 해당 컴포넌트 내부에서만 스타일 적용
• 뷰의 특징) 루트 요소 공유
  • 설정한 스타일 요소가 자식 컴포넌트의 루트 요소로 있을 경우 scoped여도 반영됨
  • 반영되기를 원하지 않는다면 다른 태그로 한 번 래핑해야 함

2. 컴포넌트 props 전달

• 자식 컴포넌트의 속성값으로 전달
• 자식 컴포넌트는 props로 전달받은 속성을 배열로 등록
• props로 받지 않는 속성들은 자식의 루트 요소에 속성값으로 적용
  • 루트가 여러개라면 받지 못함

✅ 감시자 속성

1. watch 디렉티브

• 감시자 속성으로, 특정 데이터의 변화를 감지하여 특정 로직 수행
• watch 내부에 감시하고자 하는 데이터와 동일한 이름으로 메서드 정의
  • 감시하고 있는 데이터가 변경될 때마다 실행
  • 인자로 ‘현재값’과 ‘이전값’을 순서대로 받음

watch: {
  count(cur, prev) {
    console.log(cur, prev)
  }
}

2. watch 디렉티브 - 깊은 사용법

• 참조 자료형인 객체와 배열은 데이터가 변경되어도 watch로 감지 불가
  • deep을 true로 설정하여 감지되도록 설정
• 단, 인자로 받던 ‘현재값’과 ‘이전값’은 모두 ‘현재값’으로만 받음

watch: {
  array: {
    handler(cur, prev) {
      console.log(cur, prev)
    },
    deep: true,
  }
}

✅ Vue의 생명주기(lifecycle)

1. 단계

• setup
• beforeCreate : 옵션스 API 초기화 직전
• created : 옵션스 API 초기화 직후 및 템플릿 컴파일 직전
  • 보통 여기서 API 호출을 많이함 (beforMount보다 조금 더 빠르기 때문)
• beforeMount : 마운트 직전
• mounted : 마운트
• beforeUpdate : 데이터 변경 직전 (그러나 출력할 땐 이미 변경된 값으로 나옴)
• updated : 데이터 변경
• beforeUnmount : 마운트 해제 직전
• unmounted : 마운트 해제

📌 출처

수코딩(https://www.sucoding.kr)

• Vue가 사용중인 아키텍처

1. Model

• 애플리케이션의 데이터
• data 객체로 관리
• 변경 시, ViewModel에 통보

2. ViewModel

• Model과 View를 연결하는 중간 역할
• computed , methods , watch 같은 기능을 통해 데이터 처리
• View와 동기화

3. View

• 사용자와 상호작용하는 UI 부분
• v-bind , v-model , v-for , v-if 등의 디렉티브 사용
• ViewModel과 자동 동기화

🔌 이벤트

1. v-on 디렉티브

• 형식 : v-on:이벤트타입="이벤트 핸들러"
• ex) v-on:click="clickHandler"
• 축약 가능 : @click="clickHandler"
• 이벤트 객체 전달 가능 : @click="clickHandler($event)"
• 인자 전달 가능 : @click="clickHandler(10)"
• 이벤트 객체, 인자 함께 전달 가능 : @click="clickHandler($event, 10)"
• 이벤트 핸들러 없이 직접 조작 가능
  • @click="count = count + 1"
  • @input="($event) => (query = $event.target.value)"

이벤트 타입

• click : 클릭 핸들러
• input : 입력 핸들러
• keyup : 키 입력 핸들러

2. methods 옵션

• data 속성을 정의한 것처럼 methods 속성 정의
• methods 내부에 메서드 정의하듯이 이벤트 핸들러 및 함수 정의
• data 접근을 위해서는 this.데이터명으로 접근

3. 수식어

• 리액트에서는 없는 개념으로, 이벤트에 보조적인 기능을 부여해주는 것
• 형식 : v-on:이벤트타입.수식어="이벤트 핸들러"
• 수식어 종류
  • prevent , once , enter 등
  • 굉장히 많음
  • 문서

예시 - once

• 이벤트 핸들러가 딱 한 번만 실행되도록 함
• <button @click.once="decrease">감소</button>
  • 무한으로 클릭해도 오로지 딱 한 번만 실행됨

예시 - prevent

• 이벤트의 기본 동작을 중단시킴
• <a href="http://www.naver.com" @click.prevent>네이버</a>
  • 링크 이동이 안됨

예시 - 입력키

• 특정 입력키를 눌러야 이벤트 발생
• @keyup.enter="handleKeyup"
  • enter를 눌러야 실행
• @keyup.ctrl.enter="handleKeyup"
  • ctrl를 누른 상태에사 enter를 눌러야 실행

예시 - 마우스 버튼

• 지정한 특정 마우스 버튼을 클릭해야 이벤트 핸들러가 실행되도록 함
• 종류 : left, right, middle
• <button @click.right="decrease">감소</button>
  • 오른쪽 마우스 클릭을 해야 decrease 실행
  • 왼쪽 마우스 클릭으로는 반응하지 않음

🔌 메모이제이션

1. v-memo 디렉티브

• 형식 : v-memo="[name]"
• 배열 안에 있는 데이터들 중 하나라도 바뀌어야 변경된 값을 반영

// age나 gender가 바뀌어도 반영되지 않음
// name이 바뀌어야 그동안 반영되지 않았던 다른 변경사항들도 함께 반영
<div v-memo="[name]">
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <h1>{{ gender }}</h1>
</div>

🔌 computed

• 데이터를 기반으로 어떠한 가공을 해야할 때 주로 사용 (데이터 가공은 여기서 하는 것을 권장)
• data 속성과 methods 속성을 정의한 것처럼 computed 속성 정의
• computed 내부에 메서드 정의하듯이 속성 정의
• 메서드로 정의하나, 메서드가 아니기 때문에 파라미터 전달 불가능
  • 오로지 데이터로만 가공할 때 사용
• 읽기 전용이므로 메서드 내에서 변경 및 할당 불가
• 재사용할 때, 내부적으로 캐시되어 있는 데이터로 출력됨
  • 참조하고 있는 데이터가 변경되면 캐싱을 풀고 다시 계산 & 캐싱
• 그래도 변경하고 싶다면 getter와 setter로 설정 가능

computed: {
  fullName: {
    get() { ... }
    set(value) { ... }
  }
}

🔌 그외

1. 한글은 조합문자

• 영어와는 다르게 한글은 입력한 글자가 바로 한단계씩 느리게 반영됨
  • 입력 중인 input 태그에는 문제없음
  • input에 입력된 내용을 바로 다른 방식으로 출력할 때 문제
• 그래도 제출할 땐 누락없이 제출됨 (focus out 되면서 마저 반영하고 제출되기 때문)
• 위에 상황 때문에 글자 개수를 제대로 인식하지 못하는 문제 발생
  • v-model를 사용 → v-bind로 value에 넣고 input 이벤트 사용
• 그러나 사용자 입력값을 실시간으로 확인할 필요가 없을 때는 딱히 문제되지 않음

📌 출처

수코딩(https://www.sucoding.kr)

1. v-for

배열

• 값만 참조 : v-for="value in array"
• 값 & 인덱스 참조 : v-for="(value, index) in array"
• 배열 처리
  • 필터 : v-for="value in array.filter(...)"
  • 포함 : v-for="value in array.includes('a')"
  • 하던대로!

객체 배열

• 값의 속성 접근 : <li v-for="value in array">{{ value.name }}</li>

객체

• 값과 키 참조 : v-for="(value, key) in obj"

template 태그

• 최상위의 template 태그는 vue의 컴포넌트를 하나로 묶는 역할을 한다. (하나만 존재)
• 최상위의 template 태그 안에 template 태그가 존재할 수 있다.
  • 이때, template 태그 자체는 DOM에 렌더링되지 않는다.
• <template *v-for*="option in product.options"><p>{{ option.name }}</p></template>

2. v-model

• v-model로 폼 요소를 다룸
• 입력한 요소의 값을 가져올 때 사용
• script 태그의 데이터와 template 태그의 HTML 요소가 양방향으로 연결됨
  • 폼을 이용해 값이 변경될 경우, script 태그의 데이터에도 변경된 값이 적용됨

input

<label for="uid">
  <span>아이디</span>
  <input v-model="uid" type="text" id="uid" />
</label>

textarea

<label for="description">
  <span>상세내용</span>
  <textarea v-model="description" id="description" />
</label>

checkbox

<div>
    <label>
      <span>Seoul</span>
      <input
          v-model="cities"
        type="checkbox"
        id="seoul" />
    </label>
    <label>
      <span>Incheon</span>
      <input
          v-model="cities"
        type="checkbox"
        id="incheon" />
    </label>
    <label>
      <span>Busan</span>
      <input
          v-model="cities"
        type="checkbox"
        id="busan" />
    </label>
</div>

radio

<label>
    <input
        v-model="gender"
        type="radio"
        name="gender"
        value="male"
    />
    male
</label>
<label>
    <input
        v-model="gender"
        type="radio"
        name="gender"
        value="female"
    />
    female
</label>

range

<label>
  <input
    v-model="range"
    type="range"
    min="0"
    max="100"
  />
</label>

select-option

<label>
    아이템
    <select v-model="selectedItem">
        <option value="item 1">item 1</option>
        <option value="item 2">item 2</option>
        <option value="item 3">item 3</option>
    </select>
</label>

🎨 CSS 적용하기

1. 인라인 스타일

<template>
    <h1 style="color: red; font-weight: bold;">인라인 스타일</h1>
</template>

2. v-bind 디렉티브

<script>
    export default {
        data() {
            return {
                color: 'red',
        weight: 'bold',
            }
        }
    }
</script>
<template>
    <h1 :style="{ color: color, fontWeight: weight }">v-bind 디렉티브</h1>
</template>

3. 내부 스타일

• scoped : 선택 가능한 설정
  • 설정하지 않으면 모든 컴포넌트에 적용
  • 설정하면 해당 컴포넌트에만 적용

<template>
    <h1>내부 스타일</h1>
</template>
<style scoped>
    h1 {
        color: red;
    }
</style>

4. 외부 스타일

• css 파일을 따로 작성하는 방법
  • 보통 뷰에서는 src/assets/css/ 안에 작성함

// index.css
h1 {
    color: red;
}

<style>
    @imort '../src/assets/index.css';

    // 혹은 아래와 같이 alias로 사용 가능
    @import '~/index.css';
</style>

alias 적용

// vite.config.js

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': fileURLToPath(new URL('./src/assets', import.meta.url)),
    },
  },
});

🎨 CSS 라이브러리 적용하기

1. BootStrap

• 설치 ⇒ npm install bootstrap
• 최상위에 import문 추가
  • import 'bootstrap';
  • import 'bootstrap/dist/css/bootstrap.css';

2. Tailwind CSS

• 평소 하던대로 (프레임워크 가이드에 맞춰서 설정)
• tailwind.config.js에서 파일 확장자에 vue 추가

3. SASS

• 설치 ⇒ npm install --save-dev sass sass-loader
• style 태그에 scss 적용 가능 ⇒ <style lang="scss" scoped>...</style>

4. Styled Components

• Vue Styled Components
• 설치 ⇒ npm install @vue-styled-components/core
• script 태그 추가 ⇒ <script setup> 여기에 스타일 컴포넌트 작성 </script>

📌 출처

수코딩(https://www.sucoding.kr)

1. fetch

• HTTP 요청을 보내는 데 사용되는 도구
• 브라우저에서 기본적으로 제공하는 API
• 따로 설치할 필요 없음

const getData = async () => {
  const response = await fetch("url")
  const data = await response.json();
}

2. axios

• HTTP 요청을 보내는 데 사용되는 도구
• 따로 라이브러리를 설치해야 함
• 자동으로 json을 적용하여 response 객체를 바로 반환 (편리)
• fetch에서는 없는 기능들 제공

const getData = async () => {
  const { data } = await axios.get("url");
}

3. CRUD

• POST : 데이터 추가
• PUT : 데이터 수정 (데이터 식별을 위한 고유 아이디를 제외한 모든 데이터 수정)
• PATCH : 데이터 수정 (일부 내용만 수정)
• DELETE : 데이터 삭제

🪁 JWT Token

1. 로그인 및 토큰 데이터를 전역 상태로 관리

import { create } from "zustand";

interface AuthStore {
  isLoggedIn: boolean;
  accessToken: string | null;
  login: (accessToken: string) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthStore>((set) => ({
  isLoggedIn: false,
  accessToken: null,
  login: (accessToken: string) => set({ isLoggedIn: true, accessToken }),
  logout: () => set({ isLoggedIn: false, accessToken: null }),
}));

2. 액세스 토큰을 API 요청에 액세스 토큰 담아 전송

export const axiosInstance = axios.create({
  baseURL: `${import.meta.env.VITE_API_URL}`,
  withCredentials: true,
});

axiosInstance.interceptors.request.use((config) => {
  const token = useAuthStore.getState().accessToken;
  if (token) {
    config.headers["Authorization"] = `Bearer ${token}`;
  }
  return config;
});

3. 액세스 토큰이 없어 에러가 발생, 리프레시 토큰으로 재발급하고 재요청

let retry = false;

axiosInstance.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    if (error.response?.status === 403 && !retry) {
      // retry를 설정해야 한 번만 실행됨. 그렇지 않으면 무한 루프에 빠짐
      console.log("token 실패");
      retry = true;
      try {
        const { data } = await axiosInstance.post("/token");
        console.log(data);
        useAuthStore.setState({
          accessToken: data.accessToken,
          isLoggedIn: true,
        });
        originalRequest.headers["Authorization"] = `Bearer ${data.accessToken}`;
        // 다시 설정해주고 원래 요청으로 보내주기
        return axiosInstance(originalRequest);
      } catch (err) {
        console.log(err);
      }
    }
  }
);

4. 새로고침하면 전역 상태로 관리하던 액세스 토큰이 날라가는 문제

• 리프레시 토큰으로 액세스 토큰 다시 받아오기
• App.tsx에서 useEffect를 이용해 첫 렌더링 시, 토큰 발급하는 api 호출

5. 리프레시 토큰을 API 요청에 함께 보내는 방법

• withCredentials : HTTP 요청에서 쿠키, 인증 헤더, 도는 기타 자격 증명을 포함하도록 설정하는 옵션
  • axios에서 withCredentials를 true로 설정하면, 클라이언트와 서버 간의 요청에 자격 증명 포함 가능
  • 자격 증명을 필요로 하는 경우에만 true로 설정 (리프레시 토큰 받을 때, 보낼 때)
• 이 방식 말고
  • Authorization 헤더에 토큰을 담아 전송하는 방식도 있음

6. Private Route 구현

• 로그인 여부에 따라 유저의 접근을 제한해야 하는 경우

import { useEffect, useState } from "react";
import { Outlet, useNavigate } from "react-router";
import { useAuthStore } from "../stores/authStore";

export default function Private() {
  const navigate = useNavigate();
  const [show, setIsShow] = useState(false);
  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
  useEffect(() => {
    if (!isLoggedIn) {
      navigate("/login");
      return;
    }
    setIsShow(true);
  }, []);

  // show를 사용한 이유는 찰나의 순간 보일 수도 있기 때문에 막은 것
  return <>{show && <Outlet />}</>;
}

📌 출처

수코딩(https://www.sucoding.kr)

• 리액트에 내장되어 있는 라이브러리
• 리액트 컴포넌트를 같은 문맥(Context)으로 묶어, 데이터 공유를 위한 일관된 인터페이스 제공

1. 타입 생성

interface User {
  name: string;
  age: number;
}

interface AuthContextType {
  user: User | null;
  isLoggedIn: boolean;
  login: (user: User) => void;
  logout: () => void;
}

2. Context 객체 생성

// contexts/AuthContext.ts

import { createContext } from "react";

export const AuthContext = createContext<AuthContextType | null>(null);

3. 생성한 Context 객체의 Provider 생성

// contexts/providers/AuthProvider.ts

export default function AuthProvider({ children }: { children: React.ReactNode }) {
    const [user, setUser] = useState<User | null>(null);
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const login = (user: User) => {
    setUser(user);
    setIsLoggedIn(true);
  };

  const logout = () => {
    setUser(null);
    setIsLoggedIn(false);
  };

  return (
    <AuthContext.Provider value={{ user, isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

4. 전역 상태 공유

// main.tsx

import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import AuthProvider from "./contexts/providers/AuthProvider.tsx";

createRoot(document.getElementById("root")!).render(
  <AuthProvider>
    <App />
  </AuthProvider>
);

5. 필요 시 사용

• useContext 훅을 사용하여 필요한 컨텍스트 호출

import React, { useContext } from "react";
import { AuthContext } from "../contexts/AuthContext";

export default function AuthCheck({ children }: { children: React.ReactNode }) {
  const { isLoggedIn, login, logout } = useContext(AuthContext)!;
  return (
    <>
      {isLoggedIn && children}
      {!isLoggedIn && (
        <button onClick={() => login({ name: "James", age: 20 })}>
          로그인
        </button>
      )}
      {isLoggedIn && <button onClick={logout}>로그아웃</button>}
    </>
  );
}

번외 - Context API에 메모이제이션 적용

1) value를 다루는 함수에 메모이제이션 적용

// main.tsx

import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import CounterProvider from "./context/provider/CounterProvider.tsx";

createRoot(document.getElementById("root")!).render(
  <CounterProvider>
    <App />
  </CounterProvider>
);

// context/CounterContext.ts

import { createContext } from "react";

interface CounterContextType {
  count: number;
}

interface CounterActionContextType {
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

// count 값 제공하는 컨텍스트
export const CounterContext = createContext<CounterContextType | null>(null);

// count 값을 다루는 함수를 제공하는 컨텍스트 (메모이제이션)
export const CounterActionContext =
  createContext<CounterActionContextType | null>(null);

// context/provider/CounterProvider.tsx

import { ReactNode, useMemo, useState } from "react";
import { CounterActionContext, CounterContext } from "../CounterContext";

export default function CounterProvider({ children }: { children: ReactNode }) {
  const [count, setCount] = useState(0);

  const increment = () => { setCount((count) => count + 1); };
  const decrement = () => { setCount((count) => count + 1); };
  const reset = () => { setCount(0); };

    // 함수지만 객체로 감싸 하나의 값으로 만들었기에 useMemo 적용
  const memo = useMemo(() => ({ increment, decrement, reset }), []);

  return (
    <>
      <CounterActionContext.Provider value={ memo }>
        <CounterContext.Provider value={{ count }}>
          {children}
        </CounterContext.Provider>
      </CounterActionContext.Provider>
    </>
  );
}

2) 잘못된 메모이제이션

// 함수에 useCallback을 적용한 건 문제가 되지 않으나
// value로 함수를 넘길 때, 객체로 묶어서 전달하는 과정에서 count의 변경으로
// 객체의 참조값이 변경되어 메모이제이션에 제대로 안됨

const increment = useCallback(() => {
  setCount((count) => count + 1);
}, []);

const decrement = useCallback(() => {
  setCount((count) => count + 1);
}, []);

const reset = useCallback(() => {
  setCount(0);
}, []);

return (
  <>
    <CounterActionContext.Provider value={{ increment, decrement, reset }}>
      <CounterContext.Provider value={{ count }}>
        {children}
      </CounterContext.Provider>
    </CounterActionContext.Provider>
  </>
);

📡 Redux-toolkit

• 기본적인 설정과 코드량이 많아 다소 러닝 커브가 높은 전역 상태 관리 라이브러리
• toolkit으로 redux를 쉽게 사용할 수 있음
• 크게 2가지로 구분 ⇒ 상태, 액션(상태를 변경하기 위해 조작하는 함수)
• 슬라이스 안에 상태와 액션을 정의해서 사용 (슬라이스는 여러 개 있을 수 있음)

1. 슬라이스 생성하기

• createSlice : 슬라이스에 필요한 액션 생성자(actions)와 리듀서(reducer) 생성

import { createSlice } from "@reduxjs/toolkit";

interface User {
  name: string;
  agE: number;
}

const authSlice = createSlice({
  name: "authSlice",
  // 초기 상태
  initialState: {
    user: null as User | null,
    isLoggedIn: false,
  },
  // 상태를 변경하는 함수 정의 (액션)
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
      state.isLoggedIn = true;
    },
    logout: (state) => {
      state.user = null;
      state.isLoggedIn = false;
    },
  },
});

export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

2. 스토어 생성하기

• configure : configurre 객체로 스토어 생성
• reducer : 여러 개의 슬라이스를 결합하여 하나의 스토어로 관리할 수 있도록

import { configureStore } from "@reduxjs/toolkit";
import authSlice from "./slice/authSlice";
import { counterSlice } from "./slice/counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
    auth: authSlice,
  },
});

export type RootState = ReturnType<typeof store.getState>; // 상태를 위한 타입
export type AppDispatch = typeof store.dispatch; // 액션을 위한 타입

3. 필요 시 사용

• 변수: useSelector를 사용하여 리듀서에 접근 -> 원하는 슬라이스로 접근
• 함수: useDispatch로 원하는 함수 사용

export default function AuthCheck({ children }: { children: React.ReactNode }) {
  const user = useSelector((state: RootState) => state.auth.user);
  const isLoggedIn = useSelector((state: RootState) => state.auth.isLoggedIn);
  const dispatch = useDispatch<AppDispatch>();

  return (
    <>
      {isLoggedIn && user?.name}
      {isLoggedIn && children}
      {!isLoggedIn && (
        <button onClick={() => dispatch(login({ name: "James", age: 20 }))}>
          로그인
        </button>
      )}
      {isLoggedIn && (
        <button onClick={() => dispatch(logout())}>로그아웃</button>
      )}
    </>
  );
}

📡 Zustand

• 사용법 매우 간단. 로직도 간단. 가벼움
• 리액트 훅처럼 선언하여 사용
• 리액트에 종속적인 것이 아닌 JS를 위한 라이브러리
• 앞으로 더 인기가 많아질 라이브러리가 될 것

1. 상태 store 생성하기

• 상태 store : 공유되는 상태를 저장하고 관리하는 중앙 저장소를 의미함
  • 전역에서 접근 가능
  • 상태를 변경하는 로직을 스토어 안에 두어 관리

interface CounterStoreType {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

export const useCounterStore = create<CounterStoreType>((set) => ({
  count: 0, // 초기 상태
  increment: () => set((state) => ({ count: state.count + 1 })), // 상태 변경 로직
  decrement: () => set((state) => ({ count: state.count - 1 })), // 상태 변경 로직
  reset: () => set({ count: 0 }), // 상태 변경 로직
}));

2. 상태 store 사용하기

export default function App() {
    const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
    const decrement = useCounterStore((state) => state.decrement);

  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={decrement}>감소</button>
      <button onClick={increment}>증가</button>
    </>
  );
;

3. 잘못된 상태 구독

const { count, increment, decrement } = useCounterStore();

• 위의 방식은 상태 store를 전체 구독하는 방식
• 상태가 변경될 때마다 스토어 객체 전체가 새로운 참조값을 가지므로 컴포넌트의 리렌더링 발생
  • 이로 인해 컴포넌트에 React.memo 처리를 한 경우, 무의미해짐

📌 출처

수코딩(https://www.sucoding.kr)

useEffect

• 함수형 컴포넌트에서 생명주기를 다룰 때 사용하는 리액트 훅
  • 생명주기 : 컴포넌트가 태어나고 죽을 때까지
• 렌더링 이후의 Side Effect를 발생시키는 역할
• useEffect(콜백 함수, 의존성 배열)
• 클린업 함수
  • 컴포넌트가 언마운트되기 직전 실행시키는 함수

useEffect(() => {
    const interval = setInterval(() => {
        console.log("interval");
    }, 1000);

    // 클린업 함수
    return () => {
        clearInterval(interval);
    };
}, []);

🚀 메모이제이션

🔍 메모이제이션이란? 중복 계산을 피하기 위해 계산 결과를 저장해두고, 동일한 입력 값에 대해서는 이미 계산된 결과를 재사용하는 방법

1. React.memo()

• 컴포넌트 메모이제이션
  • const MyComponent = React.memo(() => {})
• 동일한 props로 렌더링될 경우, 이전 렌더링 결과 재사용 ⇒ 불필요한 리렌더링 방지
• 함수형 컴포넌트에서만 사용 가능
• props가 자주 변경되거나 비교하는 cost가 높다면 오히려 성능 저하 초래

  const MyComponent = React.memo(({ count }) => {
    return <div>{count}</div>
  })

2. useCallback()

• 리액트 훅, 함수 메모이제이션
• 컴포넌트가 리렌더링될 때 동일한 함수 인스턴스를 유지할 수 있도록
• 의존성 배열에 있는 값이 변경되지 않는다면, 메모이제이션 된 함수 재사용

  import { useState, useCallback } from 'react';
  

const MyComponent = () => { const [count, setCount] = useState(0);

const increment = useCallback(() => { setCount((prevCount) => prevCount + 1); }, []);

return Increment; };

<br />

### 3. useMemo()
- 리액트 훅, 값 메모이제이션
- 컴포넌트가 리렌더링될 때 복잡한 계산을 반복하지 않도록
- 의존성 배열에 있는 값이 변경되지 않는다면, 이전 계산 결과 재사용
```typescript
const MyComponent = () => {
    const [count, setCount] = useState(0);

    const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

   return (
    <div>
      <p>Result: {expensiveCalculation}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
    </div>
  );
}

정리

📌 출처

수코딩(https://www.sucoding.kr)

1. 스캐폴딩(scaffolding)

npm create vue@latest

• JSX : 설정 X. 뷰는 기본적으로 template를 지원함. JSX는 리액트에서 사용
• Pinia : Vue3에서 사용 가능한 상태 관리 패키지

2. 기본 구조

• package.json
  • private : 애플리케이션 공개 여부 (대부분 true, 공개 X)
  • dependencies : 실행할 때 필요한 의존성 모듈 정의. 프로덕션(배포 및 서비스) 환경에서도 사용
  • devdependencies : 개발할 때 필요한 의종성 모듈 정의. 개발 환경에서만 사용
• main.js : 뷰 애플리케이션 초기화 & 구성 역할
  • createApp() : 뷰 애플리케이션의 인스턴스 생성
• App.vue : 루트 컴포넌트 (가상 상위 컴포넌트)

3. SFC, Single File Component

• Vue에서 컴포넌트를 작성하는 방식 중 하나
• 하나의 파일 안에 HTML, CSS, JS 포함
• 3가지 태그
  • <script> : JavaScript 작성, 0~1개
  • <template> : HTML 작성, 필수로 1개
  • <style> : CSS 작성, 0~1개

    <script>
    export default {
    name: "컴포넌트 이름",
    data() {
        return { ... }
    },
    ...
    }
    </script>
    <template>
    </template>
    <style>
    </style>

4. Options API & Composition API

• SFC내, script 태그 안에 코드 작성 시 지켜야 하는 문법 규칙
• Options API : 기존부터 있던 방식
• Composition API : Vue3에서 도입된 방식

5. 데이터 보간법

• template 태그 내에서 data를 사용하는 방법
• 콧수염 문법 (mustache syntax) 사용 {{ 데이터 속성 }}
• 데이터를 직접 입력 O, JS 표현식 O
  • 단, 최대한 데이터로만 넣어서 사용하도록

6. 디렉티브

• template 태그 내에서 data 옵션 속성을 사용하기 위한 방법
• v-[]로 시작하는 뷰에서만 사용 가능한 특별한 속성들
• 하단에 자세히 설명

✨ 디렉티브 종류

1. v-html

• 값에 HTML 태그가 포함될 때, 태그를 html로 반영해서 출력
• XSS(Cross-Site Scripting) 공격에 매우 취약
  • 사용자기 입력한 데이터를 출력할 때 사용X
  • 개발자가 직접 작성한 데이터를 출력할 때만 사용

    <script>
    export defulat {
    data() {
    message: "<strong>message</strong>",
    }
    }
    </script>
    <template>
    <h1>{{ message }}</h1>
    <h1 v-html="message"></h1>
    </template>

2. v-text

• HTML 태그가 포함될 때, 태그까지 텍스트로 치환 출력

  <template>
  <h1 v-text="message"></h1>
  </template>

3. v-pre

• 컴파일을 건너뜀
• 컴파일 해야 할 코드양은 줄여주어 성능에 도움이 됨
• script 영역 내 뷰 문법을 사용하지 않으면 v-pre로 성능 개선 가능

  <template>
  <h1 v-pre>{{ message }}</h1>
  </template>

  컴파일을 진행하지 않으므로 위의 결과는 {{ message }}

4. v-bind

• 데이터를 속성에 바인딩할 때 사용
• vue 3.4 이상부터 v-bind를 제외하고 :속성으로 축약 가능
• 속성명과 데이터명이 같다면 더 짧게 축약 가능
• 조건 처리 가능

  <template>
  <h1 v-bind:id="id"></h1>
  <h1 :id="id"></h1>
  <h1 :id></h1>
  <h1 :class="isActive ? 'active' : 'inactive'">text</h1>
  </template>

5. v-if, v-else-if, v-else

• 조건부 렌더링
• 조건에 맞아야 보여짐

  <template>
  <p v-if="weather === 'sunny'">sunny</p>
  <p v-else-if="weather === 'rainy'">rainy</p>
  <p v-esle-if="weather === 'cloudy'">cloudy</p>
  <p v-esle>unknown</p>
  </template>

6. v-show

• 조건부 렌더링
• 보여주냐, 안 보여주냐
• 자주 스위칭 되는 경우, 해당 디렉티브가 도움이 된다

  <template>
  <p v-show="isVisible">hello</p>
  </template>

7. v-cloak

• 렌더링 되면 없어지는 요소
• 이 디렉티브를 잘 사용하면 디테일 보완 가능
  • 초기 렌더링 시, 컴파일 속도가 느리면 찰나의 깜빡임이 있음
  • 렌더링이 완료되면 v-cloak 설정 제거됨

    <template>
    <h1 v-cloak>{{ message }}</h1>
    </template>
    <style scoped>
    [v-cloak] {
    display: none;
    }
    </style>

8. v-for

• for문처럼 배열 데이터 순회

  <template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  </template>

📌 출처

수코딩(https://www.sucoding.kr)

• useState와 유사하며, 로컬 상태를 정의할 때 사용
• const [상태, 액션발생함수] = useReducer(리듀서 함수, 초기값)
• useState와의 차이점
  • useState: 상태를 변경하는 함수가 별도의 로직으로 여러 개 정의되어 상태 예측이 어려움. 간단함
  • useReducer: 상태를 변경하는 함수를 한 곳에 관리하므로 상태 예측이 가능함. 복잡함

사용 예시 - 1

// 리듀서 함수에서 사용되는 state와 action 타입 정의
type ReducerState = number;
type ReducerAction = string;

// 상태를 업데이트 하는 리듀서 함수 (오로지 이 함수로만 상태 변경 가능)
// 상태를 업데이트 하기 때문에 무조건 값(새로운 상태)을 반환해야 함
function reducer(state: ReducerState, action: ReducerAction) {
  switch (action) {
    case "decrement":
      return state - 1;
    case "reset":
      return 0;
    case "increment":
      return state + 1;
    default:
      return state;
  }
}    

function App() {
  const [state, dispatch] = useReducer(reducer, 0);

  // dispatch를 통해 액션 발생
  // reducer 함수를 직접 호출해도 작동하지 않음
  return (
    <>
      <h1>Count: {state}</h1>
      <button onClick={() => dispatch("decrement")}>감소</button>
      <button onClick={() => dispatch("reset")}>리셋</button>
      <button onClick={() => dispatch("increment")}>증가</button>
    </>
  )

사용 예시 - 2

interface ReducerState {
  email: string;
  password: string;
  agree: boolean;
  error: string;
}

type ReducerAction =
  | {
      type: "SET_EMAIL";
      payload: string;
    }
  | {
      type: "SET_PASSWORD";
      payload: string;
    }
  | {
      type: "SET_AGREE";
      payload: boolean;
    }
  | {
      type: "SET_ERROR";
      payload: string;
    };

function reducer(state: ReducerState, action: ReducerAction) {
  switch (action.type) {
    case "SET_EMAIL":
      return { ...state, mail: action.payload };
    case "SET_PASSWORD":
      return { ...state, password: action.payload };
    case "SET_AGREE":
      return { ...state, agree: action.payload };
    case "SET_ERROR":
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

const initialState: ReducerState = {
  email: "",
  password: "",
  agree: false,
  error: "",
};

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const validationForm = () => {
    if (!state.email) {
      dispatch({ type: "SET_ERROR", payload: "이메일을 입력해주세요." });
      return false;
    }
    // ...
  };

  return(
    <form>
      <input
          type="text"
          placeholder="someone@example.com"
          name="mail"
          value={state.email}
          onChange={(e) => {
              dispatch({ type: "SET_EMAIL", payload: e.target.value });
             }}
            />
    </form>
)

📌 출처

수코딩(https://www.sucoding.kr)

1. 트랜스 파일러

• 서로 다른 언어 규약으로 작성된 파일을 웹 브라우저가 이해할 수 잇는 형태의 파일로 변환해주는 역할
  • JSX를 JS 코드로 변환
  • 최신 버전의 JS, TS 문법을 다운그레이드하여 변환
• 예시) 바벨, swc

2. 모듈 번들러

• 여러 개의 프로젝트 파일들을 각 종류 별로 하나의 파일로 묶어주는 역할
• 묶어주는 과정에서 사용하지 않는 파일들을 제거해줌 (트리세이킹) ⇒ 빌드 속도, 성능 향상
• 묶어주는 과정에서 이미지에 대한 용량 최적화 진행 (public 폴더는 제외)
• 예시) 웹팩, vite(웹팩보다 더 빠르고 리액트와 궁합이 좋음)

🍑 Tailwind 관련 플러그인

• tailwind-merge : 스타일 충돌없이 tailwind css 클래스를 js로 효율적으로 병합하는 유틸리티 함수
• tailwind-linecamp : 말줄임표 처리 도움. 현재는 기본 내장
• tailwind-forms : Tailwind의 기본 폼 스타일을 추가해주는 패키지

1. Tailwlind 관련 추가 설정

• 모바일에서의 hover 스타일 막기

  • tailwind.config.js 파일에 아래 코드 추가

    module.exports = {
    future: {
      hoverOnlyWhenSupported: true,
    },
    }

🍑 폰트 적용하기

1. 구글 폰트

• 구글 폰트 사이트에서 <link> 태그 복사 ⇒ head 태그 안에 붙여넣기
  • preconnect 속성 : 브라우저가 특정 외부 리소스를 더 빨리 로드할 수 있도록 함
• 구글 폰트 사이트에서 @import 코드 복사 ⇒ css의 제일 상단에 붙여넣기
  • https://링크&display=swap
• font-display : 웹 폰트를 사용할 때 글꼴 로딩 전략 ⇒ FOUT 문제 해결 가능
  • swap : 기본 글꼴로 먼저 표시 → 웹 폰트로 대체
  • auto : (기본값) 브라우저가 최적의 동작 판단
  • block : 폰트 로딩 중 텍스트 숨김(FOIT 발생 가능)
  • fallback : 폰트 로드 시간이 너무 길면 기본 글꼴 유지
  • optional : 네트워크 상태에 따라 웹 폰트 로드 생략

2. 눈누 폰트

• 눈누 사이트에서 font-face 복사

    @font-face {
      font-family: 'font';
      src: url('https://링크.woff') format('woff');
      font-weight: 400;
      font-style: normal;
    }
  
    .font {
      font-family: "font";
    }

    <h1 className="font">Hello World</h1>

3. 로컬 폰트

• 폰트를 다운로드하고 src 폴더 하위에 위치시키기

• font-face 등록

    @font-face {
      font-family: "font";
      src: url("../assets/fonts/font.woff2") format("woff2"),
          url("../assets/fonts/font.woff") format("woff");
        font-weight: normal;
        font-style: normal;
    }
  
    .font {
      font-family: "font";
    }

    <h1 className="font">Hello World</h1>

  • woff (web open font format) : 기존 폰트 파일 형식 + zlib 압축 알고리즘 사용하여 압축한 파일. 오래된 브라우저와의 호환성 좋음
  • woff2 : woff보다 더 높은 압축률 제공. 오래된 브라우저에서 지원하지 않을 수 있음

🍑 스타터 팩

• 버전 관리에 지속적으로 신경써야 함.

1. 프로젝트의 의존성 관리

• npm 모듈 버전 확인 : npm outdated
• npm 최신 버전 확인 : npm i npm-check 설치 / npx npm-check 실행
  • import 하고 있지 않는 패키지를 체크하고 알려줌
  • 단점 : 애초에 import를 할 필요 없는 라이브러리까지 알려줌
• 버전 업데이트 : npx npm-check-updates 모듈명 -u
  • 특정 라이브러리의 호환성을 맞춰줄 수 있는 명령어

🍑 npm & npx & yarn

• npm : Nodej.s의 기본 패키지 관리자
• npx : 패키지 실행 및 없으면 npm으로 설치
• yarn : 병렬로 패키지를 설치하여 npm 보다 속도 향상. 이전에 설치된 패키지를 다시 다운로드하지 않고 설치 가능
• pnpm : npm의 발전된 버전

🍑 시맨틱 버저닝 (SemVer)

• 소프트웨어의 버전 변경 규칙
• Major Minor Patch 순서
  • Major : 하위 버전과의 호환 불가
  • Minor : 하위 호환성을 지키면서 기능 추가
  • Patch : 하위 호환성을 지키면서 버그 수정
• 범위 지정 - 틸드 범위 (~)
  • Minor 버전이 지정 O ⇒ Patch 레벨 변경 허용
  • Minor 버전이 지정 X ⇒ Patch + Minor 레벨 변경 허용
  • ex) ~1.3.2 : Minor 지정 O ⇒ Patch 레벨 변경 허용
  • eX) ~2 : Minor 지정 X ⇒ Minor 레벨 변경 허용
• 범위 지정 - 캐럿 범위 (^)
  • 가장 왼쪽에 0이 아닌 요소를 수정하지 않는 범위로 변경을 허용
  • ex) ^1.3.x : Minor + Patch 레벨 변경 허용
  • ex) ^0.1.x : 0이 아닌 처음 요소는 Minor ⇒ Patch 레벨 변경 허용
  • ex) ^0.0.3 : 0이 아닌 처음 요소는 Patch ⇒ 변경 허용 X

🍑 이미지 경로

• src 폴더나 public 폴더에 넣을 수 있음
• 어떤 폴더에 넣느냐에 따라 활용 방법이 달라짐
• 폴더 별 특징
  • public 폴더 : 공용으로 사용 가능. 배포 후, 도메인을 통한 접근 가능
  • src/assets 폴더 : 공개적으로 노출 X (오로지 리액트 시스템 내부에서 활용). 빌드 과정에서 자동으로 이미지를 최적화 하여 public 폴더에 삽입됨
• 결론 : 빌드 프로세스에 의해 처리되지 않는 이미지는 public 폴더로 (주로 파비콘). 그 외는 src/asseets 폴더 하위로

1. src 폴더 하위

• 모듈 번들러(웹팩 등)에 의해 처리되어, 빌드 결과에 포함됨 (이미지 파일명의 변동 발생)
• JSX에서
  • import를 통해 사용 / 번들러의 관리 대상 ⇒ 이미지 경로가 자동 처리
  • 직접 경로를 넣는 건 불가능 / 번들링 과정에서 위치나 파일명의 변경되어 올바르게 연결 불가 ⇒ 번들러가 이를 처리해줄 수 없음
• CSS에서
  • 직접 경로 넣어 사용(상대 경로) / 번들러의 관리 대상 ⇒ 경로를 자동으로 수정
• HTML에서
  • 직접 경로 넣는 건 불가능 / 번들러의 관리 대상 X ⇒ 경로를 자동으로 수정 X

2. public 폴더 하위

• 공용 폴더이기 때문에 절대 경로 접근 가능 ⇒ img 태그에 직접 경로 삽입 가능
• / 로 시작할 경우 public 폴더로 인식
• JSX : import 가능. 직접 경로 넣기 가능
• CSS : 직접 경로 넣기 가능
• HTML : 직접 경로 넣기 가능

🍑 리액트에서의 변수

1. 변수 변경

• 변수의 값이 변경되어도 화면에서는 변경 사항이 반영 X ⇒ 변경사항을 추적하지 않기 때문
• 리액트에서 변수를 선언할 때 2가지로 구분
  • 화면 렌더링에 영향을 주는 변수인지 ⇒ 이를 state(상태)라 함
  • 화면 렌더링에 영향을 주지 않는 변수인지 ⇒ let, const, var

2. 상태 정의 및 관리

• 16.8버전에 도입된 리액트 훅을 이용하여 상태를 정의하고 관리함

🍑 리액트 훅

1. useState

• const [state, setState] = useState(초기값) : 상태와 상태 변경 함수를 배열로 반환
• setState를 통해 상태를 변경하는 방법 2가지
  • 원하는 값을 직접 지정하여 변경 ⇒ setState(값)
  • 현재 상태를 이용하여 변경 ⇒ setState((state) => state + 1)
• 상태 업데이트는 비동기적으로 처리되기 때문에 즉시 업데이트 되지 않음 (효율을 위해 한번에 처리)
• state는 불변성을 지켜야 하므로, 수정하지 않도록 유의

2. useRef

• document.querySelector 같은 역할
• 직접 DOM에 접근하지 않는 이유 : 리액트는 가상 DOM을 사용하기 때문에 직접적인 접근 불가능

🍑 폼 제어 방법

• 제어 컨트롤러 : 상태를 정의하여 요소 제어 ⇒ useState

• 비제어 컨트롤러 : DOM에 접근하여 요소 제어 ⇒ useRef

    function App() {
        const ref = useRef<HTMLInputElement | null>(null);
        const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
            e.preventDefault();
            console.log(ref.current?.value);
      }
  
        return (
            <form onSubmit={submitHandler}>
                <input ref={ref} />
            </form>
        )
    }

🍑 용어

• 프레젠테이션 컴포넌트 : 받아온 props를 사용하지 않고, 바로 자식 컴포넌트에 넘겨주는 역할만 수행

📌 출처

수코딩(https://www.sucoding.kr)

AI 추천 문제 풀었다가 우울해졌다.

이 문제를 볼 때, 일단 트리로 접근해야하는 건 확신했다. 그래서 DFS로 풀어야겠다고 생각하고 열심히 시도해봤다.

그런데 아무리 생각해봐도 직원 배열이 최대 30만개인데, DFS로 하면 100%, 500%, 1000% 시간 초과가 발생할 게 뻔했다. 그래서 고민 끝에 알고리즘 힌트라도 얻고자 풀이를 찾아봤다.

힌트를 보니 드는 생각은 아니, AI는 도대체 어떤 분석으로 내가 이 문제를 풀 수 있다는 결론을 어떻게 내린거야....? 이 문제는 트리 DP로 풀어야 한다는데, 트리 DP는 처음 들어봤다ㅎ

이건 내가 혼자 풀 수 있는 게 절대 아니라는 걸 깨닫고 트리 DP의 원리를 공부해서 겨우 풀었다. 문제 다 풀고 확인하니까 무려 Lv4에 정답률이 12%였다..

아래의 풀이는 힌트 70%, 내 머리 30%가 합쳐진 결과이다. 원리 덕분에 풀 수 있었기 때문에 내 머리는 30% 정도라고 생각했다. (실은 30%도 많은 듯..)

◼️ 문제

매출 하락 최소화

1. 문제 설명

2. 제한사항

3. 입출력

◼️ 풀이

🧠 알고리즘

내가 힌트로 참고한 글에 의하면 트리 DP로 풀었다고 한다. 트리도 알고 DP도 아는데, 트리 DP는 뭘까...?ㅠㅠㅠ 이름만 듣기엔 감이 어느정도 오긴 했지만, 이미 몇시간 째 문제를 부여잡고 있던 나에겐 이해가 공부가 절실하게 필요했다.

DP (Dynamic Programming)

DP의 특징은 큰 문제를 작은 문제로 나누어 푼다는 점이다. 작은 문제의 답을 먼저 구한 다음 작은 문제의 답을 이용해 큰 문제를 구하는 방식이다.

트리 DP

그렇다면 트리 DP는 무엇일까. 큰 트리를 작은 트리로 나누어 문제를 해결하는 방식인 것이다. 작은 트리를 활용해 큰 트리의 최종적인 답을 구하는 방식이기 때문에, 리프에서 루트 방향으로 문제를 해결해가면 된다.

이 문제에서는 dp로 해결하는 과정에서, 현재 팀장이 참석할 경우와 현재 팀장이 참석하지 않을 경우에 대해 각각 최소값을 구하는 것이 핵심이다.

✏️ 전반적인 풀이과정

1. 팀장과 팀원의 정보가 담긴 links 배열을 하나씩 확인하며, 조직도를 트리 형태로 만든다.
2. treeDP 함수를 이용해 워크숍에 참석하는 직원들이 최소 매출액을 갖는 결과를 찾아낸다. (재귀) 2-1. 만약 현재 팀장의 팀원의 dp에 대한 정보가 없을 경우, 팀원의 dp 정보부터 구한다. 2-2. 현재 팀장이 참석하지 않을 경우에 대한 최소값을 구한다. 2-3. 현재 팀장이 참석할 경우에 대한 최소값을 구한다.

📃 풀이과정 상세 설명

재귀 함수로 리프에서 루트 방향으로 구하기

treeDP 함수를 통해 현재 팀장이 참석할 경우와 참석하지 않을 경우에 대한 매출액을 구하기 위해서는 팀원들의 dP 결과 이미 존재해야 한다는 가정이 필요하다.

팀원들의 dp 결과가 없다면, 팀원들의 dp부터 계산하는 방식으로 구현하기 위해 재귀를 택했다. 이렇게 하면, 최종적으로 가장 리프노드부터 dp를 계산하여 최종적으로 루트노드의 dp를 계산하게 된다.

// treeDP 함수 일부
const children = tree[index]

children.forEach((child) => {
  if (!dp[child]) treeDP(sales, tree, dp, child)
})

현재 팀장이 참석하지 않을 경우 최소 매출액

최소 매출액 = 팀원들의 최소값

우선 팀원들이 각각 참석할 때와 참석하지 않았을 때의 매출 최소액을 구해야 한다. 팀원들 배열을 돌면서 dp[0]과 dp[1] 중 작은 값만 선택해 계산하면 될 것이다.

위의 케이스에서 팀원 중 최소 한 명이라도 참석을 하면 문제가 없겠으나, 팀원 모두 참석을 하지 않으면 문제가 생긴다. 현재 팀장도 참여를 안 하기 때문이다.

그래서 위의 계산을 진행하면서 한 명이라도 참석을 하는지도 함께 확인을 해야 한다. 만약 아무도 참석하지 않을 경우 최소 매출액을 위해서 한 명만 참석할 때의 케이스를 구하고 그 중 가장 최소값으로 현재 팀장의 dp[0]을 확정지어야 한다.

현재 팀장이 참석할 경우 최소 매출액

최소 매출액 = 팀원들의 최소값 + 현재 팀장 매출액

위와 같이 팀원 모두가 참석하지 않을 경우를 굳이 확인하지 않아도 된다. 팀장이 참석하는 것이 확정되었기 때문이다.

따라서 팀원들 배열을 돌면서 작은 값들의 합과 현재 팀장의 매출액까지 합하면 된다.

마무리

제일 리프노드부터 루트노드(CEO)까지의 dp를 모두 구했다. dp[0]과 dp[1] 중 작은 값을 고르면 그것이 최소 매출액이다.

💻 코드

function solution(sales, links) {
  const tree = {}
  const dp = {}
  links.forEach((link) => {
    const [leader, member] = link
    if (!tree[leader]) tree[leader] = []
    if (!tree[member]) tree[member] = []
    tree[leader].push(member)
  })
  treeDP(sales, tree, dp, 1)
  return Math.min(...dp[1])
}

function treeDP(sales, tree, dp, index) {
  dp[index] = [0, 0]
  const children = tree[index]
  children.forEach((child) => {
    if (!dp[child]) treeDP(sales, tree, dp, child)
  })

  // dp[index][0] 구하기 - 1
  let isAttend = false
  dp[index][0] = children.reduce((sum, child) => {
    if (dp[child][0] < dp[child][1]) return (sum += dp[child][0])
    isAttend = true
    return (sum += dp[child][1])
  }, 0)

  // dp[index][0] 구하기 -2
  if (!isAttend) {
    let minimum = Infinity
    for (let i = 0; i < children.length; i++) {
      let sum = 0
      for (let j = 0; j < children.length; j++) {
        if (i !== j) sum += dp[children[j]][0]
        else sum += dp[children[j]][1]
      }
      minimum = Math.min(minimum, sum)
    }
    if (minimum !== Infinity) dp[index][0] = minimum
  }

  // dp[index][1] 구하기
  dp[index][1] =
    children.reduce((sum, child) => (sum += Math.min(...dp[child])), 0) + sales[index - 1]
}

너무 열받아 하면서 푼 덕분에 트리 DP는 절대 안 잊을 것 같다^_^

이미 공부했더랬지

• 웹 페이지의 성능을 높이기 위해서는 리플로우와 리페인트를 줄여야 함
• JS로 보여지는 여부를 결정해야 한다면, transform이나 opacity를 사용하는 것 권장 (display, position 노놉)
  • 이 속성들은 GPU가 관여할 수 있는 속성이기 때문에 리플로우 생략됨
• 프로젝트의 규모가 커질수록, 리페인트와 리플로우 최적화에 신경쓰기 => 리액트가 도와줌

🌽 가상 DOM

• 리액트는 가상 DOM 2개 소유 중
  • 렌더링 이전의 화면 구조를 나타내는 DOM / 렌더링 이후 화면 구조를 나타내는 DOM
• 브라우저는 DOM 트리나 Render 트리를 만들고 직접 다루는 것에 비해 리액트는 그저 객체 형태로만 DOM을 갖고 있기 때문에 아주 가벼움

리액트의 렌더링 단계

1. render phase : 컴포넌트들이 가상 DOM으로 구성되는 단계

• 컴포넌트 파일들을 해석하여 실제 돔과 똑같은 구조의 트리 형태로 가상 DOM 생성
• 이전 DOM과 비교하여 변경된 요소들 찾기 => 이를 diffing이라 함
  • 굉장히 효율적인 알고리즘 사용
  • 속성값만 변경되었다면 속성값만 업데이트
  • 태그나 컴포넌트가 변경되었다면 해당 노드를 포함한 하위의 모든 노드 제거 & 새 걸로 교체
• Reconciliation (재조정) 단계 진행
  • 변경된 요소들만 찾아 실제 브라우저 화면에 반영
  • 리액트의 이 과정이 효율적인 이유 = Batch Update 덕분
  • 변경된 요소들을 집단으로 묶어 한번에 적용시키는 방식이 Batch Update

2. commit phase : 가상 DOM을 실제 DOM에 반영하는 단계

• 다시 파싱하는 방식이 아님 - 렌더 트리를 새로 만들지 않음. 필요한 부분만 갱신
• 리액트가 가상 DOM을 사용해 변경사항을 계산한 뒤, 필요한 부분에 대한 DOM 조작 명령을 브라우저에 전달
• 브라우저는 변경된 부분에 대해서만 리플로우, 리페인트 진행

가상 DOM은 어떤 점에 있어서 성능에 도움이 되는건데?

• 가상 DOM없이 DOM을 여러 번 조작하면 리페인트와 리플로우가 계속 반복
• 가상 DOM은 변경사항들을 모아 한 번에 적용함으로써 리페인트와 리플로우 최소화
• setState를 여러번 호출해도 마지막 내용만 반영되는 것도 이러한 이유

🌽 컴포넌트 파일 확장자

.js

• 일반적인 자바스크립트 파일 형식
• 트랜스파일러로 인해 JSX도 사용이 가능함 (가능하긴 하지만 JSX는 .jsx에서 사용하자)

.jsx

• HTML 마크업을 편하게 작성하기 위해 개발된 새로운 언어 형식

.tsx

• JSX의 타입스크립트 버전

.ts

• JSX 사용 불가

🌽 패키지

• react-scripts : CRA에서 사용할 수 있는 스크립트 모음. 웹팩, 바벨과 같은 스크립트 포함
• @vitejs/plugin-react : swc. 리액트에서 웹팩과 바벨의 역할을 하는 패키지

🌽 클래스형 컴포넌트 & 함수형 컴포넌트

• 아직 2가지 방식 모두 지원하고 있지만, 함수형 컴포넌트를 사용하자

클래스형 컴포넌트

• 리액트 초기 컴포넌트 형식
• 함수형 컴포넌트에 비해 복잡

함수형 컴포넌트

• 최근 사용하는 컴포넌트 형식
• 함수형 컴포넌트가 초기에는 리액트의 생명주기를 다루지 못해 사용하기에 문제가 있었음
• 리액트 16.8부터 생명주기를 다룰 수 있는 리액트 훅을 제공하면서 함수형 컴포넌트가 매우 효율적인 방식이 됨

리액트 훅

• useState, useEffect, useContext, useReducer, useRef

🌽 리액트에서의 CSS 스타일링

기본 스타일

• 인라인 스타일 : style 속성 사용
• 외부 스타일 : 별도의 css 파일에 작성하고 import하는 방식
  • 부모 요소가 아닌 제일 하위의 자식 요소에서 css 파일을 import해도 전역에 반영됨
• css modules : 특정 컴포넌트에만 종속되는 css 코드 작성 방식. 파일명 *.module.css
  • 직관적으로 사용하기 위해 컴포넌트명과 파일명 일치시킴 + 같은 폴더 내에 위치

CSS-In-JS

• tailwind css
• styled-components
• emotion
• vanila extract

관련 라이브러리 or 패키지

• classnames 패키지 : 조건에 따라 클래스명을 동적으로 결합하거나 관리할 때 유용 (서드파티 라이브러리)
  • 서드파티 라이브러리 : 외부의 제 3자 개발자가 제공하는 코드나 도구

    import classNames from "classnames/bind";
    import styles from "./Header.module.css";
    

...

const cx = classNames.bind(styles); return <h1 className={cx("title", "decoration", { test: true })}>제목

```jsx
import classNames from "classnames";
import classNamesBind from 'classnames/bind';

...

return (
    <header>
      <h1 className={cx("title", "decoration")}>제목</h1>
      <h2 className={classNames("title", { decoration: false })}>부제목</h2>
    </header>
  );

📌 출처

수코딩(https://www.sucoding.kr)

단어 변환

1. 문제 설명

2. 제한사항

3. 입출력

◼️ 풀이

✏️ 전반적인 풀이과정

가장 짧은 단계의 변환을 찾아야 한다 => 전형적인 BFS 방식이다.

1. words 배열에 target이 존재하지 않으면 변환이 불가능 하므로 0을 반환한다.
2. BFS 순회를 위해 방문해야 할 단어를 저장하는 need_visited 배열, 방문한 단어를 기록하는 visited 객체를 생성한다.
3. begin부터 시작해야 하므로, need_visited에 begin을 넣고, visitied에 0번째 순서로 방문했다는 기록을 남긴다.
4. need_visited 배열에 아무것도 없을 때까지 target을 찾는다. 4-1. 현재 방문한 단어를 알기 위해 need_visited의 첫번째 요소를 꺼낸다. 4-2. 만약 현재 단어가 target과 같다면 현재 단계를 결과로 반환한다. 4-3. target이 아니라면, words를 하나씩 확인하며 다음 단계로 넘어갈 수 있는 단어를 찾는다. 찾은 단어가 방문하지 않았던 단어라면, need_visited 배열에 추가하고 몇 단계에 방문했는지와 함께 방문 기록을 visited 객체에 기록한다.
5. need_visited 배열에 아무것도 없을 때까지 변환을 했음에도 target에 도달할 수 없다면 0을 반환한다.

📃 풀이과정 상세 설명

target이 words에 없는 경우

단어를 계속 변환할 때 words 배열에 있는 단어로 변경해주면서 최종적으로 target을 만들어야 하기 때문에 words에 target이 없다면 무의미한 탐색이다.

// target이 words에 없다 === 변환이 불가능하다.
if (!words.includes(target)) return 0;

따라서 제일 초반에 target이 words에 없는 경우에는 결과를 바로 리턴해주도록 한다.

BFS를 위한 need_visited, visited 세팅

const need_visited = []; // 방문해야 할 단어를 기록하는 배열 (큐)
const visited = {}; // 방문한 단어를 기록하는 객체

BFS를 구현하기 위해 가장 필수적인 세팅이라고 볼 수 있다.

need_visitied는 앞으로 방문해야 할 단어를 넣어두는 대기실의 개념이다. 방문해야 할 단어들은 push를 통해 뒤에 차곡차곡 쌓이게 될텐데 BFS의 개념은 너비우선탐색이기 때문에 넣어둔 단어는 앞에서부터 꺼내주어야 한다. 따라서 큐의 형식으로 사용할 예정이다.

visitied는 방문한 단어를 기록하는 객체이다. visitied는 배열이든, 객체든, Map이든, Set이든 각자 원하는대로 만들면 되는데, 나는 가장 익숙하고, 방문 여부를 기록함과 동시에 몇단계에서 방문한 단어인지 함께 기록하기 위해 객체를 택했다.

begin 부터 시작

need_visited.push(begin);
visited[begin] = 0;

begin부터 시작해야 하므로, 방문해야 할 요소로 need_visited 배열에 넣어준다. 그리고 정확히는 아직 방문하지 않았지만, need_visited 배열에 넣은 순간 방문은 확정된 것이나 다름없기 때문에 visitied에도 함께 기록한다.

begin에서 시작하는 건 아직 변환이 시작된 건 아니기에 0단계로 기록해준다.

isNext 함수 구현

본격적으로 BFS 탐색을 하기 전에 필요한 함수를 먼저 구현했다.

function isNext(word, target) {
  let count = 0;

  for (let i = 0; i < word.length; i++) {
    if (word[i] !== target[i]) {
      count++;
      if (count > 1) return false;
    }
  }

  return count === 1;
}

이 함수는 현재 단어인 word가 target으로 변경이 가능한지 확인하는 함수이다. 단어 길이가 동일하다는 건 문제에서 보장해주었으니, 길이 걱정은 하지 않고 철자 하나하나를 비교하면 된다.

철자가 2개 이상 다르다면 바로 변환이 불가능하다는 의미의 false를 리턴한다. 모든 철자를 확인했을 때, 철자가 다른 개수가 1개라면 변환이 가능하다는 의미의 true를, 철자가 모두 동일하다면 변환이 불가능 하다는 false를 리턴한다.

여기서 문제에 words에는 중복되는 단어가 없다고 해주었기 때문에 count가 0인 경우도 고려를 해야하나 싶지만, begin이 words에 없다는 보장은 없기 때문에 필요하다! (이 부분을 고려하지 않아서 처음 제출할 땐 틀렸다..)

BFS 탐색 시작

while (need_visited.length > 0) {
  // 현재 단어 꺼내기
  const current = need_visited.shift();

  // 현재 단어가 target이라면 바로 결과 리턴
  if (current === target) return visited[target];

  // 현재 단어가 target이 아니라면 변환 가능한 단어 검색
  words.forEach((word) => {
    if (isNext(current, word) && !visited[word]) {
      need_visited.push(word);
      visited[word] = visited[current] + 1;
    }
  });
}

방문해야 할 단어가 없을 때까지 계속 target을 찾으면 된다.

현재 단어를 알아야 하므로 need_visited의 첫번째 요소를 꺼내, target과 일치하는지 확인한다. 만약 target이 맞다면, 이미 visited에 몇단계인지 기록을 했을테니 결과를 리턴해주면 된다.

target이 아니라면 현재 단어를 기준으로 변환 가능한 단어를 찾아야 하기 때문에, words 배열을 순회하며 isNext 함수로 변환 가능 여부를 확인한다. 특정 단어로 변환이 가능하다는 것을 확인했다면 그 단어가 이미 방문한(혹은 방문할) 단어인지도 확인해야 한다. (확인할 거 투성이네;;)

만약 이미 방문 기록이 있다면 패스. 아직 방문하지 않은 단어라면 need_visited에 넣어주고, 방문하게 될 단계와 함께 방문 기록을 visitied에 남겨준다.

이걸 target을 찾을 때까지 혹은 need_visited가 빌 때까지 반복하면 된다. need_visited에 아무것도 없을 때까지 확인했음에도 target을 못찾았다면 변환이 불가능한 케이스이므로 0을 반환한다.

💻 코드

function solution(begin, target, words) {
  if (!words.includes(target)) return 0;

  const need_visited = [];
  const visited = {};

  need_visited.push(begin);
  visited[begin] = 0;

  while (need_visited.length > 0) {
    const current = need_visited.shift();

    if (current === target) return visited[target];

    words.forEach((word) => {
      if (isNext(current, word) && !visited[word]) {
        need_visited.push(word);
        visited[word] = visited[current] + 1;
      }
    });
  }

  return 0;
}

function isNext(word, target) {
  let count = 0;

  for (let i = 0; i < word.length; i++) {
    if (word[i] !== target[i]) {
      count++;
      if (count > 1) return false;
    }
  }

  return count === 1;
}

1. 기본적인 타입 별칭

type ID = string | number;

2. 객체 타입 별칭

type User = {
  name: string;
  age: number;
};

3. 함수 타입 별칭

type SumFunc = (n1: number, n2: number) => number;
const sum: SumFunc = function sum(n1, n2) {
  return n1 + n2;
};

4. 제네릭 타입 별칭

• 제네릭은 여러 개 사용 가능
• 관용적으로 대문자 사용

  type Car<T> = {
  name: string;
  color: string;
  option: T;
  };
  

const car1: Car = { name: "benz", color: "black", option: "key", };

const car3: Car<{ giftcard: boolean }> = { name: "benz", color: "black", option: { giftcard: true, }, };

```typescript
type Car2<T, U> = {
  name: string;
  color: string;
  option: T;
  other: U;
};

5. 튜플 타입 별칭

type Point = [number, number];
const point: Point = [10, 20];

6. 인터섹션 타입 별칭

type Nameable = {
  name?: string;
};

type Aageable = {
  age?: number;
};

type Person = Nameable &
    Aageable & {
      gender?: string;
    };
const person: Person = {};

7. 리터럴 타입 별칭

• 리터럴 타입에 설정되어 있는 값만 사용 가능하므로 자동 완성 기능 지원

  type Direction = "LEFT" | "RIGHT" | "UP" | "DOWN";
  const direction: Direction = "LEFT";

8. 조건부 타입 별칭

• T extends U ? X : Y

  type IsString<T> = T extends string ? "Yes" : "No";
  

const test1: IsString = "Yes"; const test2: IsString = "No";

<br />

### 9. 키 선택 타입 별칭
```typescript
type Person = {
  name: string;
  age: number;
  address: string;
};

type PersonKeys = keyof Person; // "name" | "age" | "address"

10. 인덱스 시그니처 타입 별칭

• 인덱스 시그니처 + 다른 속성 타입 지정할 수 있음

  type UserMap = {
  age: number;
  [key: string]: string; // 인덱스 시그니처
  };
  

let user: UserMap = { name: "John", gender: "male", age: 20 };

<br /><br />

## 🍡 인터페이스 (interface)
- 타입은 툴팁으로 상세 정보 확인 가능한데, 인터페이스는 안된다ㅠ

### 1. 객체 타입 인터페이스
```typescript
interface User {
  name: string;
  age: number;
}

2. 옵셔널

interface User {
  name: string;
  age?: number;
}

3. 읽기 전용

• 튜플이나 배열은 상수로
• 객체는 속성 상수로

  interface User {
  readonly name: string;
  age: number;
  }

4. 인덱스 시그니처

• 자동 완성 지원 X

  interface User {

}

<br />

### 5. 함수 타입 인터페이스
- 거의 안 쓰지만 가능은 하다는 거 잊지 말기
```typescript
interface SumFunc {
  (n1: number, n2: number): number;
}

const sum: SumFunc = function (n1, n2) {
  return n1 + n2;
};

6. 병합

• 똑같은 인터페이스를 여러번 선언하면 자동 병합
• 타입 별칭은 불가능
• 같은 속성, 다른 타입은? => 에러

7. 상속

• 인터페이스 확장 => interface Developer extends Person {}
• 다중 상속도 가능
• 타입 별칭도 인터섹션으로 비슷하게는 가능

8. 그외

단축 메서드 표현

interface Animal {
  name: string;
  sound(): void;
  bark: () => void;
  play?(): void; // 그래서 타입 가드 한 번 써줘야 함
}

제네릭 & 상속

interface Container<T> {
  value: T;
}

interface Box<T> extends Container<T> {
  label: string;
}

const box: Box<number> = {
  label: "grid box",
  value: 10,
};

📌 출처

수코딩(https://www.sucoding.kr)

1. 유니언 타입

• 매개변수, 반환 값 모두 유니언 타입을 적용할 수 있다.
• 단, 어떤 타입이 올 지 확실하지 않기 때문에 특정 타입에만 사용 가능한 메서드를 호출하면 에러가 발생한다.
  • 타입 가드를 사용한다. (typeof)

타입 가드

• 코드에서 값의 타입을 좁히거나 확실하게 추론할 수 있도록 도와주는 방법이다.

2. 인터렉션 타입

• 여러 개의 타입을 모두 만족하고 싶을 때 사용한다.
• 어떤 타입과 any와 결합하면 any로 평가된다.
• 어떤 타입과 never와 결합하면 never로 평가된다.

3. 함수 오버로드

• 함수의 타입이 여러 개 전달될 수 있을 때, 다양한 동작을 처리할 수 있도록 정밀하게 타입을 지정하는 방법
• 중간에 다른 코드가 끼어들면 안된다. (주석이나 빈 줄은 가능)
• 코드가 복잡해질 수 있으나 오버로드 시그니처를 보여주는 기능이 있어 어떤 타입을 넣었을 때 어떤 타입이 리턴되는지를 빠르게 알 수 있다.
• 함수 선언문으로만 가능하다. 함수 표현식이나 화살표 함수로는 불가능하다.

function combine(a: number, b: string): string; // 오버로드 시그니처
function combine(a: string, b: number): string;
function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: number | string, b: number | string): number | string { 
  if (typeof a === "number" && typeof b === "number") return a + b;
    return `${a}${b}`;
}

4. 타입 추론 vs 타입 표명

타입 추론

• 타입스크립트 엔진이 기본적으로 수행하는 작업
• 변수에 할당되는 것을 보고 자동으로 타입을 추론하여 적용해주는 기능
• 초기화를 하지 않는 변수는 타입 추론이 불가능하기 때문에 any로 추론
• 함수 매개변수는 타입 추론 불가 (기본값 할당하면 가능)
• 타입 추론을 적극적으로 사용하면 깔끔한 코드를 작성할 수 있다.

let num1 = 10; // number로 타입 추론
const num2 = 30; // 🚨 30(리터럴 타입)으로 타입 추론

타입 표명

• 직접 타입을 지정하는 것

5. 타입 별칭 (type alias)

• 나만의 타입 만들기
• 대문자로 시작하는 것이 규칙
• 타입 식별자와 변수 식별자는 이름이 같아도 따로 관리됨 (중복 OK)

  type MyType = string | number | booleanl;

📌 출처

수코딩(https://www.sucoding.kr)

1. 함수의 타입

• 매개변수와 반환 값의 타입을 지정하는 것
• void: 매개변수 타입. 아무것도 반환하지 않는다는 뜻
• never: 매개변수 타입. 반환 값으로만 사용하는 타입
  • 무한루프나 에러 던질 때 사용

2. 타입 오퍼레이터 (type operator)

• &(AND) : intersection 타입
  • 기본 타입에서는 사용 불가
  • 보통 객체에서 사용됨
  • 같은 이름의 속성명은 같은 타입이면 자연스럽게 합쳐짐
  • 같은 이름의 속성명이 다른 타입이면 문제가 생김 (개발자가 알아서 신경써야 함)
• |(OR) : union 타입

1. 자바스크립트 복습

• 템플릿 문자열
• 함수 (함수 선언문, 함수 표현식, 화살표 함수)
• 비구조화 할당 : 배열과 객체에서 값을 추출하여 변수에 할당하는 것
  • 배열
  • 객체
• spread 연산자 (...)
  • 객체 혹은 배열 합치기에 편리
  • 깊은 복사가 불가능 하다는 점

궁금증

spread 연산자와 rest 파라미터의 차이

• 사용 방법은 동일
• 함수의 파라미터로 쓰이면 rest 파라미터 (단, 함수 매개변수의 가장 마지막에 작성)
• 객체나 배열 등에 사용되면 spread 연산자 (위치 상관없음. 여러번 사용 가능)

2. 타입스크립트 세팅

• npm init -y : 노드 패키지 초기화 (필요한 값은 알아서 세팅)
• npm ls -g --depth=0 : 설치되어 있는 개발 라이브러리 목록
  • 이 출력 결과가 텅텅 비어있게 관리하면 좋음
  • 항상 최신 버전을 사용해야 하는데, 글로벌로 설치된 라이브러리의 버전으로 설치되기 때문
  • npm install -g 명령어 주의
• npm cache verify : 컴퓨터에 있는 캐시 파일을 확인하면서 불필요한 파일 삭제
• npm install typescript --save-dev : 타입스크립트 설치
• npm tsc --init : 타입스크립트 초기화 (tsconfig.json 파일 생성)
• npm tsc src/index.ts : 타입스크립트로 작성된 파일이 자바스크립트 코드로 만들어 줌
  • tsc는 TS를 JS로 변경해주는 컴파일러
  • 파일 하나면 컴파일 할 때는 tsconfig.json 참고 X
  • npm tsc : tsconfig.json 참고하며 컴파일 진행

3. 타입스크립트와 자바스크립트의 차이

• JS는 모든 것이 런타임에 결정. 코드를 실행해봐야 알 수 잇음
• TS는 컴파일 단계에서 알 수 있음. 컴파일 과정에서 오류가 있는지 없는지 확인 가능
  • 이런 이유 때문에 TS는 안정적인 언어라고 함.
  • 코드 실행 이전에 오류를 찾을 수 있으니까.
• 타입스크립트(TS) = 자바스크립트(JS) + 타입 시스템(type system)

궁금증

lock.json 파일은 무엇인가요?

• package.json 파일을 한 번더 검증하기 위한 파일
• 깃허브에 코드를 올릴 때, node_modules나 package-lock.json은 올릴 필요가 없습니다.

왜 TS를 JS로 변경해야 하나요?

• ndex.html은 TS 파일 실행 불가
• 브라우저는 오로지 html, css, js만 해석 가능
  • css만 해석 가능 => SCSS, SASS 해석 불가
  • html만 해석 가능 => pug 해석 불가
  • js만 해석 가능 => ts 해석 불가
• TS는 웹브라우저가 해석할 수 없는 언어이기 때문에 JS로 변경해주어야 한다.

npx는 무엇인가요?

• npx는 node package executor (npm을 실행 시킴)
• 설치한 노드 패키지를 실행할 때 사용하는 도구
• npm tsc : tsc라는 패키지를 실행하라!
• npx ts-node -v : 로컬 환경에 ts-node가 없다면 npx가 설치할지 말지 물어봐줌 & 설치도 해줌

ts를 코드 러너로 실행하면 tsconfig.json 설정으로 실행되나요?

• 노놉. 코드 러너 기본 내장 설정으로 실행

🎟️ 타입스크립트

1. 타입시스템의 타입

• string
• number
• boolean
  • truty나 falsy는 !!로 붙여주어 boolean으로 완전히 바꿔주기
  • "true", "false" 문자열은 JSON.parse()로 변경 가능
• object
  • 상당히 포괄적인 타입 (일반 객체, 빈 객체, 배열, 함수 전부 가능)
  • object 타입을 사용하기보다는 객체 속성을 명시적으로 작성해주는 방식으로 사용하기
• array
  • 타입명은 따로 없고 대괄호를 넣으면 됨
  • 예전에는 Array<string> 이렇게 쓰이기도 했으나, 요즘엔 string[]으로 쓰임
• tuple
  • 튜플은 여러가지 타입의 데이터를 배열에 넣은 것. (길이 고정)
  • 옵셔널(?) : 있어도 되고 없어도 되고
  • rest 연산자 사용 가능
  • const [item, ...rest]: [string, ...number[]] = ["a", 1, 2, 3]
• null, undefined
  • null 병합 연산자 (??)
  • const c:string = x ?? "test"
• any
  • 모든 타입을 받을 수 있음 (타입을 체크하지 않겠다라는 의미로 봐도 무방)
  • 사용 시 주의
  • 지금 당장 어떤 타입까지 고려하기 어려울 때 사용
• unknown
  • 나중에 뭐가 들어갔는지 확인해야 함
  • 타입가드 (타입 검사)
  • if (Array.isArray(value)) { ... }
  • any로 사용할 바에는 unknown 사용하기

📌 출처

수코딩(https://www.sucoding.kr)

1. Node.js의 비동기 메서드

• Promise 리턴
  • 콜백 or async/await 처리

2. 버퍼와 스트림

• 버퍼 : 메모리에서 직접 바이트 데이터 처리
  • 한 번에 메모리에 올릴 때 유용
  • 대용량 데이터에는 비효율적
  • ex) fs 모듈 - readFile
• 스트림 : 청크 단위로 데이터를 처리하여 메모리 사용량 절약
  • 읽기 스트림 / 쓰기 스트림
  • ex) fs 모듈 - createReadStream, createWriteStream

3. 버퍼를 base64로 인코딩

• 읽어온 이미지 파일을 base64 인코딩 -> 웹 브라우저에 직접 렌더링 가능

  • base64 : 바이너리 데이터를 문자열로 변환하는 방법
  • 이메일이나 JSON 데이터로 이미지 전송할 때 유용

    fs.readFile('example.jpg', (err, data) => {
    if (err) throw err;
    

  const base64Image = data.toString('base64'); console.log('이미지:', base64Image);

  /*

  */ }); ```
  
  

🎉 이벤트

• Node.js는 싱글 스레드 이벤트 루프로 비동기 작업 처리 (여러 작업 동시 처리 가능)
  • 비동기 처리로 이벤트 큐에 등록, 이벤트 루프는 다른 작업 수행
• 각 작업이 완료될 때 이벤트 발생 -> 바인딩된 콜백 함수 실행
• 고성능 네트워크 애플리케이션 구축에 유리 (IO 작업)

이벤트가 왜 필요한데?

• 이벤트는 콜백 함수가 비동기적으로 실행
  • 처리중인 작업이 끝나면 알아서 실행되는 것
• 반면 함수는 작업이 완료될 때까지 대기 => 비동기 처리 어려움

1. events 모듈

• events 모듈 (내장 객체)
• events 모듈의 EventEmitter 클래스로 이벤트 생성 및 처리
• 이벤트 정의 & 발생 & 처리 리스너 연결

  const EventEmitter = require('events');
  const myEmitter = new EventEmitter();

2. 이벤트 생성 & 리스너 등록

• on 메서드 : 이벤트 리스너 등록
• emit 메서드 : 이벤트 발생
• 특정 이벤트에 여러 개의 리스너 등록 가능(이벤트 발생 시, 순서대로 호출)

  // greet라는 이벤트가 발생하면 이런 콜백함수를 실행할거야
  myEmitter.on("greet", (name) => {
  console.log(`안녕하세요. ${name}님!`);
  });
  

// greet 이벤트 발생!!! myEmitter.emit('greet', '영희');

- 리스너 내부에서 비동기 작업 처리 가능
```javascript
myEmitter.on('asyncEvent', async () => {
  const data = await Promise.resolve();
  console.log(data);
});

myEmitter.emit('asyncEvent');

on 메서드 & once 메서드

• on(event, listener) : 이벤트가 여러번 발생할 때마다 호출
• once(event, listener) : 첫 이벤트만 듣고 이후 이벤트는 듣지 않음
  • 첫 이벤트 발생 후, 리스너 삭제
• 궁금) 첫 이벤트 발생 후, 같은 이벤트와 콜백함수를 다시 등록하면?
  • 그럼 괜찮음 ^_^

3. 이벤트 리스너 삭제

• removeListener(event, listener) : 특정 이벤트에 등록된 리스너 제거
  • 리스너를 먼저 변수에 담아 등록 & 삭제
• removeAllListeners(event) : 특정 이벤트에 연결된 모든 리스너 제거

4. 에러 처리

• 에러 이벤트 리스너를 정의하고 에러가 발생하면 에러 이벤트를 발생시키는 방식

  myEmitter.on('error', (err) => {
  console.error('에러 발생:', err.message);
  });
  

myEmitter.on('someEvent', () => { // 일반적인 에러가 아니라 명시적으로 "error" 이벤트를 발생시킴 myEmitter.emit('error', new Error('명시적인 에러 발생')); });

### 5. 이벤트 루프 & 비동기 작업
```javascript
// 현재 실행 작업이 완료 된 직후 실행
process.nextTick(() => console.log('nextTick 실행'));

// 다음 이벤트 루프 주기에서 실행
setImmediate(() => console.log('setImmediate 실행'));

console.log('일반 코드 실행');

일반 코드 실행
nextTick 실행
setImmediate 실행

웹 소켓

1. Websocket 모듈

const Websocket = require("ws"); // 외부 모듈

// 웹 소켓 서버(인스턴스) 생성
const wss = new Websocket.Server({ port: 8080 });

2. 클라이언트 접속

• connection 이벤트 : 클라이언트가 접속했을 때 발생

  • 서버 실행도 connection 이벤트 발생

• 웹소켓 서버에서 기본적으로 제공하는 이벤트

• emit 없어도 자체적으로 발생

  // 클라이언트 하나만을 위한 고유한 연결 (각각 연결됨)
  // ws는 클라이언트와의 연결을 나타내는 웹소켓 객체 (클라이언트의 정보 소유)
  wss.on("connection", (ws) => {
  ws.id = new Date().getTime().toString().slice(-3);
  console.log("연결됐음");
  
  // 클라이언트로부터 메시지 수신
  ws.on("message", (message) => {
    console.log(`${ws.id}로부터 메시지 수신: ${message}`);
  
    // 메시지 발신한 유저 외 나머지 유저에게 메시지 전달
    wss.clients.forEach((client) => {
      if (client !== ws) {
        client.send(message.toString());
      }
    });
  
  // 클라이언트와의 연결이 끊길 때
  ws.on("close", () => {
    console.log("연결 종료");
  });

3. 클라이언트에서는

const socket = new WebSocket("ws://localhost:8080");

socket.addEventListener("open", function() {
  console.log("서버와 연결");
});

socket.addEventListener("message", function(e) {
  console.log(e.data);
});

something.addEventListener("이벤트", function() {
  socket.send("메시지");
}

🎢 Express

1. express 모듈

• HTTP 요청의 경로 & HTTP 메서드를 통해 쉽게 API 요청 가능 (간단!)

  const express = require("express"); // 외부 모듈
  const app = express();
  const port = 5000;

2. 미들웨어 등록

• 요청이 발생되기 전에 먼저 거쳐 가는 부분
• 서버가 요청을 처리하기 전에 실행할 기능 설정

  // 요청 body를 자동 파싱 => 객체 형태로 전달
  // Content-type: application/json일 때 유용
  app.use(express.json());
  

// URL-encoded 파라미터 파싱 => 객체 형태로 전달 app.use(express.urlencoded({ extended: true }));

<br />

### 3. API 요청
#### GET : 항목 조회
```javascript
app.get('/path/:id', (req, res) => { ... });
// req.qeury -> 쿼리 문자열에 포함된 파라미터들을 담고 있는 객체
// req.params -> URL 파라미터 파싱
// res.json(...) -> JSON 형식으로 클라이언트에게 응답 보냄
// res.status(404).send('메시지') -> 메시지와 함께 404 에러 보냄

POST : 새 항목 추가

app.post('/path', (req, res) => { ... });
// req.body -> 클라이언트가 보낸 본문이 담긴 데이터
// res.status(201).json(데이터) -> 데이터와 함께 201 성공 보냄

PUT : 전체 항목 업데이트

app.put('/path/:id', (req, res) => { ... });

PATCH : 부분 업데이트

app.patch('/path/:id', (req, res) => { ... });

DELETE : 항목 삭제

app.delete('/path/:id', (req, res) => { ... });

OPTIONS : CORS 및 허용 메서드 확인

• options 메서드 : 클라이언트가 서버에 어떤 HTTP 메서드를 지원하는지 확인하려고 할 때 사용

• CORS 요청이나 프리플라이트 요청에 의해 자동으로 발생

  app.options('/items', (req, res) => {
  // 서버가 지원하는 메서드 명시
  res.set('Allow', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
  
  // 상태 코드 반환 (204 = 본문 내용 X, 요청 성공 O)
  res.sendStatus(204);
  });

4. 서버 시작

app.listen(PORT, () => {
  console.log(`Server running :${PORT}`);
});

✏️ 메모

• nodemon => 서버를 실행하면서 코드를 수정하면 자동으로 서버 재시작
  • 설치 : npm install nodemon
  • 실행 : npx nodemon 파일.js
• 웹소켓에 클라이언트가 엄청나게 발생하면 문제가 없나?
  • 연결로는 문제 없음
  • 단, 받은 메세지에 대한 로직 처리의 부담은 존재
  • 실무에서는 연결을 잘게 쪼개 각 서버에 분산

📌 출처

수코딩(https://www.sucoding.kr)