sungmin08 님의 블로그

💡 들어가며React를 새로 시작할 때 가장 먼저 부딪히는 부분이 프로젝트 초기 설정이다.기존의 create-react-app은 편리하지만 빌드 속도와 설정 유연성 측면에서 다소 무겁다.그래서 최근에는 Vite(비트) 를 사용해 React 프로젝트를 만드는 것이 표준이 되었다.Vite는 프랑스어로 “빠르다(Quick)”라는 뜻이며빌드 속도와 개발 서버 구동 속도가 CRA보다 훨씬 빠르다.이번 글에서는 Vite 기반의 React 프로젝트를 1분 만에 초기화하는 과정을 정리한다.⚙️ 1️⃣ Node.js 버전 확인Vite를 사용하려면 Node.js 14 이상이 필요하다.터미널에서 버전을 확인한다. node -v예시 출력:v18.17.1버전이 낮다면 Node 공식 사이트에서 LTS 버전으로 업데이트한다.🧩..

💡 들어가며Firebase는 구글이 제공하는 서버리스(Serverless) 백엔드 플랫폼이다.로그인, 데이터베이스, 파일 업로드, 알림 등앱 개발에 필요한 거의 모든 기능을 무료 플랜(Free Tier) 에서 바로 사용할 수 있다.이번 글에서는 React 프로젝트에 Firebase를 연동하고Auth, Firestore, Storage 3가지를 설정하는 과정을 단계별로 정리한다.⚙️ 1️⃣ Firebase 프로젝트 생성Firebase Console 접속“프로젝트 추가” 클릭프로젝트 이름 입력Google Analytics는 필요에 따라 끄거나 켠다.생성 완료 후 대시보드 진입🧩 2️⃣ Firebase SDK 추가Firebase에서 “웹 앱 추가” 버튼을 클릭한다.이름은 프로젝트 이름으로 입력하고“Fire..

💡 들어가며React 앱에서 페이지를 이동하면 기본적으로 순간적으로 화면이 교체된다.이때 사용자 입장에서는 "화면이 툭 바뀌는" 듯한 어색함을 느낄 수 있다.감성형 웹앱이라면 자연스러운 전환 애니메이션이 주는 몰입감이 매우 크다.이를 간단하게 구현할 수 있는 도구가 바로 Framer Motion이다.이번 글에서는 React Router 기반 앱에서framer-motion을 이용해 페이지 간 Fade In / Out 애니메이션을 구현하는 방법을 알아본다.⚙️ 1️⃣ Framer Motion 설치터미널에서 아래 명령어를 입력한다.npm install framer-motion또는 yarn을 사용하는 경우:yarn add framer-motion설치가 완료되면 모든 컴포넌트에서motion 객체를 사용해 손쉽게..

💡 들어가며웹에서 이미지를 업로드할 때 사진 한 장의 용량이 3MB만 넘어도업로드 시간이 길어지고 사용자 경험(UX)이 나빠진다.특히 React + Firebase 기반의 개인 프로젝트에서는이미지 최적화를 따로 처리하지 않으면 “느린 앱” 으로 느껴지기 쉽다.이 문제를 해결하기 위해 이번 글에서는browser-image-compression 라이브러리를 사용해클라이언트 측에서 이미지를 자동으로 압축 후 업로드하는 방법을 다룬다.⚙️ 1️⃣ 라이브러리 설치터미널에서 아래 명령어를 입력한다.npm install browser-image-compression 또는 yarn을 사용한다면yarn add browser-image-compression 이 라이브러리는 브라우저에서 직접 이미지를 압축해주는 경량 모..

💡 들어가며React로 개발을 마친 후, “이걸 바로 다른 사람들에게 보여주고 싶다!”라는 순간이 온다.이때 가장 간단하면서도 무료로 배포할 수 있는 방법이 바로 GitHub + Vercel 연동 배포이다.이번 글에서는 내 로컬 프로젝트를 GitHub에 업로드(푸시) 하고Vercel이 자동으로 빌드하여 배포하는 전 과정을 따라 해보도록 하자🧭 1. GitHub 저장소 생성하기GitHub 로그인 후 우측 상단 “New repository” 클릭저장소 이름 예시:내 프로젝트 이름옵션은 기본값으로 두고 “Create repository” 클릭💡 초기화 시 README.md를 함께 생성하면 편리하다.🧩 2. 로컬 프로젝트에 Git 초기화터미널을 열고 현재 React 프로젝트 루트 폴더로 이동한다.cd ~..

🧠 1. React는 뭔가요?React는 프론트엔드 라이브러리예요.쉽게 말하면, 웹사이트의 화면(UI)을 만들기 위한 JavaScript 도구입니다.HTML로만 화면을 만들면 복잡해지고 관리가 어려워져요.React를 쓰면 컴포넌트 단위로 웹페이지를 쪼개서 만들 수 있어요.📌 예: 쇼핑몰 화면을 '헤더', '상품 목록', '장바구니' 등으로 쪼개서 코드로 만들 수 있어요. ⚡ 2. Vite는 뭔가요?React 자체는 그냥 JavaScript 코드예요.근데 이 코드를 웹브라우저에서 실행하려면 **복잡한 작업(번들링, 변환 등)**이 필요해요.예전에는?create-react-app이라는 도구를 써서 준비했어요.하지만 느리고 복잡했어요.요즘은?Vite라는 도구를 씁니다! 훨씬 빠르고 간단해요.Vite는 Re..