https://iamiet.tistory.com/entry/S3%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%9C-React%EC%97%90-CICD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0-with-Github-Actions S3로 배포한 React에 CI/CD 구축하기 with Github Actions 우선 현재 클라이언트의 경우 인프라가 아래처럼 구성되어 있다. 만약 클라이언트에서 코드를 몇줄만 수정해도 아래 과정을 거쳐서 다시 배포해야 한다. 1. 리액트 프로젝트 빌드 2. S3에 업로드 iamiet.tistory.com github actinos 적용 s3 배포 자동화
후기 2023-07-27 나만무 2차 발표를 마쳤다. 이번에 준비한 것은 저번주와 마찬가지로 "웹 기반 실시간 모션 인식 게임"이라는 틀 속에서 "테트리스"를 붙인 것이다. "뿌요뿌요 테트리스"처럼 테트리스로 1대1 경쟁하지만, 그 조작법이 "Hand Detection"이다. 개발 환경 FE: React.js + Typescript + react-webcam + mediapipe(모션 인식 라이브러리) BE: Node.js(18버전) + express.js + mediasoup(Web RTC 라이브러리) AWS: EC2 모션 인식 오른손을 왼쪽으로 넘기면 블록이 왼쪽으로 1칸 이동하고, 왼손을 오른쪽으로 넘기면 블록이 오른쪽으로 1칸 이동한다. 한손을 회전시키면 블록이 1번 회전하고, 아래쪽으로 내리면 ..
프론트 업무를 맡은 것이 처음은 아니다. 저번 글리치 해커톤에서 Flutter 개발을 해봤었다. 그러나 제대로된 웹 개발은 처음이다. 그것도 바닐라JS가 아니라 React.js + Typescript로 하다보니 배워야할게 무진장 많다. JS 기초부터 Typescript 문법, HTML, CSS, React.js, 리액트에 타입스크립트 섞는 법 등등.. 그래도 내 선택이니까 불만은 없다. 풀스택 개발자가 되기 위해서는 프론트도 할 줄 알아야하니까. 단지 내 생각보다도 프론트가 어려웠을 뿐이다. 제대로 프론트 개발을 접해본 적이 없어서 막연하게 HTML 다루는 거라 쉬울 줄 알았지만 크나큰 오산이었다. 나만무가 시작한지 3주차에 접어들었다. 프로젝트의 와이어프레임을 그리기 위해 Figma툴도 배웠고 프로젝트..
배경 웹기반 실시간 화상 게임(with 모션 인식)을 주제로 화상채팅 기능을 구현했었다. NomadCoder의 줌 클론코딩으로 시작해서 그것을 그대로 프로젝트에 적용했었는데, 알대일 화상 채팅만을 할 때는 문제가 없었다. 그러나 미디어파이프의 모션 인식을 접목시키자 에 그려지는 손 골격이 매우 느려지는 것을 확인했다. 검색을 해도 다른 사람들은 손 골격이 실제 손에 잘 붙어있는 반면, 나의 모션인식은 반박자는 느렸다. 단순히 노트북 성능이슈로 생각하고 넘겼는데, 오늘 react-webcam이라는 라이브러리를 사용함으로써 원인을 알 수 있었다. 이전 방식 navigator.mediaDevices?.getUserMedia를 사용해서 디바이스의 노트북을 찾고, stream도 꺼낸 다음, 태그를 js로 가져와서..
