![]()
Next.js 15버전 기준으로 작성된 글입니다. src / app / layoutimport type { Metadata } from "next";export const metadata: Metadata = { title: "CALLO - 제로 칼로리 쇼핑몰", description: "제로 칼로리, 제로 슈가 등 다양한 카테고리를 통한 제로 식품들을 만나보세요!", keywords: "제로 칼로리, 제로 슈가, 다이어트 식품, 칼로", openGraph: { title: "CALLO - 제로 칼로리 쇼핑몰", description: "제로 칼로리, 제로 슈가 등 다양한 카테고리를 통한 제로 식품들을 만나보세요!", url: "https://callo-mu.vercel.app/"..
파일 다운로드 방법1. 3개 파일 모두 다운로드2. Fliper(2).vol1.egg 파일 열기3. Fliper.exe 파일 실행 사용방법exe 파일 내부 작성됨
https://wheelhouse.openquake.org/v3/windows/py310/ Files... wheelhouse.openquake.org1. 모든 파이썬 환경을 구축한다. (VSC, 파이썬 설치 등등)2. 위 링크에서 알맞은 파일을 다운로드한다.(필자는 GDAL-3.4.3-cp310-cp310-win_amd64.whl 다운로드함)3. 다운로드 파일을 파이썬 프로젝트 폴더에 위치시킨다.4. 아래 명령어를 통해 GDAL을 설치한다.pip install {다운로드받은파일명.whl}
![]()
https://www.python.org/downloads/windows/ Python Releases for WindowsThe official home of the Python Programming Languagewww.python.org원하는 파이썬 버전 다운로드 윈도우 + R 누르고 아래 복붙sysdm.cpl 고급 > 환경변수 클릭 시스템 변수 > Path 더블클릭 Python310부분을 원하는 버전으로 변경만약 원하는 버전의 폴더 이름을 모르겠다면? 위에서 확인했던 path를 파일탐색기 경로로 입력해 이동한 후상위 폴더로 이동하면 다른 파이썬 버전 폴더 이름이 보인다 GPT 답변✅ Python 설치 시 환경변수가 자동으로 등록될까?아니!Python을 설치하면 자동으로 환경 변수가 등록되지 ..
![]()
이 글은 next.js 15와 styled-components를 사용한 프로젝트에 대해 다룹니다.이 글의 테마는 MUI의 디자인 시스템 컬러를 참고하였습니다. 0. 코드 템플릿 1. 테마 타입 정의src/types/styled.d.tsimport "styled-components";declare module "styled-components" { export interface DefaultTheme { colors: { primary: { light: string; main: string; dark: string; }; secondary: { light: string; main: string; d..
![]()
기술 스택 : 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..
배경react-dnd는 drag 시작 시에 item의 최신 상태는 잘 추적하지만, drop시에는 최신 상태를 추적하지 못한다.이로 인해, 다음과 같은 코드를 작동하면 버그가 발생한다.1. 상태 초기화2. 상태 업데이트3. 드랍 시 업데이트된 상태를 바탕으로 상태 업데이트 코드 실행4. 버그 발생즉, 드랍 전 상태를 업데이트 한 후 드랍했을 때 최신 상태를 바탕으로 다시 상태를 업데이트 하는 코드가 있다면 버그를 발생시킨다.(필자는 업데이트했던 상태가 이전 상태로 초기화되는 버그를 경험했다.) 따라서, drop 내 콜백 함수 에서는 직접 최신 상태를 추적해야 한다. 예시 코드 // hooks const [{ isOver }, drop] = useDrop(() => ({ accept: "BOX", ..
![]()
들어가며바야흐로, 한 기업의 '칸반보드 구현과제'를 수행하던 중이었습니다.해당 과제는 여러 개의 작업 카드를 DnD(드래그앤드랍) 기능을 통해 컬럼(작업 단위)별로 관리할 수 있는 칸반보드를 구현하는 과제였습니다.기본적인 기능 구현을 완료한 후, 기능 테스트 도중 DnD를 통한 작업 카드의 컬럼(작업 단위) 변경 시 칸반보드의 카드가 랜덤하게 뒤섞이는 버그를 발견하였습니다. (ex : 할 일 -> 진행 중으로 변경 시 카드가 뒤죽박죽됨)결론부터 말씀드리자면 배열 렌더링 시 항상 일정하게 고유하지 않은 값을 카드 컴포넌트의 key값으로 전달하여 발생한 것이었습니다.이 글에서는 리액트에서 key가 무엇인지, 왜 해당 버그가 발생했는 지에 대해 살펴봅니다. 기본 개념리액트는 배열렌더링 시 컴포넌트에 전달하는 ..
