분류 전체보기416 [ React ] react-calendar 커스터마이즈 하기 react-calendar 설치https://www.npmjs.com/package/react-calendarnpm i react-calendar SmallCalendar.jsreact-calendar를 가져온다.import Calendar from "react-calendar"export const SmallCalendar = () => { return ( )} CalendarPage.jsCalendarPage안에 달력외 메뉴들을 구성할 예정이다.import { SmallCalendar } from "../components/SmallCalendar"export const CalendarPage = () => { return ( .. 2025. 6. 30. [ 언리얼엔진 ] Cesium for Unreal 빠른 시작 가이드 안녕하세요! 오늘은 Cesium for Unreal을 사용해서 실제 지형과 건물 데이터를 활용한 3D 애플리케이션을 만드는 방법을 소개해드리려고 합니다. 이 가이드에서는 Cesium World Terrain과 Cesium OSM Buildings를 사용해서 멋진 3D 세계를 구축하는 과정을 단계별로 알아보겠습니다. 시작하기 전에이 가이드는 Unreal Engine 5.1을 기준으로 작성되었지만, 최신 버전의 언리얼 엔진을 사용하셔도 단계는 동일합니다. 다만 UI가 조금 다를 수 있어요.단계별 과정을 건너뛰고 Cesium for Unreal의 능력을 바로 확인하고 싶으시다면, Cesium for Unreal Samples 프로젝트를 다운로드해 보세요! 이 가이드에서 배울 내용이 튜토리얼을 통해 다음과 같은.. 2025. 5. 23. [ 언리얼엔진 ] LudusAI: 게임 개발의 혁신, 설치부터 시작까지 완벽 가이드 Ludus AI - Unreal Engine AI toolkit Ludus AI - Unreal Engine AI toolkitProfessional AI tools for Unreal Engine 5: C++ assistance, Blueprints copilot, scene generation, and AI Unreal expert. Try Ludus Unreal AI plugin today!ludusengine.com 게임 개발에 있어 가장 큰 진입 장벽 중 하나는 복잡한 엔진 구조와 코드 작성입니다. 그러나 최근 주목받는 차세대 게임 개발 도구인 LudusAI는 이 문제를 혁신적으로 해결하고 있습니다. 특히 Ludus Engine 기반의 LudusAI는 AI로 게임을 설계하고 구현하는 도구로, .. 2025. 5. 22. [ 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 ] Context API 란? Context API는 React에서 전역 상태(state)를 쉽게 관리하게 해주는 도구이다.특정 데이터를 여러 컴포넌트에서 공유해야 할 때 유용하다. 언제 Context API를 사용할까?1. 전역 상태를 여러 컴포넌트에서 공유해야 할 때 (예: 로그인 정보, 다크모드 설정, 언어 설정)2. props를 너무 깊이 전달해야 할 때 (props drilling 해결)3. Redux를 사용할 정도는 아니지만, 전역 상태 관리가 필요할 때 (Redux는 store, action, reducer 등의 복잡한 구조가 필요함)4. 테마(다크모드), 언어 설정 같은 전역 UI 상태 관리할 때 Context API를 쓰지 말아야 할 경우1. 단순한 상태 관리 (useSate로 충분할 때)2. 자주 변경되는 데이터 (.. 2025. 2. 18. [ 프로그래머스 / Javascript ] 문자열안에 문자열 https://school.programmers.co.kr/learn/courses/30/lessons/120908 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 설명문자열 str1, str2가 매개변수로 주어집니다. str1 안에 str2가 있다면 1을 없다면 2를 return하도록 solution 함수를 완성해 주세요. 제한사항1 ≤ str1의 길이 ≤ 1001 ≤ str2의 길이 ≤ 100문자열은 알파벳 대문자, 소문자, 숫자로 구성되어 있습니다. 입출력 예str1 str2 resultstr1str2result"ab6CDE443fgh22iJKlmn1o""6CD"1"ppprrrogramm.. 2025. 2. 9. [ Three.js ] MeshLambertMaterial의 특징 MeshLambertMaterial은 Three.js에서 사용되는 재질(Material) 중 하나로, 빛을 반사하는 표면을 표현하는 데 사용됩니다. 이 재질은 램버트 반사(Lambertian reflection) 모델을 기반으로 하며, 빛이 물체 표면에 부드럽게 퍼지는 효과를 만듭니다. 주로 빛의 영향을 받는 매트한 표면(예: 종이, 플라스틱, 벽 등)을 표현할 때 사용됩니다. MeshLambertMaterial의 특징램버트 반사 모델:빛이 물체 표면에 부드럽게 퍼지는 효과를 구현합니다.빛의 방향과 표면의 각도에 따라 밝기가 달라집니다.빛의 영향을 받음:MeshLambertMaterial은 조명(directionalLight, ambientLight 등)의 영향을 받습니다.조명이 없으면 물체가 완전히 .. 2025. 2. 2. [ Three.js ] 초보자를 위한 회전하는 3D 원기둥 만들기 Three.js는 웹에서 3D 그래픽을 쉽게 구현할 수 있는 강력한 라이브러리입니다. 이번 글에서는 @react-three/fiber와 @react-three/drei를 사용해 간단한 회전하는 3D 원기둥을 만들어보겠습니다. 1. 프로젝트 설정먼저, React 프로젝트를 생성하고 필요한 라이브러리를 설치합니다.npx create-react-app my-threejs-appcd my-threejs-appnpm install @react-three/fiber @react-three/drei 2. 코드 작성아래는 회전하는 원기둥을 만드는 전체 코드입니다. 코드를 App.js 파일에 실행해 보세요.import { Canvas, useFrame } from '@react-three/fiber';import { .. 2025. 1. 31. 이전 1 2 3 4 ··· 47 다음 728x90
