React47 [React] 홈페이지 메인화면에 배경 영상 추가하기 안녕하세요 오늘은 웹 페이지에 동영상을 추가해보도록 하겠습니다. 무료 동영상 다운로드는 아래 홈페이지에서 가능합니다 ( 고해상도 자연, 도시, 인트로 영상 다수 보유) Pexels - https://www.pexels.com 1. public 폴더 안에 videos 폴더를 만들어줍니다. public 폴더 - 정적 파일(이미지, 영상, 글꼴 등)을 넣는 곳- 접근방식: public/ 안에 넣은 파일은 컴파일 없이 그대로 URL로 접근됨 ex) (/videos/intro.mp4)- 사용 목적: 번들러(Webpack, Vite 등)가 가공하면 경로 꼬이거나 크기 최적화될 수 있으니까, 가공하지 않고 "그대로 쓰는 리소스"는 여기에 넣는 것Pexels 에서 다운 받은 영상을 videos 폴더에 넣어줍니다 .. 2025. 7. 26. [React] Tailwind CSS와 useState를 활용한 간단한 계산기 구현 안녕하세요 오늘은 React의 useState 훅과 Tailwind CSS를 활용하여 간단한 계산기를 만들어 보는 예제를 함께 살펴보겠습니다.계산기 예제는 매우 간단하지만 프론트엔드 개발의 핵심인 상태 관리, 이벤트 처리, 그리고 UI 구성을 매우 효과적으로 배우고 이해할 수 있는 좋은 예제입니다.( React 프로젝트 환경: vite ) 1. 상태 관리 및 로직 - 계산기의 핵심 기능과 내부 데이터를 관리합니다. - useState 훅: React에서 컴포넌트의 상태(데이터)를 관리하기 위해 사용하는 훅입니다.- handleNumber(num) 함수: 숫자 버튼(0-9, .)이 클릭되었을 때 호출됩니다.- handleOperator(op) 함수: 연산자 버튼(+, -, *, /)이 클릭되었을 때 호.. 2025. 7. 24. [React] Tailwind CSS 라이브러리 사용해 페이지네이션 구현하기 안녕하세요 오늘은 Tailwind CSS 라이브러리를 사용해 페이지네이션을 구현해보도록 하겠습니다. Tailwind CSS 라이브러리 "유틸리티-퍼스트(utility-first)" CSS 프레임워크" 입니다. 여기서 "라이브러리"라는 표현도 쓰이지만, 정확히는 CSS 프레임워크라고 부르는 것이 더 적절합니다. - 기존 CSS 프레임워크 (예: Bootstrap)와의 차이점 Bootstrap: 미리 정의된 컴포넌트(버튼, 카드, 내비게이션 바 등)를 제공하고, 해당 컴포넌트에 btn, card, navbar와 같은 클래스를 부여하여 사용합니다. 디자인이 정해져 있어서 빠르게 만들 수 있지만, 커스터마이징하려면 복잡한 CSS 오버라이딩이 필요할 때가 많습니다.Tailwind CSS: btn이나 card .. 2025. 7. 24. [React] Motion 라이브러리 사용하여 스크롤 진행바 (scrollYProgress 사용) 애니메이션 구현하기 안녕하세요 오늘은 리액트의 가장 유명한 애니메이션 라이브러리 중 하나인 Motion (구 Framer Motion) 을 사용하여 애니메이션을 구현해보도록 하겠습니다. 블로그나 기사를 볼때 전체 분량 중 얼마나 읽고 있는지 progress bar (스크롤 진행바)로 확인하는 기능을 애니메이션으로 구현해보겠습니다. 1. Motion 설치하기먼저 리액트 라이브러리에 Motion 을 설치합니다. Get started with Motion for React | Motion for React (prev Framer Motion)Learn Motion for React animation library: Install, animate HTML and SVG elements with spring animation.. 2025. 7. 17. [React] Three Fiber 로 3D 효과 만들기 안녕하세요 오늘은 WebGL 기반 3D 그래픽 라이브러리인 three 를 사용해 3D 효과를 구현해보도록 하겠습니다. 먼저 three 는 WebGL 기반의 3D 그래픽 라이브러리 입니다. 브라우저에서 3D 그래픽을 구현할 수 있도록 도와주는 자바스크립트 라이브러리로,기본적으로 WebGL API를 추상화하여 훨씬 쉽게 3D 씬, 모델, 애니메이션 등을 구현할 수 있게 해줍니다. Thress.js 를 리액트 환경에서 사용하기 위해서는 React 랜더러인 "React Three Fiber" 를 설치해주어야 합니다. react-three-fiber 는 React의 컴포넌트 기반 철학을 유지하면서 3D 그래픽을 구성할 수 있도록 해주는 React 렌더러입니다. 1. react-three-fiber 설치하기 .. 2025. 7. 16. [React] react-scroll을 활용한 부드러운 앵커 스크롤 (Anchor Scroll) 구현하기 안녕하세요 오늘은 React 환경에서 react-scroll 라이브러리를 활용해 클릭 시 부드럽게 섹션으로 이동하는 스크롤 내비게이션을 만들어보겠습니다. 1. 먼저 생성돼 있는 react 프로젝트로 이동합니다.cd [my-react-project] Tailwind CSS 가 사용될 예정이니 아래 링크를 참고해 Tailwind css 를 설치해주세요 Installing with Vite - InstallationIntegrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.tailwindcss.com 2. react-scroll 설치npm install react-scroll- 이 라이브러리를 .. 2025. 7. 14. [React] 텍스트 입력 시 자동으로 필드 추가하기 (Material UI 활용) 안녕하세요 오늘은 리액트를 활용하여 텍스트 입력 시, 새로운 창이 자동으로 추가 되는 입력 폼을 만들어보도록 하겠습니다. 1. 먼저 깔끔한 텍스트 입력창을 위해 Material UI 라이브러리 를 프로젝트에 추가해줍니다. npm install @mui/material @emotion/react @emotion/styled Material UI 공식 홈페이지 - 설치 및 사용방법 안내 Installation - Material UIInstall Material UI, the world's most popular React UI framework.mui.com - Material UI 는 Google의 Material Design 원칙을 기반으로 한 React 라이브러리입니다. - 버튼, 폼, 테이.. 2025. 7. 12. [React] Hook 함수형 컴포넌트 안녕하세요!리액트를 통해 개발을 하다 보면 useState, useEffect 같은 단어들을 자주 접하셨을 텐데요,이들은 모두 '훅(Hook)'이라는 리액트의 기능을 담당하는 함수들입니다. 훅(Hook)이 등장하기 전: 클래스 컴포넌트의 복잡함훅이 등장하기 전, 리액트에서 '상태(state)'를 관리하거나 '생명주기(lifecycle)' 기능을 사용하려면 반드시 클래스 컴포넌트(Class Component) 사용해야 했습니다. import React, { Component } from 'react';class CounterClass extends Component { constructor(props) { super(props); // state는 constructor 안에서 this.stat.. 2025. 6. 30. [React] 마크다운 프리뷰어 만들기 마크다운이란? 안녕하세요! 이것은 굵은 글씨와 기울임꼴 입니다. 목록 아이템 또 다른 아이템 보시다시피 HTML은 태그가 많아 다소 번거롭고, 글 자체의 가독성을 해치기도 합니다. 글을 쓰기 위한 목적보다는 문서의 구조를 정의하는 데 더 초점이 맞춰져 있었죠. 이런 불편함을 해소하기 위해 2004년 존 그루버(John Gruber)는 "쉽게 쓰고, 쉽게 읽히고, 쉽게 HTML로 변환되는" 마크다운 언어를 만들었습니다.쉬운 문법: #, *, - 와 같이 간단한 기호 몇 가지만으로도 서식을 표현할 수 있습니다. # 제목 → 제목 **굵게** → 굵게 * 목록 → 목록 높은 가독성: 마크다운 문법 자체가 읽기 쉽게 디자인되어 있습니다. HTML처럼 복잡한 태그 없이도 글의 구조를 파악하기 용이합니.. 2025. 6. 23. 이전 1 2 3 4 5 6 다음
