코딩테스트 JS 해시 풀이: 모든 아나그램 찾기
주요 포인트 한눈에 보기 문자열 아나그램 문제는 해시(Map)와 슬라이딩 윈도우를 함께 활용하는 대표적인 코딩테스트 유형입니다. 이 글에서는 직접 풀지 못한 상태에서 문제를 어떻게 분석하고, 왜 이 풀이 구조가…
더 읽기개발
프로그래밍 카테고리에서는 HTML, CSS, JavaScript, React, Next.js를 비롯한 다양한 개발 지식과 실무 구현 방법을 정리합니다. 기초 문법부터 UI 구현, API 연동, 상태 관리, 성능 최적화, 트러블슈팅까지 실제 작업에 바로 적용할 수 있는 내용을 쉽고 체계적으로 다룹니다.
Tailwind CSS v4.1 유틸리티 정리: text-shadow와 mask 사용하기
이 글에서 정리하는 내용 Tailwind CSS v4.1에서 추가된 text-shadow-*와 mask-* 유틸리티를 실제 UI 작업 기준으로 정리합니다. 글자에 그림자를 넣는 방법보다 배경 위 텍스트를 읽히게 만드는 기준, 이미지를 부드럽게 사라지게 만…
더 읽기
Zustand persist 사용법: 새로고침 후 상태 저장하기
이 글에서 정리하는 내용 Zustand의 persist 미들웨어로 새로고침 후에도 상태를 유지하는 방법을 정리합니다. 코드 사용법 자체보다 어떤 상태를 브라우저 저장소에 남겨도 되는지, 어떤 상태는 매번 초기화하는 편이 나은지에 초점을 맞춥니다. 상태는 store에…
더 읽기
Zustand 리렌더링 문제 해결: 상태 변경 후 화면이 바뀌지 않을 때
Zustand 리렌더링 문제는 변경 감지 기준부터 봐야 합니다 Zustand에서 store 값을 바꿨는데 화면이 그대로라면 먼저 “값이 바뀌었는가”와 “컴포넌트가 구독한 값이 바뀐 것으로 비교되었는가”를 나눠 봐야 합니다. 객체나 배열을 직접 수정하면 내부 값은 달라져…
더 읽기
Tailwind CSS Preflight 기준: 기본 스타일 초기화가 생기는 이유
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 Preflight가 기본 HTML 스타일을 어떻게 초기화하는지 정리합니다.처럼 화면에서 바로 티가 나는 부분을 중심으로 보고, Preflight를 꺼야 하는 상황과 유지한 채 보정해야 하는 상황을 구분합니다…
더 읽기
Zustand action 사용법: 상태 변경 로직을 store로 분리하기
이 글에서 정리하는 내용 Zustand에서 action은 별도의 action 객체를 만드는 절차가 아니라, store 안에 상태 변경 규칙을 함수로 모아두는 방식입니다. 필터 상태 예시를 기준으로 컴포넌트에 흩어진 변경 로직을 action으로 옮기는 기준을 정리합니다.…
더 읽기
Tailwind CSS 임의 값 공백 처리: 대괄호 문법이 깨질 때 해결하기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 임의 값 문법에서 공백이 들어갈 때 클래스가 깨지는 이유를 정리합니다.처럼 기존 CSS에서는 자연스럽게 쓰던 값을 Tailwind 클래스 안으로 옮길 때 어떤 방식으로 바꿔야 하는지, 그리고 가 언제 공백으…
더 읽기
Zustand state 사용법: 값 읽기와 변경 흐름 익히기
이 글에서 정리하는 내용 Zustand store를 만든 뒤 컴포넌트에서 state를 읽고 action으로 변경하는 흐름을 정리합니다. 단순히 값을 가져오는 문법보다, 컴포넌트가 어떤 값에 의존하는지 좁히고 변경 규칙을 store 안에 모으는 기준을 중심으로 봅니다. …
더 읽기
Zustand 설치 사용법: 기본 Store 만들고 상태 연결하기
이번 단계에서 정리하는 내용 Zustand를 React 프로젝트에 설치하고, 컴포넌트 밖에 기본 Store를 만든 뒤 필요한 상태와 액션만 꺼내 쓰는 흐름을 정리합니다. 설치 명령어보다 더 오래 남겨야 할 기준은 안에서 상태와 상태 변경 함수를 어떤 책임으로 묶을지입니…
더 읽기
Tailwind CSS 클래스 적용 오류 해결: 스타일이 보이지 않을 때 확인할 것
Tailwind 클래스가 안 먹을 때 먼저 확인할 순서 Tailwind CSS 클래스가 적용되지 않는 문제는 대부분 설치 연결, content 경로, 동적 클래스 작성 방식, 설정 변경 후 재시작, CSS 우선순위 중 하나에서 발생합니다. 막연히 코드를 다시 쓰기보…
더 읽기