전체 글

JDBC Select문만 실행하는 방법

ORACLE, POSTGRESQL, TIBERO, MYSQL DB 테스트 완료되었으며 총 4가지의 방법이 있다.executeQuery() + Connection Rollback + 정규식 검사 ✅Explain 실행 후 Select 확인executeQuery(Select) / executeUpdate(CRUD)Connection setReadOnly Option True💡 선행 executeQuery는 Select 조회 지원을 우선적으로 하고 리턴 값은 ResultSet 이고 executeUpdate는 CRUD를 우선적으로 지원하고 리턴 값은 int 입니다. (Oracle 제외)1. executeQuery() + Connection Rollback + 정규식 검사executeQuery로 CRUD 분기OR..

React Light/Dark Theme switch

테마 변경 - 데이터 속성 data-* 속성은 다른 조작을 하지 않고도, HTML 요소에 추가 정보를 저장할 수 있게 도와줍니다. 해당 속성은 아래와 같이 접근할 수 있습니다. //Javascript 접근 document.documentElement.setAttribute('data-theme', 'light'); document.documentElement.getAttribute('data-theme'); const body = document.querySelector("body"); body.dataset.theme; //만약 data-theme-switch "-"는 자동으로 camel-case 변환 body.dataset.themeSwitch; 스위치 변경 시 마다 document data-them..

React Typescript Interface Tuple Generic

💡 공식 문서에서 Tuple 타입은 Interface가 아닌 Type으로 선언하여 사용을 추천하지만 Interface로 사용하는 방법에 대한 궁금점을 해소하기 위해 작성한다. * Tuple 타입은 Type으로 선언하여 사용하길 바랍니다. Tuple을 Interface가 아닌 Type으로 선언해 사용하는 이유 인터페이스(Interface)는 객체 타입을 정의 혹은 상속, 확장하여 사용할 수 있어 사용을 추천하지만 타입(Type)처럼 원시 타입 및 튜플 타입을 정의할 수 없습니다. 하지만 아래의 사용법과 같은 방법으로 사용은 할 수 있습니다. Documentation - Advanced Types Advanced concepts around types in TypeScript www.typescriptlan..

React Labs React 19 - Memoization, useFormState

💡 2024년 2월 15일 React Labs에서 나온 React 19에 대한 게시글의 요약 및 정리를 제 주관적으로 작성하였습니다. 문제점 있을 시 지적해주시면 감사하겠습니다. React Labs: What We've Been Working On – February 2024 – React The library for web and native user interfaces react.dev Memo React의 수동 Memoization 제거되고 자동 Memoization 시행으로 코드 복잡성 및 추가 작업 불필요하게 되었습니다. (이미 작동되고 있는 Memoization 하위 호환성은 유지됨) React는 상태가 변경될 때 때때로 너무 많이 다시 렌더링할 수 있습니다. React 초기부터 이러한 경우에..

React RichTextEditor Image Upload - reactQuill

💡 RichTextEditor에서 이미지 사용 시 내부에 base64로 이미지가 올라가게 되는데 이는 너무 긴 문자열을 사용하기 때문에 이미지가 여러장 올라간다면 더 큰 문제를 야기할 것이다. 그러므로 이미지를 먼저 서버에 올리고 그 주소를 반환받아 이미지 태그로 사용하는 방식을 채택했다. react-quill The Quill rich-text editor as a React component.. Latest version: 2.0.0, last published: 2 years ago. Start using react-quill in your project by running `npm i react-quill`. There are 806 other projects in the npm registry ..

React TypeScript useInfiniteQuery Infinite Scroll

ReactQuery TanStack useInfiniteQuery fetchNextPage 다음 페이지 호출 fetchPreviousPage 이전 페이지 호출 hasNextPage 다음 페이지 존재 여부 hasPreviousPage 이전 페이지 존재 여부 isFetchingNextPage 다음 페이지 불러오는중 인지 isFetchingPreviousPage 이전 페이지 불러오는중 인지 queryKey 쿼리 고유 식별자(캐시, 상태관리) queryFn 데이터 가져오는 함수로 페이지 파라미터를 인자 받음 initialPageParam 초기 페이지 파라미터 설정 …options 추가적인 옵션 전달 getNextPageParam 다음 페이지 이동 시 페이지 파라미터를 반환 getPreviousPageParam ..

React TypeScript Zustand Infinite Scroll with IntersectionObserver

💡 기존 식상한 페이지 처리를 유튜브 댓글과 비슷하게 무한 스크롤로 구현하였고 이는 오직 Zustand 와 IntersectionObserver를 사용하였습니다. Zustand Setting 댓글 리스트를 관리할 개체들과 요청에 대한 플래그들을 선언했습니다. 이미 댓글을 불러오는 중 혹은 다음에 불러올 댓글 리스트가 없다면 요청을 멈춰야 합니다. 또한 전역으로 상태를 관리하기 때문에 페이지가 옮겨졌을 때 댓글 리스트를 비워야 함으로 다음과 같은 Store가 만들어집니다. import { create } from 'zustand'; import { APICommentType, BoardCommentType } from '../type/BoardType.ts'; import { client } from '...

React Axios TypeScript with JWT Boilerplate

💡 Axios 메소드들의 타입 설정과 인스턴스 기본 설정 그리고 토큰 만료 시 재발급 로직에 대해 작성하였습니다. Axios Type Setting interface CustomInstance extends AxiosInstance { get(...params: Parameters): Promise; delete(...params: Parameters): Promise; post(...params: Parameters): Promise; put(...params: Parameters): Promise; patch(...params: Parameters): Promise; } Create Axios 새로운 Axios 인스턴스를 client 이름으로 생성하고 호출되는 URL 앞에 고정적으로 붙는 BaseUR..

React TypeSciprt - Community Project

Interface Extends 중복되는 타입이 있을 경우 사용했다. export interface GetResponse { responseMessage?: string; statusCode?: number; } export interface UserMainInfo extends GetResponse { cityName: string; findLatestBoardCommentsByUserDtos?: CommentType[]; findLatestBoardsByUserDtos?: BoardType[]; nickname: string; point: number; profileImg: string | undefined; userId: string; zoneName: string; } export interfac..

Intellij Deployment SSH Error

💡 이전 버전에서 문제가 없었으나 Intellij 2023.3.5 업데이트 이후 에러 발생 이전 버전의 parser 문제였고 새로운 ssh-g parser 사용 시 에러가 해결되었다. Error Cannot connect to remote host: net.schmizz.sshj.transport.TransportException: Unable to reach a settlement of KeyExchangeAlgorithms: [curve25519-sha256, curve25519-sha256@libssh.org, ecdh-sha2-nistp256, ecdh-sha2-nistp384, ecdh-sha2-nistp521, diffie-hellman-group-exchange-sha256, diffie-h..