분류 전체보기 (55) 썸네일형 리스트형 React에서 props 타입 선언: interface vs type 비교 React에서 TypeScript를 사용할 때 props의 타입을 선언하는 방법으로 `interface`와 `type`을 사용할 수 있습니다. 이 두 가지 방법은 문법적으로 비슷하지만, 몇 가지 차이점이 있습니다. 이번 글에서는 `interface`와 `type`의 차이점을 비교하고, 어떤 경우에 어떤 방식을 선택하는 것이 좋은지 알아보겠습니다.1. interface vs type 기본 개념interface ButtonProps { label: string; onClick: () => void;}const Button: React.FC = ({ label, onClick }) => { return {label};};interface`interface`는 객체의 구조를 정의하는 데 사용되며, 상속(e.. 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를 사용하면.. 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 4장 단계 이미지 갤러리 최적화 이 장에서는 이미지 갤러리 서비스로 다양한 주제의 이미지를 격자 형태로 보여준다. 마치 인스타그램 사진 보기 처럼 배열이 되어있다. 그리고 클릭시 큰 이미지로 나타나고 배경색은 이미지 색상과 비슷한 색으로 맞춰진다.이 장에서 학습할 최적화 기법이미지 지연로딩레이아웃 이동 피하기리덕스 렌더링 최적화병목 코드 최적화이미지 지연로딩은 3장에서는 Intersection Observer API를 이용했고 이번에는 npm에 있는 이미지 지연 라이브러리를 사용해보자.레이아웃 이동 피하기는 일단 레이아웃 이동(Layout shift)에 대해서 알아야하는데 이는 화면상의 요소 변화로 레이아웃이 갑자기 밀리는 현상을 의미한다. 특히 이미지 로딩 과정에서 레이아웃 이동이 많이 발생하는데 이 경험은 좋지 않은 경험을 준다. .. 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 3장 홈페이지 최적화 이번 장에서는이미지 지연 로딩이미지 사이즈 최적화폰트 최적화캐시 최적화불필요한 css 제거에 대해서 학습하자.이미지 지연로딩이미지 지연 로딩은 말 그래도 첫 화면에 당장 필요하지 않은 이미지가 먼저 로드되지 않도록 지연시키는 기법이다. 이렇게 함으로써 사용자에게 가장 먼저 보이는 콘텐츠를 더 빠르게 로드할 수 있다.이미지 사이즈 최적화1장에서는 CDN에서 로드되었기 때문에 url만 수정하면 쉽게 이미지 사이즈를 조절할 수 있다. 이번 장에서는 CDN 이미지가 아닌 서버에 저장되어 있는 정적 이미지를 최적화해 볼 것이다.폰트 최적화폰트는 FE 개발에서 빠질 수 없는 주제이다. 커스텀 폰트를 적용하려고 할때 몇가지 성능 문제를 야기할 수 있는데 커스텀 폰트를 적용할 때 발생할 수 있는 문제를 알아보고 최적화.. 웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 2장 올림픽 통계 서비스 최적화 이 장에서 학습할 최적화 기법CSS 애니메이션 최적화브라우저가 어떻게 화면을 그리는지 학습하고, 이를 바탕으로 해결책을 찾아 적용컴포넌트 지연 로딩1장에서 코드 분할 기법을 배워 이 기법을 이용해 분할된 코드를 필요한 시점에 로드되도록 적용. 이번에도 비슷하지만 페이지 코드 자체를 분할하는 대신 단일 컴포넌트를 분할하여 컴포넌트가 쓰이는 순간에 불러오도록 변경컴포넌트 사전 로딩컴포넌트를 분할하여 지연 로딩을 적용하면, 첫 화면 진입 시 분할된 코드 중 당장 필요한 코드만 다운로드 하기때문에 첫 화면을 더 빠르게 그릴 수 있다. 하지만 서비스 이용 과정에서 분할된 컴포넌트를 사용하려고 할 때, 다운로드 되어 있지 않은 코드를 추가로 다운로드하는 시간만큼 서비스 이용에 지연이 생긴다. 이를 위해 첫 화면에는.. 이전 1 2 3 4 ··· 7 다음
