React에서 드래그 앤 드롭 기능을 구현하기 위한 라이브러리 https://github.com/atlassian/react-beautiful-dnd?tab=readme-ov-file GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with ReactBeautiful and accessible drag and drop for lists with React - atlassian/react-beautiful-dndgithub.com 설치npm install react-beautiful-dnd @types/react-beautiful-dnd DragDropContext 드래그 앤 드롭의 컨텍스트를 설..

React 내 Form을 간단하고 효율적으로 관리하도록 도와주는 라이브러리 https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com 특징간편한 유효성 검사, 리렌더링 최소화로 빠른성능, Controlled와 Uncontrolled 컴포넌트를 모두 지원, 기존 HTML 폼 활용 * Controlled vs Uncontrolled Components더보기Controlled ComponentsReact 상태(useState)를 통해 폼 값을..

이름이 있는 상수 집합을 정의한 데이터 구조- 여러 관련된 값을 하나의 그룹으로 묶어 관리 가능- 열거형 이름(key)과 값(value)으로 이루어짐여러상수 편리하게 정의할때 유용(+타입안전)종류숫자 열거형자동 할당enum Dir { Up, // 0 Down, // 1 Left, // 2 Right, // 3}명시적 값 지정, 이후 값 자동 증가enum Dir { Up =1 , Down, // 2 Left, // 3 Right, // 4}console.log(Dir.Left); //3console.log(Dir[3]); // "Left" 값으로 이름 찾기도 가능 문자열 열거형enum Dir { Up = "UP", Dow..

From 입력-MemberController@GetMapping(value = "/members/new")public String createForm() { return "members/createMemberForm";}@PostMapping("/members/new")public String create(MemberForm form) { Member member = new Member(); member.setName(form.getName()); memberService.join(member); return "redirect:/"; //루트("/") 페이지로 이동} -createMemberForm.html 이름 //name 서버넘어올때 키값 ..

전역 상태 관리위한 라이브러리로, React 상태를 쉽게 관리하고 효율적으로 업데이트함 my. context랑 뭐가 다르지,,? RecoilContext목적상태 관리 (비동기,상태독립 등 유용)데이터 전달렌더링변경 시 구독한 컴포넌트만 리렌더링변경 시 구독하는 모든 컴포넌트 리렌더링비동기 상태selector에서 비동기 로직 처리 가능추가 훅,로직 필요 AtomRecoil의 전역 상태 관리 단위로 상태 정의( ≒ 전역 사용 가능한 State)import { atom } from 'recoil';export const numState = atom({ key: 'numState', // 전역에서 고유해야 함 default: 0, // 초기값});Atom 생성 시 고유한 key와 초기값(..

스프링 빈 등록컴포넌트 스캔과 자동 의존관계 설정1. @SpringBootApplication 클래스 시작될 때 Spring 컨테이너(ApplicationContext) 통 생성(초기화)2.모든 @Component 계열(@Controller, @Service, @Repository) 클래스들 객체(Bean) 생성해 스프링 컨테이너에 등록(이 객체 스프링이 관리) (by.@SpringBootApplication 클래스의 @ComponentScan)3. @Autowired 통해 의존성 주입->> 스프링 컨테이너에서 스트링 빈이 관리됨 *빈(Bean): 스프링 컨테이너에 의해 관리되는 객체 @Controller //1.MemberController객체 컨테이너에 생성 public class Member..

웹 계층 구조 Controller: HTTP 요청 검증 후 Service 계층에 전달Service: 비즈니스 로직 처리, 트랜잭션 관리Repository(데이터베이스 통신 계층)JPA 기반 Repository: SQL 작성없이 JPA가 자동처리 (@Entity와 동작)  //findById, findAll, save 메서드통해 데이터처리DAO (Data Access Object): SQL을 직접 다뤄 DB와 매핑(MyBatis 또는 JDBC)Domain(데이터 모델 정의 계층)Entity: DB 테이블과 매핑되는 객체 (데이터 저장, 수정 등 가능, @Entity통해 DB 테이블과 매핑) -> 데이터베이스 저장용DTO: 데이터 전송을 위한 객체 (클라이언트 API 응답, 보안 목적) -> 데이터 전송용 ..

웹 애플리케이션에서 동적 차트를 생성할 수 있는 라이브러리유형 참고 : https://apexcharts.com/react-chart-demos/설치React와 함께 사용npm install --save react-apexcharts apexcharts importimport ReactApexChart from "react-apexcharts";import { ApexOptions } from "apexcharts"; // 타입 가져오기 props‣ type: 차트유형 (String) ( 기본값 line )line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot, radar, polarArea, range..

React HelmetReact 애플리케이션에서 HTML 태그의 내용을 동적으로 관리할 수 있도록 도와주는 라이브러리 설치npm install react-helmet-async 사용-App.tsximport { HelmetProvider } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';function Home() { return ( 안녕하세요 홈 화면 );} React Iconshttps://react-icons.github.io/react-icons/ React Icons react-icons.github.io 설치 npm install react-icon..

데이터를 가져오고, 캐싱, 동기화, 업데이트를 효율적으로 관리하기 위한 React 라이브러리주로 API통신 간소화, 상태 관리 더 효율적으로 처리하기 위해 사용 특징데이터 캐싱 : 데이터 자동 캐싱해 동일한 데이터를 다시 요청할 필요 없이 즉시 사용 가능자동 리페치: 오래 되었거나, 다시연결 시 자동으로 데이터를 다시 가져와 동기화백그라운드 데이터 업데이트: 사용자가 애플리케이션을 사용하는 동안 데이터를 비동기적으로 업데이트변경 관찰 및 재시도: API 요청 실패 시 재시도 로직을 내장하고 있으며, 상태 변경을 실시간으로 감지 가능개별 요청 상태 관리: 요청 단위로 로딩, 에러, 성공 상태를 관리 가능 설치npm install @tanstack/react-query  기본QueryClient, Query..