토누 개발 일지

OOP 4가지 개념

객체지향 언어(OOP)가 갖추어야 하는 기본 개념 4가지

* 인터페이스는 "추상화"의 도구로, "다형성"을 가능하게 해주는 수단이다

캡슐화

오버로딩 / 오버라이딩

📝 오버로딩(Overloading)

• 하나의 메서드에 대해 매개변수를 다르게해서 여러개 생성하는 것
• 위치 : 같은 클래스 내에서 발생
• 목적 : 다양한 입력 처리(편의성)

class Calculator {
    int add(int a, int b) {
        return a + b;
    }

    double add(double a, double b) {
        return a + b;
    }

    int add(int a, int b, int c) {
        return a + b + c;
    }
}

📝 오버라이딩(Overriding)

• 부모 클래스로부터 상속받은 메서드를 자식 클래스에서 재정의하는 것
• @override 사용
• 위치 : 자식 클래스 내부
• 목적 : 부모 클래스의 메서드를 자식 클래스에 맞게 재정의

class Animal {
    void sound() {
        System.out.println("동물 소리");
    }
}

class Dog extends Animal {
    @Override
    void sound() {
        System.out.println("멍멍");
    }
}

💌 추상 클래스

• abstract 키워드로 정의된 클래스, 공통된 속성과 기능을 묶는 설계도 역할
• 객체 직접 생성 불가
• 일부 메서드는 구현하고, 일부는 추상 메서드로 정의 가능
• ➡️ 추상 클래스 내에, 일반 메서드 존재 가능!!

public abstract class Animal {
    String name;

    void eat() {
        System.out.println("먹는다");
    }

    abstract void sound();  // 추상 메서드 (구현 없음)
}

public class Dog extends Animal {
	...
	
}

💌 추상 메서드

• 구현부가 없는 메서드
• 선언만, 실제 구현은 자식 클래스에 맡김
• 오직 추상 클래스 내에서만 정의 가능

❓ 추상 클래스 vs 인터페이스 ❓

*단일 상속 : 한 클래스가 오직 하나의 추상 클래스만 상속받을 수 있다.

  (ex, 자식은 엄마나 아빠만 가질 수 있다. 엄마 아빠 동시에 가질 수 없다.)

*다중 상속 : 한 클래스가 두 개 이상의 부모 클래스로부터 상속을 받는 것

면접 답변이라면,

추상 클래스와 인터페이스는 모두 추상화를 위한 도구이지만 사용 목적과 기능에 차이 존재
추상 클래스는 클래스 간 공통된 속성과 기능 공유 / 상속받는 클래스들이 공통 기능을 그대로 사용하거나 재정의 가능
인터페이스는 구현해야 할 기능의 '규약'만 정의 / 여러 인터페이스를 동시에 구현할 수 있어 다중 상속이 필요한 상황에 적합

그렇다면 추상 클래스는 왜 사용할까?

그냥 상속을 사용하거나 인터페이스를 사용하면 되는거 아닌가?

추상 클래스의 장점

• 공통 기능 재사용 가능
• 상태(필드)를 가질 수 있음
• 자식클래스 제어 가능
• 메모리 효율화(일반 메서드를 추상 메서드로 관리함으로서 얻는)

2025/04/15 ~ 2025/04/16

📦  자바 메모리 구조

스택 영역

• 지역 변수, 매개 변수, 참조 변수 저장
• 초기화 없음

힙 영역

• 객체(인스턴스), 인스턴스 변수 저장
• 초기화됨(0, null 등)

메서드 영역

• static 변수, static 메서드, 클래스 정보 저장됨

🧱 스택 영역 vs 힙 영역

🧱 참조 변수, 객체(인스턴스)

🧱 static

• 클래스 단위로 존재한다는 의미(공유)
• 객체(인스턴스)를 생성하지 않고도 접근 가능

public class Counter {
    static int count = 0;

    public Counter() {
        count++;
    }
}

🧱 final

• 한 번 정해지면 바꿀 수 없다
• final 클래스 : 부모 클래스가 될 수 없으므로, 자식 클래스 생성도 불가
• final 메서드 : 오버라이딩할 수 없다. (부모 클래스 내의 final 메서드는 자식클래스에서 재정의 불가)

final int num = 10;
num = 20; // ❌ 컴파일 오류

🧱 static + final

• static : 클래스 단위로 존재 (공유)
• final : 변경 불가
• 📌 즉, 모든 객체가 공유하면서도 절대 바뀌지 않는 전역 상수 처럼 사용

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만 하면 됨