오늘날 웹 애플리케이션은 효과적으로 데이터를 관리하고, 반응형 사용자 경험을 제공하기 위해 점점 더 복잡해지고 있다. 이에 따라 애플리케이션의 성능과 유지보수성을 높이기 위해 체계적인 상태 관리가 필수적이게 되었다. 특히 React와 같은 프레임워크를 사용할 때 컴포넌트 간의 데이터를 효율적으로 관리하고 일관된 상태를 유지하려면 상태 관리 라이브러리를 활용할 필요가 있다. 💡Jotai란?Jotai는 일본어로 원자(atom)를 의미하는 이름에서 유래했으며, React 애플리케이션에서 가장 작은 단위의 상태를 관리할 수 있도록 설계된 상태 관리 라이브러리이다. Jotai는 Recoil과 비슷한 Atom 기반의 상태 관리 라이브러리이며, 가볍고 쉽게 전역 상태를 관리할 수 있다. 원자 (atom)원자는 상태..
TypeScript로 프로젝트를 개발할 때, 데이터 유효성 검증은 필수적인 작업이다. 특히 클라이언트와 서버 간의 데이터 통신, 사용자가 입력한 폼 데이터, API 응답 데이터를 검증하는 과정에서 이 작업은 매우 중요하다.TypeScript는 컴파일 시점에서의 타입은 검증하지만, 런타임에서 발생하는 에러는 방지하기 어려워 별도의 데이터 검증 라이브러리가 필요하다. 이때 사용할 수 있는 것이 Zod이다. 💡Zod란?Zod는 TypeScript 기반의 스키마 선언 및 데이터 검증 라이브러리로, 데이터가 특정 형식과 구조를 따르는지 검증하기 위해 설계되었다. Zod는 데이터 유효성 검증과 타입 안전성을 강화하기 위해 만들어졌다. Zod를 사용하면 TypeScript와 함께 타입 정의와 데이터 검증을 손쉽게..
JavaScript 개발에서 자주 사용되는 함수들을 모아 간편하게 제공하는 유틸리티 라이브러리는 생산성을 높이고 코드 품질을 개선하는 데 큰 도움이 된다. es-toolkit은 JavaScript API를 활용해 높은 성능과 작은 번들 사이즈를 제공하는 유틸리티 라이브러리이다. 💡es-toolkit란?es-toolkit은 토스에서 개발한 유틸리티 라이브러리로, 자바스크립트 개발에서 자주 사용되는 다양한 유틸리티 함수를 보완하고 확장하였다. 이 라이브러리는 lodash와 같은 기존의 유틸리티 라이브러리와 비슷한 기능을 제공하지만, 최신 JavaScript API를 활용하여 최대 97% 더 작은 번들 사이즈와 2~3배 빠른 속도를 보유하고 있다. 특히 TypeScript 타입을 내장하고 있어, 타입 안전성..
이 글은 자바스크립트를 사용한 심화 기술을 활용할 수 있도록 기초적인 문법과 개념을 얕게 다룬다. 여기서 다루는 기술은 자바스크립트뿐만 아니라 다른 프로그래밍 언어, 라이브러리, 프레임워크에서 활용할 수 있다. 각 기술을 설명하기에 앞서 자주 사용되는 자바스크립트 문법을 짚고 넘어가도록 하자. 💡let과 const 키워드 let과 const의 역할 let을 사용하는 경우 변수를 선언하고, 나중에 재할당할 가능성이 있는 경우에 사용된다. 변수의 값이 변경될 수 있는 상황이거나, 변수의 스코프가 한정적인 경우에 사용된다. 반복문에서 반복 변수를 선언할 때 주로 사용된다. 예를 들어, 반복문 내에서 임시적으로 사용되는 변수나 조건에 따라 값이 변경되는 변수 등에 사용된다. const를 사용하는 경우 변수를 선..
💡불변성이란? 사전적 의미에서 불변성(Immutability)은 값이나 상태를 변경할 수 없음을 의미한다. 그리고 프로그래밍에서의 불변성은 메모리 영역에서 값이 변하지 않도록 하는 것을 의미한다. "불변성을 지킨다"라는 말은 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 말한다. 왜 React에서 불변성을 유지해야 할까? React는 상태(State)를 업데이트할 때, 이전 상태와 새로운 상태를 비교하여 렌더링을 결정한다. 이를 위해 React는 얕은 비교(Shallow Comparison)를 수행하는데, 이는 객체나 배열의 참조 주소만 비교한다는 의미이다. 만약 상태를 업데이트할 때 불변성을 유지하지 않으면, 이전 상태와 새로운 상태가 동일한 참조를 가리키게 되어 React가 상태 ..
Back-End는 Spring으로, Front-End는 React 환경으로 개발 환경을 만들어 보도록 하자. 한 프로젝트 내에서 Spring으로 백엔드를 구축하고 React로 프론트엔드를 개발하는 방식은 백엔드와 프론트엔드를 동시에 관리하고 통합하는 편리한 방법이다. 이와 같은 구조를 사용하면 하나의 코드베이스에서 모든 업무를 처리할 수 있으며, 백엔드와 프론트엔드를 동시에 빌드할 수 있어 개발과 배포를 간편하게 관리할 수 있다. 하지만 이러한 구조에도 단점은 존재한다.🤔 React는 정적인 앱으로, 백엔드가 종료되어도 프론트엔드는 여전히 작동할 수 있다. 그러나 이러한 구조에서는 백엔드가 종료되면 프론트엔드도 동시에 종료되므로 전체 시스템의 안정성에 대한 리스크가 있다. 또한, 두 애플리케이션의 빌드가..
💡Promise란? Promise(프로미스)는 자바스크립트에서 비동기 작업을 처리하는 객체이다. 주로 서버에서 데이터를 요청하거나 파일을 읽는 등의 비동기 작업을 수행할 때 사용된다. Promise는 성공 또는 실패와 같은 비동기 작업의 결과를 나타내는 데 사용되며, 자바스크립트에서 비동기 처리가 가장 많이 일어나는 XMLHTTPRequest 처리에서 유용하게 사용된다. XMLHTTPRequest XMLHttpRequest는 웹 브라우저에서 제공하는 자바스크립트 객체로, 서버와 비동기적으로 데이터를 교환할 수 있는 기능을 제공한다. 이 객체를 사용하면 웹 페이지를 새로 고치지 않고도 서버로부터 데이터를 가져와서 웹 페이지의 일부분을 업데이트할 수 있다. XMLHttpRequest 객체를 사용하여 서버로 ..
