레코드 패턴 매칭(프리뷰)기존에는 instanceof를 통해 해당 객체인지 확인 후, 형변환을 통해 객체를 사용해야 했습니다.record Point(int x, int y) {}public void test(Object o) { if (o instanceof Point) { Point p = (Point) o; ... }}하지만 레코드 패턴 매칭을 통해 형변환 로직을 제거하고 record의 구성요소를 직접 추출해서 사용할 수 있습니다.public void test1(Object o) { if (o instanceof Point p) { int sum = p.x + p.y; ... }}public void test2(Object o) ..

Java API CharsetJava API의 기본 Charset이 UTF-8로 지정되었습니다.간단한 웹 서버를 제공하는 커맨드라인 툴 제공정적 파일만 제공하는 간단한 웹 서버를 시작할 수 있는 새로운 커맨드라인 툴을 제공합니다.참고로 우리가 일반적으로 사용하고 있는 Apache, Nginx과 같이 실무에 사용할 수 있는 수준의 서버는 아닙니다.해당 서버는 테스트, 개발 및 디버깅 용으로 사용할 수 있습니다.jwebserver -p 9000@Snippet 어노테이션 추가Java Document 주석/** */에 @Snippet 어노테이션이 추가되었습니다.finally 구문 deprecatejava의 에러핸들링을 위한 try ~ catch ~ finally 구문이 있습니다.try { ...} cat..

publicpublic에 저장된 파일들은 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적됩니다. 즉 접속하는 유저가 원한다면 접근할 수 있습니다. 예를 들어, 브라우저에서 localhost:1234/game-logo.png에 접속하면 해당 이미지를 볼 수가 있습니다.assets파일들이 공개되지 않기 때문에 localhost:1234/src/assets/game-logo.png에 접속할 수 없습니다.결론logo, og-img, favicon같이 빌드 프로세스에 의해 처리되지 않는 이미지는 public에 컴포넌트 내에서 사용되는 이미지는 assets에서 사용하면 좋습니다.참고 페이지https://velog.io/@sooxpak/React-public-vs-assetshttps://yescold.tisto..

React 렌더링React 공식 문서를 확인해보면 트리거 단계에서는 두 가지 이유로 렌더를 발생시킵니다.처음 컴포넌트를 렌더해야할 때컴포넌트 또는 부모 컴포넌트의 상태가 업데이트 될 때(리렌더링)컴포넌트 리렌더링 트리거 조건state가 업데이트 된 경우부모 컴포넌트가 리렌더링 된 경우context가 업데이트된 경우참조: https://blog.teamelysium.kr/react-rerendering-optimization#85d7fe53c34946599068bace7ccedbc3React 리렌더링 최적화합성(Composition)을 사용하여 리렌더링 방지상태를 자식 컴포넌트로 내리기이 패턴은 무거운 컴포넌트가 상태를 관리하고 있고, 해당 상태가 렌더 트리의 작은 일부 영역에서만 사용되는 경우에만 유용합..

React HookReact Hook은 리액트 클래스형 컴포넌트에서 이용하던 코드를 함수형 컴포넌트에서 사용할 수 있게 만들어준 라이브러리입니다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능합니다.React Hook의 장점코드 간결성함수형 컴포넌트와 Hook을 사용하면 클래스 컴포넌트보다 코드가 더 간결해집니다. 따라서 코드를 이해하고 유지 보수하기가 더 쉬워집니다.재사용성Custom Hook을 만들어 여러 컴포넌트에서 재사용할 수 있습니다. 이로 인해 코드의 중복을 줄이고 논리를 쉽게 공유할 수 있습니다.컴포넌트 분리Hook을 이용하면 상태 관련 로직을 컴포넌트에서 분리하여 더욱 독립적인 함수로 만들 수 있습니다. 이로 인해 컴포넌트를 더욱 재사용 가능하고 테스트하기 쉬..

ViteVite는 빠르고 간결한 웹 프로젝트를 위해 탄생한 빌드 도구 입니다.ESMESM은 모듈화 문법인 import, export를 별도의 도구없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미합니다. 기존의 브라우저에서는 import와 export를 해석할 수 있는 능력이 없었지만, 이제는 script 태그에 아래와 같이 type="module" 속성을 추가하면 정상 동작하는 것을 볼 수 있습니다.// app.jsimport { sum } from './math.js';console.log(sum(10, 20));Vite 특징EsbuildGo로 작성된 Esbuild는 Webpack과 같은 기존 번들러 대비 10-100배 빠른 속도를 제공합니다.Native ESM기존 webpack과 같은 모듈..