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

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

이번 next.js 를 하면서 글을 써야지 하고 마음먹은 것이 이녀석 때문입니다. Turbopack이란? 갑자기 설치를 하면 좋을 것 같은 이름이었습니다.하지만 아무것도 모르고 설치를 해야 하나? 괜히 ESline 에 걸려 에러만 나는 것은 아닌지 찾아봤습니다. Turbopack는 JavaScript와 TypeScript에 최적화된 점진적 번들러로, Rust로 작성되었으며 Next.js에 내장되어 있다라고 하는데요 점진적 번들러? Rust로 작성? Next에 내장? webpack의 후속작?여러 알 수 없는 말을이 있을 겁니다. 이걸 다 설명하기는 너무 루즈하고 Vite와 비슷한데 성능이 우수하다고 생가하면 되는데요그럼 Vite가 무엇인지 모를 수도 있고요  다시 쉽게 정리하자면 빌드를 빠륵게 하기 위해 ..

next를 설치하다 보니 src를 사용할 거니?import alias를 사용할 거니? 하고 물어봤다 src에 담아서 개발을해? import alias는 '@/~' 을 사용한다고 ? 당연하지 라고 생각을 했어요 그럼 왜 당연할까요? 또 import alias는 기본 no로 되어 있어요 뭐 관리가 쉬워지고 import 코드가 깔끔해져서 그러긴 한데요 좀더 찾아봤어요  src/ 디렉토리를 사용하는 장점프로젝트 구조의 명확성모든 소스 코드 파일을 src/ 디렉토리 아래로 정리하여 루트 디렉토리가 깔끔해집니다.루트 디렉토리에는 설정 파일(예: package.json, next.config.js)만 남고, 소스 코드와 명확히 분리됩니다.대규모 프로젝트 관리프로젝트가 커질수록 디렉토리가 많아지는데, src/ 디렉토리..

next.js 를 시작하면서 이것 저것 나오는데 궁금한 것들이 있어 정리해 보았습니다.npx create-next-app@latest .처음 next를 설치를 하게 되면서 여러가지 물어보더라고요1. 타입스크립트를 사용할 거니? yes~! 이거 써야 할 말이 있으니까요?! 다음 ESline을 사용할 거니? Would you like to use eslint?  여시거 no를 사용하고 싶었지만 왜 no여야 하는지 왜 yes여야 하는지 고민을 해보고 싶었어요물론 ESline을 사용하면 많은 어려움이 있었기 때문에 사용을 하고 싶지 않았어요하지만 왜 나에게 문제가 발생을 했는지 찾는 것도 좋을 것 같아 ESline을 찾아봤어요 ESLint는 JavaScript 및 TypeScript 코드에서 오류를 찾아내고 스..

많은 개발자들이 사용하는 JavaScript에 대해 이야기해보려고 합니다. JavaScript는 프론트엔드, 백엔드 어디서든 활약하는 다재다능한 언어입니다. 이번 글에서는 JavaScript의 동작 원리와 공부 방법에 대해 정리해보겠습니다.JavaScript란 무엇인가?JavaScript는 가볍고, 인터프리터 방식이자 Just-In-Time (JIT) 컴파일이 가능한 프로그래밍 언어입니다. 또한 **일급 함수(First-class functions)**를 지원하며, 객체 지향, 함수형 프로그래밍 등 다양한 스타일을 지원합니다.사용되는 환경:브라우저: 웹 페이지의 동적 기능을 담당합니다.Node.js: 서버 사이드 애플리케이션 및 다양한 비 브라우저 환경에서 사용됩니다.JavaScript는 프로토타입 기반..