FrontEnd/React4 JSX? 그게 뭔데? 1. JSX의 정의JSX는 JavaScript XML의 줄임말로, JavaScript 안에서 HTML 같은 문법을 사용할 수 있게 해주는 문법 확장입니다. JSX는 React 컴포넌트에서 UI를 정의하는데 매우 유용하며, 보다 직관적으로 UI 구조를 작성할 수 있습니다.쉽게 말해, JSX는 JavaScript 코드를 작성하면서 HTML 태그를 넣을 수 있도록 도와주는 도구입니다. 이를 통해 HTML 요소들을 함수형 컴포넌트 내부에서 정의하고 조작할 수 있습니다. JSX의 기본 문법:const element = Hello, world!;위 코드는 JavaScript로 작성되어 있지만, HTML 요소를 포함하고 있는 것을 볼 수 있습니다. JSX를 사용하지 않으면 UI를 JavaScript 코드로 아래와 같.. 2024. 9. 10. Next.js에서 Sharp를 사용한 이미지 최적화: 왜 중요한가? Next.js에서 Sharp를 사용한 이미지 최적화: 왜 중요한가? Next.js는 최신 웹 애플리케이션 개발에서 자주 사용되는 프레임워크로, 다양한 기능을 통해 개발자들에게 강력한 도구를 제공합니다. 그중에서도 next/image 컴포넌트는 이미지 최적화를 자동으로 처리하여 성능 향상과 SEO에 도움을 줍니다. 하지만, 이 기능을 최대한 활용하기 위해서는 Sharp 라이브러리의 설치가 권장됩니다. 이 글에서는 Next.js에서 Sharp를 사용하는 이유, 그 필요성, 설치 방법, 그리고 타입스크립트 기반의 예시 코드를 살펴보겠습니다. Sharp란 무엇인가?Sharp는 Node.js 환경에서 고성능 이미지 처리 작업을 수행하기 위해 만들어진 라이브러리입니다. Sharp를 사용하면 이미지 파일을 효율적으로.. 2024. 8. 12. 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. 이전 1 다음 반응형
