프론트엔드

기술 스택 : React, TS, MUI, styled-componentsimport { useState, useRef } from "react";import { IconButton } from "@mui/material";import { Fullscreen, FullscreenExit } from "@mui/icons-material";import styled from "styled-components";const Container = styled.div` position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #1a1a..

들어가며바야흐로, 한 기업의 '칸반보드 구현과제'를 수행하던 중이었습니다.해당 과제는 여러 개의 작업 카드를 DnD(드래그앤드랍) 기능을 통해 컬럼(작업 단위)별로 관리할 수 있는 칸반보드를 구현하는 과제였습니다.기본적인 기능 구현을 완료한 후, 기능 테스트 도중 DnD를 통한 작업 카드의 컬럼(작업 단위) 변경 시 칸반보드의 카드가 랜덤하게 뒤섞이는 버그를 발견하였습니다. (ex : 할 일 -> 진행 중으로 변경 시 카드가 뒤죽박죽됨)결론부터 말씀드리자면 배열 렌더링 시 항상 일정하게 고유하지 않은 값을 카드 컴포넌트의 key값으로 전달하여 발생한 것이었습니다.이 글에서는 리액트에서 key가 무엇인지, 왜 해당 버그가 발생했는 지에 대해 살펴봅니다. 기본 개념리액트는 배열렌더링 시 컴포넌트에 전달하는 ..

삽입하고 싶은  Next.js에서 삽입 예시import Script from "next/script";export default function RootLayout({ children,}: Readonly) { return ( {children} );}

https://nextjs.org/docs/app/building-your-application/optimizing/metadata Optimizing: Metadata | Next.jsUse the Metadata API to define metadata in any layout or page.nextjs.orghttps://nextjs.org/docs/app/api-reference/functions/generate-metadata#basic-fields Functions: generateMetadata | Next.jsLearn how to add Metadata to your Next.js application for improved search engine optimization (SEO) an..

이 글은 아래 게시물을 선행하여야합니다. [Next.js] Next.js 네이버 웹마스터 검색 엔진 최적화(SEO) 가이드해당 게시물은 Next.js와 Vercel을 통해 웹사이트를 배포한 상황을 가정하여 진행됩니다. 1. 사이트 등록 및 소유확인1) 배포한 웹사이트 URL 복사 https://searchadvisor.naver.com/console/board 네이버네이sooncoding.tistory.com https://search.google.com/search-console?resource_id=https://callo-mu.vercel.app/ Google Search ConsoleSearch Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, G..

해당 게시물은 Next.js와 Vercel을 통해 웹사이트를 배포한 상황을 가정하여 진행됩니다. 1. 사이트 등록 및 소유확인1) 배포한 웹사이트 URL 복사 https://searchadvisor.naver.com/console/board 네이버네이버에 로그인 하고 나를 위한 다양한 서비스를 이용해 보세요nid.naver.com2) 네이버 웹마스터 도구 접속 3) 입력칸에 배포 URL 붙여넣기 4) 소유확인 진행 클릭 5) 'HTML 확인 파일'을 클릭해 파일 다운로드 [ public / naverOOOO.html ]6) 다운로드한 파일을 public 폴더로 이동7) 커밋 -> 푸쉬 -> 배포 8) https://...URL... 링크 클릭 9) 사이트 인증 확인 10) 소유 확인 클릭 11) 소유 확..

설치npm install @next/third-parties@latest 코드 (전역 경로 GA)app / layout.tsx import { GoogleAnalytics } from '@next/third-parties/google' export default function RootLayout({ children,}: { children: React.ReactNode}) { return ( {children} )} 코드 (단일 경로 GA)app / page.tsximport { GoogleAnalytics } from '@next/third-parties/google' export default function Page() { return }

설치$ npm install next-pwa next.config.ts 설정[경로 : / next.config.ts ]// eslint-disable-next-line @typescript-eslint/no-require-importsconst withPWA = require("next-pwa")({ dest: "public", register: true, skipWaiting: true,});/** @type {import('next').NextConfig} */const nextConfig = { // ...기존에 추가했었던 next.config.ts 설정};module.exports = withPWA(nextConfig); manifest.json 생성 [경로 : / public / man..