Weeeeey Weeeeey

클로저란 실행 컨텍스트와 렉시컬 스코프의 조합으로 함수가 선언 되었을 당시에 환경을 기억하여 상위 스코프내의 변수에 접근 할 수 있게 해주는 문법이다.아래 함수를 실행해보면 10이 출력되는 것을 통해 inner 함수가 상위 스코프인 outer의 _var를 참조하는 것을 알 수 있다.이는 클로저에 의해 접근 가능한 것.const outer = () => { let _var = 10; const inner = () => console.log(_var); inner();};outer(); // 10아래 함수를 예측해보면 어떻게 출력될까const outer = () => { let _var = 10; const setVar = (newVal) => { _var = newV..

브라우저는 렌더링 엔진과 자바스크립트 엔진의 혼합으로 작업이 처리된다.이벤트 루프에 의해 콜 스택이 비워져 있다면 큐에 담겨진 요소들을 선입선출 순서로 콜스택에서 실행시키는데,이 때 큐의 종류에 따라 콜 스택에 담겨지는 우선순위가 달라진다. 첫 번째로 Promise가 반환하는 resolove,reject가 담겨진 마이크로 태스크 큐,두 번째로 렌더링 업데이트 요소들이 담겨진 렌더 큐마지막으로 DOM 이벤트,fetch,setTimeOut,setInterval 등이 담겨진 태스크 큐 순서로 각각의 큐에 담겨진 작업들을 콜 스택에 담은 후 처리되면 그 다음 큐, 그 다음 큐로 실행된다.따라서, 아래와 같이 코드를 작성하더라도 setTimeout의 콜백함수는 0초에 값을 줬더라도 즉시 실행되지않고 1과 3이 출..

우선 일반적으로 oauth를 구현하는 로직은 아래와 같다.1. 유저가 로그인 버튼을 클릭2. 인증을 처리해줄 sns 로그인 페이지로 이동3. 로그인 성공 시 해당 인가 서버에서는 code를 리다이렉트 url에 searchParams로 담아서 보내줌4. 리다이렉트 url에서는 받아온 code를 통해 인가 서버에게 액세스 토큰을 받아옴.5. 받아온 액세스 토큰을 통해 인가서버로부터 유저의 정보를 받아 올 수 있음supabase auth 동작은 위의 로직에서 3,4,5 를 해결해준다. 따라서 인가 서버에 등록 될 리다이렉트 url은 supabase가 제공해주는 콜백 url을 등록해줄 필요가 있다.(다음으로 펼쳐질 내용들은 kakao Oauth를 기준으로 작성 되었고, next.js를 위한 supabase 초기..

window.matchMedia를 사용하여 미디어 쿼리 변경을 감지하고 이벤트 리스너를 추가matchMedia 객체를 통해 매개변수로 넘어온 query에 맞춰 매치가 되는지 true false 반환현재 기본 값으로 최대가 768px인지를 판단하는 쿼리가 들어왔으므로 모바일이라면 true, 데스크탑이라면 false를 반환해준다.import { useState, useEffect } from "react";export function useMediaQuery(query: string = "(max-width: 768px)"): boolean { const [matches, setMatches] = useState(false); useEffect(() => { const getMatches = (qu..

일단 페이지에 카카오 지도가 열려있다면 단순하게 kakao.maps.services.Geocoder()를 열어서 키워드를 콜백함수에 넣어주면 쉽게 나옴. 아래는 카카오 문서에 있는 예시 // 주소-좌표 변환 객체를 생성합니다var geocoder = new kakao.maps.services.Geocoder();// 주소로 좌표를 검색합니다geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) { // 정상적으로 검색이 완료됐으면 if (status === kakao.maps.services.Status.OK) { var coords = new kakao.maps.LatLng(result[0].y, resu..

이미지를 업로드 하기 위해 cloudinary 라는 CDN 을 사용해당 api에서는 위젯과 같은 컴포넌트를 제공하지만 ui가 딱히 예쁘다는 생각이 들진 않아서 따로 사용하지 않고 upload api를 통해서 이미지 파일을 올리기로 함.  ( 문서 링크 )end point는 아래와 같음https://api.cloudinary.com/v1_1/:cloud_name/:action이것을 통해 직접 입력한 값은 const endPoint = `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload`;https://www.postman.com/cloudinaryteam/programmable-media/..

zod 의 날짜를 지정하는 타입은 두가지 방식이 있다. zod.date()zod.string().date()1번의 zod.date() 형식은 바로 Date 형식을 넣어주면 호환이 잘 됨. 2번의 string이라는 단어에 맞춰 zod.string().date() 는 문자열로 지정 됨. 해당 문자열은 yyyy-MM-dd 따라서 Date 형식을 바로 넣는다면 parse시 invalid 라는 에러 메시지가 뜸. 떄문에 Date 형식을 yyyy-MM-dd 으로 포맷할 필요가 있음.해당 포맷은 date-fns/format 으로 진행했음// start,end Date가 zod.string().date() 일 경우const { from, to } = selectedDate;if (from) setValue("start..

react-day-picker/DayPicker는 위 사진처럼 디폴트가 영어이것에 대해 각 나라별 언어를 호환할려면 date-fns/locale을 사용하면 됨 (https://daypicker.dev/docs/translation#aria-labels)import { DayPicker } from "react-day-picker";import { ko } from "date-fns/locale";간단한 옵션 추가로 아래와 같이 한글화로 매핑됨