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 ..

require 설명 require는 Node.js에서 사용되는 키워드 CommonJS 방식으로 모듈을 가져올 때 사용 주로 서버 사이드 개발에서 많이 사용 동기적으로 모뉼을 가져오며, 가져온 모듈을 변수에 할당하여 사용 예시 const express = require('express'); import 설명 import는 ES6부터 도입된 JavaScript의 표준 문법 브라우저 환경이나 최신 JavaScript 환경에서 사용 비동기적으로 모듈을 가져오며, 가져온 모듈을 변수에 할당하거나 모듈의 특정 멤버를 직접 가져올 수 있다. 예시 import React from 'react'; require과 import의 차이점 require import CommonJS 방식 ES6 모듈 시스템 동기적으로 모듈을 ..

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

훅(Hook) 설명 함수형 컴포넌트에서 상태(state)와 생명주기 메서드(lifecycle method)를 사용할 수 있게 해주는 기능 클래스형 컴포넌트에서만 상태를 관리하고 생명주기 메서드를 사용할 수 있었지만, 훅을 이용하면 함수형 컴포넌트에서도 동일한 기능을 사용 가능 함수형 컴포넌트 내에서만 사용 가능하며, 훅의 호출 순서는 항상 동일해야 한다. 규칙을 지키면서 훅을 적절하게 사용하면 상태 관리와 생명주기 처리를 간편하게 가능 훅(Hook)의 종류 useState 상태를 관리하는데 사용되는 훅 함수형 컴포넌트 내에서 상태를 생성하고 업데이트를 가능 예를 들어, 숫자나 문자열과 같은 값을 저장하고 업데이트 가능 예시 import React, { useState } from 'react'; cons..