본문 바로가기
반응형

Develop Log

이미지를 더 가볍게 더 깔끔하게! webp!! webp webp는 Google에서 개발한 현대적인 이미지 포맷 주요 목적은 이미지의 파일 크기를 줄이면서 고품질을 유지하는 것이며, webp 포맷은 특히 웹에서의 빠른 로딩 속도와 데이터 사용량 최소화를 위해 설계되었다. 공식 문서 사이트 : https://developers.google.com/speed/webp?hl=ko 웹용 이미지 형식 | WebP | Google for Developers 더 작은 웹용 이미지를 만들고 변환기 다운로드 및 지원 링크를 가져오는 이 이미지 형식에 관해 알아보세요. developers.google.com 탄생 배경 webp 포맷의 탄생 배경은 웹의 성능 최적화와 깊은 관련이 있다. 웹 페이지 로딩 속도는 사용자 경험에 큰 영향을 미치며, 이미지는 웹 페이지 데이터의.. 더보기
웹 컴포넌트 알아보기 웹 컴포넌트 웹 컴포넌트(Web Components)는 웹 페이지와 웹 앱을 만드는 데 사용하는 재사용 가능한 사용자 지정 요소를 만들 수 있게 하는 기술들의 집합이다. 웹 컴포넌트는 네이티브 웹 표준을 기반으로 하므로, 추가적인 라이브러리나 프레임워크 없이도 동작하며, 다양한 프레임워크와 함께 사용될 수 있다. 생기게 된 계기 프레임워크의 파편화: 웹 개발의 역사를 거슬러 올라가면, 다양한 JavaScript 라이브러리와 프레임워크들이 서로 경쟁하며 성장해 오며 jQuery, Angular, React, Vue 등과 같은 도구들이 각자의 컴포넌트 시스템을 가지게 되었다. 이로 인해 동일한 컴포넌트를 다양한 프레임워크에 맞게 재작성해야 하는 상황이 발생하게 되었고, 웹 컴포넌트는 이러한 프레임워크의 경계.. 더보기
이벤트 델리게이션 알아보기 이벤트 델리게이션이란? 이벤트 델리게이션(Event Delegation)은 특정 요소의 모든 자식에 개별 이벤트 리스너를 추가하는 대신, 상위 요소에 단 하나의 이벤트 리스너를 추가하는 기법이다. 상위 요소에서 발생한 이벤트는 하위 요소까지 전파되는 이벤트 버블링을 활용하여 작동하는데 이번 내용에서는 델리게이션 기법을 사용하여 어떻게 코드를 구성하는지, 왜 사용하는지 알아보려고 한다. 기본 동작 원리 이벤트 델리게이션의 기본 원리는 DOM 이벤트가 버블링(bubbling) 되는 방식을 활용하는 것이다. 이벤트 버블링(Event Bubbling) 이벤트 버블링은 특정 DOM 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위의 요소로 전파되는 현상을 의미한다. 이 현상은 최상위 요소(대게 document .. 더보기
yarn의 두번째 버전 Yarn Berry Yarn, Yarn Berry 둘이 뭐가 다를까? Yarn Berry는 Yarn의 두 번째 주요 버전인 Yarn 2를 의미한다. Yarn의 첫 번째 버전은 매우 성공적이었지만, 그 성공에 따른 한계와 더 나은 패키지 관리 방식에 대한 요구가 커지면서, Yarn 팀은 철저한 리팩토링과 새로운 기능 추가를 통해 Yarn 2, 즉 Yarn Berry를 발표했는데 이러한 yarn berry가 기존 yarn과 어떤 차이가 있는지, 기존 버전과 어떤 차이가 있는지 알아보려고 한다. Yarn yarn은 2016년에 Facebook, Google, Exponent 및 Tilde에 의해 출시된 패키지 매니저로써 npm 레지스트리와 호환성을 유지하면서 보다 빠르고 안정적인 패키지 설치를 제공하기 위해 만들어졌다. yarn.. 더보기
친숙하지만 생소한 NPM, Yarn 알아보기 NPM ? Yarn ? 자바스크립트 개발을 할 때, 우리는 종종 라이브러리나 도구를 프로젝트에 추가해야 한다. 이를 도와주는 도구들이 바로 패키지 매니저인데, 가장 많이 쓰이고 프로젝트를 생성할 때 가장 먼저 보이는 패키지 매니저 npm과 yarn에 대해 알아보려고 한다. NPM (Node Package Manager) npm은 Node.js에서 기본으로 제공되는 패키지 매니저로, 2010년에 처음 출시되었다. Node.js의 초창기부터 빠르게 성장하면서, 커뮤니티는 공유된 코드 조각들을 쉽게 관리하고 배포할 방법의 필요성을 느꼈고, 이에 따라 npm이 탄생하게 되었다. 기능 패키지 저장소: npm은 수백만 개의 자바스크립트 라이브러리와 도구를 호스팅하는 중앙 저장소 역할을 한다. 패키지 설치 & 관리:.. 더보기
SQL, NoSQL 알아보기 SQL SQL(Structured Query Language)은 관계형 데이터베이스 관리 시스템(RDBMS)에서 데이터를 관리하기 위해 사용하는 표준 프로그래밍 언어 SQL을 사용하여 데이터베이스에 데이터를 추가, 수정, 삭제하거나 데이터를 검색하는 등의 작업을 수행할 수 있다. SQL은 대부분의 관계형 데이터베이스 시스템에서 사용되며, 그 표준은 ANSI/ISO에 의해 정의되어 있다. 그러나 많은 RDBMS들은 자체적인 SQL 변형을 포함하고 있고, 많은 개발자들이 사용하는 Microsoft의 SQL Server, Oracle, MySQL, PostgreSQL 등은 모두 SQL을 기반과 더불어, 각각의 시스템별로 고유의 함수나 문법이 존재한다. SQL을 통해 데이터를 안전하게 저장하고, 검색, 수정 및.. 더보기
CORS 파헤치기 CORS (Cross-Origin Resource Sharing) CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 웹 페이지의 리소스가 다른 도메인의 리소스에 어떻게 접근할 수 있는지를 정의하는 웹 브라우저에서 사용하는 보안 특성이다. 웹 애플리케이션은 종종 다른 도메인에서 데이터를 가져오기 위해 XMLHttpRequest나 Fetch API를 사용한다. 보안상의 이유로, 웹 브라우저는 "동일 출처 정책"(Same-Origin Policy)을 시행하여 웹 페이지가 다른 도메인의 리소스에 기본적으로 접근하는 것을 하는데, 이 정책은 악의적인 웹사이트가 사용자 데이터에 접근하거나 변경하는 것을 방지하기 위한 목적으로 사용된다. 하지만, 이러한 동일 출처 정책 때문에.. 더보기
React 기본 제공 컴포넌트 Suspense, Fragment 내장 컴포넌트 React는 특별한 역할을 수행하도록 설계된 내장 컴포넌트가 있다. 기본으로 제공되는 컴포넌트의 역할은 다양한 문제나 요구 사항을 해결하게 도와주며, 개발을 돕기 위한 도구나 특정 문제에 대한 해결책, 성능 최적화를 위한 도구 등이 포함된다. 불필요한 div태그의 사용을 줄여주는 , 비동기 요청을 통해 로딩중일 때의 화면을 보여줄 때 사용하는 등 개발시 자주 사용되는 몇 가지 기본 내장 컴포넌트를 알아보려고 한다. 주요 내장 컴포넌트 Fragment 는 React의 내장 컴포넌트 중 하나로, 주로 여러 컴포넌트나 요소를 그룹화하는 데 사용된다. 의 가장 큰 특징은 불필요한 DOM 노드를 생성하지 않는다는 것이다. 주요 특징 DOM 노드를 추가하지 않는다: Fragment는 렌더링 결과에 직.. 더보기
반응형

티스토리툴바