뫙뭉

각자의 홈페이지를 꾸미고 마케팅하기 위해 눈에 띄는 애니메이션들을 만들고 적용하곤 한다.예전에 몇가지 글을 적은적이 있는데, 별 생각 없이 올렸던 글이 생각보다 많은 분들이 관심을 가져주더라.기술적인 부분도 좋지만, 이런 간단하면서 뭔가 유용한 애니메이션, 스타일 관련 글에도 많은 분들이 관심을 갖고 있구나 라는 걸 다시 한번 느꼈다. 2022.02.03 - [개발자일기/Tutorial] - 빛번짐 효과, box-shadow & filter 활용하기 (feat. ionicons) 빛번짐 효과, box-shadow & filter 활용하기 (feat. ionicons)단 몇 줄의 코드로 색다른 효과를 낼 수 있다! 오늘도 코드가 원하는대로 짜지지 않아 김빠짐을 경험하여 유튜브와 코드팬속에서 헤엄치던 중....

프론트엔드 개발을 하다 보면 기능 구현을 넘어 성능까지 신경 쓰게 됩니다.그 과정에서 자연스럽게 마주하는 것이 바로 '렌더링 최적화'입니다.처음엔 "기능 구현하기도 바쁜데 렌더링 최적화까지 해야 하나?"라는 의문이 들지만, 프로젝트가 커지고 복잡해질수록 이 최적화가 사용자 경험에 미치는 중요성을 깨닫게 됩니다.오늘은 프론트엔드 성능향상의 중심에 있는 '렌더링 최적화'에 대해 알아보, 리액트에서는 이런 문제점들을 어떻게 해결하려고 하는지, 자세히 살펴보겠습니다. 렌더링 최적화란 무엇인가?렌더링 최적화는 웹 애플리케이션이 효율적으로 렌더링되도록 하여 사용자 경험을 향상시키는 방법입니다. 빠르게 로딩되고 반응성이 뛰어난 웹 페이지는 사용자 이탈을 줄이고 만족도를 높입니다.최근 웹 페이지 평균 크기는 2024년..

프론트엔드 개발자로 일하며 도커(Docker)를 처음 접하게 되면 상당히 낯설게 느껴질 수 있습니다. 저 역시 처음 도커를 사용할 때 여러 시행착오를 겪었습니다. 이번 글에서는 제가 팀원과 실제 협업하며 사용했던 Docker 명령어와 Dockerfile 설정 방법을 자세히 공유하면서, 초보자분들도 쉽게 따라 하실 수 있도록 꼼꼼하게 안내하겠습니다. Docker란 무엇인가요?Docker(도커)는 컨테이너(Container)라는 가상 환경을 사용하여 애플리케이션을 빠르게 배포하고 실행할 수 있게 해주는 기술입니다. 프론트엔드 개발자 입장에서 Docker를 활용하면 환경 설정에 소모되는 시간을 줄이고, 서버 배포 과정에서 일어나는 문제를 최소화할 수 있습니다. Docker를 왜 사용해야 할까요?Docker는 ..

프로젝트를 개발할 때, 로컬 환경에서는 정상적으로 실행되지만 배포 후에는 특정 패키지가 동작하지 않거나 peerDependencies 관련 경고가 발생하는 경우가 있다. 이 글에서는 dependencies와 peerDependencies의 차이를 이해하고, 올바르게 패키지를 관리하는 방법을 정리해보겠다.🔎 dependencies와 peerDependencies의 차이✅ dependencies란?dependencies는 프로젝트에서 직접 사용하고 실행에 필수적인 패키지를 의미한다. npm install을 실행하면 dependencies에 있는 모든 패키지가 node_modules에 설치된다.예제 (package.json){ "dependencies": { "react": "^18.2.0", ..

3D 그래픽을 더욱 현실감 있게 만들기 위해 물리 엔진을 추가하면 객체가 중력에 반응하고 충돌하는 등의 물리적 효과를 구현할 수 있다. react-three-rapier는 Rapier라는 경량 물리 엔진을 react-three-fiber와 통합하여, React에서 쉽게 물리 효과를 적용할 수 있게 해주는 라이브러리다. 이번 글에서는 react-three-rapier의 기본 사용법과 주요 개념을 통해 3D 장면에 물리적 상호작용을 추가해 보겠다. react-three-rapier 공식 github: https://github.com/pmndrs/react-three-rapier GitHub - pmndrs/react-three-rapier: 🤺 Rapier physics in React🤺 Rapier ..

3D 웹 그래픽은 사용자가 화면을 통해 실제와 같은 경험을 할 수 있도록 돕는 중요한 기술 중 하나다. 웹 환경에서 3D 콘텐츠를 구현하기 위해 사용되는 대표적인 라이브러리로는 Three.js가 있으며, 이를 통해 비교적 쉽게 3D 모델을 로드하고 화면에 렌더링할 수 있다. 그러나 단순히 모델을 렌더링하는 것만으로는 현실감을 충분히 제공하기 어렵다. 예를 들어, 중력에 의해 물체가 떨어지거나, 공이 바닥에 튕기는 상황을 구현하려면 더 깊이 있는 물리 계산이 필요하다. 이러한 물리적 상호작용을 시뮬레이션하기 위해서는 별도의 물리 엔진이 필요하다. 물리 엔진은 주로 충돌 감지, 역학 계산 등을 처리해 모델이 현실감 있게 움직이도록 돕는 도구다. 웹 기반 3D 그래픽에서 사용되는 물리 엔진은 CPU 연산의 부..

Three.js는 기본적으로 애니메이션과 상호작용을 쉽게 구현할 수 있는 기능을 제공하며, 이를 통해 3D 장면에 생동감을 더하고 사용자와의 상호작용을 가능하게 한다. 이번 글에서는 Three.js에서 애니메이션을 추가하고, 마우스 클릭이나 드래그 같은 이벤트를 통해 상호작용을 구현하는 방법을 알아보겠다.  이전 글1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일3. [개발자일기/3D 웹 세상] - Three.js의 기본 개념과 원리4. [개발자일기/3D 웹 세상] - React와 Three.js의 결합: react-three-fiber5. [개발자일기/3D 웹 세상] - react-three-fiber로 간단한 3D..

Three.js로 3D 장면을 구성할 때, 조명과 재질은 장면을 더욱 현실감 있게 만들어주는 중요한 요소다. 조명을 통해 객체에 입체감을 더하고, 다양한 재질을 적용하여 시각적으로 매력적인 3D 장면을 만들 수 있다. 이번 글에서는 Three.js에서 제공하는 다양한 조명과 재질의 종류와 사용법을 알아보겠다.  이전 글1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일3. [개발자일기/3D 웹 세상] - Three.js의 기본 개념과 원리4. [개발자일기/3D 웹 세상] - React와 Three.js의 결합: react-three-fiber5. [개발자일기/3D 웹 세상] - react-three-fiber로 간단한 ..

react-three-fiber는 React 환경에서 Three.js를 간단하게 활용할 수 있는 라이브러리로, React 컴포넌트 스타일로 3D 객체를 렌더링할 수 있게 한다. 이번 글에서는 react-three-fiber의 기본 사용법을 익히고, 간단한 3D 큐브를 렌더링하는 예제를 통해 기본 개념을 이해해 보겠다. 이전 글1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일3. [개발자일기/3D 웹 세상] - Three.js의 기본 개념과 원리4. [개발자일기/3D 웹 세상] - React와 Three.js의 결합: react-three-fiber   1.  프로젝트 준비: react-three-fiber 설치 먼저 ..

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 그래픽을 ..