HOME
[HTML/CSS] Tailwind CSS 다이나믹 클래스 사용시 주의할 점
[HTML/CSS] Tailwind CSS 다이나믹 클래스 사용시 주의할 점
2024.05.08Tailwind CSS는 클라이언트 사이드 런타임을 포함하지 않는다. 이는 클래스 이름을 빌드 타임에 추출하여 정적인 CSS 파일만 브라우저로 전송하는 것을 의미한다. 즉, 브라우저에선 Tailwind CSS 관련 자바스크립트 코드를 실행하지 않는다. 때문에 Tailwind CSS는 런타임에 동적으로 변경되는 값에 의존할 수 없다. 런타임에 동적으로 값을 변경해야 하는 경우 Emotion 같은 CSS-in-JS 라이브러리 등을 활용해야 한다.Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sor..
[DevTools] 1Password에서 SSH 키 관리하기
[DevTools] 1Password에서 SSH 키 관리하기
2024.05.081Password 8 버전부터 SSH & Git 관리 기능을 사용할 수 있다. 현재 Ed25519와 RSA 두가지 타입을 지원하며, 기존 SSH 키를 불러와서 저장할 수도 있다. 참고로 *.pem 파일을 1Password에 불러와서 저장한 후, 개인키를 다시 다운로드해서 사용할 땐 pem 확장자를 추가해야 한다. 1Password의 SSH & Git 관리 기능을 사용하면 SSH 개인키를 로컬에 저장하지 않고도 SSH 인증을 진행할 수 있다. ~/.ssh/config 파일에 일일이 SSH 키 경로를 명시해야 하는 번거로움도 덜 수 있다. 1Password에서 생성한 SSH 키는 공개키와 핑거 프린트(Finger Print)를 함께 생성하기 때문에 GitHub 같은 서비스에서 공개키 자동완성 기능도 사용할 ..
[Algorithm] 퀵 정렬(Quick Sort) 알고리즘 톺아보기
[Algorithm] 퀵 정렬(Quick Sort) 알고리즘 톺아보기
2024.05.07퀵 정렬 알고리즘 개념퀵 정렬은 분할 정복 알고리즘(문제를 더 작은 2개의 문제로 분리해서 해결한 후 결과를 모아서 원래 문제를 해결하는 방법)의 하나로 찰스 앤터니 리처드 호어(Charles Antony Richard Hoare)기사가 개발했다. 가장 자주 사용하는 정렬 알고리즘으로 빠른 수행 속도가 특징이다. 기본적인 퀵 정렬은 아래 3단계를 반복하며 정렬한다. 기준(Pivot; 피벗) 요소 선택 — 주로 배열의 중간 요소를 기준으로함기준 요소보다 작은 요소는 왼쪽으로 이동, 기준 요소보다 큰 요소는 오른쪽으로 이동이동시킨 왼쪽 / 오른쪽 요소들에 대해 1~2번 작업 반복 구현Basic Quick Sort💡 구현하기 쉽지만 항상 새로운 left / right 배열을 생성해 비교한 요소를 추가하므로 ..
[Algorithm] 분할 정복 / 병합 정렬 알고리즘
[Algorithm] 분할 정복 / 병합 정렬 알고리즘
2024.05.07분할 정복 (Devide & Conquer)개념분할 정복은 “큰 문제를 작은 문제 단위로 쪼개면서 해결해나가는 방식"이다. 미국 수학자 폰노이만이 1945년에 개발한 알고리즘이다. 퀵소트, 병합 정렬이 분할 정복 방법을 통해 구현한다.예전엔 테이프를 이용해 데이터를 저장했다. 테이프 드라이브에 저장된 데이터는 항상 처음부터 순차적으로 읽어야 하기 때문에 데이터를 정렬하기 어려웠다. 이런 테이프 드라이브의 문제점을 극복하기 위해 병합 정렬 알고리즘이 탄생했다. 분할 : 문제를 더 이상 분할할 수 없을 때까지 동일 유형의 여러 하위 문제로 나눈다정복 : 가장 작은 단위의 하위 문제를 해결하며 정복한다조합 : 하위 문제에 대한 결과를 원래 문제에 대한 결과로 조합한다 예시분할 정복은 구조는 동일하지만 더 작은..
[Algorithm] 정렬 알고리즘 기본 (버블/선택/삽입)
[Algorithm] 정렬 알고리즘 기본 (버블/선택/삽입)
2024.05.06💡 예시의 모든 input은 [10, 7, 9, 5, 1]로 통일. 버블 / 선택 / 삽입 정렬 모두 최악의 경우 O(n²) 시간복잡도를 갖는다. 알고리즘 성능이 좋지 않아 거의 쓰진 않지만, 적은 데이터를 정렬할 땐 유용. 버블 정렬 | Bubble Sort거품이 일어난 것처럼 배열의 각 요소들이 순차적으로 정렬돼서 버블 정렬이라고 부른다. 두 요소를 묶어서 비교한 후 큰 숫자를 오른쪽으로 밀어낸다. i번째 정렬을 마칠때마다 “뒤에서 i번째” 자리의 순서가 확정된다. 시간 복잡도 (삽입 정렬과 동일)Worst Case(정렬이 전혀 안됐을 때) : O(n²) — 중첩 반복문을 사용하므로Best Case(이미 정렬됐을 때) : O(n) 장단점 (삽입 정렬과 동일)Stable 정렬 : 중복 데이터는 순서를..
[React] 리액트 Suspense 톺아보기
[React] 리액트 Suspense 톺아보기
2024.05.06React v18 버전부터 Suspense를 공식적으로 지원한다. Suspense는 컴포넌트 렌더링에 필요한 특정 작업이 완료되지 않았음을 React에게 알려주는 매커니즘이다. 이 특정 작업은 여러가지가 있겠지만 Data Fetching 같은 비동기 작업인 경우가 가장 많다. Suspense를 이용하면, 데이터를 다 불러오지 못한 컴포넌트의 렌더링을 잠시 중단시키고 Loading 화면 같은 다른 컴포넌트를 먼저 보여주도록 할 수 있다. 💡 Suspense는 React Query, SWR 같은 Data Fetching 라이브러리와 함께 사용할 수 있도록 설계됐다. Data Fetching 라이브러리에선 옵션 인자를 전달하는 방식으로 Suspense 기능을 활성화 할 수 있다. 예를들어 useSWR에선 세..
[Git] 알면 유용한 GitHub 단축키 / 팁
[Git] 알면 유용한 GitHub 단축키 / 팁
2024.05.05💡 미립자 팁GitHub 페이지에서 ? 키를 누르면 단축키 목록을 확인할 수 있다.소스코드 화면에서 . 키를 누르면 웹 VSCode로 볼 수 있다.GitHub 프로필 주소 끝에 .png를 붙이면 프로필 이미지를 볼 수 있다e.g. https://github.com/romantech.png Focus the search bar/ 혹은 s 키를 누르면 왼쪽 상단에 있는 검색창에 포커스된다. 검색창에 원하는 키워드를 입력해서 내 계정이나 다른 사람 계정에 있는 레포지토리로 이동할 수 있다. File Finder레포지토리에서 t 키를 누르면 File Finder 모드가 활성화된다. File Finder 모드에서 파일 / 폴더명을 입력하면 해당 레포지토리에 있는 파일 목록을 보여준다. 파일 목록에선 위 / 아..
[TS] 타입스크립트 제약 조건과 조건부 타입
[TS] 타입스크립트 제약 조건과 조건부 타입
2024.05.05식별자 영역 / 타입 구현 영역type, interface 키워드를 사용한 타입 선언은 = 등호와 {} 중괄호를 기준으로 식별자(좌), 타입 구현(우) 영역으로 구분할 수 있다.// type 식별자 = 타입 구현type MyType = string | number;// interface 식별자 { 타입 구현 }interface User { name: string; age: number;} 제약 조건 | Constraints식별자 영역에서 사용하는 extends는 제약 조건을 추가할 수 있다. 기본적으로 제네릭엔 모든 타입이 올 수 있지만 제약 조건을 이용해 특정 타입으로 제한할 수 있다.기본 문법 : T extends U — T는 U의 부분 집합(T ⊆ U)으로 볼 수 있음ex) 64 extends ..
[HTML/CSS] select 태그의 화살표 아이콘 변경하기
[HTML/CSS] select 태그의 화살표 아이콘 변경하기
2024.05.05요소는 과 함께 사용하여 옵션을 선택할 수 있는 드롭다운을 표시한다. 우측에 있는 드롭다운 화살표 아이콘은 브라우저마다 스타일이 조금씩 다르다. 어떤 브라우저에서든 똑같은 아이콘으로 표시하고 싶다면 background 스타일 속성을 이용해서 변경할 수 있다.Select your device Apple Oppo Xiaomi appearance 속성 수정appearance CSS 속성은 운영체제의 테마를 기반으로 하는 UI 컨트롤의 기본 외형(appearance)을 제어할 때 사용한다. appearance: none 속성을 적용하면 input progress 등의 요소가 기본적으로 가지는 스타일을 해제할 수 있다. select 요소에 사용하면 우측 화살표 아이콘이 사라진다.select[id="sele..
[React] 리액트 Strict Mode 엄격 모드와 사이드 이펙트
[React] 리액트 Strict Mode 엄격 모드와 사이드 이펙트
2024.05.05엄격 모드의 기능CRA로 생성한 React 프로젝트에선 엄격 모드(Strict Mode)가 기본적으로 적용돼 있다. 엄격 모드는 어플리케이션의 잠재적인 문제를 알아내기 위해 리액트에서 제공하는 도구다. 개발 모드에서 함수 컴포넌트 렌더링 / API 호출 등이 중복해서 발생한다면 엄격 모드 때문에 그럴 가능성이 높다.import React from "react";import ReactDOM from "react-dom/client";import App from "./pages/App";const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement,);root.render({/* ... */}); 엄격 모드는 아래 기능을 제..
[React] 키보드로 조작할 수 있는 드롭다운 자동완성 검색창 구현하기
[React] 키보드로 조작할 수 있는 드롭다운 자동완성 검색창 구현하기
2024.05.05검색창 자동 완성 기능은 , 태그를 이용해 빠르게 구현할 수 있다(참고 포스팅). 키보드 방향키로 옵션을 선택할 수도 있다. 하지만 이 방법은 리스트 요소에 클릭 이벤트를 할당할 수 없는 단점이 있다(검색을 정말 많이 해봤지만 결론은 불가). 검색창에 키워드를 입력한 후 목록에 있는 각 옵션()을 클릭할 때마다 특정 액션을 취해야 한다면 위 방법을 사용할 수 없다. 대안은 React Select 처럼 잘 만든 라이브러리를 사용하거나, 몇 년간 유지 보수한 라이브러리보단 완성도는 조금 떨어질 수 있지만 직접 구현할 수 있다. 아래는 직접 구현한 내용을 기록한 내용. 구현 목표마우스로 리스트 이동 / 선택Enter 키로 선택방향키로 리스트 이동 (Keyboard navigate)스크롤이 생긴 목록에서 방향..
[HTML/CSS] Tailwind CSS 클래스 패턴 재활용 / 기본 테마 수정&확장
[HTML/CSS] Tailwind CSS 클래스 패턴 재활용 / 기본 테마 수정&확장
2024.05.05반복적으로 사용하는 Tailwind CSS 클래스 패턴을(특정 요소에 정의한 클래스 그룹을 여러 곳에서 사용할 때) 하나의 커스텀 클래스로 추출해서 사용할 수 있다 배경 지식 — Tailwind CSS 3계층Tailwind는 CSS 우선순위를 제어하기 위해 base, components, utilities 3개의 계층(layer)으로 구분한다. 이렇게 계층을 구분해두면 각 스타일이 어떻게 상호작용하는지 더 쉽게 이해할 수 있으며, @layer 지시문(해당 스타일이 어떤 계층에 속할지 지정)을 사용해 원하는 방식으로 선언 순서를 제어할 수 있게 된다. — 참고 base일반 HTML 요소에 적용되는 재설정 규칙(reset rules) / 기본 스타일을 위한 레이어. base 계층엔 특정 엘리먼트의 기본 스타..