1.🧐 문제/목표 파악로컬에서 분명 잘 작동되던 게임이 Netlify에 올리니 작동하지 않는 문제가 발생했다. 배포 할 때 빌드가 잘못되서 그런 것인가 생각했다. 1.🎯 문제/목표 해결 : 문제 범위 좁히기우선 크게는 이게 배포를 하는 과정에서 생긴 문제인데,1) netlify 단에서 생긴 것인지2) vite 빌드를 하면서 생긴 것인지우선 파악을 해야 했다. 로컬에서 'vite'로만 실행 테스트를 했는데, 'vite build' -> 'vite preview'로 빌드 환경에서 실행 테스트를 해봤다. 그랬더니 netlify 배포했을 때랑 같은 에러 메시지가 떴다.그 말인 즉슨 이 문제는 vite build단에서 일어난 문제임을 알 수 있었다. 2.🎯 문제/목표 해결 : 검색 - 키워드: ..
1.🧐 문제/목표 파악Netlify Function으로 서버리스 백엔드를 구축해서 배포한 후, 로컬에서 프론트로 테스트를 했더니 에러가 떴다. 다른 function에서는 정상 작동하는데 update_ideas function에서만 에러가 떠서 그 원인을 파악해야한다. 1.🎯 문제/목표 해결1) 범위 좁히기get_ideas와 update_ideas의 차이를 파악해서 무엇이 에러를 일으키는 변수인지 파악한다.get_ideas.js와 update_ideas.js를 비교한 결과 try-catch에러 핸들링 구간이랑 node-fetch import 구간 이렇게 2가지 차이점이 있음을 알 수 있다. 맨 처음에는 에러처리를 수정했는데 별 다른 개선이 없어서 node-fetch 라이브러리 import코드를 삭제했다..
1. 🧐 문제/목표 파악 : can't reslove리액트에서 서버없이 몽고DB atlas를 쓰려고 하던 중 에러 발생 1. 🎯 문제/목표 해결될 턱이 없지 이 친구야. 그냥 node.js 환경에서 mongodb 라이브러리를 그대로 가져다 쓰면 리액트의 프론트엔드 처리에서 웹팩 관련해서 에러가 뜨지 않겠니....? 결국 서버 역할을 할 수 있는 호스팅 사이트를 따로 만들어야했다. 하지만 aws는 돈이 너무 많이 나가고, budget 컨트롤이 안되므로...Netlify function을 사용해 Severless 사이트를 만들어 호스팅하기로 했다. https://jwdevv.tistory.com/34 [React + MongoDB + Netlify] Netlify Serverless 함수와 몽고DB를..
1. 🧐 문제/목표 파악 : 환경변수아무래도 데이터를 CRUD하는 메서드가 convex는 너무 제한적이었다. 백엔드 서버를 따로 구축하지 않을 건데 그렇게 제한적인 메서드로만 데이터를 처리하는 건 아무래도 너무 제한적이라는 생각에 그냥 몽고DB로 전환하기로 했다. 연결하는 가운데 환경변수를 가져오지 못하는 에러가 첫번째로 나타났다. 1. 🎯 문제/목표 해결 : 검색 - stack overflowconfig에서 path를 지정해서 설정해줘야 제대로 찾아온다.
🧐 문제/목표 파악맵이 바뀔 때마다 씬을 재정의하려는 나의 접근이 잘못됐음을 깨달았다. 🎯 문제/목표 해결1) 씬과 레이어, 레벨의 개념을 재정의하고 레이어와 레벨 컴포넌트를 도입하기 씬 : 게임에 있어서 기능 상의 화면 전환 -게임준비 화면-캐릭터 선택-맵-죽음-상점 레이어 : 한 화면 상의 각 계층별 컴포넌트-맵-오브젝트 (상호작용할 수 있는 요소, 캐릭터, 물품)-ui 레벨 : 게임 내 맵의 구성 요소들에 태깅을 하여 직접 맵을 구성하는 컴포넌트 2) 종속관계 확인하기씬 내부에 선언된 하위 컴포넌트들은 해당 씬을 부모 노드로 하는 종속관계가 발생따라서 하위 컴포넌트를 다른 씬에서 재사용할 수 없음➡️ 씬에서 공통적 사용되는 컴포넌트는 씬 밖에서 정의하여 모듈화해서 재사용하기다른 파일에서 k..
아오 layers 메서드 계속 undefined떠서 헤맸는데 버전문제였던 것^^ 버전 확인을 잘 하자....!
🧐 문제/목표 파악 맵을 만들려고 따로 씬 함수를 짜는데, 해당 에러가 떴다. 🎯 문제/목표 해결1) 에러 로그 분석하기다행이도 해당 에러는 깊이나 얕은(?)에러였다. 즉, 에러가 어디서 났는지 에러 로그가 알려줄 수 있는 정도의 레벨이라는 뜻이다.여기서는 greenField.js:123.9)이 부분이 되겠다.따라서 해당하는 파라미터의 요소를 하나씩 통제해가면서 에러 발생 지점 범위를 좁혀가본다.파라미터 첫번째로 들어가는 maps라는 배열을 최소한으로 통제했더니 에러메시지가 바꼈다.이전 문제는 해결되었고 새로운 문제가 생긴 것. 해당 부분은 공식문서 상에서 addLevel 설명을 참조하여 다시 코드를 수정했고, 아래와 같이 정상출력되었다.에러의 레벨을 파악하는 눈을 기르자.
🧐 문제/목표 파악자바스크립트 바닥에서 한따까리하시는ania kubow의 kaboom.js 강의를 참조하여 게임을 만들고 있다. 소스코드를 참조하여 레벨을 만들고 있는데 'k.soild is not a function'이라는 에러가 떴다. 이러면 이제 나는 이제 공식문서로 달려가서 검색을 하지.....! 하지만 공식문서를 뒤져도 해당 메서드에 대한 정보가 보이지 않는다!🎯 문제/목표 해결난 이제 이런 문제, 가령 '어떤 메서드가 없다'같은 상황에서 가장 확실한 정보원이 무엇인지 알고 있다.바로 소스코드!사용하고 있는 라이브러리의 소스코드 검색을 통해 해당 메서드가 더 이상 사용되지 않는다는 것을 알게 되었다. 이 바닥은 변화가 심하기 때문에, 변화의 중심인 공식문서와 소스코드에 의지하는 감성을 길러..
🧐 문제/목표 파악Convex콘솔에서 데이터가 잘 저장되어 있는 것을 확인했다. 위 에러는 해당 데이터를 가져오는 함수가 작동되지 않아서 발생했다고 유추할 수 있다. npx convex dev라는 메시지가 핵심이므로 해당 키워드를 위주로 문제를 해결해보자 ^^ 🎯 문제/목표 해결1. 구글 검색npx convex deploy로 검색하니 역시 공식문서밖에 안나왔다. 분명 공식문서 안내대로 Build command를 지정하면 배포된 파일에 npx convex deploy를 실행하도록 되고, 그러면 위의 문제는 사라진다. 일단 해당 문서를 따라서 다시 실행한다. -> 문제해결 다만, 시간이 지나서 npx convex deploy 상태가 초기화될 수도 있는 가능성이 있어서 더 지켜봐야할 거 같다.
🧐 문제/목표 파악사실 손수 백엔드를 만들어서 배포하는 게 늘 해오던 거라 속편하긴한데, Baas(서비스형 백엔드)도 한번 써보고 싶기도하고, 써보는 능력도 도 필요할 거 같아서 도전했다. Netlify로 클라이언트를 구축중이라 동일하게 연동이 잘되는 서비스로 Convex를 찾았다. 해당 서비스의 공식 문서에 따라 useQuery 훅으로 데이터를 불러올 수 있다고 해서 시도했는데 에러가 떴다.에러 메시지가 말하는 바는 분명했다.Hooks can only be called inside of the body of a function component. 그러니까 나는 지금 useEffect라는 훅 안에 useQuery라는 훅을 썼기 때문에 에러를 맞닥뜨린 것이다. 🎯 문제/목표 해결 useQuery는 페..
