서버에 파일을 업로드하는 함수를 구현하던 중, axios를 fetch 로 변경하였는데 서버쪽에서 500 에러가 발생했다.문제는 서버에 도달한 요청 데이터에 RequestBody가 사라진 것이다.아래의 두 함수를 비교하면, 전혀 문제될 것이 없어보인다.먼저, axios를 사용하고 있던 기존의 함수 로직이다.axios .post(ENDPOINT, formData, { headers: { 'Content-Type': 'multipart/form-data', }, }) .then((data) => console.log(data))다음으로 fetch로 변경한 함수 로직이다.fetch(ENDPOINT, { method: 'POST', headers: { 'Content-Type':..

primitive 하게 비교되지 않는 object들은 의존성 배열에서 같은 값으로 인식하지 않는다.이건 javascript 의 비교 연산자가 얕은 비교를 하기 때문이다. 아래는 대표적인 사례.{} == {}// output: false즉, 아래의 memo는 전혀 캐싱되지 않기 때문에 어떤 스노우볼을 굴릴 지 모른다.const complexObject = {a:1, b:2, c:"xyz"}// 의존성 배열은 항상 다른 값으로 인식된다.const complexMemo = useMemo(() => complexObject, [complextObject])아래와 같이 비교 대상을 문자열로 변경해서 해결하는 방법도 있는데, 보기에도 느껴지지만 그렇게 권장되는 방법은 아니다.const complexObject = ..

게임https://www.gamesaien.com/game/fruit_box_a/ 無料ゲーム「フルーツボックス」画面上をマウスでドラッグして、数字の合計が10になるようにリンゴを囲むパズルゲームです。(説明) iPhone,iPadやAndroidでも動作します。www.gamesaien.com요약">예전에 참 재밌게 했었던 게임인데, 오랜만에 다시 하려니 심신이 피로하고 무척 귀찮아서 차라리 사각형을 보여주는 걸 코딩해보면 재밌겠다는 생각이 들었다.플래시 게임 수준의 1인용 로컬 게임이기도 하니, 핵이나 매크로를 만든다고 해서 피해가 생기진 않을테고...어디서 사용한다고 쳐도 너무 눈에 띄는 수준이라 만들고 공개도 해볼만하다고 생각해서 진행했다.구현게임 동작 방식가로로 17개, 세로로 10개의 사과가 있고, 각 사과에는 ..

아래 이미지에서 빨간색 점이 마우스 클릭 위치이다.출처: https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

배경 미디엄 블로그를 보다보면 아래와 같이 예상 읽기 시간이 나온다. 예전에 사람이 글을 읽는 데 걸리는 평균 시간을 알아본 적이 있다. WPM(Words per minute) 라고 부르는 단위도 있어서 이미 연구가 있었던 듯 하다. 아래와 같이 여러 나라에 대해서 WPM을 계산한 연구도 있지만 한글은 빠져있다. 한글을 제외하면 평균적으로 190~200 WPM 정도의 속도이다. TimeToRead | Wolfram Function Repository Function Repository Resource: TimeToRead resources.wolframcloud.com 그래서 한글에 대한 WPM을 찾아보다가 120 정도라는 글을 찾았고 한글과 영문의 분포에 따라 적절히 계산하기로 했다. 영어의 경우에는 ..

눈코입 맞추기 게임 만들기 2편 눈코입 맞추기 게임 만들기 1편 예전부터 만들어보고 싶었는데 미루고 미루다가 이번에 만들만한 이유가 생겨서 구현해보기로 했다. 회사 티타임 내기용 게임을 준비하는데, 아래와 같이 눈코 blog.joonas.io 문제점 2편에서는 얼굴을 제대로 찾지 못하는 이슈를 고치면서, 사진에 있는 모든 얼굴을 인식해서 퍼즐을 만들도록 변경했다. 하지만 아래와 같이 고개를 갸울인 얼굴 사진은 결과가 원하는 대로 나오지 않았다. 따라서 아래의 빨간 네모처럼 얼굴이 회전한 각도를 새로 구하고, 그에 맞게 다시 face landmark를 찾아야한다. 얼굴 회전시키기 정확한 출처는 모르겠으나 주로 face landmark를 추출할 때 68개의 점을 찾는다. 지금까지의 결과 역시 위 68 fac..

눈코입 맞추기 게임 만들기 1편 예전부터 만들어보고 싶었는데 미루고 미루다가 이번에 만들만한 이유가 생겨서 구현해보기로 했다. 회사 티타임 내기용 게임을 준비하는데, 아래와 같이 눈코입을 보고 누구인지 맞추는 게임 blog.joonas.io 문제점 1편에서는, 사진에서 얼굴 부분의 비율이 작으면 얼굴을 제대로 찾지 못한다는 문제가 있었다. 1편의 마지막에 얼굴 부분만 잘라낸 이미지에서 face landmark를 찾도록 했더니 결과가 개선되는 것을 확인했으니, 이 작업을 그대로 코드로 작성했다. 해결 먼저 이미지에서 얼굴을 찾는 API로 faceapi.detectAllFaces 를 사용할 수 있다. 한 번의 호출로 이미지에서 찾은 모든 얼굴들의 bounding box 배열을 반환한다. const optio..

예전부터 만들어보고 싶었는데 미루고 미루다가 이번에 만들만한 이유가 생겨서 구현해보기로 했다. 회사 티타임 내기용 게임을 준비하는데, 아래와 같이 눈코입을 보고 누구인지 맞추는 게임을 쉽게 만들 수 있지 않을까했다. 얼굴에서 특징점을 추출하는 솔루션은 꽤 오래 전부터 있었기때문에, 어렵지 않게 찾을수 있을거라 생각했고 실제로도 그랬다. 우선은 이미지를 업로드하고 결과를 바로 보기에 웹이 편할 것 같고, 문제를 만드는 것을 포함해서 게임 UI 까지 구현하는 것도 고려해서 javascript 라이브러리로 찾아보았다. 처음에는 OpenCV-javascript 를 사용해보려고 했는데, 생각만큼 얼굴 사진에서 face landmark 를 잘 찾아내지 못했었다. 얼추 찾기는 하는데 만족스럽지는 못했다. 그래서 ML..