생각보다 실천을

김영한의 실전 자바 - 기본편 [생성자]

yjym33 — Tue, 13 May 2025 16:47:18 +0900

출처 : https://www.inflearn.com/course/%EA%B9%80%EC%98%81%ED%95%9C%EC%9D%98-%EC%8B%A4%EC%A0%84-%EC%9E%90%EB%B0%94-%EA%B8%B0%EB%B3%B8%ED%8E%B8/dashboard

4. 생성자

생성자는 객체 생성 직후 객체를 초기화 하기 위한 특별한 메서드로 생각할 수 있다.

4.1 생성자 - 필요한 이유

객체를 생성하는 시점에 어떤 작업을 하고 싶다면 생성자(Constructor)를 이용하면 된다. 어떠한 객체를 생성하고 나면 초기값을 설정해야 하는 경우가 있다. 객체 지향 프로그래밍에서는 속성과 기능을 한 곳에 두는 것이 더 나은 방법이다. 그러므로 객체 안에 객체의 초기값을 설정하는 생성자를 제공하는 것이 좋다.

4.2 this

4.2.1 this

this는 인스턴스 자신의 참조값을 가리킨다. 멤버 변수에 접근하려면 앞에 this. 붙여주면 된다.

4.2.2 this의 생략

this는 생략할 수 있다. 이 경우 변수를 찾을 때 가까운 지역변수(매개변수도 지역변수다)를 먼저 찾고 없으면 그 다음으로 멤버 변수를 찾는다. 멤버 변수도 없으면 오류가 발생한다.

4.3 생성자 - 도입

생성자와 메서드의 차이점

생성자의 이름은 클래스 이름과 같아야 한다. 따라서 첫 글자도 대문자로 시작한다.
생성자는 반환 타입이 없다. 비워두어야 한다.
나머지는 메서드와 같다

4.3.1 생성자 호출

생성자는 인스턴스를 생성하고 나서 즉시 호출된다. 생성자를 호출하는 방법은 다음 코드와 같이 new 명령어 다음에 생성자 이름과 매개변수에 맞추어 인수를 전달하면 된다.

new 생성자이름(생성자에 맞는 인수 목록)
new 클래스이름(생성자에 맞는 인수 목록)

참고로 new 키워드를 사용해서 객체를 생성할 때 마지막에 괄호 () 도 포함해야 하는 이유가 바로 생성자 때문이다. 객체를 생성하면서 동시에 생성자를 호출한다는 의미를 포함한다.

4.3.2 생성자 장점

중복 호출 제거

생성자가 없던 시절에는 생성 직후에 어떤 작업을 수행하기 위해 메서드를 직접 한번 더 호출해야 했다. 생성자 덕분에 객체를 생성하면서 동시에 생성 직후에 필요한 작업을 한번에 처리할 수 있게 되었다.

제약 - 생성자 호출 필수

객체를 생성할 때 직접 정의한 생성자가 있다면 직접 정의한 생성자를 반드시 호출해야 한다는 점이다. 참고로 생성자를 메서드 오버로딩처럼 여러개 정의할 수 있는데, 이 경우에는 하나만 호출하면 된다.

생성자를 사용하면 필수값 입력을 보장할 수 있다.

좋은 프로그램은 무한한 자유도가 주어지는 프로그램이 아니라 적절한 제약이 있는 프로그램이다.

4.4 기본 생성자

4.4.1 기본 생성자

매개변수가 없는 생성자를 기본 생성자라 한다.
클래스에 생성자가 하나도 없으면 자바 컴파일러는 매개변수가 없고, 작동하는 코드가 없는 기본 생성자를 자동으로 만들어준다.
생성자가 하나라도 있으면 자바는 기본 생성자를 만들지 않는다.

기본 생성자를 왜 자동으로 만들어줄까?

만약 자바에서 기본 생성자를 만들어주지 않는다면 생성자 기능이 필요하지 않는 경우에도 모든 클래스에 개발자가 직접 기본 생성자를 정의해야 한다. 생성자 기능을 사용하지 않는 경우도 많기 때문에 이런 편의 기능을 제공한다.

생성자는 반드시 호출되어야 한다.
생성자가 없으면 기본 생성자가 제공된다.
생성자가 하나라도 있으면 자바는 기본 생성자가 제공되지 않는다. 이 경우 개발자가 정의한 생성자를 직접 호출해야 한다.

4.5 생성자 - 오버로딩과 this()

생성자도 메서드 오버로딩처럼 매개변수만 다르게 해서 여러 생성자를 제공할 수 있다.

public MemberConstruct(String name, int age) {
	this.name = name;
 	this.age = age;
 	this.grade = 50;
}
public MemberConstruct(String name, int age, int grade) {
   	this.name = name;
   	this.age = age;
   	this.grade = grade;
}

4.5.1 this()

위의 두 생성자를 비교해 보면 코드가 중복 되는 부분이 있다.

이때 this() 라는 기능을 사용하면 생성자 내부에서 자신의 생성자를 호출할 수 있다. 참고로 this 는 인스턴스 자신의 참조값을 가리킨다. 그래서 자신의 생성자를 호출한다고 생각하면 된다.

MemberConstruct(String name, int age) {
 	this(name, age, 50); //변경
}

MemberConstruct(String name, int age, int grade) {
 	System.out.println("생성자 호출 name=" + name + ",age=" + age + ",grade=" + grade);
 	this.name = name;
 	this.age = age;
 	this.grade = grade;
}

이 코드는 첫번째 생성자 내부에서 두번쨰 생성자를 호출한다.

this() 규칙

this() 는 생성자 코드의 첫줄에만 작성할 수 있다.

김영한의 실전 자바 기본편 - [객체 지향 프로그래밍]

yjym33 — Tue, 13 May 2025 16:46:46 +0900

출처 : https://www.inflearn.com/course/%EA%B9%80%EC%98%81%ED%95%9C%EC%9D%98-%EC%8B%A4%EC%A0%84-%EC%9E%90%EB%B0%94-%EA%B8%B0%EB%B3%B8%ED%8E%B8/dashboard

3. 객체 지향 프로그래밍

3.1 객체 지향 프로그래밍 vs 절차 지향 프로그래밍

객체 지향 프로그래밍과 절차 지향 프로그래밍은 서로 대치되는 개념이 아니다. 객체 지향이라도 프로그램의 작동 순서는 중요하다. 다만 어디에 더 초점을 맞추는가에 둘의 차이가 있다. 객체 지향의 경우 객체의 설계와 관계를 중시한다. 반면 절차 지향의 경우 데이터와 기능이 분리되어 있고, 프로그램이 어떻게 작동하는지 그 순서에 초점을 맞춘다.

절차 지향 프로그래밍

절차 지향 프로그래밍은 이름 그대로 절차를 지향한다. 쉽게 이야기해서 실행 순서를 중요하게 생각하는 방식이다.
절차 지향 프로그래밍은 프로그램의 흐름을 순차적으로 따르며 처리하는 방식이다. 즉, 어떻게 를 중심으로 프로그래밍 한다.

객체 지향 프로그래밍

객체 지향 프로그래밍은 이름 그대로 객체를 지향한다. 쉽게 이야기해서 객체를 중요하게 생각하는 방식이다.
객체 지향 프로그래밍은 실제 세계의 사물이나 사건을 객체로 보고, 이러한 객체들 간의 상호작용을 중심으로 프로그래밍하는 방식이다. 즉 무엇을 중심으로 프로그래밍 한다.

둘의 중요한 차이

절차 지향은 데이터와 해당 데이터에 대한 처리 방식이 분리되어 있다. 반면 객체 지향에서는 데이터와 그 데이터에 대한 행동(메서드)이 하나의 객체 안에 함께 포함되어 있다.

3.2 객체란?

세상의 모든 사물을 단순하게 추상화해보면 속성(데이터)과 기능 딱 2가지로 설명할 수 있다.

자동차

속성 : 차량 색상, 현재 속도
기능 : 액셀, 브레이크, 문 열기, 문 닫기

동물

속성 : 색상, 키, 온도
기능 : 먹는다, 걷는다

게임 케릭터

속성 : 레벨, 경험치, 소유한 아이템들
기능 : 이동, 공격, 아이템 획득

객체 지향 프로그래밍은 모든 사물을 속성과 기능을 가진 객체로 생각하는 것이다. 객체에는 속성과 기능만 존재한다.

이렇게 단순화하면 세상에 있는 객체들을 컴퓨터 프로그램으로 쉽게 설계할 수 있다.

이런 장점 덕분에 지금은 객체 지향 프로그래밍이 가장 많이 사용된다. 참고로 실세계와 객체가 항상 1:1로 매칭되는 것은 아니다.

모듈화

객체의 각각의 기능을 메서드로 만들면 각각의 기능을 모듈화하였다고 한다.

쉽게 이야기해서 레고 블럭을 생각하면 된다. 필요한 블럭을 가져다 꼽아서 사용할 수 있다. 어떤 객체의 기능이 필요하면 해당 기능을 메서드 호출 만으로 손쉽게 사용할 수 있다.

3.3 객체 지향 프로그래밍

객체 지향 프로그래밍은 어떠한 개념을 객체로 온전히 만드는 것에 집중해야 한다. 그러기 위해서는 프로그램의 실행 순서보다는 객체로 표현하려는 클래스를 만드는 것 자체에 집중해야 한다. 객체로 표현하려는 개념이 어떤 속성(데이터)을 가지고 어떤 기능(메서드)을 제공하는지 이 부분에 초점을 맞추어야 한다. 쉽게 이야기 해서 어떠한 개념을 객체로 만들어서 제공하는 개발자와 그 객체를 사용하는 사용자가 분리되어 있다고 생각하면 된다.

public class MusicPlayer {
    int volume = 0;
    boolean isOn = false;
    void on() {
        isOn = true;
        System.out.println("음악 플레이어를 시작합니다");
    }
    void off() {
        isOn = false;
        System.out.println("음악 플레이어를 종료합니다");
    }
    void volumeUp() {
        volume++;
        System.out.println("음악 플레이어 볼륨:" + volume);
    }
    void volumeDown() {
        volume--;
        System.out.println("음악 플레이어 볼륨:" + volume);
    }
    void showStatus() {
        System.out.println("음악 플레이어 상태 확인");
        if (isOn) {
            System.out.println("음악 플레이어 ON, 볼륨:" + volume);
        } else {
 			System.out.println("음악 플레이어 OFF");
        }
    }
 }

MusicPlayer 클래스에 음악 플레이어에 필요한 속성과 기능을 모두 정의했다. 이제 음악 플레이어가 필요한 곳에서 이 클래스만 있으면 온전한 음악 플레이어를 생성해서 사용할 수 있다. 음악 플레이어를 사용하는데 필요한 모든 속성과 기능이 하나의 클래스에 포함되어 있다.

 public class MusicPlayerMain4 {
     public static void main(String[] args) {
     	MusicPlayer player = new MusicPlayer();
        //음악 플레이어 켜기
        player.on();
        //볼륨 증가
        player.volumeUp();
        //볼륨 증가
        player.volumeUp();
        //볼륨 감소
        player.volumeDown();
        //음악 플레이어 상태
        player.showStatus();
        //음악 플레이어 끄기
        player.off();
    }
 }

MusicPlayer 를 사용하는 코드를 보자. MusicPlayer 객체를 생성하고 필요한 기능(메서드)을 호출하기만 하면 된다. 필요한 모든 것은 MusicPlayer 안에 들어있다.

MusicPlayer 를 사용하는 입장에서는 MusicPlayer 의 데이터인 volume, iOn 같은 데이터는 전혀 사용하지 않는다.
MusicPlayer 를 사용하는 입장에서는 이제 MusicPlayer 내부에 어떤 속성(데이터)이 있는지 전혀 몰라도 된다. MusicPlayer 를 사용하는 입장에서는 단순하게 MusicPlayer 가 제공하는 기능 중에 필요한 기능을 호출해서 사용하기만 하면 된다.

캡슐화

MusicPlayer 를 보면 음악 플레이어를 구성하기 위한 속성과 기능이 마치 하나의 캡슐에 쌓여있는 것 같다. 이렇게 속성과 기능을 하나로 묶어서 필요한 기능을 메서드를 통해 외부에 제공하는 것을 캡술화라 한다.

객체 지향 프로그래밍 덕분에 음악 플레이어 객체를 사용하는 입장에서 진짜 음악 플레이어를 만들고 사용하는 것 처럼 친숙하게 느껴진다. 그래서 코드가 더 읽기 쉬운 것은 물론이고, 속성과 기능이 한 곳에 있기 때문에 변경도 더 쉬워진다. 예를 들어서 MusicPlayer 내부 코드가 변하는 경우에 다른 코드는 변경하지 않아도 된다. MusicPlayer 의 volume 이라는 필드 이름이 다른 이름으로 변한다고 할

때 MusicPlayer 내부만 변경하면 된다. 또 음악 플레이어가 내부에서 출력하는 메시지를 변경할 때도 MusicPlayer 내부만 변경하면 된다. 이 경우 MusicPlayer 를 사용하는 사용자 입장에서는 코드를 전혀 변경하지 않아도 된다. 물론 외부에서 호출하는 MusicPlayer 의 메서드 이름을 변경한다면 MusicPlayer 를 사용하는 곳의 코드도 변경해야 한다.

김영한의 실전 자바 - 기본편 [기본형과 참조형]

yjym33 — Tue, 13 May 2025 16:46:13 +0900

출처 : https://www.inflearn.com/course/%EA%B9%80%EC%98%81%ED%95%9C%EC%9D%98-%EC%8B%A4%EC%A0%84-%EC%9E%90%EB%B0%94-%EA%B8%B0%EB%B3%B8%ED%8E%B8/dashboard

김영한의 실전 자바 - 기본편 강의 | 김영한 - 인프런

김영한 | , 국내 개발 분야 누적 수강생 1위, 제대로 만든 김영한의 실전 자바[사진][임베딩 영상]단순히 자바 문법을 안다? 이걸로는 안됩니다!전 우아한형제들 기술이사, 누적 수강생 40만 명 돌

www.inflearn.com

2. 기본형과 참조형

2.1 기본형 vs 참조형

자바에서 참조형을 제대로 이해하는 것은 정말 중요하다.

사용하는 값을 변수에 직접 넣을 수 있는 기본형, 객체가 지정된 메모리의 위치를 가리키는 참조값을 넣을 수 있는 참조형으로 분류할 수 있다.

기본형(Primitive Type) : int, long, double, boolean 처럼 변수에 사용할 값을 직접 넣을 수 있는 데이터 타입을 기본형이라 한다.
참조형(Reference Type) : Student student, int[] students 와 같이 데이터에 접근하기 위한 참조(주소)를 저장하는 데이터 타입을 참조형이라 한다. 참조형은 객체 또는 배열에 사용된다.

쉽게 이야기해서 기본형 변수에는 직접 사용할 수 있는 값이 들어있지만 참조형 변수에는 위치(참조값)가 들어가 있다. 참조형 변수를 통해서 뭔가 하려면 결국 참조값을 통해 해당 위치로 이동해야 한다.

쉽게 이해하는 팁

기본형을 제외한 나머지는 모두 참조형이다.

기본형은 소문자로 시작한다. int, long, double, boolean 모두 소문자로 시작한다.
- 기본형은 자바가 기본으로 제공하는 데이터 타입이다. 이러한 기본형은 개발자가 새로 정의할 수 없다. 개발자는 참조형인 클래스만 직접 정의할 수 있다.
클래스는 대문자로 시작한다. Student
- 클래스는 모두 참조형이다.

참고 - String

자바에서 String 은 특별하다. String 은 사실은 클래스다. 따라서 참조형이다. 그런데 기본형처럼 문자 값을 바로 대입할 수 있다. 문자는 매우 자주 다루기 때문에 자바에서 특별하게 편의 기능을 제공한다.

대원칙 : 자바는 항상 변수의 값을 복사해서 대입한다.

자바에서 변수에 값을 대입하는 것은 변수에 들어있는 값을 복사해서 대입하는 것이다.

기본형, 참조형 모두 항상 변수에 있는 값을 복사해서 대입한다. 기본형이면 변수에 들어있는 실제 사용하는 값을 복사해서 대입하고, 참조형이면 변수에 들어있는 참조값을 복사해서 대입한다.

참조형의 경우 실제 사용하는 객체가 아니라 객체의 위치를 가리키는 참조값만 복사된다. 쉽게 이야기해서 실제 건물이 복사가 되는 것이 아니라 건물의 위치인 주소만 복사되는 것이다. 따라서 같은 건물을 찾아갈 수 있는 방법이 하나 늘어날 뿐이다.

2.2 참조형과 메서드 호출

package ref;
public class Method2 {
 		public static void main(String[] args) {
 		Student student1 = createStudent("학생1", 15, 90);
 		Student student2 = createStudent("학생2", 16, 80);
 		printStudent(student1);
 		printStudent(student2);
 	}

 	static Student createStudent(String name, int age, int grade) {
 		Student student = new Student();
 		student.name = name;
 		student.age = age;
 		student.grade = grade;
 		return student;
 	}

 	static void printStudent(Student student1) {
 		System.out.println("이름:" + student1.name + " 나이:" + student1.age + " 성적:" + student1.grade);
 	}
}

메서드 내부에서 인스턴스를 생성한 후에 참조값을 메서드 외부로 반환했다. 이 참조값만 있으면 해당 인스턴스에 접근할 수 있다. 여기서는 student1 에 참조값을 보관하고 사용한다.

참조형은 메서드를 호출할 때 참조값을 전달한다. 따라서 메서드 내부에서 전달된 참조값을 통해 객체의 값을 변경하거나, 값을 읽어서 사용할 수 있다.

2.3 null

참조형 변수에는 항상 객체가 있는 위치를 가리키는 참조값이 들어간다. 그런데 아직 가리키는 대상이 없거나, 가리키는 대상을 나중에 입력하고 싶다면 어떻게 해야할까?

참조형 변수에는 아직 가리키는 대상이 없다면 null 이라는 특별한 값을 넣어둘 수 있다. null은 값이 존재하지 않는, 없다는 뜻이다.

멤버 변수에서의 참조형의 값 초기화는 참조형 = null 로 자동 초기화해준다.

GC - 아무도 참조하지 않는 인스턴스의 최후

data에 null을 할당했다. 따라서 앞서 생성한 x001 Data 인스턴스를 더는 아무도 참조하지 않는다. 이렇게 아무도 참조하지 않게 되면 x001이라는 참조값을 다시 구할 방법이 없다. 따라서 해당 인스턴스에 다시 접근할 방법이 없다.

이렇게 아무도 참조하지 않는 인스턴스는 사용되지 않고 메모리 용량만 차지할 뿐이다.

C와 같은 과거 프로그래밍 언어는 개발자가 직접 명령어를 사용해서 인스턴스를 메모리에서 제거해야 했다. 만약 실수로 인스턴스 삭제를 누락하면 메모리에 사용하지 않는 객체가 가득해져서 메모리 부족 오류가 발생하게 된다.

자바는 이런 과정을 자동으로 처리해준다. 아무도 참조하지 않는 인스턴스가 있으면 JVM 의 GC (가비지 컬렉션)가 더 이상 사용하지 않는 인스턴스라 판단하고 해당 인스턴스를 자동으로 메모리에서 제거해준다.

객체는 해당 객체를 참조하는 곳이 있으면, JVM 이 종료할 때 까지 계속 생존한다. 그런데 중간에 해당 객체를 참조하는 곳이 모두 사라지면 그때 JVM은 필요 없는 객체로 판단하고 GC를 사용해서 제거한다.

2.4 NullPointerException

만약 참조값이 없이 객체를 찾아가면 어떤 문제가 발생할까?

이 경우 NullPointerException 이라는 예외가 발생하는데, 개발자를 가장 많이 괴롭히는 예외이다.

NullPointerException은 이름 그래도 null 을 가리키나(Pointer)인데, 이때 발생하는 예외(Exception)다.

null은 없다는 뜻이므로 결국 주소가 없는 곳을 찾아갈 때 발생하는 예외이다.

객체를 참조할떄는.(dot)을 사용한다. 이렇게 하면 참조값을 사용해서 해당 객체를 찾아갈 수 있다. 그런데 참조값이 null 이라면 값이 없다는 뜻이므로, 찾아갈 수 있는 객체(인스턴스)가 없다. NullPointerException 은 이처럼 null에 .(dot)을 찍었을 때 발생한다.

NullPointerException이 발생하면 null 값에 . (dot)을 찍었따고 생각하면 문제를 쉽게 찾을 수 있다.

2.5 기본형과 참조형 정리

대원칙 : 자바는 항상 변수의 값을 복사해서 대입한다.

자바에서 변수에 값을 대입하는 것은 변수에 들어있는 값을 복사해서 대입하는 것이다.

기본형이든 참조형이든 변수의 값을 대입하는 방식은 같다. 하지만 기본형과 참조형에 따라 동작하는 방식이 달라진다.

기본형 vs 참조형 - 기본

자바의 데이터 타입을 가장 크게 보면 기본형과 참조형으로 나눌 수 있다.
기본형을 제외한 나머지 변수는 모두 참조형이다. 클래스와 배열을 다루는 변수는, 참조형이다.
기본형 변수는 값을 직접 저장하지만, 참조형 변수는 참조(주소)를 저장한다.
기본형 변수는 산술 연산을 수행할 수 있지만, 참조형 변수는 산술 연산을 수행할 수 없다.
기본형 변수는 null 을 할당할 수 없지만, 참조형 변수는 null을 할당할 수 있다.

기본형 vs 참조형 - 대입

기본형과 참조형 모두 대입시 변수 안에 있는 값을 읽고 복사해서 전달한다.
기본형은 사용하는 값을 복사해서 전달하고, 참조형은 참조값을 복사해서 전달한다! 이것이 중요하다. 실제 인스터스가 복사되는 것이 아니다. 인스턴스를 가리키는 참조값을 복사해서 전달하는 것이다! 따라서 하나의 인스턴스를 여러곳에서 참조할 수 있다.
헷갈리면 그냥 변수 안에 들어간 값을 떠올려보자. 기본형은 사용하는 값이, 참조형은 참조값이 들어있다! 변수에 어떤 값이 들어있든간에 그 값을 그대로 복사해서 전달한다.

기본형 vs 참조형 - 메서드 호출

메서드 호출시 기본형은 메서드 내부에서 매개변수(파라미터)의 값을 변경해도 호출자의 변수 값에는 영향이 없다.
메서드 호출시 참조형은 메서드 내부에서 매개변수(파라미터)로 전달된 객체의 멤버 변수를 번경하면, 호출자의 객체도 변경된다.

김영한의 실전 자바 - 기본편 [클래스와 데이터]

yjym33 — Tue, 13 May 2025 13:25:58 +0900

출처 : https://www.inflearn.com/course/%EA%B9%80%EC%98%81%ED%95%9C%EC%9D%98-%EC%8B%A4%EC%A0%84-%EC%9E%90%EB%B0%94-%EA%B8%B0%EB%B3%B8%ED%8E%B8/dashboard

1. 클래스와 데이터

1.1 클래스 도입

사람이 관리하기 좋은 방식으로 어떠한 개념을 하나로 묶는 것이다.

예) Student 클래스

public class Student {
	String name;
    int age;
 	int grade;
}

클래스에 정의된 변수들(name, age, grede)을 변수, 또는 필드라 한다.

멤버 변수(Member Variable) : 이 변수들은 특정 클래스에 소속된 멤버이기 때문에 이렇게 부른다.
필드(Field) : 데이터 항목을 가리키는 전통적인 용어이다.
자바에서 멤버 변수, 필드는 같은 뜻이다. 클래스에 소속된 변수를 뜻한다.

클래스란 설계도이다.

클래스를 사용하면 int, String 과 같은 타입을 직접 만들 수 있다.(Student)

사용자가 직접 정의하는 사용자 정의 타입을 만들려면 설계도가 필요하다.

이 설계도가 바로 클래스 이다.

설계도인 클래스를 사용해서 실제 메모리에 만들어진 실체를 객체 또는 인스턴스라 한다.

1.2 클래스 생성

public class ClassStart3 {
	public static void main(String[] args) {
		Student student1;
      	student1 = new Student();
     	student1.name = "학생1";
     	student1.age = 15;
     	student1.grade = 90;

     	Student student2 = new Student();
     	student2.name = "학생2";
     	student2.age = 16;
     	student2.grade = 80;

     	System.out.println("이름:" + student1.name + " 나이:" + student1.age + " 성적:" + student1.grade);
     	System.out.println("이름:" + student2.name + " 나이:" + student2.age + " 성적:" + student2.grade);
    }
}

1.2.1 변수 선언

Student student1
- Student 타입을 받을 수 있는 변수를 선언한다.
- int는 정수를, String은 문자를 담을 수 있듯이 Student는 Student 타입의 객체(인스턴스)를 받을 수 있다.

1.2.2 객체 생성

student = new Student()
- 객체를 사용하려면 먼저 설계도인 클래스를 기반으로 객체(인스턴스)를 생성해야 한다.
- new Student() : new 는 새로 생성한다는 뜻이다. new Student() 는 Student 클래스 정보를 기반으로 새로운 객체를 생성하라는 뜻이다. 이렇게 하면 메모리에 실제 Student 객체(인스턴스)를 생성한다.
- 객체를 생성할 때는 new 클래스명() 을 사용하면 된다. 마지막에 () 도 추가해야 한다.
- Sudent 클래스는 String name, int age, int grade 멤버 변수를 가지고 있다. 이 변수를 사용하는데 필요한 메모리 공간도 함께 확보한다.

1.2.3 참조값 보관

객체를 생성하면 자바는 메모리에 어딘가에 있는 이 객체에 접근할 수 있는 참조값(주소)(x001)을 반환한다.
new 키워드를 통해 객체를 생성되고 나면 참조값을 반환한다. 앞서 선언한 변수인 Student student1에 생성된 객체의 참조값(x001)을 보관한다.
Student student1 변수는 이제 메모리에 존재하는 실제 Student 객체(인스턴스)의 참조값을 가지고 있다.
- student1 변수는 방금 만든 객체에 접근할 수 있는 참조값을 가지고 있다. 따라서 이 변수를 통해 객체를 접근(참조)할 수 있다. 쉽게 이야기해서 student1 변수를 통해 메모리에 있는 실제 객체를 접근하고 사용할 수 있다.

참조값을 변수에 보관해야 하는 이유

객체를 생성하는 new Student() 코드 자체에는 아무런 이름이 없다. 이 코드는 단순히 Student 클래스(설계도)를 기반으로 메모리에 실제 객체를 만드는 것이다. 따라서 생성한 객체에 접근할 수 있는 방법이 필요하다. 이런 이유로 객체를 생성할 때 반환되는 참조값을 어딘가에 보관해두어야 한다. 앞서 Student student1 변수에 참조값(x001)을 저장해두었으므로 저장한 참조값을 통해서 실제 메모리에 존재하는 객체에 접근할 수 있다.

1.3 클래스, 객체, 인스턴스 정리

1.3.1 클래스 - Class

클래스는 객체를 생성하기 위한 틀 또는 설계도 이다. 클래스는 객체가 가져야 할 속성(변수)과 기능(메서드)를 정의한다. 예를 들어 학생이라는 클래스는 속성으로 name, age, grade 를 가진다.

1.3.2 객체 - Object

객체는 클래스에서 정의한 속성과 기능을 가진 실체이다. 객체는 서로 독립적인 상태를 가진다.

예를 들어 위 코드에서 student1 은 학생1의 속성을 가지는 객체이고, student2 는 학생2의 속성을 가지는 객체이다. student1 과 student2 는 같은 클래스에서 만들어졌지만, 서로 다른 객체이다.

1.3.3 인스턴스 - Instance

인스턴스는 특정 클래스로부터 생성된 객체를 의미한다. 그래서 객체와 인스턴스라는 용어는 자주 혼용된다. 인스턴스는 주로 객체가 어떤 클래스에 속해 있는지 강조할 때 사용한다. 예를 들어서 student1 객체는 Student 클래스의 인스턴스다. 라고 표현한다.

객체 vs 인스턴스

둘다 클래스에서 나온 실체라는 의미에서 비슷하게 사용되지만, 용어상 인스턴스는 객체보다 좀 더 관계에 초점을 맞춘 단어이다. 보통 student 은 Student 의 객체이다. 라고 말하는 대신 student 은 Student 의 인스턴스이다. 라고 특정 클래스와의 관계를 명확히 할 때 인스턴스라는 용어를 주로 사용한다.

1.4 자바에서 대입은 항상 변수에 들어 있는 값을 복사해서 전달한다.

students[0] = student1;
students[1] = student2;
//자바에서 대입은 항상 변수에 들어 있는 값을 복사한다.
students[0] = x001;
students[1] = x002;

자바에서 변수의 대입(=)은 모두 변수에 들어있는 값을 복사해서 전달하는 것이다. 이 경우 오른쪽 변수인 student1, student2 에는 참조값이 들어있다. 그래서 이 값을 복사해서 왼쪽에 있는 배열에 전달한다. 따라서 기존 student1, student2 에 들어있던 참조값은 당연히 그대로 유지된다.

주의!

변수에는 인스턴스 자체가 들어있는 것이 아니다! 인스턴스의 위치를 가리키는 참조값이 들어있을 뿐이다! 따라서 대입(=)시에 인스턴스가 복사되는 것이 아니라 참조값만 복사된다.

커피/티 정기 구독 쇼핑몰 - ERD 설계

yjym33 — Sat, 10 May 2025 23:37:56 +0900

커피/티 정기 구독 쇼핑몰 ERD 설계 (표 기반 정리)

‍ users (회원)

필드명 타입 설명

id	PK	사용자 고유 ID
email	VARCHAR	이메일
password	VARCHAR	비밀번호 해시
name	VARCHAR	이름
address	TEXT	배송 주소
created_at	TIMESTAMP	가입일

☕ products (원두/티 상품)

필드명 타입 설명

id	PK	상품 ID
name	VARCHAR	상품명
type	ENUM	커피 / 티 등 분류
origin	VARCHAR	원산지
flavor_notes	TEXT	향미 노트 (산미, 단맛 등)
caffeine	BOOLEAN	카페인 유무
price	INTEGER	가격
stock	INTEGER	재고 수량
created_at	TIMESTAMP	등록일

subscriptions (정기 구독)

필드명 타입 설명

id	PK	구독 ID
user_id	FK → users	구독자
product_id	FK → products	구독 상품
interval	VARCHAR	주기 (1주, 2주, 4주 등)
status	ENUM	active, paused, cancelled
next_delivery_date	DATE	다음 배송 예정일
created_at	TIMESTAMP	생성일

orders (주문)

필드명 타입 설명

id	PK	주문 ID
user_id	FK → users	주문자
subscription_id	FK → subscriptions	어떤 구독에서 생성된 주문
total_price	INTEGER	총 주문 금액
status	ENUM	주문 상태 (created, shipped)
ordered_at	TIMESTAMP	주문일

payments (결제 정보)

필드명 타입 설명

id	PK	결제 ID
order_id	FK → orders	해당 주문
status	ENUM	성공/실패
payment_method	VARCHAR	카드, 계좌이체 등
payment_date	TIMESTAMP	결제 일시
amount	INTEGER	결제 금액

delivery_logs (배송 이력)

필드명 타입 설명

id	PK	배송 이력 ID
order_id	FK → orders	어떤 주문에 대한 배송인지
status	ENUM	배송 상태 (준비중, 배송중 등)
tracking_number	VARCHAR	송장 번호
delivery_date	TIMESTAMP	배송 완료일

⭐ reviews (상품 후기)

필드명 타입 설명

id	PK	리뷰 ID
user_id	FK → users	작성자
product_id	FK → products	후기 대상 상품
rating	INTEGER (1~5)	별점
comment	TEXT	텍스트 후기
created_at	TIMESTAMP	작성일

관계 요약

users ↔ subscriptions, orders, reviews 와 1:N
products ↔ subscriptions, reviews 와 1:N
subscriptions ↔ orders 와 1:N
orders ↔ payments, delivery_logs 와 1:1

커피/티 원두 정기 구독 쇼핑몰 - 기획서

yjym33 — Sat, 10 May 2025 22:20:06 +0900

1. 프로젝트 개요

목표:
사용자의 커피/티 취향 및 소비 패턴에 맞춰 개인화된 원두 구독 서비스를 제공하는 지능형 쇼핑몰 플랫폼 개발

주요 기능:

사용자 맞춤형 정기 구독 상품 추천 (맛, 향, 산미 기반 선호도 분석)
배송 주기 설정 및 자동 결제 기능
마이페이지 구독 관리 (일시 정지, 변경, 취소)
후기 기반 상품 추천 알고리즘
관리자 상품/구독 관리 기능
향후 추천 알고리즘/기계학습 기반 최적화 기능 연동

2. 구축 전략

2-1. 정기 구독 중심 설계

구독은 단순 구매와 달리 정기 반복성과 사용자 커스터마이징 요소를 강조
사용자 선호도 설문 기반으로 추천 초기화 후, 리뷰/구매 이력을 통한 지속적 개인화

2-2. 개인화 추천 기능

초기: 조건 기반 추천 (산미/바디감/카페인 유무 등 필터)
확장: 유저 피드백 + 행동 데이터를 벡터로 변환해 유사 사용자 기반 추천

기능 예시:

“산미 있는 원두 좋아함 + 오후에 마신다” → 디카페인 과일향 원두 추천
“블렌딩보단 싱글 오리진 선호” → 상품 필터링 + 신상품 추천

2-3. 정기 결제 자동화 및 유연한 관리

결제는 주기(1/2/4주) 단위 자동 스케줄링
마이페이지에서 사용자가 쉽게 주문 일시정지 / 재개 / 변경 / 취소 가능

3. 도메인별 데이터 구성

3-1. 상품 도메인

원두명, 로스팅일자, 향미 노트, 산지, 산미/바디감 지수
카페인 유무, 적정 소비 시기, 이미지 및 설명

3-2. 사용자 도메인

취향 설문 데이터 (선호 향미/농도/마시는 시간대)
구독 상태(활성/일시정지/취소), 배송지 정보
리뷰 및 구매 이력

3-3. 구독/결제 도메인

구독 시작일, 주기 설정, 다음 결제일
결제 실패 처리 로직, 자동 리트라이 시나리오 포함

4. 기술 스택 (예정)

범주기술 스택 예시

Frontend	Next.js, React, TailwindCSS
Backend	Spring Boot (추후 MSA 고려), 또는 초기 NestJS
DB	PostgreSQL
ORM	JPA (Spring) or TypeORM (NestJS)
인증	JWT 기반 로그인
스케줄링	Spring Scheduler 또는 배치 기반 정기 처리
추천 기능	간단한 필터 기반 추천 → 확장 시 FAISS or Qdrant + Embedding
배포	Docker, Nginx, AWS EC2 or Render

5. 기대 효과

커피 취향 파악부터 배송까지 자동화된 구독 경험 제공
커뮤니티 기반 추천이 아닌, 개인화된 상품 큐레이션 제공
반복 주문의 편의성과 맞춤 추천으로 구매 전환율과 충성도 향상
스케줄링 처리와 추천 시스템 등 기술적 완성도 높은 포트폴리오 구성 가능

6. 향후 계획

MVP: 기본 CRUD + 정기 구독 관리 기능 구현 (Spring or Nest 기반)
사용자 설문 기반 추천 기능 구현
결제 시스템 API 연동 (가상 결제 or 모의 처리로 시작)
유저 기반 구매/후기 데이터를 활용한 추천 기능 개선
멀티 벡터 기반 추천 알고리즘 실험 (RAG-like 구조 가능)
데이터/트래픽 증가 시 마이크로서비스 아키텍처(MSA) 도입 고려

선택 시나리오 기반 확장 예시

사용자 행동예상 기능 확장

구독 취소/변경이 많음	UX 개선 + 추천 품질 개선
특정 원두 선호 높음	인기 랭킹, 재입고 알림 시스템
다양한 취향 요청	상품 메타데이터 강화 + 추천 개선
단일 상품 반복 구매	단품 정기구매 기능 추가

대화형 AI 구축 프로젝트 - 기획서

yjym33 — Thu, 1 May 2025 22:55:44 +0900

아래는 개인프로젝트로 사용할 프로젝트를 기획하기 위해 작성한 내용입니다.

기획서 ① – 기억하는 AI 친구 (Persistent Memory Chatbot)

1. 프로젝트 개요

목표
사용자와 지속적인 관계를 형성하며, 이전 대화 내용을 기억하고 그에 맞는 응답을 제공하는 지속형 감성 대화 AI 개발

주요 기능

사용자 정보, 감정 상태, 관심사 등을 기억하고 자연스럽게 반영
자유로운 일상 대화와 감정 공감
관계 기반의 대화 흐름 (예: “지난번에 피곤하다고 했었지? 좀 나아졌어?”)
캐릭터 말투/성격 커스터마이징 기능

2. 구축 전략

2-1. LLM 기반 설계

OpenAI GPT API 또는 오픈소스 LLM(Mistral, LLaMA 등) 활용
사용자별 프롬프트 설정 또는 컨텍스트 리트리버 기반 기억 삽입
감성 필터링을 통한 위로, 공감 중심의 응답 구성

2-2. 기억 시스템 구조

Vector DB(Weaviate, FAISS, Qdrant 등)에 유저 발화 및 요약 임베딩 저장
시간, 주제, 감정 중심으로 대화 요약/태깅
현재 대화와 유의미한 기억만 유사도 기반으로 검색하여 삽입

2-3. 대화 흐름 최적화

LangChain 기반 메모리 체인 구조 적용
유저 프로필 + 대화 이력을 기반으로 자동 성격 분석 or 프롬프트 조정
‘기억에 남는 일’이나 ‘중요한 대화’는 수동 저장 기능 고려

3. 기술 스택 (예정)

범주기술 스택

LLM	OpenAI GPT, Mistral, LLaMA 등
Vector DB	FAISS, Weaviate
Embedding	OpenAI Embedding, BGE, E5 등
Agent	LangChain, LangGraph
Frontend	React, Next.js
Backend	NestJS
Database	PostgreSQL
ORM	TypeORM

4. 기대 효과

“인간처럼 기억하는 AI 친구” UX 실현
단순 대화형 챗봇보다 깊이 있는 사용자 경험 제공
개인화된 감정 AI 경험 → 높은 사용자 재방문 유도
개인화 기술/메모리 관리 기술 역량 어필 가능

5. 향후 계획

텍스트 기반 챗봇 MVP 제작
대화 요약/저장 최적화 알고리즘 개선
유저 감정 분석 및 성격 분류 기능 추가
말투/캐릭터 프리셋 도입
장기 대화 흐름 시각화 및 리뷰 기능 (ex. “우리가 나눈 이야기들” 페이지)

6. 에이전트 기능 설계 – 라이프 코치 에이전트 (Life Coach Agent)

도입 배경
기억 기반 챗봇이 단순히 대화에 응답하는 수준을 넘어서 사용자의 삶에 개입하고 정서적으로 챙겨주는 조력자 역할을 수행하면, ‘AI 친구’의 몰입도가 훨씬 높아질수 있기 때문에 이를 위해 LangGraph를 활용한 상태기반 에이전트 구조로 라이프 코치 에이전트를 설계합니다.

핵심 역할

사용자의 목표/루틴/습관을 기억하고 주기적으로 점검
감정 상태 변화에 따라 챙김/격려/위로 제공
중요한 대화/목표에 대해 follow-up 생성

기능 구성

기능 범주설명

목표 추적	"다이어트 시작할 거야" → goal: 다이어트로 저장
감정 모니터링	"요즘 너무 힘들어" → emotion: sad 저장 + follow-up
챙김 응답	일정 시점 이후 자동 follow-up 대화 생성
관계 유지	“저번에 말한 시험 준비 잘 되고 있어?” 등 기억 기반 피드백

LangGraph 흐름 구성

각 노드는 LangGraph에서 상태 기계(State Machine) 노드로 정의되며, Intent에 따라 분기

️ 예시 대화 흐름

기술 구성 요약

범주구성

LLM	GPT-4, Mistral
Agent	LangGraph (상태 분기 기반 처리)
Memory DB	Weaviate, Qdrant
Embedding	OpenAI Embedding or BGE
스케줄링	내부 CRON / Temporal
대화 관리	LangChain + NestJS API 연결

확장 방향

사용자 루틴 진척도 시각화 (대시보드 형태)
감정 변화 트래킹 그래프 생성
장기 대화 히스토리 기반 추천/격려 기능

패스트캠퍼스 (코드팩토리의 백엔드 아카데미 : 한 번에 끝내는 NestJS 패키지 - 기초부터 MSA까지) 수강후기

yjym33 — Mon, 2 Dec 2024 22:34:47 +0900

현재까지 느낀점 + 앞으로의 목표 및 포부

현재 "코드팩토리의 백엔드 아카데미: 한번에 끝내는 NestJS 패키지 - 기초부터 MSA까지" 강의를 수강하며 NestJS의 기본 원리뿐만 아니라 다양한 기술 스택과 MSA 구조의 실무 적용 방식을 체계적으로 학습하고 있습니다. 특히, 실무에서 중요한 데브옵스까지도 다루며 CI/CD와 시스템 운영에 대한 이해를 넓힐 수 있어 매우 유익합니다. 앞으로 이 강의를 통해 MSA와 데브옵스를 완벽히 이해하고, 실제 프로젝트에서 고도화된 백엔드 시스템을 설계하며 전문성을 강화하고 싶습니다. 성장하는 개발자로 더 큰 가치를 창출하는 것이 목표입니다.

본 게시글은 패스트캠퍼스 후기 이벤트 참여를 위해 작성하였습니다.

ReactQuery - useQuery

yjym33 — Wed, 24 Jul 2024 12:40:16 +0900

Using React Query

install react-query

먼저 react-query를 설치하기 위해서 아래 명령어를 터미널에 입력해야 합니다.

npm install @tanstack/react-query

Create queryClient & QueryClientProvider

QueryClient 생성자로 쿼리와 캐시를 관리하는 Query Client를 생성하고 <QueryClientProvider> 컴포넌트를 통해 생성한 Query Client를 하위 컴포넌트들이 접근할 수 있도록 최상위 컴포넌트로 감싸주어야 합니다.

모든 하위 컴포넌트들은 Query Client가 갖고 있는 캐시와 모든 기본 옵션을 사용할 수 있게 됩니다.

참고로 <QueryClientProvider>은 React의 Context API를 사용하여 생성된 queryClient를 제공합니다.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

// 1. query client 생성
const queryClient = new QueryClient()

function App () {
  return (
    // 2. QueryClientProvider를 통해 하위 컴포넌트들에게 전달
    <QueryClientProvider client={queryClient}>
      ,,,
    </QueryClientProvider>
  )
}

export default App;

Default Options

QueryClient를 생성할 때 default option을 지정해 줄 수 있습니다. new 연산자와 함께 호출할 때 인수로 객체를 전달하고 객체의 defaultOptions 프로퍼티로 queries 와 mutaions 프로퍼티로 default option들을 설정할 수 있습니다.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      /*
      queries: number, // 쿼리 재시도 횟수를 설정, 기본값은 3으로 실패시 3번 재시도
      suspense: boolean, // React의 Suspense 모드 사용 여부를 설정, true 설정시 쿼리가 로딩중일 때 Suspense 모드 사용하여 처리 가능
      staleTime: number, // 쿼리 데이터의 "stale" 기간을 설정
      cacheTime: number, // 쿼리 데이터를 캐시에 저장하는 기간을 설정
      */
    },
    mutations: {
      /*
      onMutate: Function, // 뮤테이션을 시작하기 전에 실행되는 함수를 설정합니다.
      onSuccess: Function, // 뮤테이션 성공 시 실행되는 함수를 설정합니다.
      onError: Function, // 뮤테이션 실패 시 실행되는 함수를 설정합니다.
      */
    }
  }
})

function App () {
  return (
    // 2. QueryClientProvider를 통해 하위 컴포넌트들에게 전달
    <QueryClientProvider client={queryClient}>
        ,,,
    </QueryClientProvider>
  )
}

queryClient 에 설정한 옵션은 모든 쿼리에 전역적으로 설정되지만, useQuery나 useMutation 훅에 개별적으로 옵션을 설정한다면 queryClient에 설정한 옵션들은 무시됩니다.

useQueryClient

초기에 new 연산자로 생성한 queryClient에 대해서 매번 재생성하여 사용하지 않습니다.

queryClient는 초기 한 번만 생성 후, QueryClientProvier의 client로 전달한 queryClient를 재사용해야 합니다.

만약 재사용하지 않고 필요할 때 재성성하게 된다면 기존 쿼리에 대한 정보를 갖고 있는 queryClient를 버리고 쿼리에 대한 정보를 갖지 않는 빈 정보를 갖는 queryClient를 사용하는 것과 동일합니다.

생성된 queryClient에 접근하기 위한 훅으로 useQueryClient가 있으며, 호출시 초기 생성한 queryClient를 반환합니다.

import { useQueryClient } from '@tanstack/react-query'

const Component = () => {
  // 기존 QueryClient 반환
  const queryClient = useQueryClient()
  // ,,,
}

export default Component

setQueryData & setQueriesData

queryClient가 제공하는 메서드 중 setQueryData와 setQueriesData를 통해 명시적으로 특정 쿼리에 대한 데이터를 설정할 수 있습니다.

첫 번째 인수로 queryKey, 두 번째 인수로는 해당 쿼리에 설정할 데이터를 전달합니다.

import { useQueryClient } from '@tanstack/react-query'

const Component = () => {
  cosnt queryClient = useQueryClient()
  
  // 특정 쿼리 데이터 설정
  queryClinet.setQueryData([queryKey, ...], TData)
  // ,,,
}

export default Component

setQueryData 메서드를 호출하게 되면 React Query가 해당 쿼리를 구독하고 있는 컴포넌트들을 다시 호출(리렌더링)하게 됩니다.

removeQuery & removeQueries

queryClient가 제공하는 removeQuery와 removeQueries 메서드는 특정 쿼리를 명시적을 제거할 수 있습니다.

Using useQuery Hooks

useQuery 훅은 서버 데이터를 GET 요청할 때 사용되는 훅입니다. 기본적으로 비동기 방식으로 동작합니다.

import { useQuery } from '@tanstack/react-query'

const { data, isLoading, error } = useQuery(['key', params...], callbackFn, Options)

즉, useQuery 훅을 통해 GET 요청에 대한 쿼리와 요청에 대한 서버 데이터를 queryClient에 캐싱하기 위해서 사용합니다.

Parameters

['key', ...deps] : 첫 번째 인수로는 배열을 전달합니다. 배열의 첫 요소는 쿼리를 식별할 수 있는 고유한 키 값을 문자열로 가져야 하며, 두 번째 요소 이후부터는 두 번째 인수로 전달될 콜백함수 내부에서 의존하고 있는 외부 식별자들을 작성합니다.
이때 쿼리 키 값이 같더라도 의존하고 있는 식별자 값이 일치하지 않는 경우에는 다른 쿼리로 식별하여 별도의 쿼리로 캐싱되고 관리됩니다.
CallbackFn: 서버 데이터를 fetching하는 비동기 함수를 전달해야하며, Promise 객체를 반환하는 함수를 전달합니다.
Options : 객체 타입으로 쿼리에 대한 옵션을 작성할 수 있습니다.
- staleTime: number : fresh 상태에서 stale 상태로 변경되기 까지의 시간을 설정하며 ms 단위의 숫자값을 작성합니다. 기본값은 0으로 설정되어 있습니다.즉, 모든 쿼리는 fetch된 직후 stale 상태가 됩니다.
- cacheTime: number : 캐시 만료시간을 설정하는 옵션입니다. 캐시가 만료되면 가비지 컬렉션에 의해 수집되어 클라이언트는 해당 쿼리 데이터를 사용할 수 없게 됩니다. 기본값은 5분으로 설정되어 있습니다.
  이는 컴포넌트가 언마운트된 시점부터 cacheTime 시간 이후에 쿼리가 가바지 컬렉터에게 수집됩니다.
- refetchOnMount: boolean | 'always' : stale 상태를 갖는 컴포넌트가 마운트되면 새로운 데이터를 re-fetching합니다. 기본값은 true로 설정되어 있습니다.
- refetchOnWindowFocus: boolean | 'always' : 쿼리가 stale 상태일 때 브라우저 창 포커스되면 새로운 데이터를 re-fetching합니다. 기본값은 true로 설정되어 있습니다.
- refetchInterval: number : 쿼리가 stale 상태일 때 브라우저 창 포커스되어 있는 경우 지정한 시간 간격으로 새로운 데이터를 re-fetching합니다. 기본값은 0으로 설정되어 있습니다.
- refetchIntervalInBackground: boolean : 쿼리가 stale 상태일 때 브라우저 창 포커스가 되어 있지 않더라도 지정한 시간 간경으로 새로운 데이터를 re-fetching합니다. 기본값은 false로 설정되어 있습니다.
- enabled: boolean : 자동 fethcing 동작 유무를 설정합니다. 기본값으로 true로 설정되어 있으며, false로 설정한 경우 자동적으로 데이터를 fethcing하지 않습니다. 이때 useQuery 훅이 반환하는 객체의 refetch 메서드를 통해 수동적으로 fethcing해야 합니다.
- KeepPreviousData: boolean : true로 설정한 경우 쿼리키가 변경되어 새로운 데이터를 요청(re-fethcing)하는 동안 이전 데이터를 표시합니다.
- onSuccess: Function : 데이터 fethcing 성공시 실행될 콜백함수를 전달할 수 있습니다.
  콜백함수 인수로는 useQuery 훅의 두 번째 인수로 전달한 콜백함수의 비동기 처리 결과가 전달됩니다.
- onError: Function : 데이터 fethcing 실패시 실행될 콜백함수를 전달할 수 있습니다.
  인수로 두 번째 인수로 전달한 콜백함수에서 발생한 에러 객체가 전달됩니다.

Returns

useQuery 훅은 객체를 반환하며 객체의 프로퍼티들은 아래와 같습니다.

data : 두 번째 인수로 전달한 콜백함수가 반환한 Promise 객체의 비동기 처리 결과가 바인딩됩니다. 콜백은 비동기로 동작하기 때문에 fetch될 때까지 undefined 값을 갖고 있습니다.
state : 두 번째 인수로 전달한 콜백함수의 비동기 처리 결과에 대한 상태를 문자열로 갖고 있습니다. "loading", "success", "error" 세 가지 상태값을 갖고 있습니다.
isLoading : 캐싱된 데이터없는 상태에서 데이터를 fetching하고 있는 경우에 true, 아니면 false 값을 갖습니다.
isFetcing : 캐싱 유무와 상관없이 데이터를 fetching하고 있는 경우에 true, 아니면 false 값을 갖습니다. isLoading의 상위 집합이 됩니다.
isError : 에러가 발생했는지에 대한 여부를 나타 내는 불리언 값을 갖고 있습니다.
기본적으로 React Query는 fetching을 세 번 시도하고 세 번 모두 실패한 경우 isError 프로퍼트 값을 true로 설정합니다.
error : 에러가 발생한 경우 에러 객체가 바인딩되며, 에러가 발생하지 않은 경우 undefined 값을 갖습니다.

이외 추가적으로 여러 프로퍼티들을 갖고 있습니다.

Query State

쿼리는 4가지 상태값을 갖습니다.

"fresh" : 새롭게 추가된 쿼리이며 만료되지 않은 쿼리입니다. 컴포넌트가 마운트되거나 리렌더링되더라도 기존 서버 데이터를 사용하며 re-fetching하지 않는 상태입니다.
"fetching" : fetching 중인 쿼리를 나타냅니다.
"stale" : 만료된 쿼리이며 컴포넌트가 컴포넌트가 마운트되거나 리렌더링되는 경우 해당 쿼리를 re-fetching합니다. 즉, stale 상태인 경우에만 데이터를 re-fetching합니다.
staleTime를 통해 fresh에서 stale 상태로 변경되기 까지의 시간을 의미합니다.
"inactive" : 비활성화된 쿼리이며 캐시의 데이터 만료시간을 설정합니다. 이는 cacheTime 옵션을 통해 설정할 수 있습니다.

useQuery 훅의 동작

처음 useQuery 훅이 호출되면 쿼리 상태가 fresh 상태가 되며, 첫 번째 인수로 전달한 키로 쿼리와 서버 데이터가 캐싱됩니다.
이후 staleTime으로 설정한 시간이 경과된 이후 해당 쿼리는 stale 상태가 됩니다. 쿼리가 stale 상태인 경우 re-fetching하고 기존 데이터를 새로운 서버 데이터로 교체합니다.
컴포넌트가 언마운트된 시점부터 inactive 상태가 되고 cacheTime으로 설정한 시간이 경과된 이후에는 캐싱된 쿼리가 메모리에서 제거되어 가비지 컬렉터로 수집됩니다.

fresh 상태일 때는 re-fethcing을 하지 않고 캐싱된 쿼리 데이터를 사용하며, stale 상태인 경우에는 re-fetching하여 쿼리를 새로운 데이터로 교체합니다. re-fetching되는 동안에는 캐싱된 데이터를 보여주고 re-fetching이 완료되면 새로운 데이터로 교체됩니다.

select Option

useQuery 훅에서 select 옵션을 통해 fetching된 데이터에 대해 가공(필터링)을 할 수 있습니다.

select 함수의 인수로는 fetchin된 데이터가 전달되고 반환값이 최종적으로 data에 바인딩됩니다.

import { useQuery } from '@tanstack/react-query'

const Component = () => {
  const { data } = useQuery([key, ...], queryFn, {
    select: (data) => { ,,, }  // fetching한 데이터를 가공
    });
    // ,,,
}

export default Component

Re-fetching Options

useQuery 훅을 호출하면 컴포넌트가 호출되어 실행되는 시점에 비동기 함수가 실행이 됩니다. 이후 캐싱된 데이터가 변경되는 경우 React Query가 자동적으로 re-fetching을 진행하며, 추가적으로 stale이 0인 쿼리 데이터에 대해서 refetchOnMount, refetchOnWindowFocus와 같은 옵션을 통해서 특정 상황에 대해 re-fethcing을 실행하도록 설정할 수도 있습니다.

import { useQuery } from '@tanstack/react-query'

const Component = () => {
  const { data } = useQuery([key, ...], queryFn, {
    refetchOnMount: true,
    refetchOnWindowFocus: true,
    refetchOnReconnect: true,
    refetchInterval: number
  })
}

export default Component

intialData Option

useQuery 훅에 initialData라는 옵션을 통해 초기 쿼리 데이터를 캐싱할 수 있습니다.

import { useQuery } from '@tanstack/react-query'

const Component = () => {
  const { data } = useQuery([key, ...], queryFn, {
    initialData: TData | () => TData
  })
}

export default Component

placeholder 옵션의 경우 쿼리 상태가 loading일 떄 표시될 데이터입니다. 실질적으로 캐싱되지 않는 데이터이며, initialData 옵션이 설정되지 않은 경우에 동작하게 됩니다.

ReactQuery - Client State vs Server State

yjym33 — Wed, 24 Jul 2024 09:26:40 +0900

Client State vs Server State

Client State란 클라이언트가 자체적으로 생성한 상태로 사용자의 input 값이나 UI 변경을 담당하는 부분으로 볼 수 있습니다.

예를 들어, 모달창을 열고 닫는 상태나 사용자가 입력한 값 같은 것들을 의미합니다.
즉, 서버에서 일어나는 일과는 아무 관련이 없는 상태들을 의미합니다.

반면 Server State란 클라이언트에 표시하는 데 필요한 서버 데이터를 의미합니다. 예를 들어, DB에 존재하는 데이터들을 의미합니다.

React Query는 React 애플리케이션에서 서버 응답에 대한 상태인 fetch, caching, update와 같은 동작을 쉽게 다룰 수 있도록 하며, Client State와 Server State를 명확하게 분리하여 관리할 수 있도록 도와주는 라이브러리입니다.

React Query

Query를 직역하면 질문, 질의문으로 요청으로 볼 수 있습니다. 이때 요청을 보내는 곳이 바로 DB 서버이며 종합적으로는 DB 서버에 요청을 보내는 것을 Query라고 볼 수 있습니다.

React Query는 서버에게 요청을 보내는 Query와 요청에 대한 응답(서버 데이터)를 캐싱하고 서버 데이터에 대한 적절한 핸들링 등 여러 편리한 기능들을 제공해줍니다.

React Query는 클라이언트에서 쿼리와 쿼리에 대한 서버 데이터를 클라이언트 캐시로 관리합니다. React 코드에서 서버 데이터가 필요할 때 Fetch API나 Axios를 통해 바로 서버에게 요청을 보내지 않고 React Query 캐시를 요청합니다.

React Query 클라이언트를 어떻게 구성했느냐에 따라 캐시의 데이터를 유지 관리합니다. 데이터를 관리하는 것은 React Query이지만 서버의 새 데이터로 캐시를 업데이트하는 시기를 설정하는 것은 사용자의 몫입니다.

React Query Manages Data

React Query의 캐시에는 특정 쿼리에 대한 Key가 존재하며 해당 키를 통해 쿼리를 식별합니다.

클라이언트 캐시의 데이터와 서버의 데이터가 일치하는지 확인해야 하는데 여기에는 두 가지 방법이 있습니다.

첫 번째로 명령형으로 처리하는 방법이 존재합니다. 해당 데이터를 무효화하고 캐시에 교체할 새 데이터를 서버에서 가져오게 지시하는 것입니다.

두 번째로는 선언형입니다. 이는 re-fetch를 트리거하는 특정 조건을 구성하는 것입니다. 예를 들어, 브라우저 창이 다시 포커스되었을 때 새 데이터를 서버에서 가져오도록 구성하는 것입니다.

React Query Feature

추가적으로 React Query는 서버 상테 관리에 도움이 되는 많은 도구가 함께 제공됩니다.

모든 쿼리의 로딩 및 오류 상태를 유지해주기 때문에 수동으로 다루어야 할 필요가 없어집니다.
사용자를 위해 데이터의 Pagination 또는 Infinity Scroll일 때 필요한 경우에 데이터를 가져올 수 있도록하는 Lazy loading 도구도 제공됩니다.
서버 데이터를 미리 pre-fetch하고 캐싱하여 사용자가 데이터를 필요로할 때 pre-fetch되어 캐싱된 데이터를 제공하기 때문에 요청과 응답에 대한 시간을 줄일 수도 있습니다.
React Query를 통해 서버의 데이터를 업데이트(Mutation)하여 관리할 수도 있습니다.
각 쿼리들은 키로 식별되기 때문에 페이지 내 여러 컴포넌트가 동일한 데이터를 요청하는 경우 한 번만 요청하도록 중복 요청을 제거할 수 있습니다.
서버에서 오류가 발생하는 경우에 대한 재시도를 관리할 수 있습니다.
쿼리가 성공하거나 오류가 났을 때를 구별하여 특정 조건에 따라 실행될 콜백함수를 전달할 수도 있습니다.