The ordinary developer, The ordinary developer,

20. Q: use client 지시어는 왜 필요하고 어디에 위치해야 하나요?A: 클라이언트 전용 컴포넌트임을 명시하기 위해 필요하며, 파일 최상단에 선언해야 합니다. 이 선언이 있어야 상태, 이벤트, 훅 등이 작동합니다.💡 설명:하위 컴포넌트도 클라이언트로 인식지시어 누락 시 서버 컴포넌트로 처리되어 오류 발생build 시 자동 구분되지 않으므로 명시 필요21. Q: middleware.ts는 App Router에서도 사용할 수 있나요?A: 네, App Router에서도 사용할 수 있으며, 요청 전단에서 리다이렉트, 인증 검사 등을 처리합니다. Next.js Edge Runtime에서 실행됩니다.💡 설명:/middleware.ts 파일로 루트에 생성쿠키 기반 인증 처리 가능빠르고 가벼운 실행 환경 ..

예전에 실무에서 일을 했을 때, pdf나 jpg 파일 링크를 클릭하면 사용자가 다운받게 하는 기능을 만든 적이 있다. 이렇게 보면 매우 간단하지만, PM이 요구한 다음과 같은 조건이 나를 난감하게 했다. 새 탭 열기 없이지정된 파일명으로 다운받아지게 할 것...특히 새 탭 열기 없이 그래서 열심히 서치를 하던 중 Blob의 존재를 알게 됐고, 위 문제를 손쉽게 해결할 수 있게 해주었다.그럼 저 까다로운 조건을 가능하게 해준 고마운 Blob이란 건 뭘까? Blob이란?Blob은 Binary Large Object의 준말로, 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 이진(Binary) 형태로 임시 저장할 수 있는 객체다. Blob을 비유하자면 택배 상자와 같다.상자 안에 어떤 물건(데이터)가 들..

Next.js의 dynamic import란? Next.js에서 로딩 최적화를 위해 제공하는 기술 중 하나로 dynamic import가 있다. dynamic import를 한 마디로, 아주 쉽게 요약하면 다음과 같이 말할 수 있다. "필요할 때만" 컴포넌트를 불러오는 것 기본적으로 자바스크립트에서는 정적 import를 사용하면 모든 코드를 번들에 포함시킨다. 하지만 dynamic import를 사용하면, 특정 컴포넌트를 별도의 청크(Chunk)로 분리시켜 필요할 때만 불러온다. Dynamic import를 사용하는 이유 초기 로딩 속도 최적화페이지 최초 로딩 시 dynamic import에 포함된 요소는 부르지 않아서 시간 절약렌더링 지연 관리가벼운 컴포넌트를 먼저 렌더링하고, 무거운 컴포넌트는 나중..

TypeScript의 Record란? 타입스크립트에서 타입 안정성을 도와주는 유틸리티 중 하나로 Record가 있다. 객체 타입을 만들 때 쓰이는 도구로, Record 형태로 코드에서 본 적이 있을 것이다. Record의 기본 개념RecordK: key 타입V: value 타입Record는 각각의 Key에 대해 Value 값이 매핑된 객체를 만들어준다. Record의 기본 예시type UserRoles = Record; // 모든 key가 string, value가 boolean 타입const users: UserRoles = { admin: true, member: true, guest: false}; 유니온 타입과 함께 활용하기 보통 실무에서는 유니온 타입과 함께 사용된다.typ..

TypeScript의 제네릭(Generic)이란? 제네릭은 TypeScript의 정체성을 강화시켜주는 문법 중 하나다. 처음에는 문법이 난해하게 느껴져서 어렵기도 하지만, 한 번 습득하고 나면 타입 추론이라는 타입 스크립트의 장점을 극대화시켜주는 도구라는 걸 알 수 있다. 제네릭의 기본 개념제네릭을 한 줄로 정의하면 이렇게 정의할 수 있다.함수나 클래스의 타입을 하나로 고정하지 않고 다양하게 설정할 수 있게 도와주는 문법 제네릭의 기본 코드는 이렇다.function identity(value: T): T { return value;} : 타입 변수로, 하나로 고정되지 않고 string, number 등 여러 타입이 될 수 있음(value: T) : 입력 타입T: 반환 타입 사용 예시const..

Tailwind css로 컴포넌트 디자인 시스템 구축하기Tailwind css는 몇 년 전부터 프론트엔드계에서 인기를 끌고 있는 css 프레임워크다. 유틸리티 우선(Utility-First) css로, 따로 css 파일을 작성하지 않고 mb-4 , bg-black 과 같이 유틸리티 클래스를 활용해서 HTML에 입혀주면 된다. 기존 css 파일과의 비교 전통적인 css 방식/* style.css */.button { background-color: blue; color: white; padding: 12px 24px; border-radius: 8px;}// button 클래스 안에 여러 스타일 속성을 넣어줌. Tailwind의 유틸리티 우선 방식제출// button 이라는 클래스를 사용하지 않고 ..

Framer Motion에서 event.currentTarget 사용 시 null이 되는 이유 지난 포스팅에서 Framer Motion 프로젝트에서 event.currentTarget을 사용하는데 자꾸 null이 떠서 이벤트 조작에 어려움을 겪었단 내용을 쓴 적이 있다. 이 내용에서 심화해서, 오늘은 이런 현상이 일어나는 원인과 React의 이벤트 처리 방식인 SyntheticEvent 에 대해 자세히 살펴보고자 한다. 💥 문제의 코드 { if (event.currentTarget != null) { const target = event.currentTarget; target.style.transform = "translateY(-8px)"; // ❌ 오류 발생 가능 } }}/> ..

들어가기 앞서, Motion 라이브러리에 대해Motion 라이브러리는 리액트에서 애니메이션 효과를 구현하기 위한 라이브러리다. 화면 요소가 등장할 때 위아래로 튀어오르거나, 클릭했을 때 커졌다 작아지는 등의 다양한 시각적인 효과를 구현할 수 있다. 이전에는 이런 애니메이션 효과를 적용하려면 css에서 @keyframs를 일일이 정의해야 했지만, 모션 라이브러리를 통해 간단하게 JS 코드 내에서 구현할 수 있게 되었다. 📦 기본 설치npm run motion을 통해 간단하게 설치할 수 있다.npm run motion 사용 예시 사용하고자 하는 html 요소에 motion.을 붙이고 각종 속성을 주면 된다. Motion에서 whileInView + hover 충돌 해결기 구현하고자 했던 효과 ..