분류 전체보기432 [ Three.js ] PerspectiveCamera near, far 값은 왜 중요할까? z-fighting 원인까지 쉽게 설명! Three.js를 공부하다 보면 아래와 같은 코드를 자주 보게 됩니다.const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000)여기서 많은 사람들이 궁금해하는 부분이 바로 이것입니다.near, far 값은 왜 필요한 걸까?그리고 Three.js 관련 글을 보다 보면 이런 문장도 자주 보게 됩니다.Do not use extreme values like 0.001 and 999999 to prevent z-fighting처음 보면 굉장히 어렵게 느껴질 수 있습니다.이번 글에서는:PerspectiveCamera near/far 의미왜 극단적인 값을 쓰면 안 되는지z-fighting 현상.. 2026. 5. 26. [ 개선 ] Lighthouse 경고 하나씩 없애보기 3: Layout Shift Culprits 해결하기 Lighthouse에서 다음 경고가 나왔다. Layout shift culprits이 경고는 CLS, 즉 Cumulative Layout Shift와 관련된 항목이다.Lighthouse 설명은 대략 이렇다.Layout shifts occur when elements move absent any user interaction.사용자가 아무 동작도 하지 않았는데 페이지 요소가 움직이면 layout shift가 발생한다. 그리고 이런 이동이 누적되면 CLS 점수가 나빠진다.이번 케이스에서는 Lighthouse가 특정 `div`를 layout shift culprit로 잡았다. 스크린샷을 보면 보고서 목록 페이지의 본문 영역이 로딩 중 아래로 밀린 것으로 보였다. CLS가 왜 문제일까?CLS는 사용자가 페이.. 2026. 5. 25. [ 개선 ] Lighthouse 경고 하나씩 없애보기 2: Duplicated JavaScript 줄이기 Lighthouse에서 로고 이미지 관련 경고를 해결한 뒤, 다음으로 마주한 경고는 JavaScript 관련 항목이었다.Duplicated JavaScriptEst savings of 118 KiB처음에는 “공통 코드가 여러 번 번들에 들어간 건가?”라고 생각했다. 하지만 확인해 보니 실제 문제는 조금 달랐다.이번 글은 `Duplicated JavaScript` 경고를 확인하고, 라우트 단위 lazy loading으로 초기 번들을 줄여 Lighthouse 경고를 제거한 과정이다. 1. Lighthouse 경고Lighthouse는 다음과 같은 메시지를 보여줬다.Duplicated JavaScriptRemove large, duplicate JavaScript modules from bundles대략 이런.. 2026. 5. 24. [ 개선 ] Lighthouse 경고 하나씩 없애보기 1: LCP Request Discovery -이미지 최적화하기 Lighthouse를 돌렸을 때 처음 마주한 문제는 Performance 점수였다. 특히 첫 화면 상단에 있는 로고 이미지가 LCP 관련 경고에 계속 잡히고 있었다.이번 글은 로고 하나를 최적화하면서 Lighthouse 경고가 어떻게 바뀌었고, 어떤 순서로 해결했는지 정리한 기록이다. 첫 번째 경고: LCP Request Discovery처음 Lighthouse에서 나온 경고는 다음과 같았다.LCP request discovery세부 항목은 이런 내용이었다.fetchpriority=high should be appliedRequest is discoverable in initial documentlazy load not applied즉, Lighthouse는 이렇게 말하고 있었다.> LCP로 잡힌 이미.. 2026. 5. 23. [ 개선 ] Lighthouse 경고 하나씩 없애보기 0: 성능 점수 49점에서 시작하기 프로젝트를 어느 정도 만들고 나면 한 번쯤 Lighthouse를 돌려보게 된다.그리고 생각보다 냉정한 숫자를 마주한다.이번 프로젝트의 Lighthouse 결과는 다음과 같았다.- Performance: 49- Accessibility: 95- Best Practices: 77- SEO: 75접근성 점수는 나쁘지 않았지만, Performance 점수가 49점이었다. 특히 주요 지표를 보면 성능 문제가 꽤 명확했다.- First Contentful Paint: 12.5s- Largest Contentful Paint: 24.9s- Speed Index: 12.8s- Total Blocking Time: 80ms- Cumulative Layout Shift: 0.134여기서 눈에 띄는 건 `Total Bloc.. 2026. 5. 22. [ Three.js ] PerspectiveCamera는 어떤 역할을 할까요? 오늘은 Three.js 에서 가장 많이 사용되는 카메라 중 하나인 PerspectiveCamera에 대해 알아보겠습니다!Three.js를 처음 배우면 가장 먼저 보게 되는 코드 중 하나가 바로 이것입니다.const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000)처음 보면 숫자도 많고, 정확히 무슨 역할을 하는지 헷갈릴 수 있습니다.하지만 PerspectiveCamera는 사실 굉장히 중요한 개념입니다.왜냐하면 Three.js에서 카메라는 단순히 “보는 기능”이 아니라,3D 공간을 어떤 방식으로 화면에 투영할지 결정하는 핵심 요소이기 때문입니다. PerspectiveCamera란?P.. 2026. 5. 21. [ KOTI ] 브라우저 뒤로가기와 React Router 히스토리 제어 React Router 기반 화면에서 보고서 작성 페이지의 뒤로 가기/앞으로 가기 동작을 정리했다. 겉으로는 단순히 “작성 버튼이 비활성화된 보고서로 이동하면 안 된다”는 문제였지만, 실제로는 브라우저 history, React Router의 `replace`, 페이지 진입 가드, 그리고 렌더 타이밍이 얽혀 있었다.**문제 상황**보고서 목록에서 작성 버튼이 비활성화된 보고서는 `/evaluationPage/...`로 이동하면 안 된다. 그런데 사용자가 이전에 작성 페이지에 들어갔던 이력이 있으면, 브라우저 뒤로 가기/앞으로 가기를 통해 `/evaluationPage/...` 히스토리 entry를 다시 밟을 수 있었다.처음에는 `EvaluationPage`에 진입한 뒤 보고서 상태를 확인해서 작성 불가 .. 2026. 5. 19. [ Three.js ] Date.now() 와 THREE.Clock 의 차이점 Three.js에서 애니메이션을 구현하다 보면 아래와 같은 코드를 자주 볼 수 있습니다.let time = Date.now()const tick = () =>{ const currentTime = Date.now() const deltaTime = currentTime - time time = currentTime mesh.rotation.y += 0.001 * deltaTime requestAnimationFrame(tick)}하지만 최근 Three.js 예제에서는 아래처럼 THREE.Clock을 사용하는 경우도 많습니다.const clock = new THREE.Clock()const tick = () =>{ const deltaTime = clock.getDelta(.. 2026. 5. 19. [ Three.js ] deltaTime과 currentTime - time 을 사용하는 이유 Three.js에서 애니메이션을 구현하다 보면 아래와 같은 코드를 자주 볼 수 있습니다.const currentTime = Date.now()const deltaTime = currentTime - timetime = currentTimemesh.rotation.y += 0.001 * deltaTime처음 보면 이런 생각이 들 수 있습니다.currentTime도 현재 시간인데, time도 시간 아닌가?왜 currentTime - time 을 하는 걸까?이번 글에서는 Three.js에서 일정한 애니메이션 속도를 유지하기 위해 deltaTime을 사용하는 이유를 알아보겠습니다. Date.now()는 현재 시간을 반환한다Date.now()는 현재 시간을 밀리초(ms) 단위로 반환합니다.예를 들어:console.. 2026. 5. 18. 이전 1 2 3 4 ··· 48 다음 728x90
