728x90 전체 글112 [JavaScript] CJS, AMD, UMD, ESM https://beomy.github.io/tech/javascript/cjs-amd-umd-esm/#%ED%8A%B9%EC%A7%95-%EB%B9%84%EB%8F%99%EA%B8%B0 https://medium.com/@sojjung3/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-cjs%EC%99%80-esm%EC%9D%98-%EC%B0%A8%EC%9D%B4-d133660d01a8 2025. 2. 13. [CSS] 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. [WEB] 모델1 모델2 2025. 2. 10. [WEB] INP 최적화, 리액트 성능 개선 INP (Interaction to Next Paint, 페인트에 대한 상호작용)웹 성능 지표 중 하나로, 사용자가 웹페이지와 상호작용(클릭, 키보드 입력 등)한 후 브라우저가 그에 반응하여 콘텐츠를 화면에 렌더링하는 데 걸리는 시간을 측정합니다. DOM (Document Object Model, 문서 객체 모델)HTML 문서 구조를 반영해서 만든 객체입니다.DOM의 계층은 트리 자료 구조로 구축돼요. 트리 자료 구조는 하나의 최상위 노드(Node)에서 다른 자식 노드들이 뻗어나가는 구조를 가지고 있습니다. DOM은 HTML로 구성된 웹 페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할을 해요. DOM 생성되는 순서HTML 웹 페이지는 HTML 파서에 의해 DOM으로 변환됩니다.여기서 파서가 .. 2025. 2. 10. [Git] Git tag tag 란?branch와 tag는 매우 비슷tag = commit_idbranch = checkout한 브랜치의 최신 commit_id 를 가리킨다. 태그 조회 CLI 모든 태그 조회$ git tag 태그 조건 검색-l 또는 --list 옵션 및 와일드카드(*) 패턴 활용-l 혹은 --list옵션으로 태그명 기준의 검색 조건을 줄 수 있습니다. 태그명에는 예를 들어 “v1.0*“처럼 *로 와일드카드를 붙여 유연한 처리$ git tag -l {태그 이름}$ git tag -l v1.1.* 태그 상세 내용 확인$ git show {태그 이름} 태그 생성 tag를 지정할 때 태그이름 뒤에 커밋 ID(체크섬, checksum)을 명시하지 않으면 현재 HEAD가 가리키는 최신 커밋에 태그가 붙게 됩니다. .. 2025. 1. 15. [Git] git .md 마크업 문서 (e.g. CHANGELOG.md / README.md) 개요Git 저장소를 관리하고 프로젝트의 품질을 높이기 위해 README.md와 CHANGELOG.md 파일은 필수적입니다. 이 블로그에서는 각 파일의 역할과 작성 요령에 대해 알아보겠습니다. README.md란?README.md는 프로젝트의 첫인상을 결정짓는 파일입니다.주로 프로젝트의 개요와 사용법을 설명하며 GitHub, GitLab과 같은 플랫폼에서는 저장소의 메인 페이지에 README.md의 내용이 바로 표시됩니다. README.md 주요 작성 내용프로젝트 개요: 프로젝트의 목적과 기능 설명설치 방법: 사용자 환경에 프로젝트를 설치하는 방법사용 예제: 주요 기능을 간단히 시연하는 코드나 설명기여 가이드: 다른 개발자가 프로젝트에 기여할 수 있는 방법라이선스: 프로젝트 사용 시 적용되는 라이선스 정.. 2025. 1. 15. [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. [CS] GB와 GiB: 기가바이트와 기비바이트의 차이점 GB, GiB 이란 무엇인가요?공통점두 접두사 모두 디지털 기기의 측정 단위 차이점GB : 전통적인 단위입니다,metric 1GB는 1,000³ 바이트에 해당하는 측정 스타일GiB : 바이너리 메서드를 사용한 컴퓨터 저장장치의 단위,1 GiB는 1024³ 바이트 에 해당하는 측정 스타일 GiB 사용하는 경우바이너리 메서드는 메모리 크기 즉, 컴퓨터의 저장장치의 용량을 말한다.GiB는 메모리나 저장장치의 용량을 보다 정확하게 계산하고 표기하는 데 활용한다.예시)컴퓨터의 RAM이나 SSD/HDD의 용량은 실제 데이터 저장 공간을 바이트 단위로 나열하는 방식이므로, 이진 접두사인 GiB, TiB 등을 사용해 용량을 표시하는 것이 보다 정확한 표현이 됩니다.GB vs GiB-왜 소문자 'i'인가요?기비바이트.. 2024. 11. 15. [Node.js] NPM, CDN 차이 NPM, CDN 차이npm(Node Package Manager):주로 Node.js 및 웹 개발에 사용되는 패키지 관리자입니다.프로젝트에 필요한 패키지(라이브러리, 도구 등)를 관리하고 설치하는 데 사용프로젝트에서 필요로 하는 라이브러리나 도구들을 npm을 통해 설치npm은 패키지 관리와 의존성 관리에 사용CDN(Content Delivery Network):정적 파일(예: JavaScript, CSS, 이미지 등)을 배포하고 제공하는 서비스전 세계에 분산된 서버로부터 파일을 제공하여 사용자에게 빠르고 안정적인 다운로드를 제공정적 파일을 제공하는데 사용됩니다. 웹 페이지에서 필요로 하는 JavaScript 라이브러리나 CSS 스타일시트 등을 CDN을 통해 불러 옴정적 파일을 배포하고 제공하는 데 사용 .. 2024. 11. 8. 이전 1 2 3 4 ··· 13 다음 728x90
