1. 타입 명시 type Lat = number; type Lng = number; export type Coordinates = [Lat, Lng]; export type Court = { nid: number; name: string; description: string; image: string[]; }; 이제 코트 데이터를 랜딩 페이지에서 불러와준다. 코트 데이터는 예약 현황을 주기적으로 체크해줘야하므로 revalidate를 낮게 줘야한다. 하지만 우선은 1시간으로 지정해뒀다. export async function getStaticProps() { const courts = (await import('../public/court.json')).default; return { props: { co..

성능체크를위해 크롬 lighthouse를 사용해보았다. 아직은 큰 기능이 없기때문에 성능이 그렇게 나쁘지않다. 참고로 개발환경이아닌 production환경으로 체크해야 결과가 제대로 나온다. 이제 하나하나 살펴보며 성능을 개선해보자 1. Next.js Image fill속성 사용 시 사이즈 넣어주기 현재 이미지에 fill을 넣어주고있는데, Next.js문서를 보면 'fill'속성 사용시 'size'를 주냐 안주냐에 따라 성능에 큰 차이를 줄수있다고 한다. 2. 버튼에 accessible name이 없다? 웹 접근성 개선을위해 라이트하우스가 알려주는 감점요인을 확인해보았다. accessible이 없다는 얘기는 Mac과 윈도우에는 모두 웹 서비스를 스크린 리더로 읽을 수있는 내장 기능이 포함되어있다. 맥에서..

이번 프로젝트에서는 테니스 코트 정보를 불러와야한다. 꿈은 크다만.. 우선은 서울시 공공 테니스코트 정보만 조회해보려한다. 제일먼저 인증키를 발급받았고, 샘플 URL에 인증키를 넣어주면 끝이다. 요청인자를 잘 확인하자. 테니스코트만 조회하고싶다면 MINCLASSNM(소분류명)도 넣어주어야한다. const res = await fetch( `http://openapi.seoul.go.kr:8088/${인증키}/json/ListPublicReservationSport/1/999/테니스장`, { method: "get" } ); const result = await res.json(); return { props: { result }, revalidate: 60 * 60, }; response를 json()으..

마커를 그리기위해선 마커가 네이버 'map'객체에 접근할 수 있어야한다. 즉, map컴포넌트에서 만든 'map'이라는 객체를 전역상태로 공유하여 마커에서도 접근할 수 있게 만들어야한다. // Map.tsx if (onLoad) { onLoad(map); } map을 만들면 onLoad함수를 이용하여 map객체를 밖으로 보낼 수 있다. onLoad함수는 Map.tsx의 상위 컴포넌트 MapSection.tsx에서 prop으로 보내준다. // MapSection.tsx const MapSection = () => { const { initializeMap } = useMap(); const onLoadMap = (map: NaverMap) => { initializeMap(map); }; return ( )..

이번 지도 작업은 Naver Map Api를 사용해보았다. 소스가 잘 로드되면 onload함수가 실행되면서 initializeMap을 호출한다. 나는 initializeMap함수에서 네이버 맵을 로드해주고있다. 그런데 여기서 다른 페이지를 갔다오면 지도가 뜨지않는 버그가 발생한다. 현재 코드에서는 다른 페이지로 이동할때 map 컴포넌트가 unmount되고있기때문에 map instance는 destroy된다. 하지만 스크립트가 처음 불러졌을때만 실행되는 onLoad를 사용하였기때문에 다시 지도 컴포넌트로 돌아와도 지도가 뜨지않는것이다. 참고로, Next의 Script는 같은 스크립트를 여러번 호출하지않는다. 그러므로 onLoad대신 onReady로 바꿔보았다. onReady는 스크립트 로딩을 마쳤을때뿐아닌..