Gapus Dev Blog

웹팩(Webpack) 설명 자바스크립트 애플리케이션을 위한 정적 모듈 번들러 웹팩은 애플리케이션을 구성하는 다양한 모듈들을 하나로 묶어주고, 번들링된 결과물을 생성 이를 통해, 애플리케이션의 로딩 속도를 개선하고, 모듈 관리를 용이하게 해준다. 다양한 로더와 플러그인을 제공하여, CSS, 이미지, 폰트 등을 다양한 파일을 처리 가능 사용하는 경우 모듈 로딩 및 의존성 해결 웹팩은 자바스크립트 및 다른 종류의 파일들을 모듈로 인식하고, 이들 간의 의존성을 해결하여 번들링 번들링 웹팩은 의존성 그래프를 기반으로 애플리케이션을 하나의 번들 파일로 생성 로더 사용 웹팩은 로더를 통해 다양한 종류의 파일을 처리하고 변환 플러그인 사용 웹팩의 플러그인은 번들링 과정에서 추가적인 작업을 수행하고 확장 기능을 제공 설..

CORS(Cross-Origin Resource Sharing) 설명 웹 애플리케이션에서 다른 도메인의 리소스에 접근하는 것에 허용하는 보안 메커니즘 웹 브라우저는 보안 상의 이유로 동일 출처 정책(Same-Origin Policy)을 따르는데, 이는 스크립트나 스타일시트, 폰트 등과 같은 리소스를 동일한 출처에서만 로드할 수 있도로 제한 출처는 프로토콜, 호스트, 포트로 구성되며, 이 출처가 다를 경우 동일 출처 정책에 의해 접근이 차단 웹 애플리케이션에서 다른 도메인의 API를 사용하거나, CDN을 이용하여 리소스를 제공하는 등 다양한 상황에서 사용하여 보안을 유지하면서도 다른 도메인과의 연동을 가능하게 한다. 우회 방법 서버 측에서 CORS 설정 변경 서버 측에서 CORS 설정을 변경하여 허용해야 ..

SPA(Single Page Application) 설명 단일 페이지 애플리케이션 한 번의 페이지 로드 후에는 서버로부터 추가적인 페이지를 받지 않고 동적으로 콘텐츠를 업데이트하는 방식 초기에 필요한 리소스를 한 번만 로드하고, 이후에는 Ajax나 WebSocket 등을 통해 서버와 비동기적으로 데이터를 주고받아 페이지를 업데이트 사용자 경험을 향상 시키고, 애플리케이션의 반응 속도를 빠르게 만들어 준다. 주로 React, Angular, Vue.js와 같은 프레임워크나 라이브러리를 사용하여 개발 예시 import React, { useState } from 'react'; function App() { const [message, setMessage] = useState('안녕하세요!'); const ..

npm 설명 Node Package Manager의 약자로, Node.js 환경에서 패키지를 관리하기 위한 도구 npm은 JavaScript 패키지를 설치, 관리, 업데이트, 제거하는 데 사용 다른 개발자들이 만든 오픈 소스 라이프버리나 도구를 손쉽게 사용할 수 있게 도와줌 기능 패키지 설치 npm을 사용하여 원하는 패키지를 설치 가능 패키지는 npm 레지스트리에 등록되어 있으며, 패키지 이름을 사용하여 설치 가능 예를 들어, "npm install 패키지이름" 명령을 사용하여 패키지를 설치 패키지 관리 npm은 설치된 패키지를 관리하는데 도움 패키지의 버전을 업데이트하거나 삭제 가능하며, 패키지의 의존성을 해결하여 필요한 다른 패키지를 자동으로 설치 package.json 파일을 사용하여 프로젝트의 의..

이벤트 캡처링(Event Capturing) 설명 이벤트가 상위 요소에서 하위 요소로 향하는 방향으로 전파되는 것 이벤트가 발생한 요소의 최상위 부모 요소부터 시작하여 이벤트가 발생한 요소까지 이벤트가 전파 addEventListener 메서드의 세 번째 인자를 true로 설정하여 사용, 기본은 false. 이벤트 캡처링을 사용하면 상위 요소에서 하위 요소로 이벤트를 전파하면서 이벤트를 가로챌 수 있다. 장점과 단점 장점 상위 요소에서 하위 요소로 이벤트를 전파하면서 이벤트를 가로챌 수 있다. 이벤트 전파 경로 상의 중간 요소에서 이벤트를 처리할 수 있으므로, 더 정교한 이벤트 처리 로직 구현 가능 단점 이벤트 캡처링을 사용하면 이벤트 핸들러가 상위 요소부터 호출되므로, 이벤트 핸들러의 실행 순서가 예측..

이벤트 설명 이벤트는 웹 페이지와 사용자 간의 상호작용을 가능하게 하는 중요한 요소 이벤트는 사용자가 웹페이지에서 특정 행동을 취하면 발생 이벤트 처리를 잘 활용하면 사용자 친화적인 웹페이지를 만들 수 있다. 주로 JavaScript를 통해 처리되며, 특정 이벤트가 발생했을 때 실행되는 함수인 이벤트 핸들러 또는 이벤트 리스너를 등록하여 사용 이벤트 핸들러 예시 element.addEventListener('event', function); /* * 'click': 요소를 클릭했을 때 발생 * 'keydown': 키보드의 키를 눌렀을 때 발생 * 'load': 페이지 로딩이 완료되었을 때 발생 * 'mouseover': 마우스 포인터가 요소 위로 이동했을 때 발생 */ 이벤트를 사용하는 이유 사용자 행동..