React.js & Next.js
-
input image 미리보기 구현하기React.js & Next.js 2023. 3. 31. 23:15
Prerequisites useRef typescript FileReader Object Code import React, { useRef } from 'react'; const Test3 = () => { const imgRef = useRef(null); const readImage = (e: React.ChangeEvent) => { if (!e.target.files?.length) return; const imageFile = e.target.files[0]; const reader = new FileReader(); reader.addEventListener('load', (e: ProgressEvent) => { if (!e || !e.target) return; if (typeof e.ta..
-
빠르게 시작하는 드래그 앤 드롭React.js & Next.js 2023. 3. 26. 20:15
prerequisites typescript interface react.js useRef useState Props inline-styling conditional render 전체 코드 import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'; interface IFileTypes { id: number; object: File; } const basicInputStyle = { width: '100%', height: '200px', border: '2px solid', borderRadius: '10px', cursor: 'pointer', transition: '0.12s ease-in', displa..
-
Next Image load super slowReact.js & Next.js 2023. 1. 4. 21:39
목차 문제 상황 대안 결과 응답 헤더 정리 문제 상황 현재 개발 중인 우리 웹 사이트는 next/Image를 통해 image 리소스를 제공하고 있습니다. next/image의 경우 기본 태그와 달리 원본 파일 형식(. jpg,. png, …)을 차세대 형식인 .webp 로 변환해주는 기능을 담당하고 있으며 이미지 크기(px, size 둘 다) 또한 최적화해 줍니다. 이번에 발생한 문제는 next/Image를 통해 렌더링 하려는 이미지 리소스(20-40 개 또는 그 이상)가 많을 때, 이미지 리소스 자체의 크기는 줄었지만, 화면에 이미지를 정상적으로 제공할 때까지의 시간이 너무 오래 걸린다는 것이었습니다. 이 모든 상황은 캐시가 되기 이전 최초 렌더링 상황에 대한 이야기로, 캐시가 된 이후에는 계속 성능을..
-
냅다 시작하는 리액트 쿼리 (SSR편)React.js & Next.js 2022. 12. 31. 21:05
$ npx create-next-app test --typescript $ yarn add @tanstack/react-query _app.tsx import React from 'react'; import type { AppProps } from 'next/app'; import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'; function MyApp({ Component, pageProps }: AppProps) { const [queryClient] = React.useState(() => new QueryClient()); return ( ); } export default MyApp; hydration에 대..
-
냅다 시작하는 리액트 쿼리 (개념편)React.js & Next.js 2022. 12. 31. 19:44
들어가며 대부분의 예제는 이전에 작성한 글의 함수 및 흐름을 그대로 사용하였습니다. 냅다 시작하는 리액트 쿼리 (예제편) 냅다 시작하는 리액트 쿼리 (예제편) $ npx create-next-app test --typescript $ yarn add axios @tanstack/react-query _app.tsx // 🗂/pages/_app.tsx import React from 'react'; import type { AppProps } from 'next/app'; import { QueryClient, Query junheedot.tistory.com 목차 Query Basics Query Keys Query Functions Query Client Query Basics 쿼리는 쿼리의 고유키에 ..
-
냅다 시작하는 리액트 쿼리 (예제편)React.js & Next.js 2022. 12. 27. 21:53
냅다 시작하는 리액트 쿼리 (예제편) $ npx create-next-app test --typescript $ yarn add axios @tanstack/react-query _app.tsx // 🗂/pages/_app.tsx import React from 'react'; import type { AppProps } from 'next/app'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; function MyApp({ Component, pageProps }: AppProps) { const [queryClient] = React.useState(() => new QueryClient()); return ( )..
-
예제로 배우는 react contextReact.js & Next.js 2022. 12. 18. 15:13
Prerequisite next.js typescript react-context 들어가기에 앞서 Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능입니다. 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용하는데요, 꼭 전역적일 필요는 없습니다. Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다" 라고 접근을 하시는 것이 좋습니다. - velopert 상태관리와 react context의 차이? 상태 관리 라이브러리는 상태가 수정되면 관련 컴포넌트만 다시 렌더링됩니다. 이는 업데이트로 인해 모든 컨텍스트 컨슈머(Consumer) 및 그 하위 항목이 다시 렌더링되는 Context API와는 대조..
-
Next.js - 다양한 SNS 플랫폼에 대응할 수 있는 SEO 도입하기React.js & Next.js 2022. 10. 21. 21:12
현재 상황 제일 상위 (public) 디렉토리 Head 에 걸어놓은 대표 meta 태그로 인해, 특정 SNS에서 설정한 description이 노출되지 않은 상황입니다. 디스코드 / 슬랙 디스코드와 슬랙 모두 트위터 태그의 영향을 받습니다. 하지만 디스코드의 경우에는 하위 페이지에 대한 메터태그가 노출되지 않는 상황이고, 슬랙은 노출되는 상황입니다. 카카오톡, 인스타그램, 페이스 북의 경우에는 모두 의도대로 노출되고 있으나 한국 외에 사용하고 있는 SNS에 대한 SEO도 신경 써야 하기 때문에 Next.js 프레임워크 도입부터는 이전과 다른 방향으로 적용할 예정입니다. 플랫폼마다 적용되어 미리보기로 보이는 메터 태그의 정보가 다양하기 때문에 모든 플랫폼에서 원하는 미리보기를 만들 수는 없습니다. 하지만,..