728x90 frontend67 [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. [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. [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. [Node.js] npm install - 패키지 종속성 유형(Dependencies, devDependencies) 설치 및 라이브러리 호환성 맞추는 방법 개요라이브러리 업데이트와 버전 관리는 프로젝트에서 중요한 부분입니다. 의존성 모듈과 개발 환경 모듈을 명확하게 구분하는 것이 중요합니다.Node.js 버전은 프로젝트에서 확실히 정의해야 하며, 라이브러리는 신중하게 추가하고 필요할 때만 정기적으로 업데이트하는 것이 좋습니다.라이브러리가 많아질수록 관리가 어려워지므로, 의존성 관리에 신경을 써야 합니다. [Node.js] Node.js 기본 개념 및 환경 설정: package.json 파일 구성 방법https://sillimmouse.tistory.com/82 패키지 유형실제로 어플리케이션 운용에 필요한 의존성 여부dependencies: 실제 런타임에서 사용되는 패키지devDependencies: 개발 모드일 때만 의존하고 있는 패키지peerDepend.. 2024. 11. 8. [WEB] 웹페이지 접근성 높히는 방법, 인클루시브 디자인(inclusive design) 이란? 개요디지털 서비스가 일상 생활에 큰 영향을 미치는 오늘날, 누구나 쉽게 접근하고 이용할 수 있는 웹 환경을 제공하는 것은 필중요합니다.모든 사용자가 차별 없이 콘텐츠에 접근할 수 있도록 보장하는 것은 사회적으로도 중요하며 사용자 경험을 개선 및 넓은 사용자층을 확보하여 회사에도 영향을 줍니다.사용자 인터페이스 개선에 관련하여 웹 프론트엔드 개발자가 다양한 사용자의 요구를 반영 해야하는 이유와 방법 등을 알아보자 인클루시브 디자인 (Inclusive Design) 이란?다양한 사용자들이 제품이나 서비스를 이용할 수 있도록 설계하는 방법론포괄적인 디자인은 제품, 서비스 또는 환경이 가능한 한 많은 사람들, 특히 전통적으로 인터페이스를 사용하거나 환경을 탐색할 수 없도록 배제된 그룹이 사용할 수 있도록 디자인.. 2024. 9. 26. [React] react_devtools_backend_compact.js:13851 Warning: Failed prop type: Invalid prop `onChange` of type `boolean` supplied to `ForwardRef(TextField)`, expected `function`. 오류 메시지react_devtools_backend_compact.js:13851 Warning: Failed prop type: Invalid prop `onChange` of type `boolean` supplied to `ForwardRef(TextField)`, expected `function`. 원인value로 받는 타입과 리턴으로 받는 타입이 일치하지 않아서 발생하는 메시지이다.정해진 타입으로 받을 수 있도록 코드를 수정해야 한다.해당 코드const value: string;onChange: (_e: React.ChangeEvent) => void;const handleChange = () => { if (maxLength) { if (value.length > maxLen.. 2024. 9. 19. 이전 1 2 3 4 ··· 8 다음 728x90
