2024/10 검색 결과

해당 글 14건

[eslint] if 문과 관련된 규칙

if 문과 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.최종 규칙을 보여드리면 아래와 같습니다.하나씩 알아보도록 하겠습니다.{ "rules": { "curly": ["error", "all"], "no-constant-condition": "error", "no-lonely-if": "error", "no-negated-condition": "warn", "no-else-return": "warn" }}curlyif문 외에 중괄호를 사용하는 if, else, for, while 등에 적용되는 규칙입니다.강제로 중괄호를 작성하게 함으로써 가독성을 높이고 실수를 방지할 수 있습니다.// badif (condition) statement;// goodif (conditi..
공유/ESLint 2024. 10. 21. 18:44

[eslint] 불필요한, 의미없는 코드를 찾기

코드를 작성하면 불필요하고 의미없는 코드가 생기는 경우가 있습니다.이때 일일이 찾기가 힘든데 eslint를 이용하여 불필요한 표현식을 찾을 수 있습니다. { "rules": { "no-unused-expressions": "error" }}no-unused-expressions아래 코드는 정상적으로 실행되지 않는 불필요한 코드입니다.접근은 가능하지만 기능이 존재하지 않습니다.위 규칙을 사용하면 아래와 같은 코드를 찾아줍니다. const router = useRouter();router;1 + 2;
공유/ESLint 2024. 10. 21. 18:41

NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법

NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법.페이지 라우터는 page 디렉터리 구조에 따라 자동으로 라우트가 생성됩니다.프로젝트의 모든 라우트를 알아야 하는 필요성이 생겨 구현하였습니다.코드type Page = string;export const getStaticProps: GetStaticProps = async () => { const pagesDir = path.join(process.cwd(), 'pages'); const pages = getAllPages(pagesDir); return { props: { pages, }, };};function getAllPages(dir: string, basePath: string = ''): Page[] {..
공유/React, Next 2024. 10. 16. 18:33

Next에서 특정 페이지에 사용자가 머무는 시간 측정 방법

구글 애널리틱스(GA)를 이용하여 해결할 수 있습니다. 그러나 자체적으로 관리하기 위해 커스텀 훅을 구현하였습니다.학습 개념Next.js 페이지 로드 이벤트Next.js 페이지 이탈, 종료 이벤트Next.js 새로고침 이벤트usePageStayDurationusePageStayDuration 훅은 사용자가 현재 페이지에 머무는 시간을 측정하는 기능을 제공합니다.이 훅은 Next.js의 라우터 이벤트를 활용하여 페이지 전환 및 새로 고침 시 머무른 시간을 기록합니다.아래에서 이 훅의 동작 방식과 구현 세부 사항을 설명하겠습니다.코드먼저 구현된 코드를 확인해보도록 하겠습니다.import { useRouter } from "next/router";import { useEffect, useRef } from "..
공유/React, Next 2024. 10. 16. 18:30