본문 바로가기

개발/Front-end

 (12)
e.preventDefault();의 역할과 언제 사용해야 할까? 웹 개발을 하다 보면 e.preventDefault();라는 코드를 자주 접하게 됩니다. 이 메서드는 이벤트의 기본 동작을 막는 역할을 하는데, 특히 폼 제출, 링크 이동, 드래그 앤 드롭 등의 기능을 조작할 때 유용합니다. 이번 글에서는 e.preventDefault();의 역할과 실제 사용 사례를 알아보겠습니다. e.preventDefault();란?e.preventDefault();는 브라우저의 기본 이벤트 동작을 막아주는 함수입니다.즉, 특정 이벤트(예: click, submit, keydown 등) 발생 시 브라우저가 기본적으로 수행하는 동작을 하지 못하도록 막을 수 있습니다. 이를 통해 개발자는 원하는 방식으로 이벤트를 제어할 수 있습니다. 🎯 e.preventDefault();가 필요한 대..
웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 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 상태 및 속성 수락 // 요소가 체크 되었는지 확인메뉴 보기 // 요소가 펼쳐져 있는지..
웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 0 2년전에 책을 구입하고 실습과 함께 진행해야해서 미뤄두었다가 추석때 시간을 내서 읽기 시작하였다. 정리하며 읽어보자. 머리말에 인상깊은 말들이 있는데웹 성능의 향상이 사용자를 서비스에 머무르게 하여 서비스의 성공을 가져온다.실력의 차이를 만드는 프론트엔드 개발자의 디테일웹 개발에 어느정도 익숙한 개발자라면 원하는 기능을 구현하는 데 큰 어려움이 없을 것이다. 하지만 한 끗 차이를 만드는 건, 정확한 기능 구현을 넘어 사용자 경험까지 생각하는 섬세함이다. 콘텐츠 사이즈 최적화, 컴포넌트 지연로딩과 사전로딩, 병목코드 최적화, 캐시 최적화 등 더 향상된 로딩 성능과 렌더링 성능으로 경쟁력을 높여보자.구글의 주장하는 핵심은 “성능이 저하되면 사용자가 떠나고 매출이 감소한다”웹 성능을 결정하는 요소는 크게 로딩..
고급 개발자가 되는 길 어느덧 개발 경력이 만 4년이 되가고 5년차 개발자가 되어가고 있다. 나는 물경력이 아닌 제대로된 경력을 쌓아가며 성장하고 있을까?내가 주니어 개발자가 아닌 시니어 개발자, 고급 개발자가 되기 위해서는 무엇을 해야할까. 이 포스팅에서 고급 개발자가 되는 길을 정리하는 공간으로 만들어보자. 나는 프론트엔드 개발자다. 프론트엔드는 10년 전만해도 없었던 직무이다. 10년 전부터 클라이언트 사이드 개발이 중요해지고 ssr 보다는 csr을 중심으로 개발이 초점에 맞춰 진행이 되면서 생겨난 직무로 히스토리가 길지 않아 제대로 된 정답이라는게 딱히 없는 분야이다(오답은 있는듯). 그렇기에 내가 맞다고 생각하는 길을 정의하고 가야하는데,개발시장, 많은 회사에서 프론트엔드 개발자에게 원하는 능력을 정리해보면 1. 의사..
react-router-dom v6 무엇이 바뀌었는가? React-router-dom에 많은 변경사항이 생겼다 해서 찾아보았다. 차이점을 알아보고 마지막에는 hashRouter와 browserRouter의 차이점까지 알아보자. 그전에 react-router에 대해 간단히 알아보면 React에서 브라우저 라우팅을 관리하기 위해 사용하는 라이브러리로 spa의 약점을 보완하기 위해 나왔다. 말 그대로 라우팅을 다루며 다른 주소에 다른 화면을 보여주는 역할을 한다. React 프로젝트를 하면 필수적으로 사용하는 라이브러리이다. 일단 이 포스팅은 react-router에 대해 알아보는 것이 아닌 v5 → v6로 업데이트로 변경된 점을 알아보기 위한 글이므로 여기까지만 정리하고 넘어가자. Switch대신 Routes 기존에는 Switch를 사용하여 복수개의 route를..

티스토리툴바