개발47 AWS 용어를 알아보자 시작하기...AWS와 도커를 사용해서 어떻게 프론트엔드를 올리는지에 대해서는 이해했지만, 여전히 AWS에는 너무 많은 서비스들이 존재하고, 이러한 것들이 어떻게 서로 동작하는지, 왜 필요한지에 대해서는 제대로 이해가 가지 않았다. 하지만 DevOps와 원활히 소통하고 점점 규모가 커지고 복잡해지는 프로젝트를 다루기 위해서는 해당 서비스들이 어떻게 굴러가는지, 왜 필요한지에 대해서는 이해해볼 필요가 있는 것 같다. 이번 시간에는 알쏭달쏭한 AWS 용어와 용도, 그리고 여기에 달려있는 Grafana, 프로메테우스에 대해 이야기를 해보려 한다. 일반적인 AWS 흐름지난 시간 도커를 공부하면서 프론트엔드 배포 흐름에 대해 알아보았다면, 이번에는 AWS에서 클라이언트가 접속할 경우 어떻게 흘러가는지 확인해보자.1.. 2024. 9. 28. React-Three-Fiber + WebXR (2) 우리가 해볼 것...Mixed Reality(혼합 현실) 위주로 WebXR을 만들 예정이기는 하지만, 대다수는 VR 기기가 없는 만큼 브라우저 상 등장하는 3D 모델의 배치도 고려 대상이다. 현재 구상중인 WebXR 스터디는 크게 두 가지 상호작용을 위주로 고려하고 있다.모델 터치모델 이동필요한 3D 모델을 제작하기 전에, 먼저 간단한 예제 코드들을 테스트 해보며, 랜더링 성능을 파악해보도록 하자. 컨트롤러오큘러스 프로에서는 두 가지 컨트롤러를 제공한다. 하나는 흔히 리모컨과 같이 동작하는 물리적 컨트롤러고, 다른 하나는 실제 손을 사용하는 컨트롤러다. 다행스럽게도 WebXR을 구동할 경우 해당 VR 기기에서 핸드 컨트롤러를 지원하면 자동으로 전환되어 사용할 수 있다. 지난 시간에 테스트한 큐브는 단순히.. 2024. 9. 2. React-Three-Fiber + WebXR (1) R3F?Three.js라는 3D 모델을 웹상에서 제어할 수 있게 해주는 라이브러리가 있었다. 이 라이브러리를 React 프레임워크에서 쉽게 사용될 수 있도록 만들어진 Three.js 파생 라이브러리를 React-three-fiber, 줄여서 R3F라고 한다. 내 개인 포트폴리오 웹사이트 또한 이 R3F를 사용해서 만들어졌다. 현재는 젠킨스 테스트를 위해 내려간 상태다. blender로 만든 3D 모형을 직접 웹상에 띄워 인터랙팅을 할 수 있다는 점은 굉장히 매력적이다. 놀랍게도 이 라이브러리에서 더 나아가 WebXR을 다룬다면 React로 직접 VR 기기에서 상호작용 할 수 있는 서비스도 만들 수 있다는 것이다. 오큘러스 프로를 오랫동안 사용중인 필자로서는 사용해보지 않을 수가 없다. 뭐가 필요할까?안타.. 2024. 8. 31. Next.js 시작하기 - Drag and Drop 만들기 (4) Draggable 지난 시간...지난 시간에는 draggable을 활용해서 list 카드 간 이동이 가능하게 만들어보았다. 이번에는 동일하게 todo 카드들이 자유롭게 draggable 할 수 있도록 만드는 방법을 시도해볼 것이다. 방법은 list 카드 이동과 동일한 방식이지만, 서로 다른 list 카드간 이동 또한 고려해야 하는 것이 차이점이다. todo draggable이번에도 우리가 해야 할 일은 draggable에 해당하는 함수들을 만들어주는 것이다. 기존에 handle 함수를 만들었던 것 처럼, 이번에는 todo handle 함수를 만들어보자. 먼저 아래의 state 함수를 만든다. 해당 state들은 list때와 같이 이동 전 위치와 이동 후 위치를 저장하는 용도이다. const [draggingTodoId,.. 2024. 8. 26. Next.js 시작하기 - Drag and Drop 만들기 (3) Draggable 시작하기...지난 시간에 indexedDB와 MSW를 활용하여 프론트엔드의 Todo를 추가할 수 있게 해보았다. 같은 방법으로 빠르게 List를 추가할 수 있는 기능을 만든 뒤, 대망의 Drag and Drop 기능을 구현해보자. 해당 DnD 기능은 라이브러리를 사용하지 않고 만들 예정이다. 어지간하면 라이브러리를 쓰는게 맞다. 빠르게 List 추가 기능 만들어보기Todo를 만들었을 때 사용법을 설명하였으니, List는 자세한 설명을 생략하겠다.//list를 추가하는 mutation 함수const list = async (data: { title: string }) => { const response = await axios.post("/list", data); return response.data.. 2024. 8. 18. Docker+Jenkins 동작 방식 젠킨스에서 도커? 도커에서 젠킨스?도커라이징을 하기 위해서는 우선 도커 이미지가 어떻게 배포까지 이어지는지를 이해해야 한다. 해당 동작 과정을 가장 시각적으로 잘 표현한 것 같은 이미지를 참고로 가져왔다. Deploy Django Application to AWS EC2 using Jenkins PipelineDeploy Django Application to AWS (EC2) using Jenkins, GitHub, Docker and DockerHub.www.fosstechnix.com지금까지는 젠킨스가 직접 빌드와 테스트를 진행하고 빌드된 결과를 AWS에 배포하는 과정으로 동작했다. 하지만 이제 docker를 사용하게 되면서, 해당 배포를 위해 젠킨스가 docker 이미지 빌드 후 hub에 push.. 2024. 8. 11. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형
