개발33 Next14 랜더링 방식 고민해볼 이슈...최근 있었던 프로젝트의 랜더링 방식 관련으로 고민을 해볼 겸 한 번 정리를 해보려고 한다. 이슈 사항은 다음과 같다. 페이지가 검색엔진에 노출이 되고 빠르게 로드될 수 있도록 SSG로 운영하던 프로젝트가 있었는데, 몇가지 변경사항으로 인해 다이나믹 라우팅을 수행해야만 했다. 페이지 자체는 수가 많지 않을 것으로 예상하지만, 일정 기간동안만 존재하는 특성을 가지고 있기 때문에, 해당 기간이 지나면 페이지에 접근하게 둬서는 안된다. 문제는 SSG가 빌드 시점에 페이지들이 생성되는 특성으로 인해 해당 기간이 지나더라도 페이지가 여전히 접근될 수 있다는 점이다. 어떻게 하면 최대한 공수를 줄이면서 SEO를 챙길 수 있는지 생각해보기 위해 Next14에서 제공하는 네 가지 랜더링 방식에 대해 여.. 2024. 10. 14. 2. Docker + Jenkins + Github + Grafana + Next14 해당 포스트는 Docker Jenkins 내부에서 Docker를 사용할 수 있는 세팅이 누락되어 있습니다. 해당 세팅이 필요한 경우 3번 포스트를 먼저 참고한 뒤 2번을 읽어주시기 바랍니다이어서...Dockerfile을 작성하고 로컬에서 정상적으로 동작하는 것을 확인했다. 해당 도커 이미지는 서버에 올릴 때도 동일한 컨테이너로 생성되어 동작하기 때문에 로컬과 서버에서 서로 다른 환경 문제로 오류가 발생하는지의 여부를 미리 파악할 수 있다. 이제 Docker를 기반으로 Jenkins가 동작하도록 세팅을 해보도록 하겠다. Docker + Jenkins일전에 포스팅했던 Docker 세팅 과정에 Jenkins를 설치하는 방법에 대해서 다뤄두었다. 당시에 세팅해뒀던 Jenkins를 다시 systemctl로 활성화.. 2024. 10. 9. 1. Docker + Jenkins + Github + Grafana + Next14 시작하기...Next14로 간단한 프로젝트를 만들어 보는 것도 끝났고, 슬슬 기존에 만들었던 Three.js 웹사이트를 새로 리뉴얼할 때가 되었다고 생각이 들었다. 지난 시간에 Docker를 VPS에 설치하여 내부에 Jenkins를 설치하는 것 까지 시도를 했었다. 여태까지 VPS에 직접적으로 Jenkins를 설치해 관리했지만, 이제는 Docker로 운영하게 된 것이다. 그렇다면 기존의 Jenkins에서 새로운 Docker+jenkins로 교체한 만큼 Jenkins 세팅도 변경이 필요해졌다. 깃허브 main 브랜치에 merge가 일어나면 자동으로 Jenkins에서 이를 감지하고 docker image를 빌드하여 push하고, 새로 만들어진 docker 이미지를 pull 해서 운영하는 구조로 설계할 예정이.. 2024. 10. 5. Grafana와 Prometheus 시작하기...전 회사에서 항상 골치였던 것들 중 하나는 바로 CPU가 뻗어버리는 일이 자주 발생했다는 것이었다. 클라우드 서비스를 이용하는 것이 아닌, 실제 물리 서버에 연결되는 구조였지만, 여러가지 이유로 인해 필요한 성능보다 낮은 부품들로 구성된 서버를 활용한 탓에 새벽마다 CPU 사용률 99%를 찍고 죽어버리기 일쑤였다. (당연히 메모리도 마찬가지였다.) 이렇게 될 경우 가장 끔찍한 것은 원격으로 접근이 되지 않는다는 것이다. 안타깝게도 이러한 서버의 상태를 어떻게 모니터링 할 수 있는가에 대한 지식이 전무했던 시절이기도 했고, 아무도 알지 못했다. 그야말로 낭만이 넘치는 야생의 환경이었다. 하지만 인간은 발전하는 동물. 우리는 늘 더 나은 방법을 찾을 수 있다. 물리 서버의 상태를 늘 확인하고 갑.. 2024. 10. 1. AWS 용어를 알아보자 시작하기...AWS와 도커를 사용해서 어떻게 프론트엔드를 올리는지에 대해서는 이해했지만, 여전히 AWS에는 너무 많은 서비스들이 존재하고, 이러한 것들이 어떻게 서로 동작하는지, 왜 필요한지에 대해서는 제대로 이해가 가지 않았다. 하지만 DevOps와 원활히 소통하고 점점 규모가 커지고 복잡해지는 프로젝트를 다루기 위해서는 해당 서비스들이 어떻게 굴러가는지, 왜 필요한지에 대해서는 이해해볼 필요가 있는 것 같다. 이번 시간에는 알쏭달쏭한 AWS 용어와 용도, 그리고 여기에 달려있는 Grafana, 프로메테우스에 대해 이야기를 해보려 한다. 일반적인 AWS 흐름지난 시간 도커를 공부하면서 프론트엔드 배포 흐름에 대해 알아보았다면, 이번에는 AWS에서 클라이언트가 접속할 경우 어떻게 흘러가는지 확인해보자.1.. 2024. 9. 28. React-Three-Fiber + WebXR (2) 우리가 해볼 것...Mixed Reality(혼합 현실) 위주로 WebXR을 만들 예정이기는 하지만, 대다수는 VR 기기가 없는 만큼 브라우저 상 등장하는 3D 모델의 배치도 고려 대상이다. 현재 구상중인 WebXR 스터디는 크게 두 가지 상호작용을 위주로 고려하고 있다.모델 터치모델 이동필요한 3D 모델을 제작하기 전에, 먼저 간단한 예제 코드들을 테스트 해보며, 랜더링 성능을 파악해보도록 하자. 컨트롤러오큘러스 프로에서는 두 가지 컨트롤러를 제공한다. 하나는 흔히 리모컨과 같이 동작하는 물리적 컨트롤러고, 다른 하나는 실제 손을 사용하는 컨트롤러다. 다행스럽게도 WebXR을 구동할 경우 해당 VR 기기에서 핸드 컨트롤러를 지원하면 자동으로 전환되어 사용할 수 있다. 지난 시간에 테스트한 큐브는 단순히.. 2024. 9. 2. 이전 1 2 3 4 5 6 다음 728x90 반응형
