나 혼자만 개발업

📌 목차 1. 목표 개요 및 문제 정의 2. Lodash를 활용한 구현 방식 3. 순수 JavaScript (Map) 방식 4. includes + forEach 방식 5. 성능 비교 및 결론 ">📌 목차1. 목표 개요 및 문제 정의 2. Lodash를 활용한 구현 방식 3. 순수 JavaScript (Map) 방식 4. includes + forEach 방식 5. 성능 비교 및 결론1. 목표 개요 및 문제 정의">1. 목표 개요 및 문제 정의두 배열 간의 동기화 작업이 필요할 때, 효율적인 구현 전략이 중요하다. 본 사례에서는 다음과 같은 두 배열이 존재한다.state.tmpSelectedDataList: 일부 객체에서 isChecked 값이 true로 설정되어 있음state.dataList: 위 ..

📌 목차 1. MutationObserver란 무엇인가? 2. 기본 사용법 및 설정 방법 3. MutationObserverInit 옵션 상세 설명 4. 실전 예제 5. 주요 활용 사례 6. 주의사항 및 한계 7. Vue 3 Composition API와의 연동 "> 📌 목차 1. MutationObserver란 무엇인가? 2. 기본 사용법 및 설정 방법 3. MutationObserverInit 옵션 상세 설명 4. 실전 예제 5. 주요 활용 사례 6. 주의사항 및 한계 7. Vue 3 Composition API와의 연동 1. MutationObserver란 무엇인가?"> 1. MutationObserver란 무엇인가? MutationObserver는 웹 브라우저 환경에서 DOM 트리..

📌 목차 1. Vite와 Webpack 개념 차이 2. Vite vs Webpack 비교 3. Vite의 동작 방식 4. Webpack의 동작 방식 5. Vite vs Webpack: 언제 사용해야 할까? 6. 정리 ">📌 목차1. Vite와 Webpack 개념 차이 2. Vite vs Webpack 비교 3. Vite의 동작 방식 4. Webpack의 동작 방식 5. Vite vs Webpack: 언제 사용해야 할까? 6. 정리Web Pack 관련, 참고용 이전 발행글2025.03.14 - [FrontEnd] - Node.js, NPM, Webpack 기본 개념 정리📌 목차1. Node.js란? 2. NPM(Node Pack" data-og-host="pjs-world.tistory.com" da..

📌 목차 1. Webpack이란? 2. 개발 환경 구성 3. 프로젝트 폴더 및 초기화 4. 웹팩 및 라이브러리 설치 5. 웹페이지 파일 구성 6. 웹팩을 사용하여 번들링 7. 웹팩 설정 파일 추가 8. 최종 빌드 및 실행 9. 정리 ">📌 목차1. Webpack이란? 2. 개발 환경 구성 3. 프로젝트 폴더 및 초기화 4. 웹팩 및 라이브러리 설치 5. 웹페이지 파일 구성 6. 웹팩을 사용하여 번들링 7. 웹팩 설정 파일 추가 8. 최종 빌드 및 실행 9. 정리참고용 이전 발행글  2025.03.14 - [FrontEnd] - Node.js, NPM, Webpack 기본 개념 정리 1. Webpack이란?">1. Webpack이란?Webpack(웹팩)은 모듈 번들러(Module Bundler)로,Ja..

📌 목차 1. Node.js란? 2. NPM(Node Package Manager)이란? 3. NPM 패키지 관리 4. NPM 커스텀 명령어 (Scripts) 5. Webpack(웹팩)이란? 6. Webpack의 주요 개념 7. Webpack 실행하기 8. 정리 ">📌 목차1. Node.js란? 2. NPM(Node Package Manager)이란? 3. NPM 패키지 관리 4. NPM 커스텀 명령어 (Scripts) 5. Webpack(웹팩)이란? 6. Webpack의 주요 개념 7. Webpack 실행하기 8. 정리 1. Node.js란?">1. Node.js란?Node.js 개요Node.js는 브라우저 외부에서도 JavaScript를 실행할 수 있는 런타임 환경이다.과거에는 JavaScript..

Lodash는 JavaScript에서 자주 사용되는 배열, 객체, 문자열, 함수 등을 다루기 위한 유틸리티 라이브러리이다.배열 정리, 객체 병합, 깊은 복사(Deep Clone), 데이터 필터링, 성능 최적화 등의 작업을 쉽게 처리할 수 있도록 도와준다. 1. Lodash 설치더보기Lodash를 사용하려면 npm 또는 CDN을 통해 설치할 수 있다.1️⃣ npm을 이용한 설치npm install lodash2️⃣ ES6 import 방식으로 사용import _ from 'lodash';3️⃣ CDN을 이용한 브라우저에서 사용 2. 배열 관련 함수더보기 1️⃣ _.chunk - 배열을 일정한 크기로 나누기const array = [1, 2, 3, 4, 5, 6];console.log(_.chunk(arra..

Axios에서는 요청을 보낼 때 config 객체를 활용하여 URL, HTTP 메서드, 헤더, 파라미터 등을 설정할 수 있다.1. GET 요청 - @RequestParam 및 @PathVariable 사용GET 요청은 데이터를 가져오는 용도로 사용되며, 본문(RequestBody)을 포함할 수 없다.Spring Boot에서 사용할 수 있는 어노테이션:@RequestParam: 쿼리 파라미터를 받아서 처리 (ex: ?name=Alice&role=admin)@PathVariable: URL 경로의 변수를 받아서 처리 (ex: /users/1)@RequestBody 사용 불가: GET 요청은 본문을 가지지 않기 때문import interceptor from '@/service/plugins/intercepto..

컴포넌트 생명주기(Component LifeCycle) Vue3에서 컴포넌트의 라이프사이클은 컴포넌트가 생성되고 파괴되기까지의 여러 단계를 설명하는 개념이다. 각 단계는 특정 시점에 호출되는 라이프사이클 훅을 가지고, 이를 통해 개발자가 컴포넌트의 생성, 업데이트, 파괴 등의 과정에서 필요한 코드를 실행할 수 있다. Composition API의 주요 라이프사이클 훅 라이프사이클 훅 설명 setup() Composition API의 일부로 beforeCreate(생성 전)와 created(생성 후)훅 사이에 호출된다. 이 단계에서 props, state, method를 정의하고 라이프사이클 훅을 사용할 수 있다. onBeforeMount() 컴포넌트가 마운트되기 직전에 호출된다. 이 시점에서는 아직 DO..

이벤트 버블링 (Event Bubbling) 이벤트 버블링이란, 웹 브라우저에서 이벤트가 발생했을 때, 해당 이벤트가 발생한 엘리먼트로부터 시작해서 DOM 트리를 따라 부모 요소로 전파되는 것을 말한다. 즉, 어떤 엘리먼트(예:button)에 이벤트(예:onClick)가 발생하면 해당 이벤트는 먼저 해당 엘리먼트에서 발생하고, 그 다음에는 요소의 부모, 또 전파되어 그 부모의 부모 등으로 계속 상위 엘리먼트로 전파되는 것을 말한다. 이 과정은 최상 요소인 또는 document 객체에 도달하거나, 이벤트의 전파가 명시적으로 중단될 때까지 계속된다. 이벤트 버블링은 이벤트를 처리하는 핸들러를 효율적으로 관리할 수 있게 해주는 중요한 메커니즘이다. 예를들어, 테이블에 여러 버튼이 있다고 가정하면, 각 버튼마다..

NextJS의 데이터 최신화 1. ISR(Incremental Static Regeneration) ISR란? Next.js에서 제공하는 기능으로, 정적 생성과 서버 사이드 렌더링의 장점을 결합한 형태이다. ISR를 사용하면, 정적페이지를 빌드 시점에 미리 생성하고, 배포 후에도 정해진 간격으로 페이지를 업데이트 할 수 있다. 이 방법을 통해 페이지 로드 시간을 줄이고, 동시에 최신 컨텐츠를 유지할 수 있는 방법을 제공한다. ISR의 작동방식? 처음으로 페이지를 빌드할 때, 모든 페이지가 정적 파일로 생성된다. 개별 페이지에 revalidate 속성을 설정하면, 해당 페이지는 정해진 시간 간격마다 재생성될 수 있다. 페이지가 재생성되는 동안, 사용자들은 여전히 이전에 생성된 정적 페이지를 보게되며, 새로..