728x90 반응형 WEB41 JavaScript 모듈 시스템 | CJS, AMD, UMD, ESM 모듈화 방식CommonJS : exports 키워드로 모듈을 생성, require() 함수로 임포트하는 방식장점 : 모든 파일을 로컬에 저장하고 동기적으로 동작하여 전역변수와 지역변수를 분리할 수 있게 되었다.단점 : 필요한 모듈을 가져오는데 대기하게 됨.AMD(Asynchronous Module Definition): CommonJS를 비동기적으로 사용할 수있는 도구ESM : import, 와 export 로 임포트하는 방식(ES6가 도입 이후)장점 : 키워드 만으로 모듈화 가능단점 : 모듈별로 을 네트워크 통신을 통해 가져오면서 비용과 시간 소요 https://beomy.github.io/tech/javascript/cjs-amd-umd-esm/#%ED%8A%B9%EC%A7%95-%EB%B9%84%.. 2025. 2. 13. CSS 확장 / Sass에만 존재하는 기능이 CSS에 통합 되다 ! 개요스타일 개발을 효율적으로 할 수 있게 지원해주는 기능이 많다는 것은 많은 사람들이 Sass를 사용하게 만들었습니다. 하지만 여전히 Sass를 설치하고 컴파일하는 과정이 존재한다는 것은 대체 가능한 도구를 찾게 되는 이유 중 하나입니다. 아직까지 Sass 고유 기능rem으로 변환하는 함수와 믹스인(Mixins)반복문 CSS 확장 기능1. 변수 지정CSS에서도 Sass와 유사한 방식으로 변수를 정의할 수 있습니다. 중요한 차이점은 Sass 변수는 전처리기 컨텍스트 내에서만 존재하지만, CSS 변수는 브라우저에서 사용될 수 있으며 자바스크립트를 통해 동적으로 덮어쓸 수도 있다는 점이 다르다.:root { --button-padding: 10px 20px; --button-bg-color: #007b.. 2025. 2. 12. 웹개발 아키텍처 스타일 | Model 1, Model 2 개요웹 개발에서 모델1(Model 1)과 모델2(Model 2)은 흔히 사용되는 아키텍처 스타일입니다. 두 모델은 웹 애플리케이션을 설계하는 방식에 큰 차이를 보이며, 각각의 장점과 단점이 존재합니다. 이 포스팅에서는 모델1과 모델2의 차이점, 특징, 그리고 어떤 상황에서 각각을 사용하는 것이 좋은지에 대해 알아보겠습니다. 모델1 (Model 1)모델1은 초기 웹 애플리케이션 개발에서 자주 사용되었던 아키텍처입니다. 주로 JSP와 서블릿을 사용하여 모든 처리를 하나의 페이지에서 처리하는 방식입니다.Model 1 특징단일 페이지 처리: 모델1에서는 모든 요청 처리와 응답을 하나의 JSP 페이지 또는 서블릿에서 처리합니다. 즉, 클라이언트의 요청이 들어오면 서블릿이 직접 비즈니스 로직을 처리하고 결과를 JS.. 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. JavaScript window 객체: 주요 속성, 메서드, 이벤트 알아보기 개요window 객체는 JavaScript에서 전역 객체(global object)로, 브라우저 환경에서 제공하는 다양한 기능과 속성을 제공합니다. 브라우저의 전체 창(window)에 대한 정보를 제공하며, 전역 범위에서 접근 가능합니다. Node.js에서는 window 객체 대신 global 객체를 사용합니다. window 객체는 웹 개발에서 핵심적인 역할을 하며, DOM, 브라우저 상태, 이벤트 관리 등 다양한 작업에 사용됩니다. 다만, 전역 네임스페이스를 오염시킬 수 있으므로 과도한 사용은 피하는 것이 좋습니다. window 객체의 대표적인 속성1. document현재 로드된 HTML 문서를 나타내는 객체.DOM 트리 조작 및 HTML 요소 접근 가능.2. location현재 페이지의 URL .. 2024. 11. 22. 패키지 로드 방법 비교: NPM vs CDN의 차이점 개요프론트엔드 개발을 하다 보면 라이브러리를 추가하는 방법으로 NPM과 CDN을 자주 접하게 됩니다. 하지만 이 두 가지 방식은 각각의 장점과 단점이 있으며, 상황에 따라 적절한 방식을 선택하는 것이 중요합니다. 이번 글에서는 NPM과 CDN의 차이점을 정리하고, 언제 어떤 방법을 사용하는 것이 좋은지 알아보겠습니다. NPM (Node Package Manager)NPM은 JavaScript 패키지 매니저입니다. 주로 주로 Node.js 및 웹 개발에 사용됩니다.오픈소스 라이브러리를 관리하고 설치할 수 있게 해줍니다. npm 특징로컬 환경(개발 환경)에서 패키지를 설치하여 사용package.json을 통해 패키지 및 버전 관리 가능node_modules 폴더에 라이브러리를 저장하여 오프라인에서도 사용 가.. 2024. 11. 8. 인클루시브 디자인(inclusive design) | 웹 접근성 개요디지털 서비스가 일상 생활에 큰 영향을 미치는 오늘날, 누구나 쉽게 접근하고 이용할 수 있는 웹 환경을 제공하는 것은 필중요합니다.모든 사용자가 차별 없이 콘텐츠에 접근할 수 있도록 보장하는 것은 사회적으로도 중요하며 사용자 경험을 개선 및 넓은 사용자층을 확보하여 회사에도 영향을 줍니다.사용자 인터페이스 개선에 관련하여 웹 프론트엔드 개발자가 다양한 사용자의 요구를 반영 해야하는 이유와 방법 등을 알아보자 인클루시브 디자인 (Inclusive Design) 이란?다양한 사용자들이 제품이나 서비스를 이용할 수 있도록 설계하는 방법론포괄적인 디자인은 제품, 서비스 또는 환경이 가능한 한 많은 사람들, 특히 전통적으로 인터페이스를 사용하거나 환경을 탐색할 수 없도록 배제된 그룹이 사용할 수 있도록 디자인.. 2024. 9. 26. Bun 소개 / JavaScript 런타임 비교 Incredibly fast JavaScript runtime, bundler, test runner, and package manager -- all in one(믿을 수 없을 정도로 빠른 JavaScript 런타임, Bundler, Test Runner 및 Package Manager - 모두 하나로) 개요최근에 Bun 이라는 도구를 발견했다. 알고보니 이미 2023년 인기 오픈소스로 선정 된 Bun !웹 서버 성능이 매우 우수하다는 평가를 들었고, 번들링과 테스팅 기능도 함께 갖추고 있다고 해서 호기심이 생겨 공식 홈페이지를 찾아보고 동작 방식을 간단히 이해를 기반으로 Bun 포스팅을 작성하고자 한다. ** 오픈 소스 트랜드는 어디서 알 수 있는가! https://risingstars.js.or.. 2024. 5. 31. CSS 단위 비교: px, em, rem 차이점과 올바른 사용법 CSS 길이 단위pxemrem px웹에서 가장 일반적으로 사용되는 단위이론적으로 화면의 1픽셀렌더링된 값이 변하지 않는 고정된 단위 empx단위와 다르게 상위 요소의 글꼴 크기를 기준으로 하는 상대적인 단위1em 단위는 현재 글꼴 크기의 높이와 같으며 기본값은 약 16pxem 단위는 비례적으로 크기가 조정되므로 상위 요소의 글꼴 크기에 영향을 받는다. rem“root em”의 줄임말rem 단위는 글꼴 크기에 비례한다는 점에서 em 단위와 비슷하지만 루트 요소(HTML 요소)만을 사용하여 글꼴 크기를 계산rem 단위는 글꼴 크기 조정 기능을 제공하지만 상위 글꼴 크기의 영향을 받지 않는다. em, rem 적합한 사용 기준보통 글꼴 크기 조정에 필요한 제어 수준과 예측 가능성에 따라 em 단위와 rem 단위.. 2024. 5. 30. 이전 1 2 3 4 5 다음 728x90 반응형
