Hoo_Dev

현재 해당 프로젝트는 두가지의 SEO 감점 요인을 가지고 있다. 1. 문서에 title이 없음 2. description문서가 없음 이 두가지가 무엇인가? 빨간 원 - title 파란 네모 - description 두 가지를 해결 하기 위한 방법 description에 대한 해결 방법 (title 같은 경우는 document에서 지정 해주니 에러가 나왔다. 자세한 내용은 아래 링크 참고) https://nextjs.org/docs/messages/no-title-in-document-head no-title-in-document-head | Next.js No Title in Document Head Prevent usage of with Head component from next/document. A..

버튼들과 a태그에 적절한 이름이 있지 않아 스크린리더에게 좋지 않은 사용자 경험을 주고있다. element가 빠진 부분은 SEO 개선에서 해결하고자 한다. 해당 오류가 생긴 곳에 aria-label 속성을 태그 안에 추가시켜줌으로서 각 버튼들과 태그의 기능에 대해 명시해준다. (aria-label을 사용 할 경우 voiceover 기능으로 웹 화면을 보지 못하는 사용사들에게 음성으로 해당 UI들의 기능을 음성으로 설명해준다.) https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label aria-label - Accessibility | MDN The aria-label attribute defines a str..

이전에 포스팅에서 저하된 성능들에 대한 개선을 진행 해 볼 예정이다. Largest Contentful Paint (LCP) 최적화 https://nextjs.org/docs/api-reference/next/image#priority next/image | Next.js Enable Image Optimization with the built-in Image component. nextjs.org 해당 서비스를 개발자 모드에서 실행 해보면 다음과 같은 warning이 콘솔창에 나타나는데 이가 뜻하는 것은 Image 태그 안에 priority 속성을 true로 바꿔주라는 말인데 그 이유는 모든 priority의 기본값은 false이고, 공식 문서를 참고하면 되도록이면 웹사이트에서 스크롤을 내리지 않고 제..

Next.js를 활용한 네이버 맵 관련 토이 프로젝트의 웹 성능 검사를 진행해보려 한다. 테스트 하고자 하는 페이지의 주소로 접속 후 Lighthouse 탭으로 이동한다. Performance 웹 페이지의 로딩 속도 등 실제 성능을 측정합니다. Progressive Web App PWA로 부르며, 웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크합니다. Best practices Best practices를 따라 개발되었는지 체크합니다. Accessibility 접근성입니다. 보통 폰트 사이즈, 메뉴간 간격 등을 측정합니다. SEO Search Engine Optimization의 약자로 검색 엔진 수집 최적화에 관련된 부분입니다. 여긴 아마 웹 사이트 운영하시면 많이 민감하게 신..

https://nextjs.org/docs/basic-features/data-fetching/get-static-paths Data Fetching: getStaticPaths | Next.js Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. nextjs.org getStaticPaths를 사용하여 빌드 타임에서 페이지 경로를 정적으로 생성해둔다. ex) getStaticPaths export const getStaticPaths: GetStaticPaths = async () => { const stores = (await import('../..

SWR은 React 프레임워크인 Next.js를 만든 팀이 만들었다. https://swr.vercel.app/ko 데이터 가져오기를 위한 React Hooks – SWR 데이터 가져오기를 위한 React Hooks Suspense Pagination swr.vercel.app react query에 비해 진입 장벽이 낮고, fetch 속도가 빠르며 코드가 경량화 돼 있는 특징이 있다. useSWR SWR은 useSWR이라는 훅을 사용하여 데이터를 조작한다. const { data, error, isValidating, mutate } = useSWR(key, fetcher, options) 파라미터 key : 요청을 위한 고유한 값 fetcher : 데이터를 조작하기 위한 함수를 반환하는 Promise..

Next.js 프로젝트를 처음 생성하면 기본적으로 제공되는 _document와 _app이 제공된다. 오늘은 이 두 페이지의 사용 목적에 대해 알아보려고 한다. _app _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 루트 컴포넌트이다. 페이지에 적용 할 공통 레이아웃을 정의 할 때 사용 할 수 있다. ex) import '@/styles/globals.css' import type { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { return } 가장 초기 생성 된 _app의 코드를 확인해보면 1. Component 속성 값은 서버에 요청한 페이지가 된다. 아래 예시를 보게 된..

A const NoSSR = () => { return width: {window.innerWidth}; }; export default NoSSR; B import type { NextPage } from 'next'; import dynamic from 'next/dynamic'; import NoSSR from '../../components/section1/NoSSR'; const Example: NextPage = () => { return ( SSR에서 윈도우 객체 불러오기 no SSR ); }; export default Example; 보통 React를 사용 할 때 A컴포넌트를 B컴포넌트에서 사용 할 때 일반적인 import를 통해 가져오게 된다. 하지만 Next에서 위와 같은 방식으로 w..

getServerSideProps getServerSideProps는 이전 게시물에 말했듯이 두 가지 pre-rendering 기능 중 하나를 의미한다. pre-rendering의 뜻을 다시 한 번 짚고 간다면 사전에 미리 HTML을 렌더링 하는 것인데 즉, HTML을 미리 생성하고 최소한의 js를 연결 시킨 후 클라이언트에서 요청이 들어오면 해당 HTML을 로드하면서 나머지 js를 불러와 화면에 렌더링 해주는 방법이다. getServerSideProps 예시코드 import type { GetServerSideProps, NextPage } from 'next'; interface Props { data: number; } const Example: NextPage = ({ data }) => { re..

위 개념을 먼저 알기 전에 PreRendering에 대해 먼저 짚고 넘어가려 한다. PreRendering이란? Next.js에서는 두 가지 PreRendering 방식을 제공하는데, Static Generation(정적 생성 방식)과, Server-Side Rendering 방식이다. Next.js에서는 Static Generation을 권장한다. Next.js에서 Static Generation 을 사용하는 법을 예제를 통해 간단히 알아보자. getStaticProps import type { NextPage } from 'next'; interface Props { data: number; } const Example: NextPage = ({ data }) => { return ( getStati..