도커 환경변수 외부 주입 (with Next14) 시작하기… 일전에 프론트엔드 배포 환경을 도커 컨테이너 기반으로 변경하는 일이 있었다. 현재는 무사히 테스트 작업이 끝나 정식 배포가 진행되었지만 여전히 아쉬운 문제가 하나 남아있었다. 바로 ‘도커 이미지 재사용’에 대한 문제였다. 대부분의 회사에서는 테스트 서버와 production 서버를 분리...

Next14 Prerendering 성능 개선의 딜레마 종종 여러 인프라 개선을 위해 무언가를 적용해 보면, 꼭 기존에 사용하던 장점을 버려야 하는 경우가 발생한다. 프레임워크나 라이브러리의 한계라고도 볼 수 있을 것 같다. 블로그에도 추후 다루게 될 이슈이기도 하지만, 최근 이러한 개선과 관련된 업무를 진행하는 과정에서 Next14 프레임워크의 ...

12월 프론트엔드 개발자 뉴스 #1 웹 개발 뉴스 Astro 5.0 https://astro.build/blog/astro-5/ Astro란? 블로그, 이커머스, 마케팅 등의 컨텐츠 중심 웹사이트를 구축하기 위한 프레임워크이다. Island 아키텍처 도입을 통해 자바스크립트 오버헤드와 복잡성을 줄이고 빠른 로딩 속도와 뛰어난 검색 엔진 최적화...

React-Three-Fiber + Next14 시작하기… 일전에도 Next14에서 React three Fiber, 줄여서 R3F를 사용하는 방법에 대해 언급했었다. 이번에는 간단하게 웹사이트를 만들면서 참고한 예제들과 사용 방법에 대해 언급해보려 한다. https://github.com/pmndrs/react-three-next GitHub...

Docker + Jenkins + Github + Grafana + Next14 Panda CSS 다크모드 적용해보기 전체적인 웹사이트의 형태를 갖추고 난 뒤, panda css에 동적으로 스타일을 적용해보는 몇가지 시도를 진행해보았다. 가장 먼저, 동적으로 내가 원하는 색상을 보이도록 styled css를 작성해보았다. const circle...

Docker + Jenkins + Github + Grafana + Next14 지난 시간… 지난 시간동안 Jenkins에서 도커 이미지를 빌드할 수 있도록 설정하고, 간단한 Next14 프로젝트를 통해 해당 동작이 정상적으로 동작하는지 테스트를 수행해 보았다. 전체적인 자동 빌드 배포 프로세스가 설정되었으니, 이제 우리는 본격적으로 Next14...

Docker 이미지 재사용에 관하여 - 1 시작하기 최근 꽤 흥미로운 이슈 하나가 프론트엔드에 나타났다. 바로 빌드된 Docker 이미지의 재사용에 관한 이야기였다. 현재 프로젝트들은 여러 개발 단계를 거쳐 배포로 이어지는데, 이 단계마다 이미지를 빌드하고 사용하는 방식으로 활용되고 있었다. 생각해보면 참 이상한 일이다. Docker image를 ...

Docker + Jenkins + Github + Grafana + Next14 시작하기… 이번에는 Nginx를 도커로 말아 프록시 서버로 동작할 수 있게 할 계획이다. Nginx와 Next14를 1:1로 사용할 예정이기도 하고, 기존에 세팅되어 있는 Nginx는 더 이상 사용하지 않을 것이기 때문에 시스템 상에서 Nginx를 내리고 새로운 Do...

Docker + Jenkins + Github + Grafana + Next14 Jenkins에 Docker 설치 전에… Grafana 관련으로 약간의 수정사항이 발생했다. 아무래도 도커 컨테이너를 기반으로 운영을 할 예정이다 보니, Grafana 또한 Docker로 관리하는 것이 좋을 것 같다는 판단이 들었다. 때문에 기존의 Grafana를 제...

Next14 랜더링 방식 고민해볼 이슈… 최근 있었던 프로젝트의 랜더링 방식 관련으로 고민을 해볼 겸 한 번 정리를 해보려고 한다. 이슈 사항은 다음과 같다. 페이지가 검색엔진에 노출이 되고 빠르게 로드될 수 있도록 SSG로 운영하던 프로젝트가 있었는데, 몇가지 변경사항으로 인해 다이나믹 라우팅을 수행해야만 했다. 페이지 자체는 수가 많지 않을 것...