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

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

Grafana와 Prometheus 시작하기… 전 회사에서 항상 골치였던 것들 중 하나는 바로 CPU가 뻗어버리는 일이 자주 발생했다는 것이었다. 클라우드 서비스를 이용하는 것이 아닌, 실제 물리 서버에 연결되는 구조였지만, 여러가지 이유로 인해 필요한 성능보다 낮은 부품들로 구성된 서버를 활용한 탓에 새벽마다 CPU 사용률 99%를 찍고 죽어버리...

AWS 용어를 알아보자 시작하기… AWS와 도커를 사용해서 어떻게 프론트엔드를 올리는지에 대해서는 이해했지만, 여전히 AWS에는 너무 많은 서비스들이 존재하고, 이러한 것들이 어떻게 서로 동작하는지, 왜 필요한지에 대해서는 제대로 이해가 가지 않았다. 하지만 DevOps와 원활히 소통하고 점점 규모가 커지고 복잡해지는 프로젝트를 다루기 위해서는 해...

우리가 해볼 것… Mixed Reality(혼합 현실) 위주로 WebXR을 만들 예정이기는 하지만, 대다수는 VR 기기가 없는 만큼 브라우저 상 등장하는 3D 모델의 배치도 고려 대상이다. 현재 구상중인 WebXR 스터디는 크게 두 가지 상호작용을 위주로 고려하고 있다. 필요한 3D 모델을 제작하기 전에, 먼저 간단한 예제 코드들을 테스트 해보며,...

R3F? Three.js라는 3D 모델을 웹상에서 제어할 수 있게 해주는 라이브러리가 있었다. 이 라이브러리를 React 프레임워크에서 쉽게 사용될 수 있도록 만들어진 Three.js 파생 라이브러리를 React-three-fiber, 줄여서 R3F라고 한다. 내 개인 포트폴리오 웹사이트 또한 이 R3F를 사용해서 만들어졌다. 현재는 젠킨스 테스트를...

지난 시간… 지난 시간에는 draggable을 활용해서 list 카드 간 이동이 가능하게 만들어보았다. 이번에는 동일하게 todo 카드들이 자유롭게 draggable 할 수 있도록 만드는 방법을 시도해볼 것이다. 방법은 list 카드 이동과 동일한 방식이지만, 서로 다른 list 카드간 이동 또한 고려해야 하는 것이 차이점이다. todo dragg...

시작하기… 지난 시간에 indexedDB와 MSW를 활용하여 프론트엔드의 Todo를 추가할 수 있게 해보았다. 같은 방법으로 빠르게 List를 추가할 수 있는 기능을 만든 뒤, 대망의 Drag and Drop 기능을 구현해보자. 해당 DnD 기능은 라이브러리를 사용하지 않고 만들 예정이다. 어지간하면 라이브러리를 쓰는게 맞다. 빠르게 List 추가...

젠킨스에서 도커? 도커에서 젠킨스? 도커라이징을 하기 위해서는 우선 도커 이미지가 어떻게 배포까지 이어지는지를 이해해야 한다. 해당 동작 과정을 가장 시각적으로 잘 표현한 것 같은 이미지를 참고로 가져왔다. 도커와 젠킨스의 동작 과정 예시 지금까지는 젠킨스가 직접 빌드와 테스트를 진행하고 빌드된 결과를 AWS에 배포하는 과정으로 동작했다. 하...

제 local에서는 돌아가는데 왜 서버에서는 안될까요…. 난감하기 그지없는 상황이다. 환경도 맞춰줬고, 버전도 맞춰줬고, 해달라는 건 다 해줬는데 대체 왜 배포만 하면 안되는 걸까. 아니, 배포가 잘 되면 왜 내 로컬에서는 또 안되는 걸까. 도대체 나한테 왜 이러는 걸까… 많은 생각이 든다. 컴퓨터는 거짓말을 하지는 않지만 너무 까다로운 동료다. 버...