JavaScript에서 HTML 태그 제거 및 문자열 자르기
웹 애플리케이션을 개발할 때 사용자 생성 콘텐츠를 표시하는 경우가 많습니다. 일관된 표시를 위해 이러한 HTML 태그를 제거하고 콘텐츠의 길이를 특정 길이로 자를 필요가 있습니다. 함수 개요 truncateDescription2 함수는 문자열 입력 description...
Clerk Dev 모드와 Production 모드 차이
Clerk는 사용자 인증 및 회원가입을 위한 라이브러리로, 개발 모드와 프로덕션 모드 두 가지 환경에서 작동합니다. 개발 모드 (dev mode) 목적 : 애플리케이션 개발 및 테스트. 클라이언트와 서버의 인증 정보가 덜 엄격하게 관리됨. 프로덕션 모드 (product...
Next.js 14 가장 기본적인 Metadata 설정
Next.js를 사용하면 SEO 최적화라는 얘기가 나옵니다. SSR을 통한 SEO 최적화도 맞지만, 공유성을 높이기 위해서는 Metadata 관리에 대해서도 빠질 수 없습니다. Next.js Metadata란? Metadata는 Next.js에서만 사용하는 게 아닙니다...
robots.txt와 robots.ts의 차이
결론 robots.txt 와 robots.ts 의 선택은 웹사이트의 특정 요구 사항과 기술 스택에 따라 다릅니다. 정적 사이트 나 간단한 크롤링 규칙을 가진 사이트의 경우, robots.txt 가 가장 쉽고 효과적인 방법입니다. 동적 사이트 에서 다양한 크롤링 규칙을 ...
Next.js에서 Metadata 크롤링 거부 방법
웹 크롤링은 데이터를 수집하고 분석하는 중요한 도구지만, 모든 웹사이트가 크롤링을 허용하는 것은 아닙니다. 특히 민감한 정보나 개인 데이터를 보호하기 위해 일부 웹사이트는 메타데이터에 대한 접근을 제한해야 할 필요가 있습니다. 메타데이터 크롤링은 웹페이지의 메타데이터,...
React 'use client'와 'use server'에 대해서 Canary
Next.js뿐 아니라, React 19 에서 도입된 서버 Component와 Client Component를 구분하기 위한 지시어입니다. 서버 또는 클라이언트에서만 실행되어야 하는 걸 명시적으로 알릴 수 있기 때문에, 성능 최적화와 명확한 코드 구조를 달성할 수 있습...
isComposing 속성을 이용하여 입력 중 상태 감지하기
키보드 입력은 웹과 앱 개발에서 흔히 볼 수 있는 사용자 상호작용 중 하나입니다. 사용자가 입력을 완료했는지 아니면 여전히 작성 중인지를 판단하는 것은 사용자 경험을 향상시키는 데 중요한 역할을 합니다. isComposing 속성을 활용하면 사용자의 입력 상태를 감지할...
Optional Chaining 가이드
Optional Chaining ?. 은 JavaScript에서 중첩된 객체의 프로퍼티에 안전하게 접근할 수 있게 해주는 연산자입니다. 이 기능을 사용하면, 프로퍼티가 존재하지 않을 때 에러를 방지하며 코드의 안정성을 높일 수 있습니다. Optional Chaining...
useEffect 생명주기 이벤트 처리 (componentDidMount, DidUpdate, WillUnmount)
생명주기 이벤트 처리란, 컴포넌트의 생성부터 소멸까지 일어나는 여러 단계에서 특정 코드를 실행하는 것을 말합니다. 이는 컴포넌트가 사용자의 인터페이스에 나타나고, 업데이트되며, 마지막으로 제거될 때까지의 과정을 포함합니다. React에서는 이러한 과정을 생명주기(Lif...
Next.js 에러 페이지 Custom 404 page
게시글 작성 전에 오류 페이지를 FrontEnd 섹션에 작성할지, BackEnd 섹션에 작성할지 고민했습니다. 사용자에게 보여지는 오류 페이지 측면에서 접근했기 때문에, 이 내용을 FrontEnd 섹션에 다루기로 결정했습니다. 기본 에러 페이지 관리 N ext.js에서...
왜 React에서 form을 사용해야 할까?
사용자로부터 데이터를 받는 일은 매우 흔합니다. 예를 들어, 사용자가 블로그 포스트를 작성하거나 회원가입을 할 때 정보를 입력해야 하죠. 이때, React와 같은 현대적인 프레임워크에서는 어떻게 데이터를 효율적으로 수집하고 관리할 수 있을까요? 구조화와 접근성
[Next.js] loading.js에 대해서 알아보자
loading.js 를 활용하면 React Suspense를 사용하여 의미 있는 로딩 UI를 생성할 수 있습니다. 이 컨벤션을 통해 서버에서 콘텐츠가 로드되는 동안 즉각적인 로딩 상태를 표시할 수 있으며, 렌더링이 완료되면 새로운 콘텐츠로 자동으로 교체됩니다. (컨벤션...