밝을희 클태

처음에는 런칭 준비 중인 사이트에"앱 다운로드 하세요~" 하고 유도하려고 QR 코드를 넣었는데,IOS용, Android용 두 개를 나란히 두니까…뭔가 너무 공공기관 포스터 감성이 난다 그래서 이걸 하나로 합칠 수 없을까.. 고민하다가 바로 번뜩였다 새로운 경로(앱 다운로드 전용 페이지) 를 만들어서QR 코드 주소를 그쪽으로 보내면 되잖아?그럼 서버 사이드에서 UA를 보고iOS냐 Android냐 판단해서 적절한 스토어로 보내면 된다! 그래서 바로 코드를 짰다export async function loader({ request }: Route.LoaderArgs) { const device = detectDevice(request); // 서버 사이드에서 직접 리다이렉트 if (device.isIOS)..

react 프로젝트 중 python을 써야 할 일이 생겼다어떻게 두 프로젝트를 관리할까 하다가 평소 모노레포를 좋아해 이번 프로젝트 역시 모노레포를 적용하기로 했다❗️환경npm 파이썬 서버와 클라이언트를 동시에 실행하려면 concurrently 라이브러리를 설치 한다.각자 환경에 맞게 concurrently 설치npm install --save-dev concurrentlypackage.json 예시 { "scripts": { "dev:client": "cd client && npm run dev", "dev:server": "cd server && source venv/bin/activate && python server.py", "dev": "concurrently \"npm run..

React 프로젝트를 진행하며, 별도 라이브러리 없이 기본 Hook과 HTML 요소만으로 폼을 만들었다.그러다 입력해야 할 필드가 많아질수록 상태 관리가 복잡해져서해결책을 찾아보다가 shadcn/ui의 Form 컴포넌트와 react-hook-form, Zod를 알게 됐다.react-hook-form?React 훅 기반의 폼 상태 관리 라이브러리입력값(value), 유효성 검증, 에러 상태를 비제어 컴포넌트 방식으로 관리해 불필요한 리렌더링을 줄여준다Zod?TypeScript 기반의 스키마 선언·런타임 검증 라이브러리z.object(), z.string() 등으로 스키마만 정의하면런타임에 데이터를 검증하고z.infer로 TS 타입도 자동 생성해 준다두 라이브러리를 조합하면폼 상태 관리 → 입력값 취합 → ..

요즘 회사에서 프로젝트를 진행할 때 주로 Remix 풀스택 프레임워크를 사용하고 있다.그런데 사용하면서 불편한 점이 하나 있다.바로 서버 사이드 액션을 호출할 때 반드시 action 함수를 사용해야 한다는 점이다.물론 Remix의 구조는 장점도 많지만,개인적으로는 그 장점을 상쇄할 만큼 불편한 부분도 있다.예를 들어, 복잡한 코드 흐름 속에서 useFetcher()를 사용한 뒤,그 상태 값을 useEffect 내부에서 다시 검증해야 한다는 점이 매우 번거로웠다.간단한 프로젝트라면 상관없지만,파일 하나에 코드가 길어질수록 A 함수에서 서버에 요청을 보내고,응답을 B 영역(useEffect 등)에서 따로 처리해야 하는 구조는코드의 흐름이 끊겨 보여서 읽고 쓰기 모두 어려웠다. 그러다가 문득 생각했다.acti..

위 이미지처럼 많은 요소를 보여주는 리스트가 있다.여기에 몇 가지 문제가 있는데,트리거를 통해 해당 화면을 띄울 때, 즉각적으로 뜨지 못하고 약 1초 정도의 딜레이가 발생끌 때도 동일한 문제가 발생각 요소를 체크할 때 약 0.5초의 딜레이가 발생이 모든 문제의 원인은 현재 DOM Tree에 너무 많은 요소가 존재해서,렌더링 성능에 치명적인 영향을 주고 있기 때문이다.INP 측정 결과 (환경: CPU 스로틀링 ×4)결과는 처참했다. 기간7.72 초입력 지연65 ms처리 기간7,278 ms표시 지연380 ms✅ INP란?INP (Interaction to Next Paint)→ 사용자가 클릭, 탭, 키보드 입력 등 "상호작용"을 했을 때,화면에 실제 반영될 때까지 걸린 시간을 측정하는 지표또한 각 요소의 체..

포트폴리오를 만드는 중인데 외부 라이브러리 없이 만드는 중이라 직접 구현한 이미지 슬라이더를 블로그에 정리를 하려고 한다.구현 방법이미지가 보이는 고정된 영역, 해당 영역 밖으로 넘어가는 요소들은 overflow: hidden을 사용해서 숨김위의 영역 뒤에 이미지들을 삽입버튼을 클릭할 때마다 이미지들의 위치를 옮겨준다. container├── slider-container│ ├── button (left arrow)│ ├── slider-img-container│ │ └── img-inner-container│ │ └── Image│ └── button (right arrow)└── circle-container 사용하는 변수들와 훅 const [imgWidth, setI..