Travel to Frontend (369) 썸네일형 리스트형 fetch 에러 SyntaxError: Unexpected end of JSON input fetch의 catch에서 자꾸 에러가 잡혔다. 클라이언트 문제라고생각해서 요청헤더를 수정해봤는데 고쳐지지않았다. 찾아보니 서버문제였다. 원인 서버에서 전송된 json데이터가 비어있거나 올바르게 형식화 되어있지 않았을 때 발생한다. API를 확인해보니 성공시 다음과같이 리턴해주고있었다. return res.status(200).json() 성공상태를 나타내는 success를 속성을 추가하여 해결하였다. return res.status(200).json({ success: true }); Nodejs index.js 예시 1. ejs를 사용할경우 index.js const express = require("express"); const cors = require("cors"); const app = express(); app.set("view engine", "ejs"); require("dotenv").config(); const {port} = ensureEnv('PORT') app.use(cors()); // app.use(cookieParser()); app.use(express.static("public")); app.use(express.json({ limit: "50mb" })); app.use(express.json()); app.use(express.urlencoded({ extended: false, l.. 리엑트 크롬 쿠키 저장안됨 해결 분명히 응답헤더에는 set-cookies가 잘찍히는데 브라우저 쿠키에 자동으로 저장이 안된다면? 원인은 sameSite였다. 명시하지않더라도 크롬정책에 의하여 기본값으로 세팅되어있다고한다. 해결방법은 서버에서 쿠키 구울때 sameSite:none랑 secure옵션을 추가해보자. 단 이렇게될경우 https에서만 작동된다. http 즉 로컬(http://localhost:3000/)로 개발할때는 크롬에서 막아 저장되지않으니 참고. router.post( "/", async (res, req) => { const jwt = 'test' const cookieOptions = { // sameSite: "strict", sameSite: "none", httpOnly: true, secure: true, // .. [env-cmd] 리액트 env 사용방법 nodejs처럼 리액트에서도 env를 사용해보자. env-cmd를 설치하고 루트 경로에 .env-cmdrc를 추가한다. npm i env-cmd .env-cmdrc 개발환경에는 백엔드 로컬서버를 넣고 배포환경에는 배포시 사용될 URL을 넣는다. { "development":{ "REACT_APP_URL":"http://localhost:500/" }, "production":{ "REACT_APP_URL":"배포시 사용될 URL" } } package.json scripts에 env-cmd -e 개발모드 혹은 배포모드를 추가한다. ... "scripts": { "start": "env-cmd -e development react-scripts start", "build": "env-cmd -e produ.. [build] 에러 Cannot convert a BigInt value to a number 해결 개발할때는 문제없었는데 빌드를 하고난후에 확인해보니 Cannot convert a BigInt value to a number에러가 나서 화면이 보이질않았다. package.json에서 browserslist의 production모드(배포) 버전을 손보니까 해결됨 browserslist 속성은 브라우저 및 버전을 설정하는데 사용되는 속성으로 주로 css전처리기(예: Autoprefixer)나 Javascript 번들러(예: Babel)에서 사용되어 해당 프로젝트를 지원하는 브라우저 범위를 설정합니다. 수정전 배포버전에서는 지원이 중단되지않은 브라우저 중에서 사용률이 0.2% 이상인 브라우저만 지원하겠다는 의미이고 개발버전에서는 크롬,파이어폭스,사파 최신버전들만 지원하겠다는 의미 "browserslist".. 이더리움, 클레이튼 Contract 함수 정리(ERC721, ERC20) https://docs.openzeppelin.com/contracts/2.x/api/token/erc721 ERC 721 - OpenZeppelin Docs For a walkthrough on how to create an ERC721 token read our ERC721 guide. Each interface is implemented separately in ERC721, ERC721Metadata, and ERC721Enumerable. You can choose the subset of functionality you would like to support in your token by combin docs.openzeppelin.com 컨트렉트를 개발하고 배포할때 ERC에 함수들을 상속받는.. 자바스크립트 클로져 예시 클로저란? 함수에서 함수로 외부변수를 전달한뒤에도 실행컨텍스트가 종료된이후에도 참조한 외부변수가 사라지지않는 현상 보통 종료된이후에는 GB에 할당되야하는데 계속 남기때문에 메모리 누수의 원인이됨. 콜백함수 내부에서 외부변수를 참조하기 위한 방법이다. let fruits = ['a','b','p'] let $ul = document.createElement('ul') const alertFruit = (fruit) => { alert(fruit) } fruits.forEach(fruit => { let $li = document.createElement('li') $li.innerText = fruit // 클로저발생(메모리낭비): 콜백함수를 내부함수로선언해서 외부변수를 직접참조 // $li.addEven.. dapp 메타마스크 모바일 - deeplink 모바일에서 크롬과 같은 브라우저에 접속할경우 window.ethereum이 없기때문에 로그인이 불가능하다. 이를 해결하는 방법은 여러가지가 있는데 ConnectWallet 어플리케이션을 통해 모바일과 웹사이트를 한큐에 해결하거나 간단하게 deeplink를 활용하는방법이 있다. https://metamask.github.io/metamask-deeplinks/# Dapp url을 입력하면 연관 deeplink를 생성해주는데 이링크를 타고 들어가면 메타마스크환경에서 서비스를 이용할 수 있다. MetaMask deep link generator metamask.github.io https://docs.metamask.io/wallet/how-to/use-mobile/ Use MetaMask Mobile | M.. 이전 1 2 3 4 5 6 7 ··· 47 다음
