이 글을 쓰게 된 배경은zustand의 z자도 모르고 썼던게 분명한 내가 잘못 사용해왔던 코드에 대한 깨달음과 부끄러움을 담은 글이다.(위 글은 Zustand의 최신 버전인 v5로 작성되었다)여러 상태를 사용할 때 하지말아야 할 것Not To Do: 구조 분해 할당으로 가져오기import { create } from 'zustand'const useEqpStore = create((set) => ({ type: 'printer', state: 'idle', process: 'none', subprocess: 'none', updateType: (newType) => set({ type: newType }), updateState: (newState) => set({ state: newState..
개인적으로Web Server와 Web Application Server 개념 정리가 필요해서 남기는 글이다.1. 웹 서버(Web Server)란?웹 서버는 HTTP/HTTPS 프로토콜을 통해 클라이언트(주로 브라우저)로부터의 요청을 처리하고 HTML 파일, CSS, JavaScript, 이미지 등의 정적 리소스를 클라이언트에 전달하는 역할을 한다.+ 유저가 구글을 이용하기까지의 과정 : 1. DNS 조회: 사용자가 브라우저에 "www.google.com"을 입력하면, 먼저 DNS(Domain Name System) 조회가 일어납니다. 이 과정에서 "www.google.com"이라는 도메인 이름이 실제 IP 주소(예: 172.217.161.36)로 변환된다.2. HTTP 요청 생성 : 브라우저는 이 IP..
TypeScript에서 type과 interface는 둘 다 타입을 정의하는 데 사용되지만, 몇 가지 중요한 차이점이 있다.각각의 특징과 사용 시기를 비교해보려 한다.Type vs Interface1. 정의 방식:type: 타입 별칭(Type Alias)을 생성한다.interface: 인터페이스를 선언한다.type User = {name: string;age: number;};interface User {name: string;age: number;}2. 확장성:type: 교차 타입(&)을 사용하여 확장한다.interface: extends 키워드를 사용하여 확장한다.type Animal = {name: string;}type Bear = Animal & { honey: boolean };interfac..
위 글은 25 CSS Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,이 글은 3번째 중 3번째(마지막) 글이다.18. Full-Width Elements (전체 너비 요소)문제: 요소가 부모의 전체 너비를 차지하도록 만들고 싶습니다.해결책: width: 100vw를 사용합니다.부연 설명: width: 100vw는 뷰포트의 전체 너비를 차지하게 합니다. margin-left와 margin-right를 사용하여 부모 요소의 중앙에 배치할 수 있습니다..full-width { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);}19. SVG Icon Color Cont..
