오늘날 웹 애플리케이션은 효과적으로 데이터를 관리하고, 반응형 사용자 경험을 제공하기 위해 점점 더 복잡해지고 있다. 이에 따라 애플리케이션의 성능과 유지보수성을 높이기 위해 체계적인 상태 관리가 필수적이게 되었다. 특히 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 타입을 내장하고 있어, 타입 안전성..
🍁Traversing 기본 코드 Axis 할아버지 큰아버지 사촌 아버지 큰형 작은형 나 자식 손자 자식 자식 동생 막내동생 작은아버지 사촌 [JavaScript] Axis: 축을 기준으로 검색 🍁Axis 태그를 찾는 방법으로 식별자를 이용해서 찾는 방법이 있고, 축을 기준으로 찾는 axis 기능이 있다. 기본 코드 Axis 할아버지 큰아버지 사촌 아버지 큰형 작은형 나 자식 손자 자식 자식 동 isaac-christian.tistory.com Axis에 대해서는 위 글을 참고한다. 자식에 접근 모든 자식에 접근 children $('#me').children().addClass('check'); 특정 자식에 접근 first last eq $('#me').children().first().addClass(..
🍁CSS 적용 CSS 읽기 쓰기 읽기: CSS(속성) 쓰기: CSS(속성, 값) CSS 읽기 //alert(getComputedStyle(document.getElementById('box')).getPropertyValue('color')); alert($('#box').css('color')); jQuery에는 내부적으로 이 작업이 되어 있다는 것을 알 수 있다. CSS 쓰기 (메서드 체인) //$('#box').css('color', 'blue'); $('#box').css('color', 'blue').css('background-color', 'gold').css('font-size', '3rem'); jQuery는 연쇄적으로 작업할 수 있다는 점에서 편리하다. css(속성명, 값)이 반복하여 ..
🍁Scroll Event 기본 코드 Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quia veniam quisquam voluptatibus facilis iste ad sequi? Ducimus, optio fugiat. Tempora non fugiat nobis soluta a quia, aliquam mollitia eos. Soluta maiores quisquam molestias nemo eos at neque impedit, perspiciatis dolorem, enim iusto obcaecati sit suscipit minus, non dolores doloremque! Esse a adipisc..
🍁전용 함수와 범용 함수 전용 이벤트 함수 객체.이벤트함수(콜백함수) $('#btn1').click(function() { alert(); }); 위 코드는 클릭 이벤트만을 처리하는 함수이다. 이렇게 하나의 이벤트만을 처리하는 함수를 전용 이벤트 함수라고 한다. 범용 이벤트 함수 객체.on(이벤트명, 콜백함수) $('#btn2').on('click', function() { alert(); }) on은 범용 함수로, 이벤트명을 입력해야 한다. 이벤트명에 따라서 다양한 이벤트를 처리하는 함수를 범용 이벤트 함수라고 한다. 반대로 객체의 이벤트를 해제할 때에는 off 함수를 사용한다. 🍁Effect Function 1. hide(time), show(time), toggle(time) 2. fadeOut(t..
🍁jQuery() 함수 jQuery() 함수는 CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다. 기본 코드 jQuery() 함수 상자1 상자2 상자3 상자4 상자5 Array.from() //forEach > new Array()에서 동작 //list.forEach(box => box.style.color = 'yellow'); //HTMLCollection (유사 배열) Array.from(list).forEach(box => box.style.color = 'tomato'); 자바스크립트는 구조상 진짜 배열이 없다고 했다. 하지만 new Array()로 만들어진 것을 진짜 배열로 취급한다. 위에서 선언한 list는 배열이 아닌 HTMLCollection(유사 배열)이며, 유사 배열은 forE..
