728x90 728x90 전체 글153 [2023.04.27 개발 일지] 리액트에서 three.js 사용하기 [2023.04.27 개발 일지] 리액트에서 three.js 사용하기 주요 업무 내용 리액트에서 three.js 사용 3D 모델 띄우기 애니메이션 적용하기 sketchfab에 무료로 제공되고 있는 이 3D 모델을 메인 페이지에 three.js를 사용해서 띄우고 싶었다. react에서 three.js 사용하기 위해서는 주로 React Three Fiber를 사용한다고 한다. React Three Fiber는 컴포넌트 기반으로 간단하게 Three.js를 사용할 수 있으며 WebGL 기능을 최적화하여 렌더링속도를 높인다. 또한 React-three/drei라는 React Three Fiber의 확장 라이브러리를 통해서 React Three Fiber에서 사용할 수 있는 OrbitControls, Sky, En.. 2023. 5. 1. [2023.04.26 개발 일지] 로딩 상태 GIF Progress 적용 하기 [2023.04.26 개발 일지] 로딩 상태 GIF Progress 적용 하기 주요 업무 내용 GIF Progress 컴포넌트 구현 Flex 컴포넌트 구현 3D 모델 찾아 보기 프론트엔드에서 빠질 수 없는 것이 로딩 상태에 대한 사용자 피드백일 것이다. 포켓몬이라는 주제로 개발을 하고 있으니 단순히 로딩바를 보여주는 것보다는 포켓몬 관련 GIF가 좋을 것 같다. 역시 포켓몬은 상징성은 이 녀석을 이길 수 없을 것이다. 달리는 모습이니 로딩 상태에도 적절한 것으로 보인다. import styled from "styled-components"; const StyledProgress = styled.div` display: flex; flex-direction: column; align-items: cente.. 2023. 4. 30. [2023.04.24 개발 일지] Chart.js 사용해 보기 [2023.04.24 개발 일지] Chart.js 사용해 보기 주요 업무 내용 D3.js와 Chart.js 입문 Chart.js 적용 StatCard 스타일링 평소 공부한 내용은 정리를 하고 있는데 개발했던 과정과 오류, 개발하면서 들었던 생각들이 많았는데 기록없이 넘어가다보니 아깝다는 생각이 들어서 개발일지를 써야겠다는 생각이 들었다. 리액트 연습을 위해서 포켓몬 API를 활용하여 포켓몬 도감을 만들고 있다. 포켓몬 개체수가 1000개가 넘고 포켓몬 뿐만아니라 아이템이나 스킬과 같은 정보들도 제공되고 있어 데이터 규모가 작지 않은편이기때문에 연습하기에 좋은 것 같다. 기본적으로 포켓몬 리스트와 포켓몬 상세페이지만으로는 허전한 느낌이라서 다른 기술도 사용해보려고 한다. 가장 먼저 생각났던 것이 포켓몬 스.. 2023. 4. 29. Three.js R3F: P is not part of the THREE namespace! Did you forget to extend? 오류 문제 상황 react에서 Three.js를 활용해서 3D 모델을 띄우려고 했다. Canvas가 로딩되는 동안 Progress 컴포넌트를 렌더링 하기위해 Suspense의 fallback 속성을 사용하였지만 다음과 같은 오류가 발생하였다. ⚠️R3F: P is not part of the THREE namespace! Did you forget to extend? 잘못된 코드 React Three Fiber Canvas 요소 내에 표준 HTML 태그를 추가하려고 하면 발생하는 문제였다. React에서는 Three.js를 사용할 때 Dom을 직접 조작하지 않고 React Three Fiber를 사용한다. React Three Fiber는 HTML 태그를 해석할 수 없고 Three.js scene을 렌더링 하.. 2023. 4. 27. IPv4와 IPv6 IPv4와 IPv6 IPv4(Internet Protocol version 4) 개념 인터넷에서 사용되는 패킷 교환 네트워크상에서 데이터를 교환하기 위한 32비트 주소체계를 갖는 네트워크 계층의 프로토콜 IPv4 헤더 IPv4 클래스 분류 A 클래스 가장 높은 단위의 클래스로서 1~126 범위의 IP 주소 0.0.0.0 ~ 127.255.255.255 B 클래스 두 번째로 높은 단위의 클래스로서 첫 번째 단위의 세 숫자는 128~191 가운데 하나를 가짐 128.0.0.0 ~ 191.255.255.255 C 클래스 최하위의 클래스로서 첫 번째 단위의 세 숫자는 192~223 가운데 하나를 가짐 192.0.0.0 ~ 223.255.255.255 D 클래스 멀티캐스트 용도로 예약된 주소 224.0.0.0 ~.. 2023. 4. 11. 네트워크 프로토콜 네트워크 프로토콜 프로토콜은 서로 다른 시스템이나 기기들 간의 데이터 교환을 원할히 하기 위한 표준화된 통신규약이다. 프로토콜의 기본 3요소 구문(Syntax) : 시스템 간의 정보 전송을 위한 데이터 형식, 코딩, 신호 레벨 등의 규정 의미(Semantic) : 시스템 간의 정보 전송을 위한 제어 정보로 조정과 에러 처리를 위한 규정 타이밍(Timing) : 시스템 간의 정보 전송을 위한 속도 조절과 순서 관리 규정 프로토콜의 특징 단편화 : 전송이 가능한 작은 블록으로 나누어지는 기법 재조립 : 단편화되어 온 조각들을 원래 데이터로 복원하는 기법 캡슐화 : 상위 계층의 데이터에 각종 정보를 추가하여 하위 계층으로 보내는 기법 연결 제어 : 데이터의 전송량이나 속도를 제어하는 기법 오류 제어 : 전송 .. 2023. 4. 11. 이전 1 ··· 7 8 9 10 11 12 13 ··· 26 다음 728x90 728x90
