Git을 사용하다 보면 git push 명령어 실행 시 ! [rejected] main -> main (non-fast-forward) 오류를 마주칠 수 있습니다.  이는 여러분의 로컬 main 브랜치가 원격 저장소의 main 브랜치보다 뒤쳐져 있음을 의미합니다.  즉, 다른 사람이 여러분이 마지막으로 pull 한 이후로 원격 저장소에 변경 사항을 푸시했기 때문입니다.  git push -f (강제 푸시)는 다른 사람의 작업 내용을 덮어쓸 위험이 있으므로 권장하지 않습니다. git push -f origin ! [rejected] main -> main (non-fast-forward)error: failed to push some refs to '깃주소' 데이터를 받으라는 힌트가 나와요h..

Next.js의 최신 버전에서 URL 파라미터 및 쿼리 파라미터를 가져오는 방법이 변경되었습니다. 이전의 React Router와 다르게, Next.js에서는 next/navigation 모듈을 통해 URL의 동적 파라미터 및 쿼리 파라미터를 쉽게 가져올 수 있는 훅들을 제공합니다. 1. 문자열 및 쿼리 파라미터 가져오기useParams 훅useParams는 현재 경로에서 동적 파라미터를 가져오는 훅입니다. 주로 페이지 라우팅에서 URL의 세그먼트로 전달된 값을 읽을 때 사용됩니다.사용 예시import { useParams } from 'next/navigation';export default function Home() { const { clientId } = useParams(); // URL에..

웹 개발 및 배포 과정에서, 변경된 내용이 모든 사용자에게 즉시 반영되지 않는 문제는 흔히 발생합니다.  특히, 프론트엔드 작업 후 내 PC에서는 정상적으로 작동하나, 고객의 PC에서는 이전 버전이 보이는 상황이 발생할 수 있습니다. 그럴 때마다 고객에게 강력 새로고침(CTRL + SHIFT + R)을 요청하는 것은 사실상 불가능합니다. 이 문제의 원인은 바로 브라우저 캐시 때문입니다. 브라우저는 페이지 로딩 속도를 높이기 위해 캐시를 사용하여 자주 호출되는 데이터를 저장합니다.  하지만, 이는 새로운 업데이트가 반영되지 않는 문제를 야기할 수 있습니다. 해결책: 캐시 무효화(Cache Busting) 기법캐시 문제를 해결하기 위한 가장 효과적인 방법 중 하나는 캐시 무효화(Cache Busting) 기..

함수형 함수형 하는데 너무 어렵더라고요 분명 중요하고 아는 내용인데 개발을 하면서 많이 놓지고 있는 부분이었서요  하지만 최근에 저는 함수형 프로그래밍에 대한 이해를 높이고,(배우고~)JavaScript에서 그것을 활용하여 코드를 개선하는 데 주력했습니다. 오늘은 제가 느낀 점과 함께, 함수형 프로그래밍이 어떻게 복잡한 코드를 더 간결하게 만들어주는지에 대해 이야기하고 싶습니다. 아직 100% 이해를 하고 적립한 것이 아닌 아~~ 정도 60% 이해를 한 상황이라 설명이 많이 미숙합니다 단도직입적으로 기존 코드의 문제점제가 처음 접했던 코드는 다음과 같은 형태로, 길고 복잡해서 유지보수하기 어려운 부분이 많았습니다:for (let i = start; i { if (!element) return; ..

CSS 작업을 하다 보면 파일이 10만 줄이 넘어가는 경우도 발생합니다.이때 긴 줄이나 주석이 그대로 남아 있으면 Lighthouse에서 경고가 발생할 수 있습니다.CSS 파일의 용량이 크면 다운로드 속도에도 문제가 생길 수 있어 최적화가 필요합니다.clean-css 추천이러한 문제를 해결하기 위해 clean-css를 사용해 CSS 파일을 간편하게 최적화할 수 있습니다.이 기능은 HTML과 CSS만 사용하는 분들에게는 필요할 수 있지만,성능을 개선하고자 하는 모든 개발자에게 유용합니다.clean-css 설치먼저, clean-css를 글로벌로 설치합니다:npm install clean-css-cli -gCSS 파일 최적화그 다음, 원하는 경로에서 CSS 파일을 최소화(minify)할 수 있습니다.예를 들어..

배열을 복사할 때, 특히 이중 배열(Not Nested Array)에서 원본 데이터와의 관계를 이해하는 것이 중요합니다. 배열을 단순히 복사하면, 원본 데이터와 복사된 배열이 동일한 포인터를 공유하여 한쪽의 데이터를 변경하면 다른 쪽에도 영향이 미칩니다. 1차원 배열 복사아래의 예시처럼 1차원 배열을 복사할 때는 다음과 같은 방법이 일반적입니다.const keywordArray = ["가습기", "사무실용", "콜드브루앰플"];// 간단한 복사let copyKeywordArray = [...keywordArray];이러한 방식으로 복사하면, 원본 배열 keywordArray와 copyKeywordArray는 서로 독립적인 배열이 됩니다. 이중 배열 복사 문제점하지만 이중 배열의 경우, 배열의 내부 요소가..