Lo9

Magic Number컴퓨터 프로그래밍에서 **매직 넘버(Magic Number)**는 다음 중 하나를 의미합니다:  - 명확한 설명이 없거나 여러 번 반복되어 나타나는 고유 값으로, (가능하면) 이름이 지정된 상수로 대체될 수 있는 값.  - 파일 형식이나 프로토콜을 식별하는 데 사용되는 고정된 숫자 또는 텍스트 값 (파일과 관련된 내용은 파일 서명 목록을 참조).  - 다른 의미로 오인될 가능성이 적은 독특하고 고유한 값 (예: 전역 고유 식별자, Globally Unique Identifiers).더보기출처: https://en.wikipedia.org/wiki/Magic_number_(programming)ChatGPT를 통해 번역첫 만남 2년간 개발해 왔지만 Magic Number에 대해 알게 ..

const 다른 저장소에서 commit 가져오기 = ( cherry-pick ) => {💻 return Result;# 가져올 커밋이 존재하는 repo 추가$ git remote add # 커밋 해시 확인하기$ git log /# 확인한 커밋 cherry-pick$ git cherry-pick  📝 console.log( history ) 회사 프로젝트 진행 중 기존에 존재하는 프로젝트를 기반으로 다른 프로젝트를 진행해야 할 상황이 생겼다. 두 프로젝트의 공통된 부분이 한쪽 프로젝트에서 진행되면 다른 프로젝트에도 적용해야 하기 때문에 공통부분을 어떻게 업데이트할지 고민했다.  공통된 부분을 기반으로 두 프로젝트를 진행하기 때문에 하나의 git 저장소에서 브랜치를 통해 두 프로젝트를 진행하는 방법이 ..

const React-Table getGroupedRowModel() 오류 = ( Param ) => {💻 return Result;// useReactTable Hook 선언const table = useReactTable({ ... getGroupedRowModel: getGroupedRowModel(), // getGroupedRowModel가 마지막으로 setPagination을 호출하기 때문에 콘솔창에 오류가 발생함 // 따라서 아래와 같이 setPagination을 호출하지 않도록 하면 오류가 사라짐 onPaginationChange: () => undefined, ...}); 출처: https://github.com/TanStack/table/issues/5..

const 모드에 따라 빌드 환경 변수 및 결과 폴더 변경 = ( Param ) => {💻 return Result;필요 모드에 따라 환경 변수 파일 나누기# .env (기본 환경 변수)# .env를 베이스로 다른 모드의 환경 변수가 덮어 씌워짐VITE_APP_TITLE=DefaultENV# .env.production (빌드시 환경 변수)# .env를 베이스로 빌드시 따로 변경이 필요한 환경변수 정의VITE_APP_TITLE=BuildENV# .env.prod-2 (커스텀 빌드 환경 변수)# .env를 베이스로 prod-2에 대한 환경 변수 적용VITE_APP_TITLE=Prod2ENV 모드에 따라서 빌드 저장 폴더 바꾸기// vite.config.jsimport { defineConfig } fro..

const style 태그 내 무한 생성되는 클래스 문제 = ( Param ) => {💻 return Result;// top, left 값이 변할 때 마다 클래스 생성됨const MoveImg = styled.img` position: absolute; width: 150px; height: 150px; top: `${props.$top}`px; left: `${props.$left}`px;`// top, left 값이 변해도 클래스가 다시 생성되지 않음const MoveImg = styled.img.attrs( (props) => ({ style: { top: `${props.$top}px`, left: `${pro..

const 빌드 후 환경변수 수정 = ( Param ) => {💻 return Result;env.js 파일 생성// public/env.js// 전역에 선언되기 때문에 window 객체를 통해 참조할 수 있음export const env = {    ...import.meta.env, // vite 환경변수 값    ...window["env"], // 전역에 저장된 이전 환경변수 값 // 필요 환경 변수 정의 BASE_URL: "http://localhost:3000"}; index.html에서 script 태그를 통해 env.js 선언  env.js의 환경변수 적용//App.jsximport env from "../public/env"...return ( {env.BASE_URL} {env...

const debounce 사용하기 = ( Param ) => {💻 return Result;import _ from "lodash";import React, { useMemo } from "react";// state에 의해 페이지가 다시 렌더링 되었을 때 debounce가 초기화 되므로 정상적인 동작 X// 따라서 Memoization 필요const debounceFunc = useMemo( () => _.debounce( () => { // debounce 처리할 함수 }, // 임계시간(ms): debounce 처리할 시간간격 300, ..

const Obsidian 파일 Tag 수정하기 = ( Param ) => {💻 return Result;// index.jsconst readline = require("node:readline");const { getFileList, modifyEachFile } = require("./file");const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});const folderPath = "폴더 경로";const main = async () => { const tags = await new Promise((res, rej) => { rl.question(`필요한 태그 입력(쉼..

const preventUserScroll = ( scrollMarginProcessing ) => {💻 return Result;See the Pen Untitled by 구태 (@wbnnhjvf-the-lessful) on CodePen. 📝 console.log( history ) 회사 프로젝트 진행 중 사용자가 특정 요소를 클릭하면 입력폼으로 스크롤되도록 하는 페이지가 있었다. 구현 후 문제는 스크롤 도중에 멈추거나 정확한 위치로 이동하지 않는다는 것이었다. scrollIntoView 함수를 사용해서 스크롤을 구현하였는데 도중에 state가 바뀌거나 스크롤 이벤트가 일어나게 되면 진행되던 스크롤이 멈추는 문제가 있었다.  state에 의해 스크롤이 도중에 멈추는 문제는 해결했지만 사용자 스크..

💻 결과 Project ㄴnode_module ㄴsrc ㄴ.prettierrc 프로젝트 Root 폴더에서 .prettierrc 파일을 생성한다. { "arrowParens": "always", "printWidth": 120, "semi": true, "tabWidth": 4, "useTabs": true } JSON형식으로 필요한 Configuration을 작성한다. 설정참고: https://prettier.io/docs/en/configuration Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io 프로젝트 별 Prettier 설정 완료. 📝 console.log(history) 회사 프로젝트를 하다 보니 이전 프..