개발/Next.js19 React-Three-Fiber + Next14 시작하기...일전에도 Next14에서 React three Fiber, 줄여서 R3F를 사용하는 방법에 대해 언급했었다. 이번에는 간단하게 웹사이트를 만들면서 참고한 예제들과 사용 방법에 대해 언급해보려 한다. https://github.com/pmndrs/react-three-next GitHub - pmndrs/react-three-next: React Three Fiber, Threejs, Nextjs starterReact Three Fiber, Threejs, Nextjs starter. Contribute to pmndrs/react-three-next development by creating an account on GitHub.github.com 위의 템플릿을 사용했다고 했을 때, 기본적.. 2024. 12. 8. 6. Docker + Jenkins + Github + Grafana + Next14 Panda CSS 다크모드 적용해보기전체적인 웹사이트의 형태를 갖추고 난 뒤, panda css에 동적으로 스타일을 적용해보는 몇가지 시도를 진행해보았다. 가장 먼저, 동적으로 내가 원하는 색상을 보이도록 styled css를 작성해보았다.const circleButton = (props) => css({ width: '3rem', height: '3rem', backgroundColor: props.color === 'white' ? 'white' : props.color === 'Orange' ? 'Orange' : 'Black', border: 'none', borderRadius: '50%', textAlign: 'center', lineHeight: '4... 2024. 12. 1. 5. Docker + Jenkins + Github + Grafana + Next14 지난 시간...지난 시간동안 Jenkins에서 도커 이미지를 빌드할 수 있도록 설정하고, 간단한 Next14 프로젝트를 통해 해당 동작이 정상적으로 동작하는지 테스트를 수행해 보았다. 전체적인 자동 빌드 배포 프로세스가 설정되었으니, 이제 우리는 본격적으로 Next14 애플리케이션을 개발하여 우리가 구현하고자 하는 멋진 웹을 개발해야 한다. Next14 포트폴리오 애플리케이션세팅 환경은 다음과 같다.Next14 + App routerpanda cssReact-Three-Fiber사실 이번 Next14에서 가장 핵심이 되는 부분은 React Three Fiber라고도 할 수 있다. 줄여서 R3F라고도 불리는 이 라이브러리는 기존 React에서 3D 모델을 쉽게 컨트롤하여 웹사이트에 띄워줄 수 있는 Thre.. 2024. 11. 23. 4. Docker + Jenkins + Github + Grafana + Next14 시작하기...이번에는 Nginx를 도커로 말아 프록시 서버로 동작할 수 있게 할 계획이다. Nginx와 Next14를 1:1로 사용할 예정이기도 하고, 기존에 세팅되어 있는 Nginx는 더 이상 사용하지 않을 것이기 때문에 시스템 상에서 Nginx를 내리고 새로운 Docker Nginx 프록시 서버를 올릴 필요가 있다. 만약 처음부터 할 예정이라면 불필요하겠지만, 필자처럼 이미 Linux 자체에 Nginx를 설치해둔 상태라면 도커 컨테이너로 전환하기 위해 내려두자. Nginx의 상태를 확인하고 내리는 명령어는 아래와 같다.sudo systemctl status nginx// 끄기sudo systemctl stop nginx 추가로 Jenkinsfile을 수정하기 전에 아래의 network 설정도 같이 진.. 2024. 10. 26. 3. Docker + Jenkins + Github + Grafana + Next14 Jenkins에 Docker 설치 전에...Grafana 관련으로 약간의 수정사항이 발생했다. 아무래도 도커 컨테이너를 기반으로 운영을 할 예정이다 보니, Grafana 또한 Docker로 관리하는 것이 좋을 것 같다는 판단이 들었다. 때문에 기존의 Grafana를 제거하고 Docker Grafana를 설치하기로 진행했다.기존 Grafana 삭제sudo apt-get remove grafanasudo apt-get purge grafanasudo rm -rf /etc/grafanasudo rm -rf /var/lib/grafanasudo rm -rf /usr/share/grafana Docker Grafana 설치docker run -d -p 3000:3000 --name=grafana grafana/g.. 2024. 10. 22. Next14 랜더링 방식 고민해볼 이슈...최근 있었던 프로젝트의 랜더링 방식 관련으로 고민을 해볼 겸 한 번 정리를 해보려고 한다. 이슈 사항은 다음과 같다. 페이지가 검색엔진에 노출이 되고 빠르게 로드될 수 있도록 SSG로 운영하던 프로젝트가 있었는데, 몇가지 변경사항으로 인해 다이나믹 라우팅을 수행해야만 했다. 페이지 자체는 수가 많지 않을 것으로 예상하지만, 일정 기간동안만 존재하는 특성을 가지고 있기 때문에, 해당 기간이 지나면 페이지에 접근하게 둬서는 안된다. 문제는 SSG가 빌드 시점에 페이지들이 생성되는 특성으로 인해 해당 기간이 지나더라도 페이지가 여전히 접근될 수 있다는 점이다. 어떻게 하면 최대한 공수를 줄이면서 SEO를 챙길 수 있는지 생각해보기 위해 Next14에서 제공하는 네 가지 랜더링 방식에 대해 여.. 2024. 10. 14. 이전 1 2 3 4 다음 728x90 반응형
