김현빈의 개발새발

Three.js를 사용하여 3D 그래픽이나 애니메이션을 구성하기 위해서는 먼저 Three.js의 기본 구성 요소와 원리에 대해 이해해야 한다고 생각한다.그렇기 때문에 오늘은 3D 그래픽을 구성하는 기본 요소들에 대해 알아보도록 하겠다. 1. Scene (장면)Scene은 3D 그래픽을 구성하는 기본적인 공간이나 무대라고 할 수 있다. Three.js의 모든 랜더링 객체가 포함되는 요소다.const scene = new THREE.Scene(); 이런식으로 빈 Scene 객체를 생성하여 3D 모델, 조명, 카메라 등 다양한 요소들을 포함시킬 수 있다.  2. Camera (카메라)Camera는 단어 뜻 그대로 Scene 내의 객체들을 어떻게 볼 것인지를 정의한다. Three.js에서 주로 사용하는 카메라는..

오늘은 Three.js 라이브러리에 대한 기본 개념을 공부해보려고 한다. 먼저 Three.js란 무엇인지 알아보자. Three.js란 웹 브라우저에서 3차원 그래픽 애니메이션을 쉽게 만들고 표현하기 위해 사용하는 자바스크립트 라이브러리이자 API이다. 복잡한 3D 애니메이션, 게임, 시각화 등을 웹 페이지에 구현할 수 있도록 해준다. 간단 말하자면, 웹 페이지에 복잡하거나 역동적인 3D 화면을 구성하기 위해 사용하는 요소라고 생각하면 된다. 위의 사진처럼 캐릭터나 사물들을 만들거나 불러와서 이를 화면에 배치하고 역동적인 움직임이나 세련된 디자인과 구성을 통해 사용자에게 좋은 인상을 남겨줄 수 있다.  사진처럼 Three.js를 이용하여 만든 다양한 웹 페이지를 경험하고 싶다면  https://threej..

모든 수정과 세팅을 마친 후 expo start 를 터미널에 입력하여 expo를 실행시켜준다. 그러면 이러한 화면이 뜨면서 QR 코드가 뜰텐데 https://expo.dev/ 에 접속하여 회원가입 후, 휴대폰의 앱스토어에서 expo go 어플을 다운받아준다. 이후 휴대폰 어플로도 로그인 후, 해당 QR코드를 읽게되면 이렇게 실행을 완료할 수 있다.

이제 vscode에서 수정해야 하는 코드와 설정하는 방법을 설명하겠다. 기본적으로 vscode를 설치한 폴더를 선택하여 실행하고 필수 pakage를 추가하고 나면 이러한 구성으로 되어있을것이다. 여기서 App.js 코드를 import { NavigationContainer } from '@react-navigation/native'; import MyTabs from './MyTabs'; export default function App() { return ( ); } 로 수정해준다. 그리고 MyTabs.js라는 파일을 만들고 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import React, { useState, ..

npm install -g expo-cli expo --version React expo란? Expo는 리액트 네이티브 애플리케이션을 더 쉽게 개발하고 빌드하고 배포할 수 있도록 도와주는 도구입니다. Expo는 리액트 네이티브의 기능을확장하고 여러 기능과 서비스를 제공하여 개발자가 앱 개발에 필요한 다양한 작업을 간소화합니다. Expo 설치 명령어 cmd를 실행하여 Expo 설치를 원하는 폴더에 들어가서 실행해야 함 npm install -g expo-cli 해당 명령어 입력 시, Expo가 설치되는 것을 확인할 수 있음. expo --version 해당 명령어 입력 시, Expo의 버전을 확인할 수 있음. 정상적으로 설치 된 것을 확인 한 후, expo init 앱이름 cd 앱이름 expo start ..

프로젝트를 진행하던 중, 챗봇 기능을 넣고 싶어서 리액트에서 챗봇 기능을 구현할수있는 여러가지의 챗봇 API가 있었지만, 필요로 한 기능이 사용자와 다양한 상호작용이나 기능을 수행하는 챗봇이 아닌 사용자가 필요로 하는 정보를 입력하면 이 입력된 정보를 토대로 저장되어 있는 데이터베이스의 정보를 출력시키는 수준정도만 필요로 했기 때문에 직접 만들어 보았다. 필자가 구현하려는 범위는 저장되어 있는 강아지, 고양이의 종별 정보를 사용자가 입력한 정보(종명)을 토대로 검색을 하여 해당하는 종의 정보를 출력시키는 기능과 원하는 날짜 (오늘, 내일, 이번주)에 해당하는 날씨와 산책지수 (반려동물과 산책을 하기 좋은 날씨인지 아닌지 알려주는 지수) 를 출력시켜주는 기능 정도의 범위이다. 데이터베이스에 저장되어 있는 ..