본문 바로가기

분류 전체보기29

[React] TanStack-Query(React-Query) 가이드(w.useQuery, useMutation, QueryClient) 저번에 react-query 개념적인 부분에 대해서 포스팅해보았다.react-query에 대해서 좀 더 공부해보니 TanStack-Query 라는 이름으로 변경되었더라.이제 react 뿐만 아니라 vue나 angular에서도 쓸 수 있도록 업데이트를 한 것 같다. 그래서 이름을 TanStack-Query 으로 변경한 이유.아무튼 tanstack-query 라이브러리에 대해 좀 더 디테일하게 알아보자!🎯 개요Tanstack Query(React-query)은 React 애플리케이션에서 서버 상태(Server State) 관리를 쉽게 해주는 라이브러리이다.주요 기능 : 데이터 패칭(Fetching), 캐싱(Caching), 동기화(Synchronization), 업데이트 및 에러 처리를 선언적이고 효율적으.. 2025. 11. 10.
[React] react-hook-form 을 활용해 쉽고 편하게 폼(form) 관리하기 React로 애플리케이션을 개발할 때 등록/수정 기능을 구현하기 위해 폼(Form)이 안쓰는 곳이 없다.폼은 단순히 데이터를 입력받는 것을 넘어, 아래와 같은 요구사항을 동반한다. 입력값에 따른 실시간 유효성 검사(ex. “이메일 형식이 아닙니다.”)폼 제출(submit) 시 전체 데이터 유효성 검사유효성 검사 실패 시 에러 메시지 표시폼 제출 중 로딩 상태 관리폼 초기화 또는 특정 값 동적 변경이를 보통 useState 와 onChange 이벤트 핸들러로 해결하려 한다. 하지만, 두 이벤트 핸들러로 해결 시 코드량도 많아질 뿐더라 관리가 힘들다. 이를 쉽게 하기 위해 react-hook-form 라이브러리를 활용해 해결해 볼려고 한다. 1. React 폼의 기본, ‘제어 컴포넌트’ (Controll.. 2025. 10. 30.
[React] 리액트 쿼리에 대해서 리액트 쿼리에 대해서 알아보려고 한다. 서치를 해보니 엄청엄청 편하고 좋은 라이브러리인 것 같다. 이에 대해서 정리해보자. 리액트 쿼리란?지금 TanStack Query로 이름이 바뀌었으며, 리액트 애플리케이션에서 서버 상태를 효율적으로 관리할 수 있게 도와주는 라이브러리이다.쉅게 말해, 서버에서 데이터를 가져오고(fetching), 캐싱하고, 동기화하며, 업데이트하는 복잡한 작업을 훨씬 간단하고 선언적으로처리하도록 돕는 도구.리액트 쿼리를 사용하는 이유?Redux나 Recoil 같은 다른 상태 관리 라이브러리들이 주로 클라이언트 상태 관리를 위해 설계된 반면,리액트 쿼리는 서버 상태 관리에 특화되어 있다.서버 상태와 클라이언트 상태의 차이Redux나 Recoil이 다루는 상태는 주로 클라이언트 상태이다.. 2025. 10. 20.
[React] react (vite)project 기본적인 개발 구조 설계 Vite로 새 프로젝트를 생성하면 기본적인 폴더 구조가 제공된다. 실제 개발을 위해서는 페이지와 기능을 효율적으로 관리할 수 있도록 기초적인 뼈대를 만드는 작업이 필요하다.기본 폴더public : 빌드 과정에서 특별한 처리 없이 그대로 유지되는 정적 파일이 위치하는 곳이다. 주로 파비콘(favicon)이나 robots.txt 파일 등이 여기에 해당된다.assets : 컴포넌트 내부에서 직접 불러와 사용하는 이미지, 폰트 등 정적 파일을 모아두는 곳이다. 이곳의 파일들은 빌드 시 최적화 과정을 거치는 것이다. 개발 편의성을 위한 폴더 구조 설계src 폴더 내부에 다음과 같은 폴더들을 추가하여 구조를 설계하면 코드 관리가 용이해진다.components 버튼, 인풋 창, 모달처럼 여러 페이지에서 재사용될 UI.. 2025. 9. 11.
[React] vite project 생성 및 구조 가이드 현재 SI 프로젝트 대비 react 공부를 계속계속 하고 있다. 그리고 곧 신입들이 들어온다는 얘기를 들었다. 그래서 그 친구들을 위해 그리고 나를 위해 react 관련 정보들을 정리해둘려고 한다. vite(비트) 프로젝트 기반에서 리액트 애플리케이션을 만들거라 vite에 대해서부터 알아보자. Vite(비트)프론트엔드 빌드 도구빠른 개발 서버미리 번들링 없이 모듈을 바로 로드하여 서버를 즉시 시작함.번들링 : 여러 코드와 프로그램을 묶어 사용자에게 웹 애플리케이션을 제공하는 과정. 최종적으로 번들링된 파일을 브라우저에서 실행하여 웹 애플리케이션을 실행개발 중 번들링 없이 모듈을 직접 로드빠른 빌드 속도환경 변수 지원.env 파일을 통해 환경 변수를 쉽게 관리할 수 있음간단히 말해 vite는 리액트의 빌.. 2025. 9. 10.
[Spring] Spring security Bcrypt에 대해서 현재 사내 인트라넷 API를 계속 개발하고 있다.직원정보 등록 API를 작성하고 있다.직원정보를 등록할 때 인트라넷에 로그인할 때 쓰이는 비밀번호(PW)값 또한 저장을 한다.이 비밀번호를 DB에 저장할 때 ‘보안’ 처리 후 저장을 할려고 한다. 그러면 두 가지 방식을 고려할 수 있다.암호화와 해싱 방식이 있다. 우선 이 두 가지에 대해서 알아보자.암호화(Encryption) vs 해싱(Hashing)암호화 (Encryption)암호화는 양방향 프로세스이다. 특정 키(Key)를 사용해 원본 데이터를 아무나 읽을 수 없는 암호문으로 바꾼다. 그리고 나중에 동일한 또는 다른 키를 사용해 다시 원본 데이터로 되돌리는 **‘복호화’**가 가능하다.해싱 (Hashing)해싱은 단방향 프로세스이다. 원본 데이터를 고.. 2025. 8. 11.
[Spring][MyBatis] resultMap과 collection을 활용해 1:N관계 데이터 한 번에 가져오기 현재 사내 프로젝트에서 게시물 API를 구현하고 있다.게시물을 등록할 때, 여러 개의 첨부파일을 등록할 수 있도록 했다. 이처럼, 그 게시물의 상세정보를 불러올 때 1:N 관계의 데이터를 어떻게 하면 효율적으로 가져올 수 있을지 고민이었다. 찾아보니 이러한 1:N 관계의 데이터를 마이바티스에서 제공하는 과 을 활용하면한 번의 쿼리로 1:N 관계의 데이터를 객체 형태로 가져올 수 있었다. 우선 게시물과 첨부파일 테이블 구조를 알아보자. 게시물 정보 테이블 (BBS_INFO) 컬럼명 (Field)데이터 타입 (Type)제약 사항yEN">설명 (Comment)SQint(11)PK, auto_incrementyEN">시퀀스BBS_TYPEchar(1)default ‘N’yEN">게시글타입 (N,F)TITL.. 2025. 7. 18.
[Spring] ExceptionHandler를 활용한 자동 예외 처리 (w.RestControllerAdivce) 사내 인트라넷 API 개발을 계속해서 하고 있다. API를 작성하면서 INSERT나 UPDATE API 작성 시 반복되어 작성하는 Exception 처리가 있다. 등록 API // 게시물 등록@Overridepublic ResDTO insBbsInfo(BbsDTO bbsDTO) throws Exception { ResDTO res = new ResDTO(); try { configDao.insBbsInfo(bbsDTO); //TODO: 첨부파일 업로드 로직 // 첨부파일이 있는 경우, 첨부파일 정보(파일명, 파일path)를 저장하기 위해 게시글 SQ select. log.info("게시물 ID : " + bbsDTO.get_seq()); .. 2025. 7. 15.
[Spring][MyBatis] PageHelper로 페이징 처리하기 현재 사내 인트라넷 리뉴얼 작업을 하고 있다. 프로젝트 기술 스택으로 백엔드에 Spring Boot + Gradle + MyBatis, 그리고 프론트엔드는 회사 처음으로 React를 도입하여개발하고 있다. 개발 중 공지사항이안 자료실 목록에 필수적인 페이지네이션 기능 구현이 필요했다. 기존에 LIMIT와 OFFSET에 직접 페이지 번호(page)와 사이즈(size)를 파라미터로 넘겨 처리했지만,서칭을 해보니 Mybatis에서 PageHelper 플러그인을 알게 되어서 포스팅 해본다. 그래서 PageHelper가 무엇이고, 어떻게 동작하며, 그리고 Spring Boot 프로젝트에 어떻게 적용하는지 알아보자. PageHelper란 무엇이고 어떻게 동작할까? PgaeHelper는 MyBatis의 강력한 페.. 2025. 7. 11.

티스토리툴바