2024/05 6

ZUSTAND

ZUSTAND에 관심을 갖게 된 이유npm trends에 따르면 redux 다음으로 가장 핫한 상태관리 라이브러리,꾸준하게 상승중이고 상승폭도 가장 커 다음 프로젝트에는 Zustand를 사용해보려고 한다. 왜 ZUSTAND가 핫할까?https://zustand-demo.pmnd.rs/  Zustand zustand-demo.pmnd.rs 1. 직관적이고 간편한 사용법ZUSTAND 메인페이지와 Documentation에서 사용법을 살펴보면npm install zustand import { create } from 'zustand'const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 ..

jquery를 사용하지 않게 된 이유

[ jQuery ]jQuery는 JS를 작성하는것은 재밌어야 한다는 모토를 가진 JS 라이브러리적게 쓰고 많은 일을 하게(write less, do more) 도와주는 JS 라이브러리라고 생각하면 됨일반적으로 반복적인 작업을 수행하고 불필요한 마크업을 제거, 짧고 이해하기 쉬운 코드를 작성할 수 있게 해줌 예를 들어 jQuery가 등장하기 이전에는 XMLHttpRequest를 사용하여 비동기 통신을 처리해야 했음let xhr = new XMLHttpRequest();xhr.open('POST', '/test');xhr.send();xhr.onload = function () { if (xhr.status != 200) { console.error(`${xhr.status}: ${xhr.status..

Jotai

JotaiJotai는 React State Management Libarary 중 하나이고 Recoil, Redux와 같이 상태 관리에 필요한 편의 기능을 제공하는 라이브러리Jotai는 Recoil과 같은 Atomic 접근 방식으로 React에서 사용되는 state와 비슷하게 리액트 트리 안에서 상태를 저장하고 관리하는 방법임 Jotai 특징https://jotai.org/ Jotai, primitive and flexible state management for ReactJotai takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by c..

CS/프로그래밍 2024.05.08

AWS S3 + CloudFront 배포

개요1. AWS IAM 설정2. S3 생성 및 설정3. CloudFront 설정4. Github Action으로 CI / CD 구축 ✅ AWS IAM 설정📦 IAM(Identity and Access Management)이란?AWS리소스에 대한 엑세스를 안전하게 제어할 수 있는 웹 서비스로 AWS 계정을 최초로 생성할 때 만들어지는 루트 사용자는 모든 엑세스 권한을 가지기에 보안에 주의해서 사용해야하므로 IAM을 통해 리소스를 사용할 수 있는 인증 및 권한 부여된 대상을 제어한다.리소스에 대해 여러 사람에게 다양한 권한을 부여할 수 있다.사용자에게 직접 정책을 설정할 수도 있지만 그룹에 대해서도 부여할 수 있다. 📦 IAM 사용자 추가하기AWS > IAM > 사용자 생성 > 1 ~3단계 수행 > 생성..

CS 2024.05.08

JS, StructuredClone()

객체를 복사하려고 한다면 깊은 복사와 얕은 복사라는 개념을 알아야 함JS에서 데이터는 두가지 주요 유형으로 나눌 수 있음. 바로 원시값과 참조값임 원시값은 변수에 할당될 때 해당 변수에 직접 값이 저장됨참조값은 객체로 새로운 변수에 원본 객체에 주소가 복사되어 두 변수가 같은 객체를 가리키게 됨따라서 원본 객체를 변경하면 복사본도 영향을 받게 되는 것. 이것을 얕은 복사라고 함복사본의 영향이 가지 않도록 만들기 위해 객체의 내용을 완전히 새로운 메모리에 저장하는 것을 깊은 복사라고 함이렇게 깊은 복사로 복사된 객체는 원본 객체와는 별개의 독립적인 객체로 원본 객체의 영향을 끼치지 않음 객체를 복사할때 단순히 전개연산자(spread operator)를 사용하여 복사해 원본객체의 영향을 끼치지 않도록 복사할..

CS/프로그래밍 2024.05.01

INP란 무엇인가?

개요INP의 정의크롬 개발자 도구를 통한 INP 개선 방법 응답성(페이지가 인터렉션에 얼마나 빠르게 응답하는지)은 사용자에게 매우 중요하다. ✅ INP의 정의📦 INP (Interaction to Next Paint)다음 페이지와의 상호작용이라는 의미의 INP는 반응성을 평가하는 실험 지표로써 페이지에서 발생하는 모든 상호작용을 측정하여 페이지의 전반적인 응답성을 측정하며 이를 통해 시간을 최소화하는 것이 목표이다.INP는 페이지 수명동안의 모든 상호작용 요소를 관찰하고 가장 긴 응답 시간(지연 시간)이 가진 것을 보고한다.INP가 낮으면 페이지의 대다수의 상호작용이 대부분 빠르게 반응한다 -> 좋은 응답성을 가진다. 🎉 지연 시간이란?더보기단일 상호작용의 지연 시간은 상호작용의 일부인 어떠한 이벤트..

CS/브라우저 2024.05.01