728x90 반응형 WEB22 웹 프론트엔드 빌드에서 번들링의 역할과 동작 원리 개요현대의 번들링은 프론트엔드 빌드 과정 중 하나로,소스 코드를 실제 배포 가능한 형태로 변환하는 역할을 한다. 본 문서에서는 번들링의 개념과 빌드 과정에서의 역할을 정리한다. 번들이란 무엇인가?프론트엔드 개발에서 번들(Bundle)이란, 여러 개로 나뉘어 있는 소스 파일과 리소스를 하나 또는 소수의 파일로 묶는 과정과 그 결과물을 의미한다.현대 웹 애플리케이션은 JavaScript 파일뿐만 아니라 CSS, 이미지, 폰트 등 다양한 리소스로 구성된다. 이 파일들을 각각 개별적으로 로드하면 네트워크 요청이 많아져 성능 저하가 발생할 수 있다. 이를 해결하기 위해 번들링 과정을 통해 필요한 리소스를 하나의 묶음으로 생성한다. 1. Bundler하나의 진입점으로 부터 여러 모듈 또는 소스 코드의 파악하여 최적.. 2026. 1. 16. 최신 JavaScript는 왜 깨지지 않을까? 트랜스파일러의 역할 개요최신 웹 표준(ES6+)은 매년 발전하지만, 사용자의 브라우저 환경은 제각각입니다. 개발자의 생산성을 높이면서 서비스의 브라우저 호환성(Cross Browsing)을 완벽하게 해결하기 위해 어떻게 해야할 가요? 이번 문서에서는 Cross Browsing 해결의 핵심 도구, 트랜스파일러에 대해 정리해 보겠습니다. 배경1. 웹 개발의 복잡성점점 기술이 발전하고 하나의 웹 서비스에 수천개의 JS 파일을 사용하게 되면서 중복 함수 및 변수명으로 인한 충돌 문제 발생 가능성을 방지하기 어려워졌다. JavaScript 는 파일마다 독립적인 스코프가 있는것이 아니라, 전역 객체를 공유하는 특징으로 인해 스코프 문제와 의존성 문제가 발생하고, 이를 개선하기 위해 IIFE, Closer 를 사용하였지만, 모듈화를 구.. 2026. 1. 2. form vs fetch — CORS와 비동기 요청의 차이 개요웹 개발에서는 데이터를 서버로 전송할 때 크게 두 가지 방식을 사용합니다.HTML 제출 방식JavaScript 기반 비동기 요청 방식 (fetch, axios 등)두 방식은 CORS 적용 여부, 비동기 처리 가능성, UX 제어 범위에서 명확한 차이가 있습니다.이번 글에서는 HTTP 통신 방식과 CORS 관점에서 이 두 접근법을 정확히 비교합니다. HTTP 통신이란?HTTP 통신이란 클라이언트(브라우저 또는 JS 런타임) 가 서버에 요청(Request)을 보내고, 서버가 응답(Response)을 반환하는 일련의 과정입니다. HTTP 비동기 처리 방식방식설명이벤트 리스너XMLHttpRequest 방식콜백가독성 저하, 콜백 지옥 문제Promise현재 표준 방식async/awaitPromise 기반 문법.. 2025. 6. 26. Redirect URL 완전 정복: 쿼리 파라미터와 리다이렉트 흐름 설계 Redirect URL 소개Redirect (리다이렉트)란, 사용자가 처음 요청한 URL이 아닌, 다른 URL로 보내는 것을 뜻입니다. 예를 들어, 웹사이트 A의 주소로 접속한 사용자를 웹사이트 B로 이동시키는 것을 말합니다.Redirect URL은 요청 결과를 전달해주는 역할을 합니다. 사용자가 요청을 마친 후 돌아갈 수 있는 웹사이트 URL로, 요청 결과를 알려주고 그 결과를 바탕으로 최종 비즈니스를 진행하는 중요한 중간 역할을 합니다. 기본 Redirect URL 예시https://example.com/redirect?status=success&orderId=12345 OAuth 인증 시 Redirect URL 예시https://myapp.com/auth/callback?code=abc123&sta.. 2025. 4. 17. HTTP 인증 방식, 웹에서 엑세스 권한 인증 | 폼 인증 방식 인증이란?시스템이 접근을 허용하기 위해 사용자 신원을 확인하는 절차입니다. 자신을 확인하는 정보 예- 패스워드- 원타임 토큰- 전자 증명서- 바이오 인증- ic 카드 http에서 사용하는 인증 방법 4가지http/1.1에서 사용하는 인증 방식은 다음과 같습니다. 1. BASIC 인증웹서버와 클라이언트 사이에 이뤄지는 통신입니다. bace64인코딩 형식을 사용하여 사용합니다. 2. DIGEST 인증BASIC 인증의 약점을 보안하며 소개되었습니다. BASIC처럼 패스워드를 그대로 보내는곳이 아니라 챌린지 리스폰스 방식을 사용하고 있습니다. 3. SSL인증SSL 클라이언트 인증서를 사용하여 인증하는 방식입니다. 4. 폼 베이스 인증form 을 사용하여 자격정보를 송신하고 그 검증결과에 따라 인증하는 방식입니.. 2025. 2. 10. 웹 성능 분석 및 INP 최적화 | Lighthouse INP (Interaction to Next Paint, 페인트에 대한 상호작용)웹 성능 지표 중 하나로, 사용자가 웹페이지와 상호작용(클릭, 키보드 입력 등)한 후 브라우저가 그에 반응하여 콘텐츠를 화면에 렌더링하는 데 걸리는 시간을 측정합니다. DOM (Document Object Model, 문서 객체 모델)HTML 문서 구조를 반영해서 만든 객체입니다.DOM의 계층은 트리 자료 구조로 구축돼요. 트리 자료 구조는 하나의 최상위 노드(Node)에서 다른 자식 노드들이 뻗어나가는 구조를 가지고 있습니다. DOM은 HTML로 구성된 웹 페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할을 해요. DOM 생성되는 순서HTML 웹 페이지는 HTML 파서에 의해 DOM으로 변환됩니다.여기서 파서가 .. 2025. 2. 10. 패키지 로드 방법 비교: NPM vs CDN의 차이점 개요프론트엔드 개발을 하다 보면 라이브러리를 추가하는 방법으로 NPM과 CDN을 자주 접하게 됩니다. 하지만 이 두 가지 방식은 각각의 장점과 단점이 있으며, 상황에 따라 적절한 방식을 선택하는 것이 중요합니다. 이번 글에서는 NPM과 CDN의 차이점을 정리하고, 언제 어떤 방법을 사용하는 것이 좋은지 알아보겠습니다.NPM (Node Package Manager)NPM은 JavaScript 패키지 매니저입니다. 주로 주로 Node.js 및 웹 개발에 사용됩니다.오픈소스 라이브러리를 관리하고 설치할 수 있게 해줍니다. 1) npm 특징로컬 환경(개발 환경)에서 패키지를 설치하여 사용package.json을 통해 패키지 및 버전 관리 가능node_modules 폴더에 라이브러리를 저장하여 오프라인에서도 사용.. 2024. 11. 8. 인클루시브 디자인(inclusive design) | 웹 접근성 개요디지털 서비스가 일상 생활에 큰 영향을 미치는 오늘날, 누구나 쉽게 접근하고 이용할 수 있는 웹 환경을 제공하는 것은 필중요합니다.모든 사용자가 차별 없이 콘텐츠에 접근할 수 있도록 보장하는 것은 사회적으로도 중요하며 사용자 경험을 개선 및 넓은 사용자층을 확보하여 회사에도 영향을 줍니다.사용자 인터페이스 개선에 관련하여 웹 프론트엔드 개발자가 다양한 사용자의 요구를 반영 해야하는 이유와 방법 등을 알아보자 인클루시브 디자인 (Inclusive Design) 이란?다양한 사용자들이 제품이나 서비스를 이용할 수 있도록 설계하는 방법론포괄적인 디자인은 제품, 서비스 또는 환경이 가능한 한 많은 사람들, 특히 전통적으로 인터페이스를 사용하거나 환경을 탐색할 수 없도록 배제된 그룹이 사용할 수 있도록 디자인.. 2024. 9. 26. 웹 구성 요소 Web, WebServer, WAS 이해하기 WEB 구성 요소Web인터넷을 기반으로 정보를 공유, 검색 하는 서비스이며 Web Browser를 통해 다양한 서비스를 제공한다.HTML(Hypertext Transfer Protocol)언어를 기반으로 문서와 링크를 생성하여 웹사이트를 구성한다.HTTP(Hypertext Transfer Protocol) 프로토콜을 사용하여 정보를 공유한다.URL(Uniform Resource Locator)은 인터넷상의 리소스를 나타내는 주소이다.Web BrowserWeb server와 통신하여 HTML 문서나 파일을 출력하는 GUI형식의 소프트 웨어Web PageWeb Browser에 표시되는 각각의 화면Firefox, 구글 크롬, 오페라, MS 익스플로러나 엣지, 애플의 Safari 같은 웹 브라우저에서 보여지는 .. 2024. 5. 27. 이전 1 2 3 다음 728x90 반응형
