킹의 개발일지

사건의 발단 (1) openai의 chat complete api를 요청, stream으로 응답을 받아 한 글자 한 글자 써내려가는 기능을 구현하고 있었다. Next.js 프레임워크를 사용했기에, 프로젝트의 배포를 vercel을 고려하고 있었다. vercel에 배포후 gpt에 요청을 보내면 성공적으로 응답을 가져오는것을 볼 수 있었다. 그런데 여기서 첫 문제가 발생한다. 한 글자 한 글자 써내려 가던도중... 아래 그림과 같이 중간에 멈춰버리는 것이다.. 개발자 도구의 network 패널을 열어서 보니 이 응답이 10초를 넘어갈 때마다 멈추는 것이었다. 문제를 찾아본 결과, vercel hobby(무료) 버전은 실행 시간이 10초를 넘어가면 알아서 중단시킨다고 한다... 사건의 발단(2) 때문에 프론트엔..

토이 프로젝트에서 데이터를 요청할 때는 getServerSideProps안에서 api routes를 사용했다. 아래 두 코드는 index.js를 렌더링 할 때 요청 되는 메서드들이다. 우선, '/' 가 요청되면 server side에서 api routes를 호출하고 api routes는 다시 날씨 api를 요청하여 결과를 리턴하는 구조이다. export async function getServerSideProps(context) { const session = await getServerSession(context.req, context.res, authOptions) const url = process.env.WEATHER_REQ_URL +"/api/weather"; const options = { m..

Cannot read properties of undefined (reading '...') mongoose를 사용해서 스키마를 만드는데, 계속해서 Cannot read properties of undefined(reading 'users') 이놈의 에러가 나를 계속 괴롭혔다. 문제의 코드 const Users = models.users || model('users', userSchema); 위 코드로 의도한 바는, users 스키마가 정의 돼 있다면(models.users) 그것을 쓰고 아니면 새 스키마를 생성해라는 의도였다. 그런데, 의도와는 다르게 어느 순간부터 Cannot read properties of undefined(reading 'users') 이 에러가 발생하는것이 아닌가.. 메세지를 ..

async & await 보기전에 ‘콜백지옥’이 무엇인지, 그리고 이를 해결할 Promise를 먼저 보도록하자! 콜백 지옥 timer(1000, function() { console.log('어떤 일1'); timer(1000, function() { console.log('어떤 일2'); timer(1000, function() { console.log('어떤 일3'); }); }); }); 위 코드는 timer를 통해서 1초후 일어날 일들을 콜백으로 처리하는 코드이다. ‘어떤 일 1‘이 끝나고 1초후 다시 ‘어떤일 2’가 일어나고… 이를 구현하기위해 무수히 많은 콜백을 붙힌 모습이다. 딱 봐도 실수하기 좋은 코드이지 않은가. 사람들을 이런 코드를 보고 ‘콜백 지옥’이라고 부른다. Promise 이를 ..

Promise 를 알아보기전에 먼저 동기와 비동기의 차이를 먼저 살펴보자! 동기 vs 비동기 console.log(1); console.log(2); console.log(3); /** * 출력 결과 * 1 * 2 * 3 */ 이렇게 1, 2, 3 순서로 위에서 아래로 순차적으로 출력되는 결과를, 즉 앞의 실행 결과를 뒤의 명령이 기다리는 것을 ‘동기적’으로 실행된다고 부른다. console.log(1); setTimeout(function(){console.log(2)}, 5000); console.log(3); /** * 출력 결과 * 1 * 3 * 2 */ 그러나 위의 결과는 1, 3, 그리고 5초후 2가 출력된다. console.log(2)는 메인 실행흐름과 독립적으로 실행된다. 이렇게 프로그램이..

필요없는 장애물 제거 이전 글에서는 매 프레임마다 new를 사용해서 인스턴스를 생성해서 배열에 넣어주고 있었다. 제거도 없이 계속해서 생성만 한다면 컴퓨터는 언제가 터지고 말 것이다. 끝까지 이동한 장애물들은 제거해주어야 한다. var timer = 0; var cactusArray []; function loop() { requestAnimationFrame(loop); timer++; ctx.clearRect(0, 0, canvas.width, canvas.height); if (timer % 144 === 0) { var cactus = new Cactus(); cactusArray.push(cactus); } cactusArray.forEach((cactus, i, o) => { cactus.dr..

아이디어 갈아엎음.. 나만의 무기만들기 프로젝트의 아이디어가 바뀌었다. 원래 webRTC와 Teachable machine을 사용해 원격으로 사람들과 스쿼트, 푸쉬업등 대결을 할 수 있는 아이디어였지만 너무 진부해보여 팀 내부적으로 조정이 필요하다고 판단! 크롬의 공룡 게임을 기반으로 스쿼트나 푸쉬업을 해야 장애물을 피할 수 있는 게임을 만들고자 했다. 그래서 이번에 공룡 게임을 만들면서 배웠던 내용을 정리하고자한다. 공룡게임 준비사항 1. 애니메이션을 위해 프레임마다 코드를 실행 할 수 있어야한다. 2. collision check를 할 수 있어야 한다. 여기서 collision이란 물체가 충돌을 했을 때 이벤트를 발생시키도록 물체에 안보이는 장막? 을 까는거라고 생각하면 된다. canvas 우선 ca..

휴대폰 카메라로 사람의 동작을 인식한다면 얼마나 멋있을까...! 휴대폰을 앞에 두고 팔로 O나 X를 만들 때, 디바이스가 그 동작을 인식하고 특정 로직을 실행시 킬 수 있다면 그만한 재미는 없을 것 같다! 마치 아이언맨이 된것같은 기분이 들지 않을까 싶다. ㅎㅎ 이번 글에서는 안드로이드의 Jetpack의 CamearX 라이브러리에다가 MLKit에서 제공하고 있는, 실시간으로 사람의 동작을 인식하는 PoseDetection을 적용시켜 보려고 한다! https://developers.google.com/ml-kit/vision/pose-detection 자세 인식 | ML Kit | Google Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to ..

이번 글에서는 WebRTC에서 등장 할 용어들을 조금 정리해보고자 한다! 그럼.. 시작! ICE(Interactive Connectivity Establishment) 처음 봤을 땐 무슨 얼음?.. 싶었던 용어다... 여튼 설명하자면, ICE는 브라우저가 peer를 통한 연결이 가능하도록 해주는 프레임워크이다. 그렇다면 우리는 사용자 A에서 사용자 B로 곧 바로 연결하고 싶지만 그건 어려울 수 있다. 다음과 같은 이유인데, 연결을 시도할 때 방화벽을 통과해야 하기도 하고, 디바이스에 퍼블릭 IP가 없다면 유니크한 주소값을 할당해야할 것이다. 또한 라우터가 사용자간에 직접 연결하는 것을 허용하지 않을 때는 데이터를 릴레이해서 우회 할 필요가 있을 것이다. ICE는 이러한 작업을 수행하기 위해서 STUN과 ..

팀원들과 프로젝트 회의 중 프로젝트에 WebRTC를 적용해 리얼타임 서비스를 만들어 보자는 의견이 나와서 공부한 내용을 정리 해보고자 한다. 그럼.. 시작! 그래서 WebRTC가 뭔데? 코로나로 비대면 활동이 늘어나면서 사람간의 화상 회의 서비스가 널리 쓰여지고 있는데, WebRTC 이 녀석이 바로 화상 회의를 쉽게 가능토록 해주는 녀석이다! 설명 하자면, WebRTC(Web Real-Time Communication)는 웹 어플리케이션에서 음성, 영상을 캡처하고 스트리밍할 수 있을 뿐만 아니라 중개자 없이 브라우저 간에 데이터를 교환할 수 있도록 하는 기술이다. 심지어 카카오톡 같은 채팅 어플 또한 만들 수 있다! 그리고 WebRTC를 구성하는 일련의 표준을 통해 사용자가 플러그인이나 기타 소프트웨어를..