들어가며 이전 글에서는 React에서 three.js를 시작하고 기본 박스를 렌더링하는 방법을 살펴봤습니다. 이번 글에서는 3D 장면을 더 입체적으로 보이게 만드는 조명과 material을 정리해볼게요. 3D 물체는 모양만 있다고 끝나지 않습니다. 어떤 재질을 쓰는지, 어떤 방향에서 빛을 받는지에 따라 전혀 다르게 보입니다. OrbitCo...

three.js란? three.js는 브라우저에서 3D 그래픽을 만들 수 있게 도와주는 JavaScript 라이브러리입니다. WebGL을 직접 다루지 않아도 카메라, 조명, 물체, 재질 같은 3D 요소를 비교적 쉽게 사용할 수 있습니다. React 프로젝트에서는 @react-three/fiber를 함께 사용하면 React 컴포넌트 방식으로 3D ...

들어가며 코딩 테스트 문제를 풀다 보면 정답은 맞는 것 같은데 시간 초과가 나는 경우가 있습니다. 이럴 때 가장 먼저 의심해볼 수 있는 부분이 탐색 방식입니다. 배열을 처음부터 끝까지 확인하는 선형 탐색은 이해하기 쉽지만, 데이터가 많아지면 느려질 수 있습니다. 이때 정렬된 데이터라면 이진 탐색을 사용할 수 있습니다. 이진 탐색이란? 이...

들어가며 React에서 사이드 이펙트를 처리할 때는 대부분 useEffect를 사용합니다. API 요청, 이벤트 리스너 등록, 타이머 설정, localStorage 접근 같은 작업은 보통 useEffect만으로 충분합니다. 그런데 React에는 이름이 비슷한 useLayoutEffect도 있습니다. 처음 보면 이런 생각이 들 수 있습니다. u...

React lazy란? React.lazy는 컴포넌트를 필요한 시점에 동적으로 불러오게 해주는 기능입니다. 앱이 커지면 처음 로딩할 때 다운로드해야 하는 JavaScript 번들 크기도 커집니다. 모든 페이지 코드를 처음부터 한 번에 불러오기보다, 사용자가 해당 페이지에 접근했을 때 필요한 코드만 불러오면 초기 로딩을 줄일 수 있습니다. 이 방...

React Query란? React Query는 서버에서 가져온 데이터를 관리하기 위한 라이브러리입니다. React의 useState와 useEffect만으로도 API 데이터를 가져올 수 있지만, 로딩 상태, 에러 상태, 캐싱, 재요청, 동기화까지 직접 처리하려면 코드가 금방 복잡해집니다. React Query를 사용하면 이런 서버 상태 관리 로...

Recoil이란? Recoil은 React에서 전역 상태를 관리하기 위한 라이브러리입니다. 컴포넌트 여러 곳에서 같은 상태를 읽거나 수정해야 할 때 props를 계속 내려보내지 않고 상태를 공유할 수 있게 도와줍니다. Recoil의 핵심 개념은 atom과 selector입니다. 설치하기 npm install recoil 또는 yarn을...

Query String이란? Query String은 URL 뒤에 ?를 붙이고 key-value 형태의 값을 전달하는 방식입니다. /search?keyword=react 여기서 keyword=react가 query string입니다. 검색어, 필터, 정렬 조건처럼 페이지 조회 조건을 URL에 담을 때 자주 사용합니다. 기본 형태 Que...

Path Parameter란? Path Parameter는 URL 경로 안에 들어가는 동적인 값입니다. 예를 들어 게시글 상세 페이지 URL이 아래처럼 생겼다고 해볼게요. /posts/15 여기서 15는 게시글 id입니다. 이처럼 URL 경로 일부를 변수처럼 사용하는 값을 path parameter라고 부릅니다. 언제 사용할까요? P...

들어가며 프론트엔드에서 API 데이터를 다루다 보면 아직 값이 없거나, 특정 필드가 내려오지 않는 상황을 자주 만납니다. 이때 안전하게 값을 읽기 위해 사용하는 문법이 Optional Chaining ?.입니다. 그리고 기본값을 넣을 때 자주 사용하는 문법이 Nullish Coalescing ??입니다. 두 문법을 함께 사용하면 방어 코드를 훨...