웹프로그래밍/Javascript (30) 썸네일형 리스트형 네이버 지도 API 유료화!? 새 API 로 변경 오늘 갑작스레 메일이 와서 내용을 보니, AI NAVER API 가 7월1일자로 전면 유료화가 된다고 한다.처음에 네이버 지도 API 를 ncloud 에서 신청해서 쓰고 있었는데, 그게 AI NAVER API 로 들어가 있었고, 또 Maps API가 별도로 카테고리가 생성되어 있었다. 그러니까 요약하자면, AI NAVER API 내에 있는 Maps 를 쓰면 7월1일부터 무조건 과금이 되고, 그 밖에 있는 Maps 를 쓰면 기존처럼 무료로 이용이 가능하다. 하지만 나처럼 AI NAVER API 내에 Maps를 쓰고 있던 사용자라면은 기존 사이트에 있던 Client ID, Secret를 Maps에 새로 생성한 Application에 맞게 전부 수정해주고, api 주소들 역시 전부 Maps 에 맞게 변경해주어.. [Next.js] Error: fetch for over 2MB of data can not be cached Failed to set fetch cache https://xx.com/xx.jpg Error: fetch for over 2MB of data can not be cached 오류가 발생했을 때, 아래와 같이 조치하면 된다. # 1 fecth('xx', { cache: 'no-store' }); # 2 export const dynamic = 'force-dynamic'; [NextAuth] auth redirect 로컬 포트 변경하기 next-auth 를 설치하고 나서 인증 성공시 리디렉션 되는 경로의 포트가 3000이 기본으로 되어있어 실제 사용중인 포트가 일치하지 않는 문제가 생겼다. 검색하다보니 아래 URL에서 .env 에서 설정을 가이드하고 있어 변경하고 정상동작함을 확인했다. https://next-auth.js.org/configuration/options#nextauth_url Options | NextAuth.js Environment Variables next-auth.js.org NEXTAUTH_URL="http://localhost:5000" 이런식으로 .env 파일에 NEXTAUTH_URL 을 설정해주면, redirect 시에 포트가 정상적으로 내가 원하는 값으로 변경이 되었다 kakao.maps.LatLng is not a constructor kakao sdk.js 는 로드되었을지 몰라도 latlng method 가 로드되기 전에 호출될 경우 발생하는 문제이다. 다음과 같이 수정하여 해결하였다. sdk.js 호출시 파라미터에 autoload=false 를 추가해주었다. 그다음 latlng 메소드가 호출되는 부분을 kakao.maps.load callback 처리해주었다. useEffect(() => { if (kakao) { kakao.maps.load(() => { var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(Number(lat), Numbe.. window.open 새로운 윈도우 창에 post 로 보내기 오늘은 요구사항으로 새 윈도우 창에 post 로 보내달라는 게 있어서 포스팅에 추가해봅니다. Vanilla로 짜도되고 jQuery를 쓰셔도 되는데, 두가지를 모두 소개해볼게요. Vanilla var form = document.createElement('form'); form.setAttribute('target', '_blank'); form.setAttribute('action', '__TARGET_URL__'); form.setAttribute('method', 'post'); var input = document.createElement('input'); input.setAttribute('type', 'hidden'); input.setAttribute('value', '__VALUE__HERE.. validate JSON (JSON 여부 검사) const isJson = (str: string) => { try { const json = JSON.parse(str); return json && typeof json === 'object'; } catch (e) { return false; } }; get only text by clipboard Copy & Paste 시에 텍스트만 가져오도록 처리 onpaste 이벤트에 걸면된다. const getTextByPasteClipboard = (e) => { e.preventDefault(); let text; const clp = (e.originalEvent || e).clipboardData; if (clp === undefined || clp === null) { // eslint-disable-next-line @typescript-eslint/ban-ts-ignore // @ts-ignore text = window.clipboardData.getData('text') || ''; if (text !== '') { text = text.replace(/]*>/g, ''); if (windo.. get Image width and height const getImageSize = (file: File, callback: (width: number, height: number) => void) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (e) => { const image = new Image(); image.src = e.target.result as string; image.onload = function () { // eslint-disable-next-line @typescript-eslint/ban-ts-ignore // @ts-ignore callback(this.width, this.height); }; }; } 이전 1 2 3 4 다음