윈도우에서는 문제가 없었으나,맥에서는 숫자키를 꾹 눌렀을 때 11111111 처럼 연속으로 입력되지 않고 한 번만 입력되는 경우가 있다.특히 금액 입력, 테스트 데이터 입력, 반복 입력 작업을 해야 할 때 꽤 불편하기 때문에 이 글을 작성하게 되었다. 원인맥의 기본 설정 때문이다.맥은 기본적으로 키를 길게 눌렀을 때, 반복 입력이 아닌 특수문자 선택 기능이 동작하면서 입력이 멈춰버린다. 해결 방법터미널에서 아래 명령어를 실행!defaults write -g ApplePressAndHoldEnabled -bool false 명령어를 실행했는데도 바로 적용이 안된다면 실행중인 앱을 재시작 해보자.(여전히 안된다면 재부팅...) 추가 설정반복 키 입력을 더 빠르게 하고싶다면 시스템설정>키보드 에서 키반복..
왜 운영 환경에서 console.log를 제거해야 할까?개발하다 보면 console.log를 여기저기 남기게 되는데,운영 환경의 경우 민감한 데이터가 노출될 수 있고, 불필요한 연산이 매번 실행되기 때문에 제거하자! 설정 - esbuild.drop// nuxt.config.jsexport default defineNuxtConfig({ vite: { esbuild: { drop: process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : [], }, },}) 선택적 제거 - esbuild.pureconsole.error나 console.worn는 유지하고 console.log만 골라서 제거하고 싶은 경우 pure 옵션..
JavaScript에서 흔하게 하는 실수를 정리해보자! async/await 에러 처리 누락에러 처리가 누락되면 에러가 조용히 사라지기 때문에 꼭 처리// 에러가 나도 아무 일도 안 일어남async function fetchUser() { const res = await fetch("/api/user"); return res.json();}// try/catch로 명확하게async function fetchUser() { try { const res = await fetch("/api/user"); if (!res.ok) throw new Error(`HTTP error: ${res.status}`); return res.json(); } catch (error) { con..
TypeScript를 사용하면서 활용할 수 있는 팁들을 정리해보자! 유틸리티 타입으로 타입 재사용- 이미 정의한 타입을 변형해서 사용 가능interface User { id: number; name: string; email: string; password: string;}// 모든 속성을 선택적으로 — 수정 API에서 유용type UpdateUser = Partial;// 일부 속성만 골라서 — 응답 데이터 타입으로 유용type PublicUser = Pick;// 일부 속성만 제외 — 민감한 정보 제거할 때type SafeUser = Omit; as const로 상수를 타입으로 활용- 상수와 타입을 따로 관리하지 않아도 되니 편리// status의 타입이 string으로 추론됨 — 너무 넓..
CSS 레이아웃 속성은 많지만, 실무에서 자주 쓰는 건 정해져 있는 경우가 많다.핵심만 빠르게 정리해보자..! 가운데 정렬Flexbox 하나로 수평/수직 모두 해결/* 화면 전체 가운데 정렬 */.container { display: flex; justify-content: center; /* 수평 */ align-items: center; /* 수직 */ height: 100vh;} Flexbox vs GridFlexbox- 1차원 (한 방향으로 나열)- 메뉴, 버튼/* 아이템을 가로로 쭉 나열 */.nav { display: flex; gap: 16px;} Grid- 2차원 (행과 열 동시에 다룰 때)- 대시보드, 카드 목록/* 3열짜리 카드 레이아웃 */.card-list {..
React로 개발하다 보면 성능 최적화를 위해 useMemo와 useCallback을 사용하게 되는데,두 훅을 언제 어떻게 사용해야 하는지 정리해보자 useMemo연산 결과 값을 메모이제이션const expensiveValue = useMemo(() => { return heavyCalculation(data);}, [data]); useCallback함수 자체를 메모이제이션const handleClick = useCallback(() => { doSomething(id);}, [id]); 언제 사용해야 할까?1. 자식 컴포넌트에 props로 전달되는 함수// 안 좋은 예// Parent가 리렌더링될 때마다 handleClick은 새로운 참조를 가진 함수가 됨// memo로 감싸져 있지만 prop..
Suspense 는 비동기 컴포넌트가 로드되는 동안 fallback UI를 보여주는 Vue의 내장 컴포넌트아직 실험적 기능이라 프로덕션 환경에서는 신중한 사용 필요 기존 방식- 매번 loading, error 상태 직접 관리- 중복된 코드 로딩 중... 에러 발생: {{ error }} Suspense를 사용한 방식- 로딩 상태 자동 관리 로딩 중... Vue3 에서의 사용 {{ user.name }} {{ user.email }} 사용자 정보를 불러오는 중... 여러 비..
Image Lazy Loading웹 성능 최적화 할 때 이미지 레이지 로딩은 비용 대비 효과가 좋은 방법 중 하나페이지 로드 시 모든 이미지를 한 번에 불러오지 않고, 사용자가 실제로 보게 될 때 필요한 이미지만 로드하는 기법 Vue3에서의 사용Vue3에서는 브라우저의 네이티브 lazy loading 활용 가능 Intersection Observer API 활용- 더 세밀한 시점 제어가 필요한 경우 사용!! Composableexport function useLazyImage(el, callback) { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting..
ECMAScriptECMA(European Computer Manufacturers Association)는 정보 통신 시스템의 표준을 관리하는 국제 표준화 기구ECMAScript는 ECMA가 정의한 스크립트 언어 표준으로, JavaScript의 공식 명칭 버전 히스토리ES3 (1999)- 정규표현식, try/catch 추가- 약 10년간 표준으로 사용 ES5(2009)// strict mode'use strict';// Array 메서드[1, 2, 3].forEach(item => console.log(item));[1, 2, 3].map(x => x * 2);[1, 2, 3].filter(x => x > 1);// Object 메서드Object.create();Object.keys();// JSON..
문제 상황로컬에서 프론트엔드 개발할 때 localhost:8080으로 실행되는데,백엔드 API가 특정 서브 도메인(예를 들어 test.kr)에서만 호출을 허용하는 경우가 있음// localhost:8080에서 호출 시 CORS 에러 또는 거부됨fetch('https://api.test.kr/users')// hjkang.test.kr에서 호출해야 함fetch('https://api.test.kr/users') 따라서 Nginx를 이용하여 localhost:8080 -> 일치하는 서브도메인으로 설정한 후 api를 호출하도록 설정 필요 설치1. Nginx 설치 (Mac 기준)# 설치brew install nginx# 설치 확인nginx -v 2. /etc/hosts 에 서브도메인 등록sudo vi /et..