웹프로그래밍/Javascript (29) 썸네일형 리스트형 [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); }; }; } moment.js (날짜관련 작업을 위한 자바스크립트 라이브러리) 들어가며 calendar 프로젝트를 진행하면서 날짜 관련정보를 다루었다(Date 객체). 프로젝트 중에 날짜 관련 data를 쉽게 다룰수 있는 라이브러리를 발견하여 이에 대해서 간단히 정리해보고자 한다. Moment.JS 는 날짜(Date)형식의 데이터의 파싱, 검증, 조작 그리고 화면에 출력하는 작업을 위해 만들어진 아주 유용한 라이브러리이다. 프로젝트를 통해 느낀 Date object의 불편함 & Moment.JS의 편리함 Date object와 관련된 method를 사용하면서 불편한점이 많았다. 한가지 예를 들면 ISO 포맷형태의 날짜data(ex. 2017-01-25)를 얻기 위해서, 시간이 까지 포함된 ISOString형태(ex. 2017-01-25T12:25:00.000z)에서 T를 기준으로 .. 이전 1 2 3 4 다음