React17 [ Three.js ] React Three Fiber vs Three.js, 어떤 걸 배워야 할까요? 오늘은 3D 웹 개발에 관심 있는 개발자라면 한 번쯤 고민하게 되는 주제, 바로 React Three Fiber와 Three.js의 차이에 대해 이야기해보려고 합니다!최근에는 단순한 웹사이트를 넘어, 3D 인터랙션과 몰입감 있는 UI를 제공하는 사이트들이 점점 많아지고 있습니다. 특히 포트폴리오, 브랜드 사이트, 3D 쇼핑몰, 게임형 웹사이트 등에서 3D 기술의 활용도가 크게 증가하고 있죠.그렇다면 많은 사람들이 말하는 Three.js와 React Three Fiber는 어떤 차이가 있을까요?그리고 어떤 걸 먼저 배우는 게 좋을까요?이번 글에서는 두 기술의 특징, 장단점, 그리고 어떤 상황에서 사용하면 좋은지 쉽게 정리해 보겠습니다. Three.js란?Three.js 는 웹 브라우저에서 3D 그래픽을 구.. 2026. 5. 15. [ React ] 웹사이트 성능을 점검하는 필수 도구 Lighthouse 웹 페이지를 만들고 나면, "이 사이트 잘 만들 걸까?, "사용자들이 사용하는데 느리진 않은가?"라는 의문들이 들 수 있다.이때 Lighthouse를 통해 성능 체크가 가능하다. Lighthouse란?Lighthouse는 웹 애플리케이션의 성능, 접근성, SEO, PWA(Progressive Web App)등을 자동으로 분석해 주는 Google에서 제공하는 성능 진단 도구이다. Lighthouse를 사용하는 이유?웹페이지의 아래와 같은 항목들을 자동으로 분석해 점수와 개선 방법을 알려준다:Performance (성능)Accessibility (접근성)Best Practices (웹 표준)SEO (검색엔진 최적화)PWA (Progressive Web App 지원 여부)Lighthouse는 웹사이트의 품.. 2025. 4. 24. [ Ant Design ] React + Ant Design + React Router Dom으로 사이드 메뉴 라우팅 구현하기 이 글에서는 React 프로젝트를 처음부터 셋업 하고,Ant Design의 메뉴 컴포넌트를 활용해 사이드바 라우팅 UI를 구현하는 과정을 단계별로 정리해 보겠습니다. 1. React 프로젝트 생성원하는 위치에 React 파일을 생성합니다.npx create-react-app 프로젝트이름cd 프로젝트이름 2. Ant desgin 설치Ant design의 메뉴를 사용하기 위해서 아래의 명령어로 Ant design을 설치합니다.npm install antd# 또는yarn add antd 3. React Router 설치페이지 이동 기능을 구현하기 위해 React Router를 설치합니다.npm install react-router-dom# 또는yarn add react-router-dom 4. 파일 구조.. 2025. 4. 18. [ React ] 콘솔 경고들 수정하기 프로젝트 개발 중에 생긴 콘솔 경고들을 해결해 보았다. 경고 수정 #1 Form.Item을 사용하기 위해서는 Form 태그에 감싸주어야 한다.Warning: Cant not find FormContext. Please make sure you wrap Field under From. 경고문에서 수정 힌트를 주니 좋다. 원래 코드 {inputtype === 'ColorPicker' ? setMeta(meta => ({ ...meta, color: color.toHexString() }))} /> : null} {inputtype === 'ColorPicker' ? null : setMeta(meta => ({ ...meta, name: e.target.value }))} />} 수정 코드아.. 2024. 6. 4. [ React ] Ant design Layout 적용해보기 아래 링크로 이동하면 다양한 구조로 적용이 가능하다.https://ant.design/components/layout Ant design 설치npm i antd 제일 심플한 구조인 Header, Content, Footer 구조로 만들어 보자. App.jsimport './App.css';import { Layout } from 'antd'; // Ant design의 layout을 가져온다.const { Header, Content, Footer } = Layout; // layout안에 Header, Content, Footer을 가져온다.function App() { return ( Logo content .. 2024. 5. 21. [ React ] 자주 쓰이는 NPM 설치 목록 모음 styled-components Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이프러리로 React 프레임워크에서 메인으로 사용되는 라이브러리이다. npm i styled-components react-dom 컴포넌트를 html과 연결하는 작업을 해준다. npm i react-dom react-router-dom React는 SPA(Single Page Application)이다. React에 router(페이지 이동)을 사용할 수 있게, 화면 전환을 지원해 주는 모듈이다. npm i react-router-dom ant-design 사용자의 인터페이스를 개발할때 다양한 UI 컴포넌트를 제공해 줘서 빠르게 개발을 할 수 있다. npm i antd ant-d.. 2024. 3. 25. [ React ] React Datepicker 원래 React Calendar을 사용하려 했는데 React Calendar는 달력이 바로 떠서 useState로 true일 때 보여주고 false일 때 닫히게 했다. 하지만 이때 문제가 내가 원하는 위치에 달력을 뜨게 하려니 fix를 사용하게 되는데 이렇게 했을 때 유저가 달력을 킨 상태에서 화면사이즈를 변경하니 달력이 잘렸다. 조금 더 검색하던 중 React Datepicker을 알게 되었다. React Calendar와 다르게 날짜 박스를 클릭하면 달력이 바로 아래에 생긴다. https://reactdatepicker.com/ React Datepicker 설치 npm install react-datepicker --save Import DatePicker Library import DatePick.. 2023. 2. 9. [ React ] React Calendar React Calendar 저번에는 직접 달력을 구현해 보았으니 이번에는 리액트에서 제공하는 달력을 사용해서 구현해 보았다. 훨씬... 간단하다🫠 그래도 그렇게 만들어본 덕분에 라이브러리에 더 감사해지는 것 같다. 설치 import Calendar from 'react-calendar'; 달력 선언 결과물 Calendar CSS 아래 한 줄 import 해 왔는데 저렇게 이쁘게 바뀌었다..! import 'react-calendar/dist/Calendar.css'; setSelectedDate(true)}/> 2023. 2. 8. [ React ] Hooks의 useState 1. Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 2. useState useState는 가장 기본적인 Hook이다. 함수형 컴포넌트에서도 상태를 가지고 있을 수 있게 해 준다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 useState를 사용하면 된다. 3. useState를 사용한 예제 버튼을 누르면 숫자가 바뀌는 컴포넌트를 만들며 useState를 익혀보았다. Counter.js import React, { useState } from 'react'; cons.. 2023. 1. 31. 이전 1 2 다음 728x90
