MERN 스택으로 만드는 지도서비스(+ TypeScript)대시보드

안녕하세요  혹시 앞으로 강의를 진행하는데 카카오 api를 사용해도 큰문제는 없을까요

mongodb compass 다운 받을때 사이트에서 mongodb shell을 다운로드 하셨는데 다운로드 해도 아무리 봐도 compass가 실행 되지 않는데요 . 그래서 아래에 mongodb compass(gui)를 다운받았더니 실행됩니다.제가 맞게 한건지 혹시 다르다면 답변 바랍니다

소스 코드 다운받았을 때 깨지는 지 빈 폴더로 나옵니다!그리고 해당 프로젝트 깃 허브 부탁드려용

보시면 하나의 지도 div에 두개가 열리는 것 같습니다.실제로 지도가 두개가 열려 서로 level이 달라 겹치는 모습입니다. 뒷장의 지도에는 마커가 표기되지 않습니다.아래는 맵과 관련된 코드들입니다.mern_client/src/components/common/Map/index.tsximport React, { useEffect } from 'react'; interface MapProps { width: string; height: string; initMap?: (map: naver.maps.Map) => void; } function Map({width, height, initMap}: MapProps) { useEffect(() => { const mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }; const map = new naver.maps.Map('map', mapOptions); if (initMap){ initMap(map); } }, []); return <div id="map" style={{width, height}}></div>; } export default Map; mern_client/src/components/MapContainer.tsximport { useSetAtom } from "jotai"; import React from 'react'; import Map from './common/Map'; import { mapAtom } from "../atoms/map"; function MapContainer() { const setMap = useSetAtom(mapAtom); const initMap = (map: naver.maps.Map) => { setMap(map); naver.maps.Event.addListener(map, 'click', () => { console.log("맵 클릭"); }); }; return <Map width="100%" height='100%' initMap={initMap}/> }; export default MapContainer; mern_client/src/atoms/map.tsimport { atom } from 'jotai'; export const mapAtom = atom<naver.maps.Map | null>(null);

보일러 플레이트에서 npm run start를 할 경우{ opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' }에러가 발생하며 페이지가 표시되지 않습니다.스텍오버플로우에서 찾아본 결과, 검색결과 노드17이후로 발생하는 오류라고 하는데 아직 입문자라 실례가 안된다면노드js 20버전용으로 보일러 플레이트 파일 업데이트 가능할까요?

8.26.기준 강의자료 서버 보일러 플레이트에 axios 없네요~ npm install axios모두 화이팅~~

import { ReactNode } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; interface ButtonProps { children?: ReactNode; onClick: (e: any) => void; type?: "link" | "button"; url?: string; } const StyledButton = styled.button<ButtonProps>` outline: none; border: none; display: flex; align-items: center; justify-content: center; `; function Button({ children, onClick, type = "button", url }: ButtonProps) { const RealButton = <StyledButton onClick={onClick}>{children}</StyledButton>; const RealLink = ( <StyledButton onClick={() => {}}> <Link to={url!}>{children}</Link> </StyledButton> ); return <div></div>; } export default Button;강의를 보고 진행하던중에 RealLink에서 타입오류나 가서 확인을 해보니button onClick이 없으면 styled componenet에서 에러를 내는 것 같습니다. 링크로 쓰면 onClick이벤트를 전달해주면 안될 것 같은데 ()=>{} 이처럼 의미없는 함수를 넘겨주면 될까요

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.- options.allowedHosts[0] should be a non-empty string.client 부분에서 실행시 요런오류가나옵니다.1. 시도해본것allowedHosts 옵션관련을 찾기위해 client node_modules./webpackDevServer.config.jsallowedHosts: disableFirewall ? 'all' : [allowedHost], ->확인했을떄 빈문자열이아닌데 왜 이런오류가나오는지..?해결책이궁금합니다.2. 시도해본것 ...client 단 proxy 설정을 지워주면 동작함.->해결.혹시에러원인이 무엇이엿을지 궁금합니다.

select된 상태를 확인하기 위해 search.ts에서 selectAtom을 가져오셨는데 serach.ts 파일에 대한 코드가 강의에서 누락된 거 같습니다.추가로 섹션1에서 강의해주셨던 Navigation 컴포넌트 코드에 현재 굉장히 코드가 많이 추가됐던데 해당 부분 또한 모두 누락되어있습니다...뒤에 강의에서 일일이 찾아서 정지하고 따라치는데 너무 힘드네요 ㅠㅠ

더미데이터를 강의 자료에 있는 소스코드에서 가져오면 된다고 하셨는데 아무리 찾아봐도 소스코드가 안보이네요 ㅜㅜ

강의 순서로 보면 Jotai -> 맵 클릭 이벤트 추가인데 맵 클릭 이벤트 추가 강의가 앞에 있어서 atoms폴더와 initMap 코드를 작성한적이 없는데 왜있지?라는 혼란이 생겼습니다. 저는 혹시나 하는 마음으로 다음 강의를 봐서 알았지만 다른 수강생분들도 저와 같은 혼란이 생길 거 같아 맵 클릭 이벤트 추가와 Jotai 강의 순서 변경에 대한 건의를 드립니다! 강의는 너무 좋습니다..ㅎㅎ :)