본문 바로가기

분류 전체보기125

Next.js에서 Sharp를 사용한 이미지 최적화: 왜 중요한가? Next.js에서 Sharp를 사용한 이미지 최적화: 왜 중요한가? Next.js는 최신 웹 애플리케이션 개발에서 자주 사용되는 프레임워크로, 다양한 기능을 통해 개발자들에게 강력한 도구를 제공합니다. 그중에서도 next/image 컴포넌트는 이미지 최적화를 자동으로 처리하여 성능 향상과 SEO에 도움을 줍니다. 하지만, 이 기능을 최대한 활용하기 위해서는 Sharp 라이브러리의 설치가 권장됩니다. 이 글에서는 Next.js에서 Sharp를 사용하는 이유, 그 필요성, 설치 방법, 그리고 타입스크립트 기반의 예시 코드를 살펴보겠습니다. Sharp란 무엇인가?Sharp는 Node.js 환경에서 고성능 이미지 처리 작업을 수행하기 위해 만들어진 라이브러리입니다. Sharp를 사용하면 이미지 파일을 효율적으로.. 2024. 8. 12.
HTML의 a 태그 가이드 a 태그란?a 태그는 앵커(anchor) 태그라고도 불리며, 주로 하이퍼링크를 생성하는 데 사용됩니다.이 태그를 사용하면 사용자가 한 웹 페이지에서 다른 웹 페이지로, 또는 같은 페이지 내의 다른 위치로 쉽게 이동할 수 있습니다.기본 문법a 태그의 기본 문법은 다음과 같습니다:링크 텍스트 여기서 href 속성은 하이퍼링크의 목적지 URL을 지정하고, "링크 텍스트"는 사용자가 클릭할 수 있는 텍스트입니다.예제1. 외부 웹사이트로 링크:Example 사이트로 이동2. 같은 사이트 내의 다른 페이지로 링크:About 페이지로 이동 3. 같은 페이지 내의 다른 위치로 링크섹션 1섹션 1으로 이동 속성a 태그에는 href 외에도 여러 가지 유용한 속성이 있습니다:target: 링크를 열 때 브라우저의 동작을 지.. 2024. 8. 6.
HTML <fieldset> HTML 태그 fieldsetHTML의  태그는 form 요소를 그룹화할 때 사용됩니다. 이 태그를 통해 논리적으로 관련된 폼 필드를 함께 묶어 시각적으로 구분할 수 있게 됩니다.  태그 안에는 보통  태그를 사용해 그룹의 제목을 설정합니다.  주요 특징을 다음과 같이 정리해보았습니다. 폼 그룹화:은 여러 폼 요소를 그룹으로 묶어줄 수 있습니다. 시각적으로 구분이 가능하게 해주며, 한 페이지 내에 폼이 길게  태그와의 조합: 태그는 의 첫 번째 자식 요소로 사용되어 그룹의 제목을 표시할 수 있습니다.에 정의된 텍스트는  경계선 위에 표시됩니다.접근성(Accessibility):과  태그는 스크린 리더가 폼 구조를 이해하는 데 도움을 주어 접근성을 향상시킵니다.스타일링:기본적으로 브라우저는 에 대해 테두리.. 2024. 7. 23.
React에서 비동기작업을 컴포넌트 로딩 전에 하면 useEffect를 사용하지 않아도 될 것 같은데, 왜 useEffect를 사용해서 처리하는걸까 ? useEffect?우선 useEffect가 어떤 역할을 하는지부터 알아보겠습니다.useEffect는 React에서 사이드 이펙트를 처리하기 위해 사용하는 훅입니다. 사이드 이펙트는 데이터 패칭, DOM 업데이트, 타이머 설정 등과 같이 컴포넌트의 렌더링과는 직접적으로 관련이 없는 작업들을 말합니다. useEffect의 주요 역할은 다음과 같습니다:컴포넌트 마운트 및 업데이트 시 작업 수행컴포넌트 언마운트 및 업데이트 시 작업 수행: 컴포넌트가 언마운트될 때나 업데이트 전에 이전 사이드 이펙트를 정리(cleanup)하는 작업을 수행합니다.종속성 배열: 두 번째 인자로 전달하는 배열을 통해 전달된 변수의 배열값이 변경될 때마다 실행하여, 사이드이펙트를 관리할 수 있습니다.React에서 초기에 데이터를 셋팅하.. 2024. 7. 22.
Missing Suspense boundary with useSearchParams 발단React로 웹 개발을 하다보면 url searchParams를 활용해서 데이터를 처리해야 하는 경우가 생기는데, IDE에서 이와 같은 에러를 내밀었습니다.React는 비동기 작업을 처리하면서 사용자에게 일관된 경험을 제공하기 위해 Suspense 경계를 사용합니다 왜?  useSearchParams는 React Router의 훅 중 하나로, URL의 쿼리 파라미터를 읽고 설정하는 데 사용됩니다. 이 훅을 사용할 때, React는 비동기적으로 쿼리 파라미터를 처리하므로 Suspense boundary를 설정하지 않으면 "Missing Suspense boundary" 오류가 발생할 수 있습니다. 비동기 작업을 처리하는 동안, React는 사용자가 비동기 처리가 완료될 때까지 기다리도록 하는 기본적인.. 2024. 7. 19.
flexbox vs inline block Flexbox를 사용하여 inline 요소를 표현하는 것과 display: inline-block을 사용하여 inline 요소를 표현하는 것의 성능 차이점을 알아보자특성Flexbox (display: inline-flex)Inline-Block (display: inline-block)목적컨테이너 내의 항목 배치 및 정렬자체 크기 조정 및 다른 요소와 나란히 배치레이아웃 가능 범위강력한 정렬, 정당화, 순서 변경 등제한적 (기본적인 정렬 및 마진만 가능)부모 요소의 속성 상속부모 요소의 속성을 상속받으며, 개별 설정이 가능함각 요소는 독립적으로 설정됨정렬 기능 지원수평 및 수직 정렬 지원수평 정렬만 가능속성 설정 유연성flex-grow, flex-shrink, flex-basis등 각 요소별 속성을 지.. 2024. 7. 18.
Webstorm에서 tailwindCSS와 clsx를 사용할 때 자동완성이 되지 않는 문제 해결방법 vscode에서는 기본적으로 지원하는 clsx 내부에 tailwindcss 자동완성이 웹스톰에서는 지원되지 않는다.. 돈내고 쓰는것보다 커뮤니티크기가 큰게 더 좋을걸까… 뭐 아무튼 여러가지 해결방법을 찾아 헤맨 끝에 완벽한 방법은 아니더라도 해결할 수 있는 방법을 찾아냈다. 웹스톰 → Settings → Language & Frameworks → Style Sheets → Tailwind CSS 설정으로 접근한다. 설정 항목 중 experimental 부분을 아래와 같이 수정한다. "experimental": { "configFile": null, "classRegex": ["[\"'`]([^\"'`]*).*?[\"'`]"] } 문제는 이렇게 하면 "" '' 와 같이 일반적인 Quotes를 사용할 때도 .. 2024. 4. 9.
# Worklet Worklet Worklet이란 Worklet 인터페이스는 Web Workers의 경량 버전이며 개발자가 렌더링 파이프 라인의 하위 수준에 접근할 수 있도록 해준다. Worklet을 사용하면 JavaScript 및 WebAssembly 코드를 실행하여 고성능이 필요한 경우 그래픽 렌더링 또는 오디오 처리를 수행 할 수 있다. - MDN 기본적으로 Worker는 한 Thread에 하나가 생성이 가능하지만, Worklet은 한 Thread에 여러 개 생성이 가능합니다. 메인 Thread에서 만들 수 있습니다. 독립적인 GlobalScope와 Event loop를 가집니다. Worklet Type PaintWorklet LayoutWorklet AnimationWorklet AudioWorklet 그리고 Ty.. 2023. 7. 15.
Worklets - React Native Reanimated Worklets Worklets의 궁극적인 목표는 뷰 속성을 업데이트하거나 UI 스레드에서 이벤트에 반응할 때 실행되는 작은 JavaScript 코드를 정의하는 것입니다. 이러한 목적에 대한 JavaScript에서 자연스러운 구성 요소는 간단한 함수였습니다. Reanimated를 사용하면 UI 스레드에 보조 JS 컨텍스트를 생성하고 JavaScript 함수를 실행할 수 있습니다. 유일한 필수 조건은 해당 함수가 맨 위에 "worklet" 지시문을 가져야 한다는 것입니다 function someWorklet(greeting) { 'worklet'; console.log("Hey I'm running on the UI thread"); } 함수는 우리의 필요에 맞는 훌륭한 구성 요소입니다. 실행되는 코드와 .. 2023. 7. 15.
반응형

티스토리툴바