뫙뭉

React는 컴포넌트 기반의 웹 개발에서 널리 사용되는 프레임워크로, 상태 관리와 컴포넌트 재사용성을 강화하여 웹 애플리케이션 개발을 단순화하고 있다. 하지만, 3D 그래픽을 React 환경에서 쉽게 구현하기 위해 등장한 것이 바로 react-three-fiber다. 이번 글에서는 react-three-fiber가 등장하게 된 배경, 역할, 그리고 대표적인 API와 특징들을 살펴본다. 이전 글1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일3. [개발자일기/3D 웹 세상] - Three.js의 기본 개념과 원리  react-three-fiber가 등장하게 된 배경 Three.js는 WebGL을 기반으로 3D 그래픽을 ..

웹사이트나 애플리케이션에서 로딩 중인 페이지를 효과적으로 보여주는 방법 중 하나가 **스켈레톤 로딩(Skeleton Loading)**입니다. 스켈레톤 로딩은 실제 콘텐츠가 표시되기 전에, 콘텐츠가 배치될 위치에 미리 회색이나 반투명한 블록을 띄워 보여주는 방식으로, 사용자는 로딩을 기다리면서도 화면 구성을 미리 파악할 수 있습니다. 이번 글에서는 스켈레톤 로딩 애니메이션이 무엇인지, 그리고 CSS를 활용해 간단하게 구현하는 방법을 단계별로 설명해 보겠습니다. 스켈레톤 로딩이란? 스켈레톤 로딩은 웹이나 모바일 앱에서 콘텐츠가 로드될 위치에 기본적인 블록 형태를 미리 보여주는 방법입니다. 사용자는 콘텐츠가 나타날 위치를 미리 시각적으로 인지할 수 있기 때문에 로딩을 기다리는 동안의 불편함이 줄어들고, UX..

3D 그래픽을 웹에서 구현하는 데 가장 널리 사용되는 도구 중 하나가 Three.js다. Three.js는 복잡한 3D 그래픽을 쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리로, WebGL의 복잡한 코드를 더 간편하게 작성할 수 있게 해준다. 이번 글에서는 Three.js의 기본 개념과 원리를 이해하기 쉽게 설명해 보겠다. 이전 글1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일  Three.js란 무엇인가?Three.js는 JavaScript 기반의 3D 그래픽 라이브러리로, 개발자가 WebGL의 복잡한 코드를 직접 작성하지 않고도 3D 그래픽을 구현할 수 있게 도와준다. WebGL을 직접 사용하려면..

오늘날 컴퓨터와 모바일 기기에서 3D 그래픽은 게임, 영화, 디자인, 웹 등 다양한 분야에 사용되고 있다. 3D 그래픽을 빠르고 현실감 있게 처리하려면 강력한 연산 능력이 필요한데, 이를 돕는 장치가 GPU다. 이번 글에서는 GPU와 CPU의 차이점, GPU가 3D 그래픽을 처리하는 방식, 그리고 엔비디아와 인텔의 전략과 AI가 GPU를 활용하는 방식에 대해 알아보겠다. 또한 이러한 발전이 WebGL 같은 웹 기술에 어떤 영향을 미치는지도 살펴보겠다. 이전 글 리스트1. 2024.11.05 - [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽1.  GPU란 무엇일까?GPU는 Graphics Processing Unit의 약자로, 그래픽 데이터를 빠르게 처리하기 위한 전용 장치다. 3D 그래픽이나 고화..

최근 블록체인 팀에서 3D 웹 엔진 팀으로 소속을 옮기면서 기존에 관심있었던 3D에 대해 공부하고 있다.아직은 2D 웹 시장이 지배하고 있으나,3D 그래픽은 처음 등장할 때 주로 게임, 영화, 디자인 분야에서 사용되었고, 고성능 장비와 전문 소프트웨어가 필요한 기술이었다. 그러나 기술의 발전으로 3D 그래픽을 웹에서도 사용할 수 있게 되었고, 이제는 웹 브라우저에서도 3D 그래픽을 경험할 수 있는 시대가 되었다. 이번 글에서는 웹에서 3D 그래픽이 사용되게 된 배경과 기술적 차이점, 그리고 기본 원리와 주요 렌더링 방식에 대해 알아보겠다. 3D 그래픽을 웹에서 사용하게 된 배경초기의 3D 그래픽은 고성능 컴퓨터와 전문 소프트웨어가 필요했기 때문에 주로 영화나 애니메이션, 게임 제작에 사용되었다. 예를 들..

로그인 상태 유지를 위한 다양한 방법과 JWT의 필요성많은 웹사이트에서 사용자 정보를 기반으로 특정 데이터를 조작해야 하는 경우, 로그인 기능이 필수입니다. 일반적으로 아이디와 비밀번호를 이용한 로그인 방식을 많이 사용하며, 프론트엔드에서는 이 과정을 간단하게 input 입력방식으로 구현할 수 있습니다. 사용자가 로그인에 성공하면 추가적인 정보를 얻거나 특정 기능을 사용할 수 있게 됩니다. 예를 들어, 로그인 전에는 게시글 작성 권한이 없지만, 로그인 후에는 게시판을 작성할 수 있는 권한을 얻는 방식입니다.기본적인 로그인 로직은 클라이언트에서 아이디와 비밀번호를 서버로 전송하여 로그인 여부를 확인하고, 성공적으로 응답을 받은 경우 클라이언트의 로그인 상태를 변경해 주는 것입니다. 그러나 이렇게 상태만 변..

우리가 흔히 사용하는 검색 플랫폼으로는 구글, 네이버 등이 대표적이다.해당 플랫폼에서 검색을 해보면 단순히 화면만 바뀌는 것이 아니고 URL도 바뀌는 것을 확인할 수 있다.검색 뿐만 아니라 여러 필터기능도 URL을 변경시키는 것을 확인할 수 있다.해당 사항은 얼마전 검색 기능을 구현하면서 고민하게 되었던 부분이다.화면만 바뀌어도 무방할 것 같은데 왜 URL도 바뀌게 한 걸까. 분명히 이에 따른 장점이 있어서 그런것일 텐데..그래서 여러 고민과 검색 끝에 알아낸 것이 있다.검색을 하면서 URL이 바뀌게 해야하는 이유 3가지1. 사용자 경험 개선URL에 검색어나 필터를 포함시키면 사용자가 현재 검색상태를 쉽게 이해할 수 있음. 그리고 URL을 통해 검색 결과를 북마크하거나 공유할 수 있게함. (URL 복사해..

나는 사용하고자 하는 기술 스택을 정함에 있어 이유가 명확할수록 좋은 것이라 생각한다. 그 상황에 맞는 기술을 선택하는 것이 효율도 좋으며 효과도 좋기 때문이다. 그러함에 있어 CSS 사용 기술을 선택하는 것도 많은 고민이 있었다. 우선 우리 팀이 추구하는 개발 중 중요한 키워드는 '자유로운'이었다. CSS 하면 아무거나 갖다 쓰면 될 것 같다는 생각이 있었는데 여러 자료들을 찾아보니 선택 반경도 굉장히 넓고 상황에 맞는 선택법 또한 다양했기에 여러 프레임워크나 전처리기에 대해 알아볼 필요가 있었다. 어떤 분이 상황별 선택에 대해 잘 써놓은 글이 있어서 공유하겠다. https://ritza.co/articles/tailwind-css-vs-bootstrap-vs-material-ui-vs-styled-c..

프론트엔드의 길을 걸어보고자 한지 벌써 일 년이 넘어가고 있다. 그런 내가 갖고있는 가장 큰 부족한 점은 바로 팀 프로젝트 경험 하나 없었다는 것. 변변치 않은 개인 프로젝트들만 해오다가 성장 요소의 한계에 부딪히고 뒤늦게 팀 프로젝트를 시작하였다. 이 '팀 프로젝트' 시리즈는 팀 프로젝트의 시작부터 끝까지(팀플은 아직 진행중이다)에 대한 기록과 나처럼 독학으로 준비하시는 여러 분들에게 도움이 되고자 쓰는 글이다. 팀 프로젝트 꼭 해야하나..? 나는 겁이 많은 성격이다. 모르는 사람들을 접하는 것을 좀 꺼려하고 무언가 새로운 것을 시도하는 것을 싫어하진 않으나 도전해 보기까지 굉장히 보수적인 스탠스를 취하는 편. 그래서 팀 프로젝트를 여태 안 해봤나 싶다. 이런 생각을 해보았다. 규모가 꽤 있는, 소위 ..

컴포넌트를 새로 생성하고 로컬에서 실행해보았는데 위와 같은 오류가 떴다. 이게 뭔말인가 해서 해당 컴포넌트에 가보니 뜬금없이 useRef와 관련된 한 줄에서 오류가 났다고?? 뭐가 문제인가 해서 5분정도 들여다 보다가 발견한 것은 import의 경로 리액트에서 Hooks의 경로는 'react'이다. 아마 자동완성을 쓰다가 자동으로 import 된 것이 이런 문제를 발생 시킨 듯 하다.