개발 (32) 썸네일형 리스트형 e.preventDefault();의 역할과 언제 사용해야 할까? 웹 개발을 하다 보면 e.preventDefault();라는 코드를 자주 접하게 됩니다. 이 메서드는 이벤트의 기본 동작을 막는 역할을 하는데, 특히 폼 제출, 링크 이동, 드래그 앤 드롭 등의 기능을 조작할 때 유용합니다. 이번 글에서는 e.preventDefault();의 역할과 실제 사용 사례를 알아보겠습니다. e.preventDefault();란?e.preventDefault();는 브라우저의 기본 이벤트 동작을 막아주는 함수입니다.즉, 특정 이벤트(예: click, submit, keydown 등) 발생 시 브라우저가 기본적으로 수행하는 동작을 하지 못하도록 막을 수 있습니다. 이를 통해 개발자는 원하는 방식으로 이벤트를 제어할 수 있습니다. 🎯 e.preventDefault();가 필요한 대.. 돈을 아끼기 위한 무료 서버 배포 전략 (3편) Docker와 PM2, 뭐가 다를까?서버를 운영할 때, "어떤 툴로 관리하는 게 가장 효율적일까?" 라는 고민이 생길 수 있다.처음 보면 Docker와 PM2가 비슷해 보이지만, 사실 완전히 다른 역할을 한다.이번 글에서는 이 둘의 차이점과 언제 어떤 걸 사용하면 좋을지 명확하게 정리해보자. 1️⃣ Docker랑 PM2가 비슷해 보이는 이유✔ 둘 다 서버를 실행하고 관리하는 역할을 한다.✔ 둘 다 여러 개의 프로세스를 효율적으로 관리할 수 있다.✔ 둘 다 서버 환경을 일정하게 유지하는 데 도움을 준다.이런 공통점 때문에, 처음 접하는 사람은 "둘 다 서버가 멈추면 다시 실행해주는 툴 아닌가?" 라고 생각할 수 있다.하지만, 실제 역할은 완전히 다르다. 2️⃣ Docker vs PM2, 뭐가 다를까?🐳 .. 돈을 아끼기 위한 무료 서버 배포 전략 (2편) Docker가 리소스를 절약해줄까? 서버를 운영할 때 가장 중요한 건 리소스 관리다.Docker를 쓰면 뭔가 가볍고, 최적화가 잘 될 것 같은 느낌이 드는데… 과연 Docker를 사용하면 리소스를 절약할 수 있을까?이번 글에서는 Docker의 실제 리소스 사용량과 효율성에 대해 다뤄보자.1️⃣ Docker를 쓰면 진짜 리소스가 줄어들까? Docker를 처음 접하면 흔히 “Docker를 사용하면 리소스를 줄일 수 있다” 라고 생각하기 쉽다.하지만 결론부터 말하자면, Docker 자체가 리소스를 줄여주지는 않는다. 🚨 Docker는 VM이 아니다! 많이들 오해하는 게 Docker가 가상머신(VM)처럼 동작한다고 생각하는 건데, 사실 Docker는 가상화가 아니다. • VM (Virtual Machine):.. 피같은 내 돈을 아끼기 위한 무료 서버 구축 1 1. Docker 개념 & 무료 서버 구축 (오늘 작성할 글) ✅ 2. AWS Free Tier vs. 개인 서버, 어디서 배포하는 게 좋을까? 3. Docker Compose로 Node.js + DB + 프론트엔드 쉽게 배포하는 법 4. 무료 클라우드 DB(MongoDB Atlas) vs. 로컬 DB 운영 전략 5. AdSense & 무료 서버에서 광고 수익화 가능한가? 💡 [1편] Docker 개념 & 무료 서버 구축 1️⃣ 무료 서버 배포가 필요한 이유 개인 프로젝트나 사이드 프로젝트를 만들다 보면, 서버를 배포할 때 가장 먼저 드는 고민이 비용 문제다.✅ 무료로 배포하고 싶은데 어디서 해야 하지?✅ AWS Free Tier를 써야 할까? 내 남는 노트북을 활용해야 할까?✅ Docker를 사용하면.. 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 3장 홈페이지 최적화 이번 장에서는이미지 지연 로딩이미지 사이즈 최적화폰트 최적화캐시 최적화불필요한 css 제거에 대해서 학습하자.이미지 지연로딩이미지 지연 로딩은 말 그래도 첫 화면에 당장 필요하지 않은 이미지가 먼저 로드되지 않도록 지연시키는 기법이다. 이렇게 함으로써 사용자에게 가장 먼저 보이는 콘텐츠를 더 빠르게 로드할 수 있다.이미지 사이즈 최적화1장에서는 CDN에서 로드되었기 때문에 url만 수정하면 쉽게 이미지 사이즈를 조절할 수 있다. 이번 장에서는 CDN 이미지가 아닌 서버에 저장되어 있는 정적 이미지를 최적화해 볼 것이다.폰트 최적화폰트는 FE 개발에서 빠질 수 없는 주제이다. 커스텀 폰트를 적용하려고 할때 몇가지 성능 문제를 야기할 수 있는데 커스텀 폰트를 적용할 때 발생할 수 있는 문제를 알아보고 최적화.. 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 2장 올림픽 통계 서비스 최적화 이 장에서 학습할 최적화 기법CSS 애니메이션 최적화브라우저가 어떻게 화면을 그리는지 학습하고, 이를 바탕으로 해결책을 찾아 적용컴포넌트 지연 로딩1장에서 코드 분할 기법을 배워 이 기법을 이용해 분할된 코드를 필요한 시점에 로드되도록 적용. 이번에도 비슷하지만 페이지 코드 자체를 분할하는 대신 단일 컴포넌트를 분할하여 컴포넌트가 쓰이는 순간에 불러오도록 변경컴포넌트 사전 로딩컴포넌트를 분할하여 지연 로딩을 적용하면, 첫 화면 진입 시 분할된 코드 중 당장 필요한 코드만 다운로드 하기때문에 첫 화면을 더 빠르게 그릴 수 있다. 하지만 서비스 이용 과정에서 분할된 컴포넌트를 사용하려고 할 때, 다운로드 되어 있지 않은 코드를 추가로 다운로드하는 시간만큼 서비스 이용에 지연이 생긴다. 이를 위해 첫 화면에는.. 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 1장 블로그 서비스 최적화 이미지 사이즈 최적화코드 분할텍스트 압축병목 코드 최적화앞의 3개는 로딩 성능을 최적화이고 병목 코드 최적화는 렌더링 성능을 최적화하는 방법이다.이미지 사이즈 최적화너무 큰 사이즈의 이미지를 무분별하게 사용하면 네트워크 트래픽이 증가해 서비스 로딩이 오래 걸린다.코드 분할spa 특성상 모든 react 코드가 하나의 자바스크립트 파일로 번들링되어 로드되기 때문에, 첫 페이지 진입 시 당장 사용하지 않는 코드가 다소 포함되어 있다. 이때 코드 분할을 통해 필요없는 코드를 떼어내고, 해당 코드를 필요한 시점에 따라 로드할 수 있다.텍스트 압축웹페이지를 접속하면 다양한 리소스를 내려받는데, 그중 html, css, js 가 포함되어 있다. 이런 리소스는 다운로드 전에 서버에서 미리 압축할 수 있다. 그러면 원래.. ARIA 속성에 대하여 - 웹 접근성 ARIAARIA(Accesible Rich Internet Application) 속성은 웹 어플리케이션에서 접근성을 개선하기 위한 HTML 속성이다. WAI-ARIA라고도 불리며, 웹 페이지가 시멘틱 마크업만으로 충분하지 않은 경우에 사용되며, 보조기술이 페이지 요소를 올바르게 해석하고 상호작용할 수 있게 한다.주요 목표로는동적 컨텐츠와 인터렉티브 요소를 보조 기술에서도 잘 인식할 수 있게 하는 것.javaScript로 동적으로 생성되는 컨텐츠, 버튼, 모달 등의 웹 어플리케이션이 올바르게 접근할 수 있도록 만든다.ARIA 속성의 분류ARIA 역할(Role) 확인각 HTML의 요소의 목적과 동작 방식을 정의.ARIA 상태 및 속성 수락 // 요소가 체크 되었는지 확인메뉴 보기 // 요소가 펼쳐져 있는지.. 이전 1 2 3 4 다음
