2025/03/11 7

2025.03.05

행복하다.01:30 취침 07:00 기상아침에 일어나니까 쿠키는 뜬금없이 폭신폭신 쿠션 방석위에 누워있고 이브는 도넛위에 앉아있었다. ㅋㅋㅋㅋㅋㅋ쿠키는 폭신폭신 안좋아했는데.. 이브는 도넛 안에 들어가기만 했었는데...매일 뜬금없이 귀엽다. 오랜만에 일찍 일어나서 모델링 팩을 했다.피부가 돌아오질 않는다.알리익스프레스에서 주문한 골든커리 extra hot이랑, 파우치 커피 두박스, 비비고교자 도착했다.파우치 커피가 40팩에 12000원이라 사지 않을 수가 없었다.벌써 여름을 준비하는 느낌이다.친구가 제주도에 가면 물질하는 강아지를 보러 가자고 한다..... 나는 강아지를 구경하는 친구가 궁금하다.그리고 무슨 창업지원하는데 나 갑자기 팀장 시켜줬다. 급 머신러닝 공부가 땡겨서 머신러닝 조져줄거다.샤워도 하..

2025/미정 2025.03.11

JSX

JSX JavaScript XML의 약자로, JavaScript의 확장 문법 HTML과 비슷하게 보이지만, 실제로는 JavaScript 코드React에서 JSX를 사용하면 UI를 보다 직관적으로 구성 가능  직관적이고 가독성이 좋음JSX는 HTML과 유사해서 웹 개발자들이 직관적으로 이해하기 좋음기존 JavaScript의 React.createElement() 방식보다 코드가 깔끔하고 가독성이 좋음UI와 로직의 통함UI와 관련된 로직을 한 곳에서 작성 가능예:버튼을 생성, 생성한 버튼을 클릭했을 때의 동작을 같은 파일에서 정의  JSX의 사용법 JSX 안에서 JavaScript 사용 JSX 내부에서 JavaScript 표현식을 사용하려면 {} 중괄호 사용const name = "리액트";const ele..

CRA(Create React App)

React App 생성npx create-react-app 앱이름npx(Node Package eXecute)설치 없이 패키지 실행최신 버전 실행로컬 설치된 패키지 실행일회성 스크립트 실행특정 패키지를 글로벌 설치 없이 한 번만 실해하고 삭제→ 전역 설치 없이 최신 버전으로 프로젝트 생성  애플리케이션 실행cd 앱이름만든 프로젝트 폴더로 이동 (changediretory 앱이름)npm startReact App 시작 (Node Package Manager start)  CRA

React

React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 JavaScript를 사용하여 웹사이트의 UI(User Interface)를 구성하는 라이브러리→ 우리가 보는 버튼, 메뉴 등과 같은 요소를 쉽게 만들고 관리할 수 있도록 도와줌 페이스북에서 개발하여 오픈 소스로 공개됨  선언적 UI 라이브러리 선언적(Declarative) 프로그래밍 방식을 따름→ "어떻게(How)" 동작하는지보다 "무엇(What)"을 해야 하는지에 집중 예:특정 버튼을 클릭하면 화면이 어떻게 변해야 하는지를 선언적으로 작성하면, 내부적인 렌더링 과정은 React가 자동으로 처리함→ 코드의 가독성을 높이고 유지보수를 쉽게 할 수 있음 컴포넌트 기반 (Component-Based) UI를 컴포넌트(Component)..

2025.03.03

10:30 취침 16:30 기상요새 알리익스프레스에 다시 빠졌다. ♥︎저녁에 오빠야가 김치찜해줬다.오늘은 수빈이 몸살기이슈 ㅠㅠ너무 늦게 자고 늦게 일어난다.샤워했다. 요가는 안했다. 물 반컵 마셨다.이브가 방문 열라고 말한다. 방에 들어와서 잠잔다. 그리고 쿠키는 노크한다. 아맞다 어제 OpenAI API로 동화책 집필 서비스만들었다. 키워드를 입력하면 동화그림과 함께 책을 써주는데, '수빈'이라고 입력했더니 하필 고양이와 함께 나오는 동화를 써줬다. 고양이 이름은 루나다.

2025/미정 2025.03.11

Interaction (Event)

Interaction (Event) in R3F  3D 인터랙티브 이벤트 처리하기 인터랙티브 이벤트 : 사용자의 이벤트를 수신하는 방법 R3F는 컴포넌트의 콜백함수를 통해서 3D 객체와 상호작용을 추가하여 인터랙티브한 웹 경험을 구현 인터렉션(Interaction)사용자가 3D 객체와 상호 작용하는 방식클릭드래그스크롤키보드 입력Events and Interation Events and Interaction - React Three FiberLet's make our meshes react to user input.r3f.docs.pmnd.rs  @react-spring/three 설치npm install three @react-spring/three @react-spring/three@9.7.5 Reac..

728x90