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

자동 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)를 눌러 설정 창을 연다...

• format_list_bulleted REACT/React-개념정리
• · 2025. 1. 13.
• textsms

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

강의는 Azure를 이용한 MySQL 호스팅을 사용할 것으로 되어 있지만, 무료 데이터베이스 툴인 Maria가 Spring과 함께 많이 사용되고 있는데다 MySQL은 이미 전 회사에서도(ㅎㅎ) 지겹게 경험한 적이 있어 Maria로 실습하기 위해 과정을 남겨 보았다.  ! 시작하기 전에, lombok을 사용하면 마지막에 Getter와 Setter를 자동으로 만들게 해 주는 어노테이션을 사용할 수 있어 편하니 설치를 권장한다.IntelliJ를 사용할 경우, Setting -> Plugins에서 lombok을 검색하면 Install 할 수 있다.  그리고 이 롬복을 정상적으로 사용하기 위하여 annotation processors라는 메뉴에서 Enable annotation processing 항목을 체크해준..

• format_list_bulleted Java/SpringBoot
• · 2025. 1. 5.
• textsms

[SpringBoot] SpringBoot 프로젝트 구조

스프링 부트로 만든 프로젝트의 기본 디렉토리 구조와, 각 파일의 역할을 알아보자 .아래와 같은 아주 기본적인 프로젝트를 생성했다.  1. src/main/javaJava 코드가 위치하는 디렉토리로, 아래와 같은 서브 패키지 구조로 구성된다. 지금은 간단하게 작성하여 나뉘어져있지 않지만, 실제 프로젝트에서 사용되는 구조에는 다음과 같은 것들이 있다.controller/: REST API 또는 MVC 컨트롤러 클래스.service/: 비즈니스 로직을 처리하는 서비스 계층.repository/: 데이터베이스와의 상호작용을 처리하는 인터페이스(JpaRepository, CrudRepository).domain/ (또는 model/): 데이터베이스 엔티티 클래스 및 DTO, VO 등이 위치.ProjectAppli..

• format_list_bulleted Java/SpringBoot
• · 2024. 12. 30.
• textsms

[SpringBoot] Spring Boot Devtools - auto represh

스프링으로 개발을 할 때, 프로그램을 수정하면 서버 빌드도 다시 해야 하는 것이 불편하여 Spring Boot Devtools를 이용해 보았다.Spring Boot Devtools를 설치하면 서버를 재시작하지 않아도 클래스를 변경할 때 서버가 자동으로 재가동된다.   Spring Boot Devtools를 사용하려면 Spring Boot Devtools를 그래들(Gradle)로 설치해야 한다.  Gradle은 Java 생태계에서 빌드와 관리를 담당하는 핵심 도구로, React 생태계에서 사용하는 Vite 또는 Webpack과 유사한 역할을 한다. Gradle이 React의 Vite나 Webpack과 정확히 동일하지는 않지만, "개발을 돕는 빌드 및 구성 도구"라는 공통점을 가지고 있다.다만, Gradle..

• format_list_bulleted Java/SpringBoot
• · 2024. 12. 29.
• textsms

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

외주 프로젝트를 하는 중에 다음과 같은 문제가 발생했다. 사용자의 행동에 따라, ZuStand의 persist를 사용하여 localstorage에 저장된 값이 변화한다. 이 변화한 값을 페이지 이동 시 즉시 화면에 보여줘야 한다. 그러나 persist를 이용한 ZuStand는 예상과는 다르게 동작했다.  애플리케이션이 처음 실행될 때, persist 미들웨어는 지정된 스토리지에서 데이터를 읽어와 Zustand 스토어를 "rehydrate"합니다. 즉, 저장된 상태를 다시 불러와 초기 상태로 설정합니다.  persist를 이용해 만들어진 최초의 상태, 즉 아무 값이 저장되지 않은 상태가 zuStand에 저장된 상태라 localStorage에서 변화한 값이 useState를 쓸 때 처럼, 화면의 리렌더링이 ..

• format_list_bulleted 프로젝트/React 프론트 프로젝트
• · 2024. 12. 10.
• textsms

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

프로젝트로 react-query 의 v5버전을 쓰게 되었다.근데 공식 번역이 없음 영어 문서인 채로 읽는 것이 가장 좋지만... 빠른 이해를 위해 한번 번역해 기록해 두기로 https://tanstack.com/query/v5/docs/framework/react/reference/useQuery useQuery | TanStack Query React Docstsx const { data, dataUpdatedAt, error, errorUpdatedAt, failureCount, failureReason, fetchStatus, isError, isFetched, isFetchedAfterMount, isFetching, isInitialLoading, isLoading, isLoadingError,..

• format_list_bulleted REACT/React-개념정리
• · 2024. 12. 4.
• textsms