풀소유

react-beautiful-dnd는 React 애플리케이션에서 드래그 앤 드롭 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 이 라이브러리는 복잡한 드래그 앤 드롭 상호작용을 간단하게 처리할 수 있게 설계되었으며, 높은 유연성과 성능을 제공한다.주요 특징쉬운 사용법: API가 간단하고 직관적이며, 드래그 앤 드롭 기능을 쉽게 추가할 수 있다.성능 최적화: 가상화와 메모이제이션을 통해 높은 성능을 유지하며, 많은 요소를 포함한 리스트에서도 원활한 성능을 보장한다.접근성: 기본적으로 접근성(Accessibility, a11y)을 고려하여 설계되었다.애니메이션: 드래그 및 드롭 동작에 대한 부드러운 애니메이션을 제공한다.설치npm i --legacy-pee-deps react-beautiful-dn..

React에서는 react-dnd 라이브러리를 사용하여 드래그 앤 드롭 기능을 간편하게 구현할 수 있다.설치먼저, react-dnd와 react-dnd-html5-backend를 설치한다. react-dnd-html5-backend는 HTML5의 드래그 앤 드롭 API를 사용하는 기본 백엔드이다.npm i react-dnd react-dnd-html5-backendnpm i -D @types/react-dndReact DnD에서 백엔드는 드래그 앤 드롭 이벤트를 처리하고, 드래그된 아이템의 상태를 관리하는 시스템이다. "백엔드"라는 용어는 여기서 드래그 앤 드롭 기능을 지원하는 '기술적 메커니즘' 또는 '엔진'을 의미한다. 실제 서버 백엔드와 혼동할 수 있지만, 문맥상 이 백엔드는 클라이언트 측에서 동작..

import {makeRandomCard} './data'const card = makeRandomCard()const uuid = card['uuid'] // 색인 연산자로 객체의 'uuid' 속성값 얻기자바스크립트는 색인 연산자 []를 사용하여 객체의 속성값을 얻을 수 있다. 이러한 형태의 코드는 속성 이름을 잘못 작성하는 실수를 일으킬 수 있다. 또한 이런 오류는 코드가 실행되기 전에는 알 수 없다.이 때문에 타입스크립트는 기본으로 객체의 속성값을 색인 연산자로 얻을 수 없게 한다. 대신 Record 타입을 제공한다. Record 타입type Record = { [P in K]: T;}K: 객체의 키 타입을 지정한다. keyof any는 모든 가능한 키 타입을 의미한다. (예: string, ..

peerDependencies는 package.json 파일의 한 필드로, 패키지가 특정 버전의 다른 패키지와 함께 동작해야 함을 나타낸다. 주로 플러그인이나 라이브러리가 특정 버전의 상위 라이브러리와 함께 동작해야 할 때 사용된다.React 플러그인을 만들 때, 플러그인이 특정 버전의 React와 호환되도록 하고 싶다면 peerDependencies를 사용하여 React 버전을 지정할 수 있다. 아래 예시에서, my-react-plugin은 React 16 이상 버전과 함께 사용되어야 한다.{ "name": "my-react-plugin", "version": "1.0.0", "peerDependencies": { "react": ">=16.0.0" }} peerDependencies의 주..

GitHub FlowGitHub Flow는 깃허브에서 만든 단순한 구조의 브랜치 전략이다. 작은 팀과 빈번한 업데이트가 필요한 프로젝트에 이상적이다.브랜치Main, Feature, Bugfix 브랜치로 이루어진다.모든 브랜치는 Main으로부터 나온다.Main으로부터 기능추가, 버그 수정 작업을 위한 새로운 브랜치를 생성한다.기능 개발, 버그 수정기능별로 커밋한다.커밋 메시지와 브랜치 이름은 정확하고 간결하게 작성한다.커밋은 서버의 동일한 브랜치에 병합한다. (Git flow와 차이점)리뷰 및 병합GitHub Actions와 같은 CI/CD 도구를 사용하여, 풀 리퀘스트가 생성되면 자동으로 테스트를 실행할 수 있다. 이렇게 하면 코드가 main 브랜치에 병합되기 전에 기능 브랜치에서 모든 테스트가 통과했는..

리듀서 함수 몸통에서는 사이드 이펙트를 일으키는 코드를 사용할 수 없다. 그런데 이 점은 리덕스 기능을 사용하는 컴포넌트를 복잡하게 만든다. 리덕스 미들웨어는 리듀서 앞 단에서 부작용이 있는 코드들을 실행하여 얻은 결과를 리듀서 쪽으로 넘겨주는 역할을 한다.dispatch(액션) -> 미들웨어 -> 리듀서 -> 리덕스 저장소 리덕스 미들웨어 타입// 리덕스 미들웨어 타입interface Middleware { (api: MiddlewareAPI): (next: (action: unknown) => unknown) => (action: unknown) => unknown;}// 리덕스 미들웨어 API 타입interface MiddlewareAPI { dispatch: D; getState(..

MockServer는 Java 애플리케이션에서 HTTP 서버를 모킹(Mocking)할 수 있는 도구이다. 이를 통해 테스트 시 외부 API 호출을 모킹 하여 일관된 응답을 제공하고, 테스트의 안정성과 재현성을 높일 수 있다MockServer 설정dependencies { implementation("org.springframework.boot:spring-boot-starter-web") testImplementation("org.springframework.boot:spring-boot-starter-test") testImplementation("org.mock-server:mockserver-netty:5.13.2") testImplementation("org.mock-serv..

BDDMockito는 Behavior-Driven Development (BDD) 스타일의 단위 테스트를 작성하기 위해 Mockito 프레임워크를 확장한 것이다. BDDMockito는 주로 Java 애플리케이션에서 사용되며, 테스트 코드가 더 읽기 쉽고 명확하게 작성되도록 도와준다.BDDMockito의 장점가독성 향상: BDD 스타일의 테스트는 테스트 코드의 가독성을 높여, 테스트 목적을 더 명확하게 표현할 수 있다.행동 중심: Given-When-Then 패턴을 통해, 테스트 케이스를 시스템의 동작과 일치시킬 수 있다.명확한 의도 표현: BDD 스타일의 테스트는 코드의 의도를 더 명확하게 표현하여, 테스트 케이스를 이해하고 유지보수하기 쉽게 만든다.BDDMockito의 주요 메서드given: 테스트 준..

JUnit은 JVM 생태계에서 가장 널리 사용되는 테스트 프레임워크로, 주로 단위 테스트를 위한 도구를 제공하지만, 통합 테스트에도 활용할 수 있다.JUnit의 주요 특징은 어노테이션 기반 테스트 지원, 단정문(Assert)을 통한 테스트 결과 검증이 있다.통합 테스트여러 컴포넌트를 조합하여 전체 비즈니스 로직을 검증한다. @SpringBootTest를 주로 사용하지만, 대규모 프로젝트에서는 실행 시간이 길어질 수 있다.단위 테스트단위 테스트는 코드의 특정 모듈이 의도한 대로 동작하는지 각 함수와 메소드에 대한 개별 테스트 케이스를 작성하여 검증합니다.FIRST 원칙효과적인 단위 테스트를 위한 5가지 원칙을 FIRST 원칙이라고 한다.Fast: 테스트는 빠르게 실행되어야 한다.Independent: 각 ..

테스트 커버리지란 소프트웨어의 테스트 수준이 충분한지 표현할 수 있는 지표 중 하나이다.많은 코드 커버리지 도구가 있으며, 가장 보편적으로 사용되는 Jacoco에 대해 다루도록 한다. JaCoCo 개요JaCoCo(Java Code Coverage)는 Java 애플리케이션의 코드 커버리지를 측정하기 위한 도구이다. 코드 커버리지는 테스트된 코드의 비율을 나타내며, 소프트웨어 테스트의 효율성을 평가하는 중요한 지표이다.JaCoCo의 주요 기능커버리지 측정: 테스트 코드 실행 시 실행된 코드 라인, 분기, 메소드 등을 측정한다.리포트 생성: HTML, XML, CSV 형식으로 커버리지 리포트를 생성하여 시각화된 데이터를 제공한다.검증 규칙 설정: 특정 커버리지 목표를 설정하고 이를 충족하는지 확인할 수 있다...