Suzie's Blog

커서가 깜빡이는 효과를 구현했는데 커서 (|) 가 생겼다 없어질 때마다 글자가 좌우로 살짝 움직이는 현상이 생김.이유는 커서가 표시될 때 공간을 차지하고, 사라질때 "" (빈 문자열)이라 해당 공간이 없어지면서 생기는 흔들림이다.이럴때 "" 대신 /u00A0 (non-breaking space)를 넣으면 문제를 깔끔하게 해결할 수 있다.{showCursor ? "|" : "\u00A0"}\u00A0 는 눈에는 안보이지만, 공간을 차지하는 특수 공백 문자로 커서가 없어도 자리를 유지하게 해줌

as const 란?as const 는 값을 리터럴 타입(literal type)으로 고정시키는 TypeScript 문법.리터럴 타입 (Literal type) 이란?값 자체를 타입으로 사용하는것을 말함. 보통 변수의 타입은 string, number, boolean처럼 넓은 타입으로 정해지지만 리터럴 타입을 특정한 하나의 값만 가질 수 있도록 타입을 제함.기본적으로 TypeScript 는 변수를 선언할 때, 값을 기반으로 넓은 타입을 추론함.const color = "red"위처럼 작성하면 color의 타입은 stirng으로 추론됨. 그리고 어떤 문자열이든 다시 넣는게 가능하지만 as const를 사용하면const color = "red" as const;color의 타입이 "red"로 고정되고 더 이..

TypeScript 제네릭 함수란?TypeScript 에서 제네릭 함수는 다양한 타입에 대해 작업할 수 있는 함수.제네릭을 사용하면 함수의 입력과 반환값의 타입을 유동적으로 정의 가능 -> 코드의 재사용성과 유지 보수성을 높이는데 큰 도움이 됨.제네릭 함수 특징 : 타입을 미리 알지 못해도, 함수가 어떤 타입을 다룰지 코드가 실행되는 시점에 결정 가능.예 : 함수의 매개변수나 반환값의 타입을 동적으로 처리하고 싶을 때 제네릭 사용. 제네릭은 타입 매개변수로 T와 같은 플레이스홀더를 사용하여 타입을 동적으로 정의function identity(value: T):T { return value;}let result = identity(5); // result는 'number' 타입let result2 = id..

문제상황 : Next.js 15에서 i18next를 설치하자 "TypeError: URL.canParse is not a function"오류 발생.이 에러는 "URL.canParse()"라는 함수가 브라우저나 Node.js 환경에서 아직 정식으로 지원되지 않아서 발생.특히 "i18next", "resourcesToBackend" 같은 라이브러리 내부에서 이 함수를 사용하는 경우, 별도로 처리해주지 않으면 앱이 크래시가 남.💡 해결 방법 : 간단한 폴리필(Polyfill) 추가하기다행히 이 문제는 "폴리필(Polyfill) 을 통해 쉽게 해결 가능.폴리필이란?지원되지 않는 기능을 흉내 내는 코드다음 코드를 앱 진입점 (예: app/layout.tsx 또는 app/page.tsx)상단에 추가하면 에러메세..

17 March 2025 (Mon) , Seoul일 년 전부터 준비하던 순간이 드디어 오고야 말았다.나는 캐나다 짐 + 전세계약 정리를 동시에 진행해야 해서 서울에 살고 있는 집을 아예 정리해버려야 했다.당근 거래 및 나눔으로 정리하고 택배 3개는 본가로 보냈지만 쉽지 않았다. 다행히 친동생이 같은 빌딩에 살아서 많은 도움을 주었다 🥲가기 직전이라 매일 약속이 있었고 집에있는 시간이 많이 없다 보니 더 힘들었던 것 같기도.. 😅전세계약이 4월 1일까지여서 전세금을 돌려받지 못하면 어쩌지 하며 불안해했지만 일단.. 그냥 가는 걸로.. ㅋㅋㅋ고맙게도 제주에서 올라온 친구와 인천공항에서 마지막 고등어세트 한식을 먹고 작별 인사 후 입국장(?) 으로 들어갔다.무슨 사람들이 월요일에 이렇게 여행을 많이가는지...

이벤트 루프(Event Loop)의 개념을 설명하고, 아래 코드가 실행될 때 콘솔에 출력되는 순서를 예측해보세요.console.log("A");setTimeout(() => console.log("B"), 0);Promise.resolve().then(() => console.log("C"));console.log("D"); 더보기더보기더보기✅ 정답 : "A", "D", "C", "B"- 코드가 실행이 되고 "A" 가 처음 실행되어 콘솔에 찍힘.- WebAPI에서 "B" 가 실행되고 task queue로 이동- 자체적 비동기인 Promise는 microtask queue로 이동- 마지막 코드가 실행되고 "D" 가 콘솔에 찍힘.- 우선순위가 microtask queue가 우선이므로 "C" 가 콘솔에 찍히고..

다음 코드를 실행하면 어떤 출력이 나올까?async function fetchData() { return "Data fetched!";}fetchData().then(data => console.log(data));console.log("Fetching data...");질문 : 콘솔에 출력되는 결과는?더보기✅ 정답 Fetching data... Data fetched!💬 설명- `fetchData` 함수는 비동기 함수로 "Data fetched!" 라는 값을 가진 Promise를 return- `fetchData().then(data => console.log(data));` 는 Promise가 이행되면 "Data fetched!"를 출력하게 되지만, 이는 비동기적으로 실행됨- 반면 `console..

function test() { var a = 10;}console.log(a);위 코드를 실행하면 어떤 결과가 나올까?A) 10B) undefinedC) ReferenceErrorD) null 더보기✅ 정답: C (ReferenceError)설명var는 함수 스코프(Function Scope)를 가짐.var로 선언한 변수는 함수 내부에서만 유효함 (즉, 함수 바깥에서는 접근 불가능!)즉, a는 test() 함수 내부에서만 존재하고 함수가 끝나면 사라짐.함수 바깥에서 console.log(a);를 실행하면 a가 정의되지 않았기 때문에 ReferenceError가 발생함.오답노트 : 나는 B undefined 라고 생각했는데 생각해보면 정의 되어있지 않는 상태이기때문에 ReferenceError 로 봐야한다

개발할때 유용하게 사용한 useEventListener hook 이다. (Next.js, TypeScript)src > utils > hooks 에 저장 후 import하여 사용 하면 코드도 간편해지고 편함.import { useEffect, useRef } from "react";function useEventListener( eventType: K, handler: (event: WindowEventMap[K]) => void, element: HTMLElement | Document | Window | null = typeof window !== "undefined" ? window : null) { const savedHandler = useRef void | null>(n..

최근 Next.js로 프로젝트를 진행하면서 이미지를 저장하는 두 가지 방식이 있는 걸 알게 되었다.1. public 폴더에 저장하기2. src/assets 에 저장하기둘 중 하나만 쓰면 되는 거 아니야?라는 생각이 들었지만, 상황에 따라 둘 다 쓰는 게 유리할 수 있다는 것을 알게 되어 공유하고자 한다. 일단 특징을 표로 정리해 보았다.특징publicsrc/assets사용 방식URL 접근 가능 (import 도 가능)Import 로 불러옴캐싱 문제업데이트 된 이미지가 이전 이미지와 파일명이 같다면 옛날 파일을 보여줄 수도 있음해시된 파일명으로 최신 파일만 표시번들링번들링 되지 않음번들링과 최적화 자동으로 진행성능번들 크기에 영향을 안줌자주 사용하면 번들 크기가 커질 수 있음최적화Next/image 와 함..