next1418 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. Docker 이미지 재사용에 관하여 - 2 시행착오환경변수가 빌드 시점과 런타임 시점에서 어떻게 동작하는지에 대해 알아가는 시간을 조금 가져보았다. 사실 일관성 있게 동작하기를 바랐지만, 안타깝게도 이놈의 Next14는 애초에 런타임 환경변수 동작에 대해서 자세히 설명하지도 않고, 한다는 소리는 런타임 환경 변수 주입 시에는 서버 사이드를 권장한다는 것이었다. 아니 그럼 클라이언트 사이드는!!!// Next14 runtime Environment 관련By default, environment variables are only available on the server. To expose an environment variable to the browser, it must be prefixed with NEXT_PUBLIC_. However, th.. 2024. 11. 9. Docker 이미지 재사용에 관하여 - 1 시작하기최근 꽤 흥미로운 이슈 하나가 프론트엔드에 나타났다. 바로 빌드된 Docker 이미지의 재사용에 관한 이야기였다. 현재 프로젝트들은 여러 개발 단계를 거쳐 배포로 이어지는데, 이 단계마다 이미지를 빌드하고 사용하는 방식으로 활용되고 있었다. 생각해보면 참 이상한 일이다. Docker image를 빌드하는 이유 중 하나는, 애초에 같은 이미지를 재사용하여 여러 컨테이너로 실행시킬 수 있다는 부분이다. 그래. 재사용. 이 핵심 기능에 대하여 지금 제대로 활용되고 있는가에 대해 생각해본다면, 당연히 아니오였다. 우리는 매번 새로운 빌드로 만들어진 이미지를 배포하고 있었고, 무언가 거대한 변경사항이 있는 것이 아닌, 주입되는 환경변수 몇 글자를 바꾸기 위해 빌드를 위한 리소스와 빌드 시간을 낭비하고 있었.. 2024. 11. 6. 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. 이전 1 2 3 다음 728x90 반응형
