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로 운영하던 프로젝트가 있었는데, 몇가지 변경사항으로 인해 다이나믹 라우팅을 수행해야만 했다. 페이지 자체는 수가 많지 않을 것...

Docker + Jenkins + Github + Grafana + Next14 이어서… Dockerfile을 작성하고 로컬에서 정상적으로 동작하는 것을 확인했다. 해당 도커 이미지는 서버에 올릴 때도 동일한 컨테이너로 생성되어 동작하기 때문에 로컬과 서버에서 서로 다른 환경 문제로 오류가 발생하는지의 여부를 미리 파악할 수 있다. 이제 Doc...

Docker + Jenkins + Github + Grafana + Next14 시작하기… Next14로 간단한 프로젝트를 만들어 보는 것도 끝났고, 슬슬 기존에 만들었던 Three.js 웹사이트를 새로 리뉴얼할 때가 되었다고 생각이 들었다. 지난 시간에 Docker를 VPS에 설치하여 내부에 Jenkins를 설치하는 것 까지 시도를 했었다. 여...