개발일지

[ Vite + React + Vscode ] 절대 경로 별칭 @로 자동 import 하기

찰리-누나 — Mon, 13 Jan 2025 05:30:18 +0900

난리났음

자동 import의 상대경로들이 너무 지저분해보이기도 하고, 한번에 경로를 알아보기가 힘든 것 같아 import를 절대 경로로 바꾸어주기로 했다.

대부분 글을 검색하면 tsconfig.json 과 vite.config.ts 파일 설정법만 알려주기에, vscode의 기능을 활용하여 자동 import 시에도 절대 경로를 설정하는 법을 기록한다.

1. VS Code 설정 변경

1. typescript.preferences.importModuleSpecifier 설정

VS Code는 기본적으로 상대 경로를 선호하도록 설정되어 있다. 이를 절대 경로로 변경하려면 VS Code 설정을 업데이트해야 한다.

VS Code 설정 열기
- Ctrl + , (Windows) 또는 Cmd + , (macOS)를 눌러 설정 창을 연다.
검색창에 importModuleSpecifier 입력.
typescript.preferences.importModuleSpecifier를 non-relative로 설정한다.

typescript.preferences.importModuleSpecifier를 non-relative로 설정

2. Vite.config.ts

1.라이브러리 설치

먼저, 필요한 라이브러리를 설치한다. svgr은 svg를 컴포넌트처럼 사용할 수 있게 해주는 모듈인데, 거의 필수적으로 사용하는 편이라 함께 설치하였다.

npm install @types/node 
npm install vite-tsconfig-paths // tsconfig의 paths를 적용시켜주는 플러그인
npm install --save-dev vite-plugin-svgr // svg 관련 플러그인

1.vite.config.ts에 내용 작성

'@' 별칭이 'src' 폴더로 시작하는 경로들을 가리키도록 설정한다.

따로 별칭을 지어주고 싶은 경로가 있다면 이 곳에서 하면 된다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import svgr from "vite-plugin-svgr";
import tsconfigPaths from "vite-tsconfig-paths";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  envDir: ".env",
  plugins: [react(), svgr(), tsconfigPaths()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

3. tsconfig.json

1.파일 수정

기본적으로 적혀있는 json 파일에, 아래 내용을 추가한다.

{
  "compilerOptions": {
    "baseUrl": ".", // 프로젝트 루트를 기준으로 경로 설정
    "paths": {
      "@/*": ["src/*"] // '@' 별칭을 'src'로 매핑
    }
  }
}

전체 코드는 다음과 같다.

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".", // 프로젝트 루트를 기준으로 경로 설정
    "paths": {
      "@/*": ["src/*"] // '@' 별칭을 'src'로 매핑
    }
  }
}

4. tsconfig.app.json

1.파일 수정

기본적으로 적혀있는 json 파일에, 아래 내용을 추가한다.

/* 추가설정 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }

전체 코드는 아래와 같다.

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    /* 추가설정 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

/src/components 폴더에 Test.tsx 파일을 만들고, 테스트 컴포넌트를 import 해보자.

자동 import에서 @/components 경로로 뜨는 모습

@ 별칭을 이용한 절대 경로로 잘 import 되는 것을 확인할 수 있다. 끝 ~

[SpringBoot] Maria DB 로컬 호스팅 및 JDBC, JPA, lombok // CamelCase 유지하기

찰리-누나 — Sun, 5 Jan 2025 05:31:33 +0900

강의는 Azure를 이용한 MySQL 호스팅을 사용할 것으로 되어 있지만, 무료 데이터베이스 툴인 Maria가 Spring과 함께 많이 사용되고 있는데다 MySQL은 이미 전 회사에서도(ㅎㅎ) 지겹게 경험한 적이 있어 Maria로 실습하기 위해 과정을 남겨 보았다.

! 시작하기 전에, lombok을 사용하면 마지막에 Getter와 Setter를 자동으로 만들게 해 주는 어노테이션을 사용할 수 있어 편하니 설치를 권장한다.

IntelliJ를 사용할 경우, Setting -> Plugins에서 lombok을 검색하면 Install 할 수 있다.

롬복 플러그인을 설치해준다.

그리고 이 롬복을 정상적으로 사용하기 위하여 annotation processors라는 메뉴에서

Enable annotation processing 항목을 체크해준다.

들어가자마자 바로 보임!

사전 준비는 끝났다. 그럼 이제 마리아 DB를 설치하고, 데이터를 만든 다음, JDBC로 스프링 부트 프로젝트에 연결하여, JPA로 자바 언어를 이용해 SQL DB를 소스코드 내에서 다루어 보자.

1. 마리아 DB를 설치한다.

마리아 DB는 아래 웹사이트에서 다운로드 할 수 있다.

https://mariadb.com/kb/en/postdownload/mariadb-server-11-6-2/

MariaDB Server 11.6.2

<div class="pdl-cta"> Thank you for downloading. Create your MariaDB account to receive download release notifications, product updates an...

mariadb.com

위 페이지에서 자신에게 맞는 운영체제를 선택해 Download를 클릭하면, 즉시 다운된다.

설치 진행 중 root 유저 정보를 설정하는 창에서 password를 설정한다.

아래는 모든 char의 set을 기본적으로 UTF8로 설정한것인지 묻는 체크박스인데, 필요하다면 체크한다.

root 유저 정보 설정

위 설정을 완료하고 나면, 포트 번호를 설정하는 창이 뜬다.

필요할 경우 수정해도 괜찮지만, 일반적으로 집에서 실습할 때에는 수정할 필요가 없다.

해당 포트가 사용 가능한 상태인지 보려면, cmd 창을 켜 아래 명령어를 입력하면 된다. 엔터를 쳤을 때 아무 결과가 뜨지 않는다면 사용 가능한 상태이다.

// 3306 포트가 사용중인지 확인하는 cmd 명령어.
netstat -ano | findstr 3306

3306 포트로 설정

다만 나는 일 때문에 내 컴퓨터에 mySQL을 설치해 둔 상태이므로, 3307이라는 다른 포트를 할당해 주었다. 3306 포트가 사용중일 경우, 아래와 같이 출력된다.

3306 포트가 사용중인 모습. LISTENING은 해당 포트가 현재 열려 있으며, 외부의 연결을 기다리고 있는 상태임을 가리킨다.

마리아 DB를 설치하면 HeidiSQL이라는, 데이터베이스 관리 도구가 함께 설치된다.

평소에는 DBeaver를 사용하지만, 설치된김에 사용해보기로 하였다.

HeidiSQL을 처음 실행한 모습.

위에서 신규 버튼을 누르면, 새로운 데이터베이스를 만들 수 있다.

클릭된 세션을 우클릭하면 이름도 변경할 수 있는데, test로 변경해 주었다.

또한 3307 포트를 사용하기로 하였으므로 포트 번호를 바꾸었고, 암호에는 처음 root 유저를 만들 때 설정하였던 비밀번호를 입력했다.

* DBeaver에서 MariaDB를 연결하는 방법

1. Connect to a database에서 마리아 DB를 검색한다.

mariaDB의 상징은 물개

2. 내가 설정했던 port 번호와 root의 비밀번호를 입력하고 완료를 클릭한다.

Driver properties를 누르면 필요한 것들이 설치된다.

아래와 같이 연결된다.

2. 설치한 mariaDB에 데이터베이스를 하나 만들고, SpringBoot 프로젝트에 연결한다.

test 세션에 Base 데이터베이스를 만들고, User이라는 테이블을 만들 것이다.

Base라는 데이터베이스를 만든다.

테이블은 명령어로도 생성할 수 있고, GUI 도구로 생성할 수도 있다.

GUI 도구도 잘 되어있기 때문에 편하다.

컬럼 또한 HeidiSQL을 이용해 바로 넣을 수 있다. 테이블 생성하는 곳의 +추가 버튼을 클릭하면 된다.

userId, loginId, password, name, nickname, age를 생성하되 userId는 AutoIncrement가 적용된 PrimaryKey로 설정할 것이다.

userId에 primaryKey를 설정해주었다. 우클릭 하고 새 인덱스 생성에 마우스 오버 하면, Primary를 클릭할 수 있다. (현재는 이미 설정되어서 블록 처리된 상태)

또한 해당 userId의 '기본값' 란을 클릭하면, 위와 같이 선택 옵션 창이 뜬다. 여기서 AUTO_INCREMENT를 클릭하여 자동으로 증가하는, 그 테이블만의 고유한 id를 설정해줄 수 있다.

저장을 클릭해야 테이블이 진짜로 생성된다.

위 과정을 SQL 쿼리로 작성하면 다음과 같다.

CREATE TABLE `User` (
	`userId` INT NOT NULL AUTO_INCREMENT,
	`loginId` VARCHAR(50) NULL DEFAULT NULL,
	`password` VARCHAR(50) NULL DEFAULT NULL,
	`name` VARCHAR(50) NULL DEFAULT NULL,
	`nickname` VARCHAR(50) NULL DEFAULT NULL,
	`age` INT NULL DEFAULT NULL,
	PRIMARY KEY (`userId`)
)
COMMENT='유저의 고유 id, loginId, name, nikname 등 user 정보가 담겨있는 테이블.'
COLLATE='utf8mb4_uca1400_ai_ci'
;

데이터 또한 GUI 도구로 만들어 삽입할 수 있다.

userId는 건드리지 않고, 나머지 데이터 열만 클릭하여 입력한 뒤 빈 공간을 누르면 자동으로userId가 설정된다.

SQLD도 딴 겸.. SQL로 INSERT INTO 테이블명 (컬럼명) VALUES (값들) 을 통해 추가 데이터를 넣어주었다.

INSERT INTO base.`user` (loginId, PASSWORD, NAME, nickname, age) VALUES ('nomal', 'nomal100', '노멀 유저', '일반 유저', 20);

두 행의 데이터가 생성된 모습

3. 스프링부트에 JDBC를 이용하여 MariaDB를 연결한다.

* 여기서 잠깐, JDBC란 무엇일까?

JDBC (Java Database Connectivity)

정의: Java에서 데이터베이스와 연결하기 위한 표준 인터페이스. 자바 프로그램에서 SQL 쿼리를 실행하고 데이터베이스와 상호작용할 수 있게 해준다. 즉, 자바 언어를 사용하여 데이터베이스를 다룰 수 있도록 하는 라이브러리라고 할 수 있다.
Node.js로 따지자면, mongodb 라이브러리와 같다. 자바 프로그램과 SQL 데이터베이스를 연결하게 해 주며, 저수준의 API를 제공한다.
역할:
- 데이터베이스 연결(Connection) 생성.
- SQL 쿼리 실행(SELECT, INSERT, UPDATE 등).
- 결과(ResultSet) 처리.
예시: JDBC를 사용해 MySQL/MariaDB와 연결

설치해야 할 최신 maria db용 JDBC 버전은 아래의 사이트에서 확인할 수 있다.

https://mvnrepository.com/artifact/org.mariadb.jdbc/mariadb-java-client

사이트에 따르면 현재 최신 버전은 3.5.1이다.

1. 위 사이트에서 3.5.1을 클릭하고, Gradle을 클릭하면 해당 JDBC 라이브러리를 Gradle를 이용해 다운로드 하게 하는 명령어를 복사할 수 있다.

2. 위 명령어를 build.gradle에 입력하고, gradle를 새로고침 해준다. npm install 과 같은 역할을 한다고 생각하면 편하다.

JDBC 라이브러리를 설치해준다.

3. 이제, 데이터베이스 알맹이와 연결해주기 위해 application.properties 를 작성한다.

React로 치자면, 환경변수 파일인 .env와 비슷하다.

내가 만든 데이터베이스 이름은 base이고, 사용자 명은 root이며, 비밀번호는 예시로 0000을 입력해 두었다.

내 포트는 3307이지만, 기본적으로는 3306이므로 예시 코드는 아래와 같이 작성하였다.

spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
spring.datasource.url=jdbc:mariadb://localhost:3306/base // 포트번호/데이터베이스 명
spring.datasource.username=root // 사용자명
spring.datasource.password=0000 // 비밀번호

4. JPA를 설치하여, mariaDB를 사용한다.

* JPA란 무엇일까?

JPA ( Java Persistence API )

정의: 자바 애플리케이션에서 데이터베이스와 객체 간의 매핑(ORM, Object-Relational Mapping)을 처리하기 위한 표준 인터페이스. Java 진영에서 제공하는 ORM 기술의 표준으로, 데이터베이스와 객체 모델 간의 변환을 간단히 처리할 수 있도록 설계되었다.

Node.js 개발자에게 이해하기 쉽게 설명해보자면, MongoDB를 사용할 때 이용했던 mongoose 의 역할을 한다고 할 수 있다.
역할:
- 객체와 데이터베이스 간 매핑 .
- SQL 작성 및 실행 자동화.
- 데이터 변경 관리.. 등

그럼 이제 자바 언어를 활용해, 자바스크립트로 몽고 디비를 다룬 몽구스처럼, 자바 언어로 SQL DB를 다루기 위하여 JPA라는 라이브러리를 설치해보자.

JPA에는 Hibernate, EclipseLink, OpenJPA가 존재한다. 나는 요즘 가장 많이 사용되는 Hibernate를 채택하였다.

1. 먼저, build.gradle에 아래 문장을 추가하여 그래들을 새로고침 해 라이브러리를 설치한다.

implementation 'org.springframework.boot:spring-boot-starter-data-jpa'

2. application.properites에 아래 사항을 추가해준다. 'JPA 엔티티 설계' 와 '실제 테이블 상태' 를 비교해, 차이점이 있다면 그를 테이블에 반영하게 하는 옵션이다.

spring.jpa.hibernate.ddl-auto=update

2-1. 만일 실행할 때 DB 입출력 시 SQL을 따로 실행창에 출력하고 싶다면, application.properties에 아래 문장을 추가한다.

spring.jpa.properties.hibernate.show_sql=true

추가로, JPA는 CamelCase를 자동으로 snakeCase로 변환한다. 그 설정을 무시하기 위해 아래 사항을 추가해 주었다.

spring.jpa.hibernate.naming.physical-strategy=org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
spring.jpa.hibernate.naming.implicit-strategy=org.hibernate.boot.model.naming.ImplicitNamingStrategyLegacyJpaImpl

3. 아까 만든 User 테이블을, JPA 문법을 사용하여 소스코드로 옮긴다.

JPA 문법에서, @Entity 어노테이션은 '테이블' 을 의미한다. 따라서 @Entity를 사용해 클래스를 만들면 그것이 바로 테이블이 된다.

그리고 클래스에 변수들을 선언해주면, 그것이 바로 '컬럼' 이 되는 것이다.

예를 들어, 위에서 작성한 User 테이블은 아래와 같이 작성한다.

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

@Entity
public class User {

private int userId;
    private String loginId;
    private String password;
    private String name;
    private String nickname;
    private int age;

}

그런데 PrimaryKey(기본키) 이면서, 자동으로 증가하는 수인 userId 는 어떻게 설정해 주어야 할까?

JPA 문법에서, 아래의 어노테이션은 '다음 변수가 PrimaryKey이며, AutoIncrement 임을 의미한다.

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)

따라서 userId 바로 위에 아래와 같이 작성해주면 된다.

package com.example.demo;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int userId;

    private String loginId;
    private String password;
    private String name;
    private String nickname;
    private int age;

}

헌데, 현재 변수들을 class 안에서만 사용하기 위해 private라는 접근자를 붙였으므로 외부에서는 해당 변수의 값을 사용할 수 없는 상태이다. 따라서 해당 변수의 값을 가져오기 위하여 getter와 setter를 만들어 주어야 한다.

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

@Entity
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int userId;

    private String loginId;
    private String password;
    private String name;
    private String nickname;
    private int age;

    // Getter와 Setter 추가
    public int getUserId() {
        return userId;
    }

    public void setUserId(int userId) {
        this.userId = userId;
    }

    public String getLoginId() {
        return loginId;
    }

    public void setLoginId(String loginId) {
        this.loginId = loginId;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getNikname() {
        return nickname;
    }

    public void setNikname(String nikname) {
        this.nikname = nikname;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

그러나 이와 같이 작성하면 매번 테이블을 만들 때마다 똑같은 Getter와 Setter를 만드는 일을 반복해야 하므로, lombok의 @Getter, @Setter 어노테이션을 이용해 이를 자동화시켜줄 수 있다.

package com.example.demo;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.Getter;
import lombok.Setter;

@Entity
@Setter
@Getter
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int userId;

    private String loginId;
    private String password;
    private String name;
    private String nickname;
    private int age;

}

4. JPA 문법과 lombok을 이용하여 데이터를 조회한다.

테이블에서 데이터를 입력하거나 출력하려면, 항상 다음의 3-step을 밟아야 한다.

1. repository를 만들고

2. DB 입출력을 하고자 하는 클래스에서 만든 repository를 등록한 다음,

3. JPA 문법을 사용하여 데이터를 다룬다.

일단 다음과 같은 User Repository를 만든다.

package com.example.demo;

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Integer> {


}

그리고 데이터를 조회하고자 하는 페이지에서 이용할 수 있도록, Controller 파일에 데이터베이스를 조회하는 문장을 작성해 주었다. findeAll은 해당 테이블의 '모든' 정보를 가져오라는 JPA 문법이다.

List<User> result = userRepository.findAll();

이 때 Lombok을 이용하여, @ RequiredArgsConstructor 를 사용해 Constructor를 자동으로 만들도록 설정해 주면 편하다.

@Controller
@RequiredArgsConstructor
public class ItemController {

    private final UserRepository userRepository;

    @GetMapping("/list")
    String list(Model model) {
        List<User> result = userRepository.findAll();
        model.addAttribute("name", "신발");
        return "list.html";
    }
}

데이터를 가져오려면, getter과 setter를 이용해야 한다. 우리는 lombok을 이용하여 자동으로 생성되도록 하였으므로, 자동완성에 get과 set이 뜬다.

System.out.println(result.get(0).getLoginId());

전체 코드는 다음과 같다.

package com.example.demo;

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@Controller
@RequiredArgsConstructor
public class ItemController {

    private final UserRepository userRepository;

    @GetMapping("/list")
    String list(Model model) {
        List<User> result = userRepository.findAll();
        System.out.println(result.get(0).getLoginId());
        model.addAttribute("name", "신발");
        return "list.html";
    }
}

이제 localhost:8080/list에 들어가면, 아래와 같이 터미널에 println에 출력한 내용이 잘 뜬다.

master 라는 loginId가 나타났다.

모든 행을 출력하고 싶다면, toString을 일일이 오버라이딩해야한다. 이를 방지하기 위해 @ToString 어노테이션을 사용해 주었다.

package com.example.demo;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Entity
@Setter
@Getter
@ToString // ToString 추가 
public class User {
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer userId;
    private String loginId;
    private String password;
    private String name;
    private String nickName;
    private Integer age;

}

아래 코드를 통해 모든 내용을 출력해보자.

result.forEach(System.out::println);

컨트롤러 전체 코드는 다음과 같다.

package com.example.demo;

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@Controller
@RequiredArgsConstructor
public class ItemController {

    private final UserRepository userRepository;

    @GetMapping("/list")
    String list() {
        List<User> result = userRepository.findAll();
        result.forEach(System.out::println);
        return "list.html";
    }
}

성공~

한글 유니코드가 좀 깨지는 것 말고는 모두 잘 출력된다.

[SpringBoot] SpringBoot 프로젝트 구조

찰리-누나 — Mon, 30 Dec 2024 00:12:56 +0900

스프링 부트로 만든 프로젝트의 기본 디렉토리 구조와, 각 파일의 역할을 알아보자 .

아래와 같은 아주 기본적인 프로젝트를 생성했다.

1. src/main/java

Java 코드가 위치하는 디렉토리로, 아래와 같은 서브 패키지 구조로 구성된다. 지금은 간단하게 작성하여 나뉘어져있지 않지만, 실제 프로젝트에서 사용되는 구조에는 다음과 같은 것들이 있다.
- controller/: REST API 또는 MVC 컨트롤러 클래스.
- service/: 비즈니스 로직을 처리하는 서비스 계층.
- repository/: 데이터베이스와의 상호작용을 처리하는 인터페이스(JpaRepository, CrudRepository).
- domain/ (또는 model/): 데이터베이스 엔티티 클래스 및 DTO, VO 등이 위치.
- ProjectApplication.java: 메인 실행 클래스(스프링 부트 애플리케이션의 진입점)

여기서 중요한 것은

ProjectApplication.java: 메인 실행 클래스(스프링 부트 애플리케이션의 진입점)

이다. 내가 demo로 프로젝트 명을 생성하였기 때문에 스프링에서 자동으로 DemoApplication.java 파일을 만들어주었는데, 이렇게 프로젝트명+Application.java 로 되어있는 파일이 바로 '스프링 부트로 만든 프로그램의 시작을 담당하는 파일' 이다.

// 이와 같은 파일이 자동으로 생성되어 있다.

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}
}

이 프로젝트명 + Application 클래스에는 반드시 @SpringBootApplication 애너테이션이 적용되어 있어야 한다. @SpringBootApplication 애너테이션을 통해 스프링 부트 애플리케이션을 시작할 수 있기 때문이다.

2. src/main/resources

static/
- 정적 리소스(HTML, CSS, JavaScript, 이미지 파일 등)가 위치한다.
- /static 디렉토리의 파일들은 기본적으로 / 경로로 매핑된다.
templates/
- 서버 사이드 렌더링에 사용하는 템플릿 파일(예: Thymeleaf, Freemarker 등)이 위치한다.
- 주로 HTML 파일이 들어간다.
- @Controller와 함께 동작하며 뷰를 반환할 때 사용된다.
application.properties
- 애플리케이션 설정 파일.
- 환경변수, 데이터베이스 연결, 서버 포트, 로깅 수준 등 여러 설정을 정의할 수 있다.

resources 의 static에 index.html을 작성하였다.

src/main/resources 디렉토리는 자바 파일을 제외한 HTML, CSS, 자바스크립트, 환경 파일 등을 저장하는 곳이다. 위에서 템플릿 파일이란 자바 코드를 삽입할 수 있는 HTML 형식의 파일을 뜻하는데, 스프링부트에서 생성한 자바 객체를 HTML 형태로 출력할 수 있다.

3. src/test/java

테스트 코드를 작성하는 디렉토리이다.
기본적으로 Spring Boot는 JUnit을 통해 테스트를 지원한다.
DemoApplicationTests 같은 클래스가 자동 생성되어 스프링 컨텍스트가 제대로 로드되는지 확인하는 기본 테스트 코드가 포함된다.

4. 루트 디렉토리

build.gradle
- Gradle 빌드 스크립트.
- 의존성과 빌드 설정을 정의한다.
gradlew 및 gradlew.bat
- Gradle Wrapper 파일로, Gradle이 설치되지 않은 시스템에서도 Gradle 빌드 스크립트를 실행할 수 있도록 도와준다.
.gitignore
- Git에서 버전 관리하지 않을 파일들을 정의한다(예: build/, .idea/ 등).

여기서 중요한 것은 그래들이다. build.gradle은 Gradle이라는 빌드 도구가 사용하는 설정 파일이다.
Gradle은 프로젝트를 만들고 실행하기 위해 필요한 일을 대신 처리해주는 도구라고 생각하면 편하다.

1. Gradle이란?

Gradle은 프로그래밍 작업을 자동화해주는 도구.
소스 코드를 컴파일, 필요한 파일을 다운로드, 프로젝트를 패키징(묶기)하는 일을 도와준다.
이전에 많이 사용되던 Ant나 Maven보다 더 빠르고 유연하게 동작한다.

2. build.gradle 파일이 하는 일

Gradle의 설정 파일로, 여기서 프로젝트에 필요한 것들을 적어둔다.
예를 들어:
- 플러그인 추가 (특별한 기능을 추가하는 도구)
- 라이브러리 설치 (프로젝트에 필요한 외부 기능)

plugins {
    id 'java'  // 자바 프로젝트라는 걸 알려줌
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web' // 웹 서버 라이브러리
}

3. Groovy란?

Groovy는 Gradle의 스크립트를 작성하는 데 쓰는 간단한 언어.
문법이 간단하고 읽기 쉽기 때문에 개발자가 쉽게 설정을 쓸 수 있다.

4. 빌드 도구가 하는 일

빌드 도구는 코드를 실행 가능한 형태로 만드는 일을 자동화해준다.
예를 들어, Gradle은 다음을 자동으로 실행한다:

코드 컴파일: 우리가 작성한 코드를 컴퓨터가 이해할 수 있는 언어로 변환.
라이브러리 다운로드: 프로젝트에 필요한 외부 기능(라이브러리)을 인터넷에서 가져옴.
파일 묶기: 완성된 코드를 실행 파일(jar 파일)로 압축.
배포: 완성된 파일을 서버에 올려서 실행 준비.

5. 실생활 비유

Gradle은 요리사 이다:

build.gradle 파일은 레시피에 해당한다.
- 어떤 재료(라이브러리)를 쓸지.
- 어떤 도구(플러그인)가 필요한지.
Gradle이 이 레시피를 읽고 **요리(컴파일, 다운로드, 패키징)**를 만든다.
결과물은 우리가 서버에서 실행할 수 있는 **완성된 요리(jar 파일)**가 된다!

스프링 프로젝트의 흐름

클라이언트 요청
- 사용자가 API를 호출하면, BasicController에서 해당 요청을 처리한다.
- 예: @GetMapping("/hello") 같은 메서드를 통해 "Hello, World!"를 반환.
컨트롤러 역할
- BasicController는 요청을 처리하고 필요한 데이터를 반환하거나, 서비스 로직을 호출하여 결과를 전달한다.
뷰 렌더링 (옵션)
- templates/에 HTML 파일이 있다면, 컨트롤러에서 해당 파일을 뷰로 렌더링할 수 있다.
- 예: return "index";는 templates/index.html을 렌더링한다.
정적 리소스 제공
- static/ 디렉토리에 있는 파일은 /css/style.css와 같이 URL로 직접 접근할 수 있다.

[SpringBoot] Spring Boot Devtools - auto represh

찰리-누나 — Sun, 29 Dec 2024 23:06:30 +0900

스프링으로 개발을 할 때, 프로그램을 수정하면 서버 빌드도 다시 해야 하는 것이 불편하여 Spring Boot Devtools를 이용해 보았다.

Spring Boot Devtools를 설치하면 서버를 재시작하지 않아도 클래스를 변경할 때 서버가 자동으로 재가동된다.

Spring Boot Devtools를 사용하려면 Spring Boot Devtools를 그래들(Gradle)로 설치해야 한다.

Gradle은 Java 생태계에서 빌드와 관리를 담당하는 핵심 도구로, React 생태계에서 사용하는 Vite 또는 Webpack과 유사한 역할을 한다. Gradle이 React의 Vite나 Webpack과 정확히 동일하지는 않지만, "개발을 돕는 빌드 및 구성 도구"라는 공통점을 가지고 있다.

다만, Gradle은 Java 생태계에서 코드 컴파일부터 테스트, 배포 패키징까지 전체 프로세스를 아우르는 반면, React 생태계의 빌드 도구는 주로 번들링 및 개발 서버 제공에 초점을 맞춘다는 차이점이 존재한다.

Gradle의 역할
- Java 애플리케이션을 컴파일하고 의존성을 관리하며 패키징하는 전체 빌드 프로세스를 담당.
- Spring Boot와 같은 Java 프레임워크에서 Gradle은 필수적인 역할을 수행.
Vite/Webpack의 역할
- React 애플리케이션의 자바스크립트 모듈을 번들링하고 개발 서버를 제공하며, 의존성을 관리.
- JavaScript 프로젝트에서 빌드 및 번들링의 핵심 도구로 사용.

Vite를 다룰 때 vite.config.js를 사용하는 것 처럼, 그래들은 buld.gradle를 사용한다. build.gradle 파일에는 프로젝트를 위해 필요한 플러그인과 라이브러리 등이 기술되어 있다.

여기에 developmentOnly의 spring-boot-devtools를 추가해주면 된다.

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
    
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
}

* developmentOnly: 해당 라이브러리는 개발 환경에만 적용된다는 의미로, 운영 환경에 배포되는 jar, war 파일에는 이 라이브러리가 포함되지 않는다.

적용법

인텔리제이에서 그래들을 다시 시작하려면 다음과 같이 한다.

[View] -> [Gradle] 을 클릭하면 오른쪽에 그래들 관리 툴이 나타난다.

내가 실행하고자 하는 프로젝트를 우클릭하고, [Refresh Gradle Dependencies] 를 클릭한다.

[File] -> [setting] 에서 Build project automatically를 체크한다.

[Advanced Setting] 의 [Compiler]의 Allow auto-make to strat even if developed application is currently running 을 체크한다.

테스트 삼아, GetMapping으로 메인 페이지에 보내는 String 값을 변경하고 저장해 보았다.

[React + Zustand] persist, localstorage에 업데이트 된 새로운 값 가져오기

찰리-누나 — Tue, 10 Dec 2024 00:36:27 +0900

외주 프로젝트를 하는 중에 다음과 같은 문제가 발생했다.

사용자의 행동에 따라, ZuStand의 persist를 사용하여 localstorage에 저장된 값이 변화한다. 이 변화한 값을 페이지 이동 시 즉시 화면에 보여줘야 한다. 그러나 persist를 이용한 ZuStand는 예상과는 다르게 동작했다.

애플리케이션이 처음 실행될 때, persist 미들웨어는 지정된 스토리지에서 데이터를 읽어와 Zustand 스토어를 "rehydrate"합니다. 즉, 저장된 상태를 다시 불러와 초기 상태로 설정합니다.

persist를 이용해 만들어진 최초의 상태, 즉 아무 값이 저장되지 않은 상태가 zuStand에 저장된 상태라 localStorage에서 변화한 값이 useState를 쓸 때 처럼, 화면의 리렌더링이 되지 않았던 것! 새로고침을 하면 로컬스토리지를 다시 읽어오기에 최신의 값을 불러올 수 있게 되지만, 새로고침을 하기 전까지는 '이전의 값' 을 계속 갖고 있는 것이 문제였다.

해결은 의외로 간단했다.

https://github.com/pmndrs/zustand/discussions/1614

How to get updated data from localStorage / sync tabs? · pmndrs zustand · Discussion #1614

How can I sync tabs while using persist (with localStorage)? I've already checked the "shared-zustand", but since I'm using Immer, it doesn't work: Tom-Julux/shared-zustand#4. Suppose I have a shop...

github.com

https://zustand.docs.pmnd.rs/integrations/persisting-store-data#how-can-i-rehydrate-on-storage-event

Persisting store data - Zustand

zustand.docs.pmnd.rs

공식 문서에 아래와 같이 적혀있다.

How can I rehydrate on storage event

You can use the Persist API to create your own implementation, similar to the example below:

type StoreWithPersist = Mutate<StoreApi<State>, [["zustand/persist", unknown]]>

export const withStorageDOMEvents = (store: StoreWithPersist) => {
  const storageEventCallback = (e: StorageEvent) => {
    if (e.key === store.persist.getOptions().name && e.newValue) {
      store.persist.rehydrate()
    }
  }

  window.addEventListener('storage', storageEventCallback)

  return () => {
    window.removeEventListener('storage', storageEventCallback)
  }
}

const useBoundStore = create(persist(...))
withStorageDOMEvents(useBoundStore)

store.persist.rehydrate()를 쓰면, storage 이벤트를 사용하여 변경된 값을 즉시 zuStand에 할당해 불러올 수 있다.

나는 페이지를 로드 할 때 (컴포넌트가 마운트 될 때) 직전에 변경된 로컬 스토리지의 값을 보여주는 기능을 구현해야 했으므로, 다음과 같이 사용했다.

1. 먼저, store를 생성한다.

import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";

type TelStoreType = {
  telId?: string; // 전화기 ID
  telno?: string; // 전화번호

  setTelInfo: (telId: string, telno: string) => void;
  clear: () => void;
};

export const useTelStore = create<TelStoreType>()(
  persist(
    (set) => ({
      setTelInfo: (telId, telno) => set({ telId, telno }),
      clear: () =>
        set(() => ({
          telId: "",
          telno: "",
        })),
    }),
    {
      name: "selected-tel",
      storage: createJSONStorage(() => localStorage),
    }
  )
);

2. 스토어를 사용하는 곳에서, persist의 rehydrate를 통해 항상 최신의 값을 가져온다.

 useEffect(() => {
    useTelStore.persist.rehydrate();
  }, []);

[react-query v5] 공식 문서 번역 - useQuery

찰리-누나 — Wed, 4 Dec 2024 02:09:50 +0900

프로젝트로 react-query 의 v5버전을 쓰게 되었다.

근데 공식 번역이 없음

영어 문서인 채로 읽는 것이 가장 좋지만... 빠른 이해를 위해 한번 번역해 기록해 두기로

https://tanstack.com/query/v5/docs/framework/react/reference/useQuery

useQuery | TanStack Query React Docs

tsx const { data, dataUpdatedAt, error, errorUpdatedAt, failureCount, failureReason, fetchStatus, isError, isFetched, isFetchedAfterMount, isFetching, isInitialLoading, isLoading, isLoadingError, isPa...

tanstack.com

파라미터1 (옵션)

queryKey: unknown[]

필수
이 쿼리에 사용할 쿼리 키입니다.
쿼리 키는 안정적인 해시로 변환됩니다. 자세한 내용은 Query Keys를 참고하세요.
이 키가 변경되면 쿼리는 자동으로 업데이트됩니다(단, enabled가 false로 설정되지 않은 경우).

queryFn: (context: QueryFunctionContext) => Promise<TData>

필수 (기본 쿼리 함수가 정의되지 않은 경우)
쿼리가 데이터를 요청할 때 사용할 함수입니다.
QueryFunctionContext를 인자로 받습니다.
반환값은 데이터가 해결되거나 오류가 발생하는 Promise여야 합니다. 반환 데이터는 undefined일 수 없습니다.

enabled: boolean | (query: Query) => boolean

자동 실행을 비활성화하려면 false로 설정하세요.
종속 쿼리(Dependent Queries)에서 사용할 수 있습니다.

networkMode: 'online' | 'always' | 'offlineFirst'

선택 사항
기본값은 'online'입니다.
자세한 내용은 Network Mode를 참고하세요.

retry: boolean | number | (failureCount: number, error: TError) => boolean

기본값: 클라이언트에서는 3, 서버에서는 0

false: 실패한 쿼리를 기본적으로 재시도하지 않습니다.
true: 실패한 쿼리를 무한히 재시도합니다.
숫자: 예를 들어 3으로 설정하면, 실패한 쿼리를 세 번 재시도합니다.

retryOnMount: boolean

기본값: true
false로 설정하면 오류가 있는 경우 마운트 시 쿼리를 재시도하지 않습니다.

retryDelay: number | (retryAttempt: number, error: TError) => number

다음 재시도까지의 지연 시간을 밀리초 단위로 설정합니다.

예: attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)는 지수적 백오프를 적용합니다.
예: attempt => attempt * 1000는 선형 백오프를 적용합니다.

staleTime: number | ((query: Query) => number)

선택 사항
기본값: 0
데이터가 오래되었다고 간주되기 전의 시간(밀리초 단위)입니다.

Infinity로 설정하면 데이터는 절대 오래되지 않습니다.
함수로 설정하면 쿼리를 사용하여 staleTime을 계산합니다.

gcTime: number | Infinity

기본값: 5분 (SSR 시 Infinity)
미사용 또는 비활성 캐시 데이터가 메모리에 남아 있는 시간(밀리초 단위)입니다.

Infinity로 설정하면 가비지 수집을 비활성화합니다.
참고: 최대 허용 시간은 약 24일입니다.

queryKeyHashFn: (queryKey: QueryKey) => string

선택 사항
지정된 경우, 쿼리 키를 해시 문자열로 변환하는 데 사용됩니다.

refetchInterval: number | false | ((query: Query) => number | false | undefined)

선택 사항

숫자: 지정된 주기(밀리초)마다 쿼리를 다시 가져옵니다.
함수: 함수가 쿼리를 사용하여 주기를 계산합니다.

refetchIntervalInBackground: boolean

선택 사항
true로 설정하면, 탭/창이 백그라운드에 있을 때도 쿼리를 계속 다시 가져옵니다.

refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")

선택 사항
기본값: true

true: 데이터가 오래되었으면 마운트 시 쿼리를 다시 가져옵니다.
false: 마운트 시 쿼리를 다시 가져오지 않습니다.
"always": 항상 마운트 시 쿼리를 다시 가져옵니다.

refetchOnWindowFocus: boolean | "always" | ((query: Query) => boolean | "always")

선택 사항
기본값: true

true: 데이터가 오래되었으면 창 포커스 시 쿼리를 다시 가져옵니다.
false: 창 포커스 시 쿼리를 다시 가져오지 않습니다.
"always": 항상 창 포커스 시 쿼리를 다시 가져옵니다.

refetchOnReconnect: boolean | "always" | ((query: Query) => boolean | "always")

선택 사항
기본값: true

true: 데이터가 오래되었으면 다시 연결 시 쿼리를 다시 가져옵니다.
false: 다시 연결 시 쿼리를 다시 가져오지 않습니다.
"always": 항상 다시 연결 시 쿼리를 다시 가져옵니다.

notifyOnChangeProps: string[] | "all" | (() => string[] | "all" | undefined)

선택 사항
특정 속성이 변경될 때만 컴포넌트를 다시 렌더링합니다.

예: ['data', 'error']로 설정하면 data나 error가 변경될 때만 렌더링합니다.
"all"로 설정하면 스마트 추적을 비활성화하고 쿼리가 업데이트될 때마다 다시 렌더링합니다.

select: (data: TData) => unknown

선택 사항

이 옵션은 쿼리 함수에서 반환된 데이터의 일부를 변환하거나 선택하는 데 사용됩니다.
반환되는 데이터 값에 영향을 주지만, 쿼리 캐시에 저장되는 데이터에는 영향을 주지 않습니다.
select 함수는 데이터가 변경되거나 함수 참조가 변경될 때만 실행됩니다.
최적화를 위해, useCallback으로 함수를 감싸는 것이 권장됩니다.

initialData: TData | () => TData

선택 사항

설정된 경우, 이 값이 쿼리 캐시의 초기 데이터로 사용됩니다. (쿼리가 생성되거나 캐시되지 않은 경우에만)
함수로 설정된 경우, 공유/루트 쿼리 초기화 중 한 번 호출되며, initialData를 동기적으로 반환해야 합니다.
초기 데이터는 기본적으로 오래된(stale) 상태로 간주되지만, staleTime이 설정된 경우는 예외입니다.
initialData는 캐시에 저장됩니다.

initialDataUpdatedAt: number | (() => number | undefined)

선택 사항

설정된 경우, 이 값이 초기 데이터가 마지막으로 업데이트된 시간을 나타내는 밀리초 단위의 값으로 사용됩니다.

placeholderData: TData | (previousValue: TData | undefined; previousQuery: Query | undefined) => TData

선택 사항

설정된 경우, 쿼리가 대기 상태(pending)일 동안 해당 쿼리 옵저버의 플레이스홀더 데이터로 사용됩니다.
placeholderData는 캐시에 저장되지 않습니다.
함수로 제공된 경우, 첫 번째 인수로 이전에 조회된 쿼리 데이터를, 두 번째 인수로 완전한 이전 쿼리 객체를 받습니다.

structuralSharing: boolean | (oldData: unknown | undefined, newData: unknown) => unknown)

선택 사항

기본값은 true입니다.
false로 설정된 경우, 쿼리 결과 간의 구조적 공유가 비활성화됩니다.
함수로 설정된 경우, 이전 데이터와 새 데이터 값을 전달받아 이를 결합한 결과를 반환해야 합니다. 이를 통해 직렬화할 수 없는 값이 포함된 경우에도 성능을 개선할 수 있습니다.

throwOnError: undefined | boolean | (error: TError, query: Query) => boolean

선택 사항

기본값은 글로벌 쿼리 설정의 throwOnError 값(기본적으로 undefined)입니다.
true로 설정하면, 렌더링 단계에서 오류가 발생 시 이를 인근 오류 경계로 전파합니다.
false로 설정하면, Suspense의 기본 동작(오류를 오류 경계로 전파)을 비활성화합니다.
함수로 설정된 경우, 오류와 쿼리를 전달받아 오류 경계에서 오류를 표시할지(true) 또는 상태로 반환할지(false)를 결정해야 합니다.

meta: Record<string, unknown>

선택 사항

설정된 경우, 쿼리 캐시 항목에 추가 정보를 저장합니다.
이는 쿼리에서 접근 가능하며, queryFn에 제공되는 QueryFunctionContext의 일부로도 사용할 수 있습니다.

Parameter2 (QueryClient)

queryClient?: QueryClient

사용자 정의 QueryClient를 사용하려면 설정하십시오. 그렇지 않으면 가장 가까운 컨텍스트의 클라이언트가 사용됩니다.

반환값

status: QueryStatus

다음 값 중 하나를 반환합니다:
- pending: 캐시된 데이터가 없고 쿼리가 완료되지 않았을 때.
- error: 쿼리 시도가 오류로 끝났을 때. 오류는 error 속성에 포함됩니다.
- success: 오류 없이 응답을 수신한 경우.

isPending: boolean

위의 status에서 파생된 boolean 값입니다.

isSuccess: boolean

status에서 파생된 boolean 값입니다.

isError: boolean

status에서 파생된 boolean 값입니다.

isLoadingError: boolean

쿼리가 첫 번째 요청 중 실패했을 때 true입니다.

isRefetchError: boolean

다시 요청하는 동안 실패한 경우 true입니다.

data: TData

기본값은 undefined입니다.
쿼리의 마지막으로 성공적으로 해결된 데이터입니다.

dataUpdatedAt: number

쿼리가 마지막으로 성공 상태를 반환한 시간의 타임스탬프입니다.

error: null | TError

기본값은 null입니다.
쿼리 중 발생한 오류 객체입니다.

errorUpdatedAt: number

쿼리가 마지막으로 오류 상태를 반환한 시간의 타임스탬프입니다.

isStale: boolean

캐시의 데이터가 무효화되었거나, staleTime보다 오래된 경우 true입니다.

isPlaceholderData: boolean

표시된 데이터가 플레이스홀더 데이터인 경우 true입니다.

isFetched: boolean

쿼리가 실행된 경우 true입니다.

fetchStatus: FetchStatus

상태:
- fetching: 쿼리 함수가 실행 중일 때.
- paused: 쿼리가 데이터를 요청했지만 일시 중지된 경우.
- idle: 쿼리가 데이터를 요청하지 않을 때.

failureCount: number

쿼리 실패 횟수입니다. 성공 시 0으로 초기화됩니다.

refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>

쿼리를 수동으로 다시 요청하는 함수입니다.

promise: Promise<TData>

쿼리 데이터를 포함한 안정적인 Promise 객체입니다. experimental_prefetchInRender 플래그를 활성화해야 합니다.

[React] Zustand의 persist

찰리-누나 — Wed, 27 Nov 2024 06:37:05 +0900

프론트 페이지에서 새로고침이 되어도 값이 변경되지 않아야 하는 전역 정보를 다룰 때에는 어떻게 하면 좋을까?

예를 들어, 로그인의 경우 accessToken의 수명이 다할 때까지 어딘가에 반드시 저장이 되어 있어야 한다.

이를 위해, Zustand의 persist를 사용해 보았다.

Zustand 의 Persist란?

persist 미들웨어는 Zustand를 사용하여 스토어의 상태를 로컬 스토리지(localStorage) 또는 다른 저장소에 유지(persist)하기 위해 사용된다. 이 미들웨어는 Zustand 상태를 지정된 저장소에 저장하고, 애플리케이션 초기화 시 저장된 상태를 복원한다.

persist의 사용 방식

persist는 두 가지 주요 매개변수를 받는다:

config: Zustand 상태와 상태 변경 함수들을 정의한 StateCreator.
- 예: setAuthData, setAuthToken, clearAuth와 같은 상태 변경 함수들이 포함된 콜백 함수.
options: 상태를 저장하고 복원하기 위한 설정 옵션.
- 저장소 이름, 스토리지 메커니즘(localStorage 등), 직렬화/역직렬화 방법 등을 지정.

persist를 사용한 코드 예시

import { StateCreator } from "zustand";
import { PersistOptions, createJSONStorage, persist } from "zustand/middleware";
import { createWithEqualityFn } from "zustand/traditional";
import { useShallow } from "../hooks/useShallow";

// AuthStoreType 정의
type AuthStoreType = {  
  loginId?: string; // 로그인 ID
  accessToken?: string; // 액세스 토큰
  refreshToken?: string; // 리프레시 토큰
  remember?: boolean; // 로그인 기억 여부

  // 상태 변경 함수들
  setAuthData: (data: Partial<AuthStoreType>) => void; // JSON 데이터로 상태 설정
  setAuthToken: (accessToken: string, refreshToken: string) => void;
  clearAuth: () => void; // 상태 초기화
  ...
};

// persist 미들웨어 타입 정의
type PersistAuthStoreType = (
  config: StateCreator<AuthStoreType>,
  options: PersistOptions<AuthStoreType>
) => StateCreator<AuthStoreType>;

// Zustand 스토어 생성
export const store = createWithEqualityFn<AuthStoreType>(
  (persist as PersistAuthStoreType)(
    (set) => ({
      // 상태 변경 함수들 구현
      setAuthData: (data) => set((state) => ({ ...state, ...data })),
      setAuthToken: (accessToken, refreshToken) =>
        set({ accessToken, refreshToken }),      
      clearAuth:() => set({ accessToken: undefined })       
    }),
    {
      name: "admin-auth", // 로컬 스토리지 키 이름
      storage: createJSONStorage(() => localStorage), // 로컬 스토리지에 상태 저장
    }
  )
);

config와 options 값

1. config

config는 StateCreator 타입이며, 위의 코드에서 Zustand 상태 정의와 상태 변경 함수들을 포함한다.
위 코드에서 config는 (set) => ({ ... })로 작성된 콜백 함수 이다.

 (set) => ({
      // 상태 변경 함수들 구현
      setAuthData: (data) => set((state) => ({ ...state, ...data })),
      setAuthToken: (accessToken, refreshToken) =>
        set({ accessToken, refreshToken }),      
      clearAuth:() => set({ accessToken: undefined })       
    })

2. options

options는 PersistOptions<AuthStoreType> 타입이며, 상태를 저장/복원하기 위한 설정이다.
코드에서 options는 다음과 같이 정의되었다.

{
  name: "admin-auth", // 로컬 스토리지에 저장될 키 이름
  storage: createJSONStorage(() => localStorage), // 저장소를 localStorage로 설정
}

options 세부 설명

name
- 로컬 스토리지에 저장되는 키 이름을 지정한다.
- 여기서는 "admin-auth"로 설정되어, 로컬 스토리지에 이 키로 상태가 저장됩니다.
storage
- 상태를 저장할 스토리지 메커니즘을 정의한다.
- createJSONStorage(() => localStorage)를 사용하여 **localStorage**를 스토리지로 사용하였다.
- localStorage 외에도 sessionStorage, IndexedDB, 커스텀 스토리지를 사용할 수 있다.
serialize와 deserialize (옵션에는 없지만, 기본값으로 처리됨)
- persist 미들웨어는 상태를 JSON 형태로 저장하므로, 기본적으로 JSON의 stringify와 parse를 사용해 직렬화/역직렬화를 수행한다.

동작 방식

애플리케이션 시작 시:
- admin-auth라는 키로 로컬 스토리지에서 저장된 값을 가져온다.
- 만약 저장된 값이 있으면, Zustand 스토어 상태를 복원한다.
상태 변경 시:
- set 함수가 호출되면, 상태가 변경되고 해당 상태는 로컬 스토리지에 직렬화되어 저장된다.

실제 동작 예시

1. setAuthToken을 호출하여 상태를 업데이트한다.

store.getState().setAuthToken("newAccessToken", "newRefreshToken");

이렇게 상태가 변경된 후, 로컬 스토리지에 다음 데이터들이 저장된다.

{
  "accessToken": "newAccessToken",
  "refreshToken": "newRefreshToken",
  ...
}

2. 애플리케이션 재시작 시 admin-auth키를 읽고, 저장된 상태를 스토어에 복원한다.

정리

config: 상태와 상태 변경 함수들을 정의하는 콜백 함수.
options: 저장소 이름(name)과 스토리지(storage) 설정을 포함한 옵션 객체.
persist의 역할: 상태를 로컬 스토리지 또는 지정된 스토리지에 저장하고, 초기화 시 복원하여 데이터 유실을 방지.

[React] 값이 없는 상태를 어떻게 관리해야 할까? undefined와 null

찰리-누나 — Wed, 27 Nov 2024 06:14:11 +0900

개발을 하다 보면, 필연적으로 '값이 없는 상태' 를 관리해야 하는 경우가 생긴다.

이 때, undefined를 쓰는 게 좋을까, null을 쓰는 게 좋을까?

먼저, undefined와 null에 대해 알아보자.

undefined와 null의 차이

undefined
- 변수가 선언되었지만 초기화되지 않은 상태.
- 값이 아예 없음을 나타냄.
- 타입스크립트에서 Optional 속성(?)의 기본 상태.
null
- 의도적으로 "값이 없음"을 명시.
- 값이 존재하지 않음을 프로그래머가 명시적으로 설정한 상태.

아하, 그러니까 undefined는 '변수가 선언되기만 한 상태' 이고, null은 '값이 없다는 것을 넣어준 상태' 이다.

즉 undefined는 '데이터의 상태를 초기화하지 않은 상태(어떠한 값도 넣지 않은 채)로 남겨두는 경우이며,

null은 '이 변수에 아직 적절한 값을 할당하지 않았습니다' 를 "명시적" 으로 넣어둔 상태라고 할 수 있겠다.

이제 어떤 상태에서 undefined를 사용할지 , 또 어떤 상태에서 null을 사용할지만 결정하면 된다.

로그인 api를 불러와서, 로그인 한 유저의 데이터를 변수에 넣어준다고 가정해보자.

다음과 같은 변수와 데이터들이 존재할 것이다.

accessToken
refreshToken
userName
phoneNumber

이 중, 'phoneNumber'은 '본인인증을 한 유저에게만 존재하는 값' 이라고 가정해보자.

그럼, 'phoneNumber' 은 '로그인을 한 유저에게 존재하는 변수이되, 값이 없을 수도, 있을 수도 있는 변수' 가 된다. 그러니까, null이거나 string이 들어있는 둘 중 하나의 상태인 것.

의도와 컨텍스트에 따라 undefined과 null 중 사용 여부를 나누어 보자면, 다음과 같이 정리할 수 있다.

컨텍스트에 따른 선택

1. undefined를 사용할 때

데이터의 상태를 초기화하지 않은 상태로 남겨두는 경우.
타입스크립트의 Partial 또는 선택적 속성(?)과 자연스럽게 호환된다.
대부분의 상황에서 "아직 값을 모르는 상태"를 나타낼 때 적합.

type User = {
  accessToken?: string; // 값이 없을 때 undefined
};

2. null을 사용할 때

값이 없다는 것을 명시적으로 나타내야 하는 경우.
데이터베이스나 API와 통신할 때, null이 사용될 가능성이 있는 경우.
"값이 없음"을 구체적으로 구분하고 싶을 때 적합.

type User = {
  phoneNumber: string | null; // 값이 없음을 명시적으로 표현
};

즉, 이해하기 편하게 정리하자면 다음과 같다.

undefined로 초기화할 속성
- ID, 이름, 토큰 등 상태 초기화 시 값을 모르는 것이 자연스러운 속성.
- 대부분의 속성(uuid, userNo 등)에 대해 값이 초기화되지 않았음을 나타낼 때.
- 명시적으로 "알 수 없는 상태"를 표현하고 기본값으로 유지.
null로 초기화할 속성
- 연락처처럼 데이터베이스나 API에서 값이 없음을 명시적으로 나타내야 하는 속성.
- 즉, 특정 속성(attlistMbtlNo, mbtlNo)이 API 설계나 도메인 모델에서 값이 없음을 명시적으로 표현할 때

즉, '아직 로그인이 되지 않아 값이 없는 것들' 은 undefined로 두되, phoneNumber처럼 '로그인 한 유저의 데이터 베이스에 null이 들어있을 수도 있는 값' 은 NULL로 설정하면 코드를 읽는 것만으로 값의 null 여부를 알 수 있어 편리하다.

[React] Zustand를 이용하여 useModal 훅 만들기

찰리-누나 — Wed, 27 Nov 2024 04:24:45 +0900

외주 프로젝트 중 여러 알림을 쌓으면서 관리해야 하는 Alert, 한 번에 하나만 띄워져야 하는 Modal을 useModal이라는 하나의 훅을 이용해 관리하기 위해 작성해 보았다.

코드의 흐름 설명

모달 상태 관리(useModalStore)
- useModalStore는 Zustand를 사용해 모달의 상태를 관리하며, stack 옵션에 따라 모달의 관리 방식을 조정합니다.
- modals: 현재 열려 있는 모달의 배열입니다.
- open: 특정 컴포넌트를 모달로 열고, 관련 데이터를 상태에 추가합니다.
  - stack: true: modals 배열에 새로운 모달을 추가합니다.
  - stack: false: 기존 모달이 없을 때만 추가. 기존 모달이 있다면 **"모달을 추가할 수 없습니다"**라는 메시지를 console에 출력합니다.
- close: 특정 key를 가진 모달을 닫습니다.
- clear: 모든 모달을 닫습니다.
useModal 훅
- useModal은 openModal 와 closeModal 메서드를 제공하여 모달을 열고 닫는 기능을 제공합니다.
- openModal은 새로운 모달을 열기 위해 사용됩니다. 모달에 전달할 컴포넌트(Component)와 프로퍼티(props)를 받습니다. stack: false로 설정된 경우, 이미 모달이 존재하면 새 모달을 추가하지 않습니다.
- closeModal은 특정 key를 사용해 모달을 닫습니다. 상태에서 key를 가진 모달을 제거합니다.
ModalContainer 컴포넌트
- ModalContainer는 Zustand의 modals 상태를 기반으로 실제 모달을 화면에 렌더링합니다.
- Zustand의 useModalStore에서 modals 배열과 close 메서드를 가져옵니다.
- useEffect로 모달을 렌더링할 DOM 요소(portal)를 초기화합니다.
- modals 배열을 순회하며, 각 모달의 Component를 createPortal을 이용해 portal에 렌더링합니다.
- 모달 닫기와 확인 버튼 처리를 위해 각각 handleClose와 handleSubmit을 정의합니다.
  - handleClose: onClose 실행 후 모달 닫기.
  - handleSubmit: onSubmit 실행 후 모달 닫기.

1. 먼저, modalStore를 작성합니다.

modalStore는 모달이 가진 공통 속성들과 현재 화면에 띄워진 모달 전체를 관리하는 데에 사용됩니다. 사용자 요구 사항은 다음과 같습니다.

쌓을 수 있는 모달의 경우, 이미 띄워진 모달이 있으면 그 위에 새로운 모달을 띄운다. 새로운 모달을 닫으면, 기존의 모달이 보여야 한다.
쌓을 수 없는 모달(ex:alert)의 경우, 이미 띄워진 모달이 있으면 그 모달을 닫을 때까지 새로운 모달을 띄울 수 없다. 또한, 배경이 오퍼시티가 적용된 반투명한 검은색으로 깔려 모달(alert) 이외의 영역을 클릭할 수 없어야 한다. 반드시 한 번에 하나의 모달만 띄울 수 있다.

이에 따라 모달 컴포넌트와 모달 스토어를 정리해보면, 다음과 같습니다.

모달 컴포넌트는 다음과 같은 필수 props를 필요로 합니다.

key : 모달의 고유 키
Component : 렌더링 될 모달 컴포넌트
props : 렌더링 될 모달 컴포넌트에 전송될, 기타 props

모달의 상태를 관리하는 스토어는 다음과 같은 필수 props를 필요로 합니다.

onClose // 모달을 닫는 함수
onSubmit // 모달 내에 확인 등 close 이외의 버튼이 존재할 경우를 대비한 콜백 함수
modalId // 모달 고유 식별자
[property:string] : any // ...rest를 받아오기 위한 타입

모달 스토어의 역할은 다음과 같습니다.

사용자의 요구사항에 맞추어 '모달을 여러개 쌓을 수 있느냐, 하나만 쌓을 수 있느냐' 를 판별하기 위해 stack이라는 변수를 사용합니다.
- stack이 true일 경우, 모달을 리스트 형태로 저장하여 여러 모달을 쌓을 수 있게 합니다.
- stack이 false일 경우, 리스트에 단 하나의 모달만 들어갈 수 있게 합니다.
사용자가 모달을 열 수 있게 하기 위하여, 리스트에 모달을 저장하는 함수를 제공합니다.
- stack이 false일 경우, 리스트 내에 이미 모달이 존재할 시 에러 콘솔을 출력합니다.
- stack이 false이면서 리스트 내에 할당된 모달이 없으면, 리스트에 모달을 하나 넣습니다.
사용자가 모달을 닫을 수 있게 하기 위하여, 리스트에서 모달을 제거하는 함수를 제공합니다.
- 주어진 식별자 modalId와 같은 아이템을 찾아 리스트에서 제거합니다.
모든 모달을 닫기 위하여, 모달 리스트를 공배열로 초기화하는 함수를 제공합니다.

import { ComponentType } from "react"; // React에서 제공하는 타입, 컴포넌트 타입 정의에 사용
import { create } from "zustand"; // Zustand 라이브러리에서 `create` 함수 가져오기

// 모달 컴포넌트에 전달할 프로퍼티 타입 정의
export type ModalPropsType = {
  onClose?: () => void; // 모달 닫기 콜백 함수 (선택적)
  onSubmit?: (event?: any) => void; // 모달 확인 버튼 클릭 콜백 함수 (선택적)
  modalId?: string; // 모달 고유 식별자 (내부에서 관리)
  [property: string]: any; // 추가적인 속성을 허용
};

// 모달의 데이터 타입 정의
type ModalType = {
  key: string; // 모달의 고유 키 (중복 방지)
  props: ModalPropsType; // 모달에 전달되는 프로퍼티
  Component: ComponentType<ModalPropsType>; // 렌더링될 React 컴포넌트
};

// 모달 스토어의 상태와 메서드 타입 정의
type ModalStoreType = {
  modals: ModalType[]; // 현재 열려 있는 모달들의 배열
  open: (Component: ComponentType<any>, props: ModalPropsType) => void; // 모달 열기 메서드
  close: (key: string) => void; // 특정 모달 닫기 메서드
  clear: () => void; // 모든 모달 닫기 메서드
};

// Zustand를 사용하여 모달 스토어 생성
export const useModalStore = create<ModalStoreType>((set, get) => ({
  modals: [], // 초기 상태: 모달 리스트는 빈 배열
  open: (Component: ComponentType<any>, props: ModalPropsType) => {
    const { modals } = get(); // 현재 열려 있는 모달 리스트 가져오기
    const modal = props.key ? modals.find((m) => m.key === props.key) : null;
    // key가 제공되었을 경우, 동일한 key를 가진 모달이 이미 열려 있는지 확인
    const key = props.key || Date.now().toString(); // key가 없으면 현재 시간을 문자열로 사용
    props.modalId = key; // 모달 ID를 props에 저장

    // stack: false인 경우
    if (props.stack === false) {
      if (modals.length > 0) {
        console.error(
          "새로운 모달을 열 수 없습니다. 기존 모달이 닫혀야 합니다."
        );
        return;
      }
      set({ modals: [{ Component, props, key }] }); // 기존 모달을 덮어씀
      return;
    }
    // stack: true 경우
    if (!modal) {
      set({ modals: [...modals, { Component, props, key }] });
    }
  },
  close: (key: string) => {
    const { modals } = get(); // 현재 열려 있는 모달 리스트 가져오기
    set({ modals: modals.filter((m) => m.key !== key) });
    // 주어진 key와 일치하지 않는 모달들만 남김 (특정 모달 닫기)
  },
  clear: () => {
    set({ modals: [] }); // 모든 모달을 닫음 (리스트 초기화)
  },
}));

// 모달 열기 함수만 선택적으로 사용하는 훅
export const useModalStoreOpen = () => useModalStore((state) => state.open);

// 모달 닫기 함수만 선택적으로 사용하는 훅
export const useModalStoreClose = () => useModalStore((state) => state.close);

// 모든 모달 초기화 함수만 선택적으로 사용하는 훅
export const useModalStoreClear = () => useModalStore((state) => state.clear);

2. 모달 스토어를 활용한 useModal hook을 작성합니다.

사용자의 주 활동은 '모달 열기, 모달 닫기' 로 유추되므로 open과 close 함수를 제공해 주는것이 핵심입니다. 이 때, 'stack' 이라는 값이 주어지지 않으면 true로 할당되도록 하여 undefined 에러가 나는 것을 방지합니다.

import { ComponentType } from "react";
import {
  ModalPropsType,
  useModalStoreClose,
  useModalStoreOpen,
} from "../stores/modalStore";

export default function useModal() {
  const open = useModalStoreOpen();
  const close = useModalStoreClose();

  const openModal = <P extends ModalPropsType>(
    Component: ComponentType<P>,
    props?: P & { stack?: boolean }
  ) => {
    open(Component, { ...props, stack: props?.stack ?? true });
  };

  const closeModal = (key: string) => {
    close(key);
  };

  return { openModal, closeModal };
}

3. 실제로 모달을 화면에 렌더링하는 ModalContainer를 작성하고, index.html에 모달이 렌더링 될 자리를 만듭니다.

모든 modal은 ModalContainer를 통해 렌더링됩니다. createPortal를 통해 div의 id가 modal인 곳을 타겟으로 모달을 렌더링 할 것이므로, index.html에 <div id="modal"></div>를 추가합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>crmSoft</title>
  </head>
  <body>
    <body>
      <div id="root"></div>
      <div id="modal"></div>
      <script type="module" src="/src/main.tsx"></script>
    </body>
  </body>
</html>

ModalContainer를 작성합니다. createPortal를 통해 컴포넌트와 컴포넌트가 생성될 위치를 설정하면, 해당 위치에 지정한 컴포넌트를 마운트 할 수 있습니다. 이 때, ModalContainer이 마운트 되고 난 뒤 모달이 생성될 portal DOM을 할당하기 위하여 useEffect를 사용하였습니다.

또한 현재 모달의 stack여부를 판단하여 사용자가 요구한 아래 사항을 충족시키기 위해 isStackFalse 변수를 만들었습니다.

* 쌓을 수 없는 모달(ex:alert)의 경우, 이미 띄워진 모달이 있으면 그 모달을 닫을 때까지 새로운 모달을 띄울 수 없다. 또한, 배경이 오퍼시티가 적용된 반투명한 검은색으로 깔려 모달(alert) 이외의 영역을 클릭할 수 없어야 한다. 반드시 한 번에 하나의 모달만 띄울 수 있다.

modals.length === 1: 현재 modals 배열에 모달이 정확히 1개 존재하는지 확인합니다.

modals[0].props.stack === false: 그 첫 번째 모달(modals[0])의 props에서 stack 값이 false인지를 확인합니다.

이 두 조건이 모두 참일 경우, isStackFalse는 true가 되고, 그렇지 않으면 false가 됩니다.

따라서 isStackFalse는 "현재 열려 있는 모달이 하나이고, 그 모달이 stack: false로 설정된 경우" 를 확인하는 조건입니다

이 조건을 통해 stack: false로 설정된 모달이 하나만 열려 있을 때, 새로운 모달을 열지 않도록 제어하는 용도로 사용됩니다.

isStackFalse이 참일 때, '모달의 배경에 반투명한 검은색의 클릭할 수 없는 영역' 을 설정하기 위하여 tailwind를 사용한 div를 사용해 주었습니다.

import { ModalPropsType, useModalStore } from "../../stores/modalStore";
import { Nullable } from "../../types";
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";

export default function ModalContainer() {
  // 현재 모달 리스트 및 모달 닫기 메서드
  const { modals, close } = useModalStore();

  // 모달을 렌더링할 DOM 요소
  const [portal, setPortal] = useState<Nullable<Element>>(null);

  // 컴포넌트가 마운트되었을 때 모달을 렌더링할 DOM 요소를 설정
  useEffect(() => {
    setPortal(document.getElementById("modal"));
  }, []);

  const isStackFalse = modals.length === 1 && modals[0].props.stack === false;

  return (
    portal &&
    createPortal(
      <>
        {isStackFalse && (
          <div className="fixed inset-0 bg-black bg-opacity-50 z-50 pointer-events-auto" />
        )}
        {/* 외부 클릭 차단 */}
        {modals.map((m) => {
          const { Component, props, key } = m;
          const {
            onSubmit = () => {},
            onClose = () => {},
            ...restProps
          } = props;

          const handleClose = async () => {
            await onClose?.();
            close(key);
          };

          const handleSubmit = async (_props?: ModalPropsType) => {
            await onSubmit?.(_props);
            close(key);
          };

          return (
            <Component
              key={key}
              modalId={props.modalId}
              onSubmit={handleSubmit}
              onClose={handleClose}
              {...restProps}
            />
          );
        })}
      </>,
      portal
    )
  );
}

4. App에 작성한 ModalContainer 컴포넌트를 넣습니다.

function App() {
  return (
    <ThemeProvider>
      <RouterProvider router={router} />
      <ModalContainer />
    </ThemeProvider>
  );
}

useModal 사용 예시

stack을 true로 주면 여러개 쌓을 수 있는 모달을, false로 주면 단 하나의 모달만 띄우도록 설정할 수 있습니다.

이를 통해, 쌓이는 모달과 하나만 가능한 커스텀 Alert를 이용할 수 있게 되었습니다.

// BasicAlert은 직접 만든 컴포넌트

const AlertComponent = ({
  onClose,
  onSubmit,
  modalId,
}: {
  onClose: () => void;
  onSubmit: () => void;
  modalId: string;
}) => {
  return (
    <BasicAlert>
      <BasicAlert.Title>{modalId}</BasicAlert.Title>
      <BasicAlert.ButtonZone>
        <BasicButton onClick={onClose} variant="outlined">
          취소
        </BasicButton>
        <BasicButton onClick={onSubmit} variant="contained">
          확인
        </BasicButton>
      </BasicAlert.ButtonZone>
    </BasicAlert>
  );
};


export default function App() {

  const { openModal, closeModal } = useModal();

  const handleOpenStackedModal = () => {
    openModal(AlertComponent, {
      modalId: "alert1",
      stack: false, // 단일 모달 모드, 쌓기 식으로 하려면 true
      onClose: () => console.log("모달 닫힘"),
      onSubmit: () => console.log("확인"),
    });
  };
  
  return(
  	<div>
    	<button onClick={handleOpenStackedModal}
    </div>
  );
  }

여러개 쌓을 수 있는 경우 (stack:true)

하나만 사용 가능한 경우 (stack:false)

[JAVA] 삼성 SW 1945. 간단한 소인수분해

찰리-누나 — Fri, 17 May 2024 14:24:05 +0900

BufferedReader bf = new BufferedReader(new InputStreamReader(System.in));
		StringTokenizer st = new StringTokenizer(bf.readLine(), "\n");
		int N = Integer.parseInt(st.nextToken());
		List<Integer> list = new ArrayList<>();
		
		// 소인수분해
		
		for (int i=2; i<=N; i++) {
			while(N%i==0) {
				list.add(i);
				N = N/i;
			}
		}
		
		
		// list에서 특정 글자의 개수를 세려면?
		long a = list.stream().filter(n->n==2).count();
		long b = list.stream().filter(n->n==3).count();
		long c = list.stream().filter(n->n==5).count();
		long d = list.stream().filter(n->n==7).count();
		long e = list.stream().filter(n->n==11).count();
		

		System.out.print(a + " " + b + " " + c + " " + d + " " + e);
		
	}