React Hook, 처음엔 복잡해 보이지만 한번 이해하면 정말 강력함. 기존 클래스 컴포넌트 없이도 상태 관리하고 생명주기 처리할 수 있어서 코드가 훨씬 깔끔해짐. 🎯 Hook? Hook은 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 특별한 함수들임. use로 시작하는 게 특징이고, React가 제공하는 기본 Hook들과 개발자가 만드는 커스텀 Hook이 있음. 🔥 기본 Hook들 마스터하기 1. useState... Continue Reading →
Bun의 컴파일 기능이란? Node.js에서 npm run start로 스크립트를 실행하는 것과 달리, Bun은 **독립적인 실행 파일(.exe)**을 생성할 수 있음 npm vs Bun의 차이점 기존 npm 방식: # package.json { "scripts": { "start": "node src/index.js" } } # 실행 시 npm run start # Node.js 런타임이 필요 Bun 컴파일 방식: # 빌드 bun build --compile src/index.ts --outfile... Continue Reading →
요약 grid-template-areas는 Tailwind 임의값보다 권장되는 모던 CSS 방법 @layer를 활용해 CSS 우선순위를 체계적으로 관리 Next.js App Router의 layout.js와 globals.css 조합이 최적 @layer란 무엇인가? @layer는 CSS Cascade Layers의 핵심 기능으로, 스타일의 우선순위를 명시적으로 관리할 수 있게 해줌 CSS 우선순위 순서 (낮음 → 높음) @layer base, components, utilities; /* 1. base (가장 낮음) */ @layer base {... Continue Reading →
CSS 정렬 속성들이 헷갈리는 이유와 Flexbox, Grid에서 각각 어떻게 사용하는지 체계적으로 정리했다. 속성FlexboxGridjustify-content✅ 전체 정렬✅ 전체 정렬justify-items❌ 효과 없음✅ 각 셀 내부justify-self❌ 효과 없음✅ 개별 아이템align-items✅ 전체 정렬✅ 각 셀 내부align-self✅ 개별 아이템✅ 개별 아이템align-content✅ 여러 줄✅ 전체 정렬 justify-items (Grid 전용) Grid에서 각 그리드 셀 안에서 아이템을 가로(주축) 방향으로 정렬합니다. .grid-container { display: grid;... Continue Reading →
CSS에서 요소의 위치를 제어하는 position 속성에 대한 완전한 이해를 위한 가이드다. position 속성과 값들 position은 속성명이고, 다음과 같은 값들을 가질 수 있다: .element { position: static; /* 기본값 */ position: relative; /* 상대 위치 */ position: absolute; /* 절대 위치 */ position: fixed; /* 고정 위치 */ position: sticky; /* 끈끈한 위치 */ } 각... Continue Reading →
개발하다 보면 "분명 맞는 것 같은데 왜 안 되지?"라는 상황들이 있다. 자주 발생하는 CSS 문제들과 해결법을 정리했다. 1. z-index가 작동하지 않을 때 문제 .modal { z-index: 9999; /* 아무리 높여도 안 됨 */ background: rgba(0,0,0,0.5); } 해결 .modal { position: relative; /* 또는 absolute, fixed */ z-index: 9999; background: rgba(0,0,0,0.5); } 이유: z-index는 positioned 요소(position이... Continue Reading →
CSS에는 논리적으로 이해하기 어려운 속성들이 존재한다. 이런 것들을 알고 있어야 실무에서 막히지 않는다. 비직관적 CSS 속성들 1. min-height: 0 - Flex 아이템 크기 제어 문제 .container { height: 100vh; display: flex; flex-direction: column; } .main { flex: 1; /* 자식 콘텐츠가 길어지면 부모까지 늘어남 */ } 해결 .main { flex: 1; min-height: 0; /* 필수... Continue Reading →
$ gsettings set org.gnome.desktop.peripherals.mouse accel-profile flat 위 커맨드 실행하면 쿨하게 마우스 가속 꺼짐
Python vs C# 타입 비교표 기본 데이터 타입 카테고리PythonC#설명문자열strstring문자열 타입정수intint32비트 정수큰 정수intlongPython int는 임의 크기, C# long은 64비트실수floatdouble64비트 부동소수점단정밀도 실수-float32비트 부동소수점 (Python은 없음)불린boolbool참/거짓 값바이트bytesbyte바이트 데이터문자str (길이 1)char단일 문자 컬렉션 타입 카테고리PythonC#설명리스트listList<T>동적 배열배열listT[]고정 크기 배열 (C#), Python은 list 사용튜플tupleTuple<T1,T2,...>불변 순서쌍딕셔너리dictDictionary<K,V>키-값 쌍집합setHashSet<T>중복 없는 컬렉션큐collections.dequeQueue<T>선입선출 자료구조스택list (append/pop)Stack<T>후입선출 자료구조 특수 타입 카테고리PythonC#설명없음/널Nonenull값 없음을 나타냄타입 힌트Optional[T]T?nullable 타입동적 타입기본 지원dynamic런타임에 타입... Continue Reading →
핵심 개념 같은 이름의 interface를 여러 번 선언하면 하나로 합쳐짐. 같은 속성에 서로 다른 타입을 주면 에러. 메서드 오버로드는 “나중에 선언된 것이 먼저” 정렬됨. type alias는 병합 불가. 모듈(파일) 스코프를 넘는 확장은 “모듈 보강(module augmentation)” 필요. 기본 예시 // a.ts interface Person { id: string; } // b.ts interface Person { name: string; } //... Continue Reading →
St991Cup's Blog 