뫙뭉

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

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

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 ..

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

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을 직접 사용하려면..

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

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

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

평소 어떤 사이트에 회원가입을 하려 할 때 우리는 유효성을 확인하는 문구를 자주 만나게 된다. 유효성 검사란 요구하는 조건을 만족하는지 확인하는 절차를 말한다.사진을 보면 아이디의 글자수, 특수문자의 사용 가능 여부, 비밀번호와 일치하는지의 여부, 이것들 외에도 사이트에서 받아야 하는 데이터의 형식들을 제한하곤 한다.그리고 통과하지 못한 데이터를 제출하면 오류가 발생함으로서 잘못된 데이터가 전달되지 않도록 막는 역할을 해준다.최근 간단한 회원가입 페이지를 만들어보면서 이런 유효성 검사에 대해 리마인드 할 기회가 있었는데 이런 것들을 공유해 볼까 한다. 정규표현식유효성 검사를 하는데에 있어 자주 쓰이는 것이 바로 이 정규표현식이다.그럼 정규표현식이란 뭘까?정규 표현식 또는 정규식은 특정한 규칙을 가진 문자..