토누 개발 일지

https://ebony-homegrown-b56.notion.site/CPU-1cdb9140200f80678623f054d0ae19f6?pvs=4

https://ebony-homegrown-b56.notion.site/1c0b9140200f80768a13e96ef73333b2

REST 

• 정보를 자원으로 간주
• 각 자원에게 URI 배정
• 자원에 대한 조작은 HTTP 메서드로 표현
• URI와 HTTP 메소드를 이용해 객체화된 서비스에 접근

* 웹 브라우저에서는 GET, POST만 사용 가능

REST 구성

• 자원 : URI
• 행위 : HTTP METHOD
• 표현 : 일반적으로 JSON 사용
• REST 로 처리되는 URI/METHOD 조합 -> REST API

REST API 서비스

• 클라이언트 종류에 제한을 두지 않음
• 약속된 형식으로만 데이터를 받아올 수 있는 단점 존재

Json-Server  사용

• fake 백엔드 서버를 빠르게 만들 수 있는 도구
• REST API 요청 처리

npm install -g json-server //글로벌 설치

json-server db.json //db.json을 사용해서 서버 실행

Thunder Client

• Visual Studio Code 확장 프로그램, API 요청 테스트를 도와주는 툴

axios

• HTTP 기반 통신을 지원하는 자바스크립트 라이브러리
• fetch보다 편리, Promise 기반으로 비동기 처리에 적합

GET 요청 예제

import axios from 'axios';

const requestAPI = () => {
	const url = 
    axios.get(url).then((response) => {
    	console.log(response);
    });
};

비동기 방식 : Promise vs async/await

Promise 방식

axios.get('/api/todos').then(response => {
  console.log(response.data);
});

async/await 방식

const response = await axios.get('/api/todos');
console.log(response.data);

axios.response 객체

Cross Origin 문제

origin

• 프로토콜 + 도메인 + 포트 번호 조합

동일 출처 정책(Same Origin Policy)

• 웹 브라우저는 보안상의 이유로 서로 다른 origin 간의 요청을 기본적으로 막음

해결 방법

1. 백엔드 API 서버 측에서 CORS 기능 제공

2. 프론트엔드 애플리케이션을 호스팅하는 웹서버에 프록시 설치 또는 설정

CORS(Cross-Origin Resource Sharing)

• 브라우저가 다른 origin의 서버와 통신해도 괜찮은지를 판단하기 위한 HTTP 헤더 기반 약속

https://ebony-homegrown-b56.notion.site/1c0b9140200f80e9b9c9dff604d27312?pvs=4

2025/03/28

----

강의 교안

1) 전체 필수

2) 동적 라우터 - 필수, 중첩(X)

3) 명명 라우트 - 필수

4) 스크립트로 페이지 이동 - 필수

----

1️⃣Vue-router 란?

• SPA(Single Page Applicaion) 구조를 위해 사용하는 vue의 공식 라우팅 라이브러리
• 새로고침 없이 페이지 이동 가능

라우터 설정 흐름

▶️ 1단계: router/index.js – 라우터 설정 파일 만들기

📁 파일 위치: src/router/index.js

// ① vue-router에서 필요한 함수 import
import { createRouter, createWebHistory } from 'vue-router';

// ② 연결할 컴포넌트들 import
import Home from '@/pages/Home.vue';
import About from '@/pages/About.vue';

// ③ 라우터 객체 생성
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

// ④ 내보내기 (다른 곳에서 사용하려고)
export default router;

🌈 createRouter()

router 객체 생성

URI와 이 경로를 처리할 컴포넌트 매핑

▶️ 2단계: main.js – 라우터를 앱에 연결

📁 파일 위치: src/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'); // 앱 실행

▶️ 3단계: App.vue – 화면에서 라우터가 작동하도록 설정

📁 파일 위치: src/App.vue

<template>
  <div class="container">
    <Header />
    <router-view /> <!-- 여기에 선택된 컴포넌트가 표시됨 -->
  </div>
</template>

<script>
import Header from '@/components/Header.vue';
export default {
  components: { Header }
};
</script>

🌈<RouterView>

각 경로별 컴포넌트를 렌더링 할 위치 지정

보통 App.vue에 위치

▶️ 4단계: 라우트 링크 생성 – Header.vue나 메뉴바에서 사용

📁 파일 위치: src/components/Header.vue

<router-link to="/">홈</router-link>
<router-link to="/about">소개</router-link>

🌈<RouterLink to="경로">

화면 전환을 위한 링크 생성

useRoute(), useRouter()함수 비교

- 둘 모두 setup 함수 내에서 사용됨

---

2️⃣ 동적 라우트 & 중첩 라우트

🌈동적 라우트(Dynamic Route)

• URL의 일부를 변수처럼 사용
• ex)  /members/:id → 여러 멤버 상세 페이지를 하나의 컴포넌트로 처리

🌈 중첩 라우트

• 부모 컴포넌트 안에 자식 컴포넌트를 렌더링
• ex) 팝업 창/ 화면 전환 없이 화면을 중첩해서 보임

<--- 개념만 숙지

🌈 명명된 라우트

• 라우트 정보에 이름을 부여하는 방법
• URI 경로가 아닌 이름을 이용해 경로 전환

---

3️⃣ 프로그래밍 방식의 라우팅 제어

📌 라우팅(Routing):
사용자가 브라우저 주소창에 입력한 URL에 따라 어떤 컴포넌트를 보여줄지 정하는 것

📌 프로그래밍 방식 라우팅이란?

사용자의 클릭이나 어떤 조건이 만족되었을 때, JavaScript 코드로 직접 페이지 이동을 처리하는 것

즉, 링크를 클릭하지 않아도 코드로 페이지 전환

📌 라우터 객체의 메서드

📌 내비게이션 

Vue앱에서 한 페이지에서 다른 페이지로 이동하는 것

📌 내비게이션 가드

라우팅이 일어날 때 프로그래밍 방식으로 내비게이션을 취소하거나, 다른 경로로 리디렉션

👉🏻 내비게이션을 안전하게 보호하는 기능 수행

ex) 인증 받은 사용자만 해당 페이지 접근 가능

- 라우트하는 경로가 바뀔 때 반응

- 동일한 경로에서 파라미터나 쿼리 문자열이 변경될 때는 작동하지 않음

사용 수준

1) 전역 수준 내비게이션 가드

2) 라우트 수준 내비게이션 가드

3) 컴포넌트 수준 내비게이션 가드

2025/03/27

Option API 방식

• 논리적 관심사 코드가 분리됨
• 코드 재사용성이 낮음

Composition API 방식

• 대규모 Vue 애플리케이션의 컴포넌트 로직을 효과적으로 구성하고 재사용하는 함수 기반 API
• Vue3에서 새롭게 추가된 기능

setup() 메서드

• 초기화 작업을 setup()에서 정의
• data, methods, computed 옵션이 사라짐
• beforeCreate, created 단계에서 setup() 메서드 호출

---

ref() 함수

✅ 기본 데이터 타입(primitive 타입)에 대한 반응성 데이터 생성 /  data 옵션에 해당

✅ <script>에서 사용할 때는 x.value 로 접근 / <template>에서는 x 로 접근 가능

<template>
    <div>
        X : <input type="text" v-model.number="x" />
        <br />
        Y : <input type="text" v-model.number="y" />
        <br />
        <button @click="calcAdd">계산</button><br />
        <div>결과 : {{ result }}</div>
    </div>
</template>

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

    export default {
        name : 'Calc2',
        setup() {
            const x = ref(10);
            const y = ref(20);
            const result = ref(30);

            const calcAdd = () => {
                result.value = x.value + y.value;
            };

            return { x, y, result, calcAdd};
        },
    };
</script>

reactive() 함수

✅  참조 데이터 타입(객체, 배열)에 대한 반응성 데이터 생성

<template>
    <div>
        X : <input type="text" v-model.number="state.x" />
        <br />
        Y : <input type="text" v-model.number="state.y" />
        <br />
        <button @click="calcAdd">계산</button><br />
        <div>결과 : {{ state.result }} </div>
    </div>
</template>

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

    export default {
        name : 'Calc3',
        setup() {
            const state = reactive({ x:10, y:20, result:30});

            const calcAdd = () => {
                state.result = state.x + state.y;
            };

            return {state, calcAdd};
        },
    };
</script>

Vue3로 넘어오면서 프록시를 생성하는 책임이 개발자에게 넘어옴

---

computed() 함수

✅ 계산형 속성을 만들 때 사용

✅ 옵션 API에서 computed 옵션에 해당(계산된 속성)

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

    export default {
        name : 'Calc4',
        setup () {
            const state = reactive( { x:10, y:20 } );
            const result = computed( () => {
                return state.x + state.y;
            });
            return {state,result};
        },
    };
</script>

watch() 함수

✅ 특정 데이터 변화를 감지해서 로직 실행

--- 

생명주기 훅

⚠️ Option API 생명주기 메서드와 다른 점

1) beforeCreate(), created() 메서드의 기능을 setup()으로 대체

2) 나머지 생명주기 메서드는 앞에 on 접두어를 붙인 함수로 변경

3) 실행할 함수를 매개변수로 전달

---

👉🏻  <script setup>

템플릿에서 사용하는 값 : 최상위의 변수, 함수는 직접 템플릿에서 사용 가능

지역 컴포넌트 등록 : import만 하면 됨

2025/03/26

단일 파일 컴포넌트에서의 스타일

✅전역 CSS

• 페이지 전체에 적용 => 충돌 발생 가능

다른 컴포넌트의 스타일과 충돌 피하는 방법

• 특정 컴포넌트만의 스타일 지정
• 범위 CSS(Scoped CSS) : 컴포넌트가 렌더링하는 요소에 특성 기반의 추가적인 식별자 부여
•  CSS 모듈

범위 CSS

CSS 모듈

슬롯(slot)

❗슬롯은 "부모 → 자식" 방향으로 동작합니다!

✅ 부모 컴포넌트가 자식 컴포넌트의 slot 자리에 콘텐츠를 끼워 넣는 구조예요.

즉, 슬롯은 자식이 "빈 자리"를 열어두고,
부모가 그 빈 자리에 "콘텐츠"를 전달하는 거예요.

기본 슬롯

명명된 슬롯(식별자 사용) <- 중요

화면 레이아웃 관리 목적으로 자주 사용

범위 슬롯

자식 컴포넌트의 데이터를 이용해 바인딩하는 경우 범위 슬롯 사용

• 전달된 데이터는 슬롯 템플릿 내부 범위에서만 사용 가능

✔️ 일반 슬롯: 부모가 콘텐츠를 자식에게 넣어줌
✔️ 범위 슬롯: 자식이 데이터를 제공하고, 부모가 그걸 사용해서 화면을 구성함

동적 컴포넌트(Dynamic Component) - 개념만 알아두기

화면의 동일한 위치에 여러 컴포넌트를 표현해야 하는 경우 사용

사용자 정의 v-model 만들기 <- 중요

컴포넌트에서 v-model을 직접 지원하도록 커스터마이징할 수 있다는 뜻!

2025/03/25

✔️ 지금까지 Vue를 공부했던 방식

• HTML 파일 하나 안에서  Vue를 CDN으로 불러와서 사용

<script src="https://unpkg.com/vue@3"></script>

• Vue 인스턴스를 직접 만들어서 <div id="app">에 마운트

✔️ 지금부터 사용하는 방식: 실제 프로젝트 방식

프로젝트 생성

1.

npm init vue

2. 프로젝트 이름 설정

3. 프로젝트 폴더로 진입

cd test-vue-app

npm install

=> 프로젝트 실행

npm run dev

💡Vite(비트)란?

빠르고 가벼운 프론트엔드 개발 환경을 제공하는 모던 빌드 도구

특징

✅ 빠른 실행

✅ 실시간 반영(HMR)

✅ 간편한 설정

✅ ES 모듈 기반

💡 단일 파일 컴포넌트란?

.vue 확장자를 가진 파일 하나에 화면(template), 로직(script), 스타일(style)을 한 곳에 모아서 작성하는 Vue만의 컴포넌트 방식. 즉, 하나의 파일이 하나의 독립된 화면 조각 역할 함.

• 재사용성
• 복잡성

을 고려하여 컴포넌트 분리

📌컴포넌트 전역 등록

• 한 번 등록하면 애플리케이션 전역에서 어디서든 사용할 수 있는 방식

main.js

import { createApp } from 'vue'
import App from './App.vue'
import MyButton from './components/MyButton.vue'

const app = createApp(App)
app.component('MyButton', MyButton)

app.mount('#app')

✅ 특징

• 모든 컴포넌트에서 import 없이 사용 가능
• 코드가 간결하지만 모든 페이지에 포함되므로 번들 크기가 커질 수 있음
• 이름 충돌 위험 있음

📌컴포넌트 지역 등록

• 해당 컴포넌트 파일 안에서만 사용할 수 있도록 등록하는 방식

App.vue

<script>
import CheckboxItem from './components/CheckboxItem.vue';

export default {
  name : 'App',
  components : {CheckboxItem}
};
</script>

✅ 특징

• 사용하는 컴포넌트만 메모리에 올라감 → 최적화에 유리
• 재사용 가능한 컴포넌트라면 여러 파일에 중복 등록 필요
• 유지보수 시 명시적이라 가독성 좋음

💡컴포넌트의 조합

✅ 1. 부모 → 자식: props로 데이터 전달

📌 전달 흐름

1. 부모가 데이터를 정의하고
2. 자식에게 <컴포넌트 :속성="값" /> 형태로 전달
3. 자식 컴포넌트는 props 옵션으로 해당 데이터를 받음

❗ ❗ 속성으로 전달받은 데이터는 변경 불가(읽기 전용)

❗ ❗ 부모에서 속성 값을 변경 시 => 자식은 자동으로 다시 렌더링됨

<App.vue  부모 컴포넌트>

<template>
  <div>
    <h2>관심있는 K-POP 가수?</h2>
    <ul>
      <CheckboxItem
        v-for="idol in idols"
        :key="idol.id"
        :name="idol.name"        //중요
        :checked="idol.checked"  //중요
      /> 
    </ul>
  </div>
</template>

<script>
import CheckboxItem from './components/CheckboxItem.vue'

export default {
  name: 'App',
  components: { CheckboxItem },
  data() {
    return {
      idols: [
        { id: 1, name: 'BTS', checked: true },
        { id: 2, name: 'Black Pink', checked: false },
        { id: 3, name: 'EXO', checked: false },
        { id: 4, name: 'ITZY', checked: false }
      ]
    }
  }
}
</script>

<CheckboxItem.vue 자식 컴포넌트>

<template>
  <li>
    <input type="checkbox" :checked="checked" /> {{ name }}
  </li>
</template>

<script>
export default {
  name: 'CheckboxItem',
  props: {
    name: String,
    checked: {
      type: Boolean,
      default: false
    }
  }
}
</script>

✅ 2. 자식 → 부모: emit으로 이벤트 전달

📌 전달 흐름

1. 자식 컴포넌트에서 $emit('이벤트명', 데이터) 호출
2. 부모 컴포넌트는 해당 이벤트를 @이벤트명="함수" 방식으로 감지
3. 부모 컴포넌트가 전달된 데이터를 받아 처리

<InputName.vue 자식 컴포넌트>

<template>
  <div style="border: solid 1px gray; padding: 5px">
    이름: <input type="text" v-model="name" />
    <button @click="$emit('nameChanged', { name })">이벤트 발신</button>
  </div>
</template>

<script>
export default {
  name: 'InputName',
  data() {
    return { name: '' }
  }
}
</script>

<App4.vue 부모 컴포넌트>

<template>
  <div>
    <InputName @nameChanged="nameChangedHandler" />
    <h3>App 데이터: {{ parentName }}</h3>
  </div>
</template>

<script>
import InputName from './components/InputName.vue'

export default {
  name: 'App4',
  components: { InputName },
  data() {
    return { parentName: '' }
  },
  methods: {
    nameChangedHandler(e) {
      this.parentName = e.name
    }
  }
}
</script>

✅ 3. 이벤트 유효성 검증(emits 옵션)

📌 개념

Vue 3에서는 $emit()으로 발신하는 이벤트가 정상적인 이벤트인지 검증 가능

✅ 기본 검증 방식

export default {
  emits: ['nameChanged']  // 허용된 이벤트 목록
}

→ 위 이벤트 외의 emit이 발생하면 콘솔에 경고가 뜸

✅ 고급 검증: 데이터 유효성 체크

export default {
  emits: {
    nameChanged: (payload) => {
      return typeof payload.name === 'string' && payload.name.length >= 2
    }
  }
}

→ payload.name이 문자열이 아니거나 2자 미만이면 경고 발생

✅ 4. 이벤트 에미터 (mitt 라이브러리)

📌 개념

Vue 컴포넌트 간 이벤트를 전역(Global)으로 주고받기 위한 이벤트 버스 도구
→ 형제 컴포넌트끼리 통신할 때 유용

✅ 설치

npm install mitt