Frontend (195) 썸네일형 리스트형 "url" parameter is valid but upstream response is invalid 에러 Nextjs에서 제공하는 Image 태그를 사용하려하니 엑박이미지와 함께 "url" parameter is valid but upstream response is invalid 에러메시지가 표시됬다. 하지만 img태그는 정상작동한다.. 뭐지?(200이고 클라이언트, 서버둘다 문제가 없어보임) next.config.js에서 도메인 설정은 잘되어있다. images: { formats: ['image/avif', 'image/webp'], remotePatterns: [ { hostname: 'www.....com', }, { hostname: '...cloudfront.net', }, ], }, 아래 깃헙 이슈에는 4.0버전에서부터 안된다고하는 유저가있는데 내 버전은 14.1.4이다.. Nextjs에서 현재.. PWA 아이폰 설치시 주의할점 iOS 기기에서는 Chrome 브라우저를 사용하여 PWA(Progressive Web App)를 설치하는 것은 불가능합니다. iOS 기기에서는 Safari 브라우저를 사용하여 PWA를 설치할 수 있습니다. 하지만 하단의 크롬북 링크에서는 가능하다고해서 추가 확인이 필요합니다. 잘못된 정보일경우 알려주세요. https://support.google.com/chromebook/answer/9658361?hl=ko&co=GENIE.Platform%3DiOS&oco=2 프로그레시브 웹 앱 사용하기 - iPhone/iPad - Chromebook 고객센터 도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요 support.google.com fixed가 div안에서 넘칠때, 중앙정렬 방법 fixed를 적용하였더니 밖으로 튀어나오는 대참사가 벌어졌다. 상위 div에 relative를 넣어도 먹지않았는데 그 이유는 fixed는 viewport를 참조하기 때문이라고한다. left: 0; padding: 0 20px; width: 90%; right: 0; margin: 0 auto; 팝업의 상단이었기때문에 일정한 간격만 넣어주면되서 위처럼 코드를 작성하여 해결하였다. 이외 max-width값을 넣어서 일정크기이상부터는 고정하게하였다. + 추가 Fixed 버튼 중앙정렬 .fixed-button { position: fixed; bottom: 0; /* 화면 하단에 고정 */ left: 50%; /* 화면 중앙에 정렬하기 위해 왼쪽 50% 위치 설정 */ transform: translateX(-.. 스크롤내리다 특정 dom부터 사라지게 A버튼은 붕떠있고 하단에 B버튼이있다. 스크롤시 겹치는순간이후부터 A버튼이 사라지는 코드를 구현하였다. 스크롤이벤트안에 스크롤높이를 감지할수있는 window.scrollY와 B버튼의 위치(offsetTop)을 사용하였다. A 버튼 B 버튼 [Javascript] if문 대신 !! 또는 Boolean() 사용하기 !! 또는 Boolean을 써주면 setState할때 삼항연산자나 if문 해줄필요없어서 간편하다. let blabla = 0 !!blabla//false Boolean(blabla)//false blabla = 1 !!blabla//true Boolean(blabla)//true [Javascript] 아이패드도 웹으로 인식할때 navigator.userAgent 가 아이패드를 인식하지못하는 현상을 발견하였다. 아이패드도 데스크톱(웹)으로 인식함 navigator.userAgent.match(/iPhone|iPad|iPod/i) //아이패드와 웹 브라우저에서 null찍힘 나의 경우는 desktop인경우와 그렇지 않은경우만 알면되서 직접 alert로 maxTouchPoints를 찍어봤다. 웹브라우저에서는 0 모바일과 아이패드에서는 5가 찍히는것을 확인하였다. navigator.maxTouchPoints const playBtns = document.querySelectorAll('.js-playGame a') playBtns.forEach(each => { each.addEventListener('click',()=>{ if(na.. [Nextjs13 에러] Uncaught SyntaxError: "undefined" is not valid JSON Nextjs 13버전에서 contextAPI를 사용하려하니 json에러가났다. use client를 상단에 쓰면서 랜더링하는도중에 에러가 생긴듯하였다. 버전을 수정하니 해결되었다. "next": "13.3.0", "next": "13.3.1", npm i next-auth --legacy-peer-deps useCallback한 함수를 다시 useCallback으로 깜싸는이유 useCallback을 하는이유 첨부한 움짤은 증가 버튼을 누르기만하였는데 App컴포넌트 자체가 랜더링되버리는 예시이다. (파란색 선이 App컴포넌트를 의미함) 만약에 자식 컴포넌트들이 여러개있고 이들이 모두 increment함수를 자식 컴포넌트에 전달하게된다면 App컴포넌트뿐만 아니라 자식 컴포넌트들까지도 불필요하게 랜더링이 되버린다. 이를 해결하는 방법중의 하나가 useCallback이다. useCallback이란 함수를 자식컴포넌트에 전달할때 불필요한 렌더링이 발생하지않게하는 함수를 메모이제이션하는 최적화 방법으로 메모이제이션은 쉽게말해서 함수를 캐시한다고생각하면된다. 아래는 useCallback 예시이다. import React, { useState, useCallback } from 'react.. 이전 1 2 3 4 ··· 25 다음
