쟌문's 블로그

오류 Unhandled Runtime Error Error: Invalid src prop (https://res.cloudinary.com/{CLOUD_NAME}/image/upload/v1707107523/{FILE_NAME}.png) on `next/image`, hostname "res.cloudinary.com" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host 발생하는 이유 위 오류가 발생하는 이유는 외부 경로의 이미지를 불러오려고 할 때 정상적으로 불러오지 못해 생기는 오류이다. 좀 더 이해하기 쉽게 비유를..

시작하기에 앞서 배포한 게임 바로가기 위 링크는 리액트 공식문서와 강의 영상을 참고하여 만든 Tic-Tac-Toe 게임의 배포 링크이며, 이번 글에서는 리액트 공식문서와 강의 영상에서 제공하는 기본적인 틀에서 더 나아가 직접 개선해보고 싶다 생각하며 추가해 본 기능들에 대해 정리하여 공유해보려고 한다. 개선하고자 했던 부분들 경기 기록 버튼 styling 하기 먼저, 가장 먼저 개선해야겠다 생각한 부분은 경기 기록 버튼들이었다. 리액트 공식문서의 게임 예제나 직접 만들어 배포한 게임 링크를 통해 확인해보면 알 수 있지만, 사용자가 클릭한 버튼에 대해 따로 활성화 처리가 된다거나 그렇지 않다. 사용자가 직접 클릭하는거라 하더라도 때론 무지성으로 클릭할 수 있는 여지가 있고, O/X 게임 화면으로 대충 매칭..

해결방법 $ npm rebuild node-sass --force 만약 위 방법이 효과가 없다면 다음을 시도 node_modules 아래의 node-sass 폴더 삭제 npm install 위 해결방법 이전 단계에서 참고해야 할 글 ⬇️ [Error] sh: ~ react-scripts: Permission denied 간혹 프로젝트 작업 시 외부와의 협업이 있을 때가 있다. 이때 프로젝트 폴더의 공유가 github으로의 프로젝트 공유가 아니라 프로젝트 폴더 자체를 압축하여 공유드라이브로 파일을 공유하는 일 jaanmun.tistory.com 🔗 참고 Node Sass couldn't find a binding for your current environment

간혹 프로젝트 작업 시 외부와의 협업이 있을 때가 있다. 이때 프로젝트 폴더의 공유가 github으로의 프로젝트 공유가 아니라 프로젝트 폴더 자체를 압축하여 공유드라이브로 파일을 공유하는 일이 생긴다. 글쓴이 또한 그러한 방식으로 프로젝트를 외부와 교류하며 작업을 진행했고 본 오류 또한 그러한 작업 과정의 일환으로 생긴 오류였다. 오류 sh: /Users/{computer_name}/Desktop/{folder_name}/node_modules/.bin/react-scripts: Permission denied​ 위 오류가 발생한 정확한 원인은 react가 node_modules를 참고하여 빌드해야 하는데 해당 폴더로 접근하기 위한 권한이 없는 것이다. 이를 해결하기 위한 핵심은 아래와 같이 node_m..