묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
site-map ssr 작성 시 문제점
강의에 나온 https://www.npmjs.com/package/next-sitemap 라이브러리를 받고문서 따라서 server side sitemap (getServerSideSitemap) 을 보고문서대로 경로 만들고 라우터 만들어서getServerSideSitemap() 로 리턴하여 사이트맵을 생성하였습니다..next 에 server-sitemap.xml.body이 잘 만들어졌습니다문제는 한 파일에 15만개가 넘게 작성이 된 것입니다.구글 검색엔진에서 사이트맵의 URL 50,000개로 제한두고 있습니다.문서따라서 config 에 sitemapSize: 10000,설정을 적용하여도 스플릿팅 되지 않습니다. 어떻게 해결해야 하나요? node: 18.15.0"next-sitemap": "4.0.9""next": "^13.4.2",
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
vercel로 배포를 했을때 local db에 어떻게 액세스 할 수 있을까요?
포트포워딩으로 외부에서 db에 접속가능하게끔 포트 뚫어주고 테스트 해봤습니다. build한뒤 start 했을때 해당 local db에 데이터 삽입 되는거 까지 확인했고 폰으로 와이파이 연결끊고 접속도 해서 적용되는것 또한 테스트 해봤습니다. 하지만 vercel에서 배포를 하게되면 요청은 처리 되지만 Application error: a client-side exception has occurred (see the browser console for more information). 해당 오류가 발생하게 되네요.prisma + mysql db 사용중입니다. env 설정, axios url까지 다 맞는데 왜 안되는걸까요...? vercel postgre beta 버전으로 연동하면은 되기는 하지만 저는 local db에 연결해서 배포를 하고 싶습니다. 하지만 찾아봐도 vercel이랑 db 연동하는 방법은 잘 나오지않네요.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
스토어 json 가져올 때, '.default' 를 하는 이유?
const stores = (await import('../public/stores.json')).default;라고 next api routes로 변경전에 json 파일을 가져오는데, '.default' 를 붙이는 이유가 있을까요?정확히 무슨 의미인지 알고 싶습니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
nextjs link / sass + css.module 사용시 경고 문제
<Link href={`/search/${storeName}`}>{`${idx + 1} ${storeName}`}</Link>이렇게 만들고 링크된 페이지는 (href로 이동하는 페이지는) sass + css.module로 스타일링 하고 있습니다이 경우사진과 같은 경고 메세지가 나옵니다.(링크를 hover 시 css 파일을 미리 가져오는데 사용되고잇지 않은 상태)https://nextjs.org/docs/pages/api-reference/components/link#if-the-child-is-a-tag를 보고<Link href={href} passHref legacyBehavior> <RedLink>{name}</RedLink> </Link>와 같이 작성하엿으나 여전히 문제가 지속됩니다.이 경고메세지의 해결방법을 알수있을까요?비슷한 문제인건지 정확하게 확인은 안했지만본 강의 마지막 커밋에서도 동일한 경고가 발생합니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
vercel 배포 후 지도서비스가 네이버 API key인증 실패관련문의..
안녕하세요~버셀에 프로젝트를 베포할때 .env 파일에 있는NEXT_PUBLIC_NCP_CLIENT_ID와 키넘버를 vercel에 직접 입력했는데요..env 파일도 있고요. 결론적으로 둘다 입력하고 파일을 가지고 있는 경우에는 네이버 클라우드에 도메인을 등록하더라도 API Key 인증에 실패되나요?페이지를 새로고침 했을 시 지도가 잠깐 정상적으로 떳다가 바로 인증에 실패했다고 뜨지 않습니다 ㅠㅠ
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
설치단계 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 저는 지금 막 시작한 코린인데요 . 지금 사실 최신 버신에서는 설치할떄 물어보는게 많더라구요. 그런데 영상처럼 설치후에, npm run dev를 했는데 에러가떠서 영상에는 제가 잘못아는진모르겟지만 자세히설명이안되있어서 막혀있습니다 ㅠㅠ어떡하죠?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getStaticPaths-> getStaticProps
export const getStaticPaths: GetStaticPaths = async () => { const stores = (await import('../public/stores.json')).default; const paths = stores.map((store) => ({ params: { name: store.name } })); return { paths, fallback: false }; }; export const getStaticProps: GetStaticProps = async ({ params }) => { const stores = (await import('../public/stores.json')).default; const store = stores.find((store) => store.name === params?.name); return { props: { store } }; };getStaticPaths에서 리턴하는 paths가 getStaticProps 매개변수 params인가요??
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
[Next.js에 Private Route 관련문의]
안녕하세요. 강의 잘 보고 있습니다. 질문이 몇가지있어 문의드립니다. 1. Private Route 관련로그인된 유저만 접근할 수 있는 페이지 라우팅 경로를 아래와 같이 만들어 볼려고 하는데 next-auth에 useSession, getServerSession 으로 페이지 마다 각각 접근 제한하는 방식 말고 app/my 폴더에서 하위에 모두 접근을 제한 하는 방식이 있는지 궁금하여 문의 드립니다.app/my/profiles/page.tsx app/my/membership/page.tsx app/my/qna/page.tsx 2. API 공통 에러 처리 관련API호출시 not-found.tsx를 사용해서 API 경로 404를 json으로 보내줄 수 있는지 궁금합니다.그리고 app/api/test/route.ts 에서 각각 try catch로 익셉션을 체크 해서 http 500을 리턴하는 방식말고 middleware에서 공통으로 오류 처리를 할수 있는지 궁금합니다.middleware.ts로 로그인 체크 하는 코드는 많이 검색이 되는데 공통으로 오류 처리는 검색이 딸려서 그런지 찾을수가 없네요.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
18강 useStores 관련 질문
안녕하세요, 강의 잘 듣고 있습니다.18강에서 궁금한 점이 있어 질문드립니다. useStores 함수에서 return 값에 다음과 같이 괄호가 들어가 있는 이유가 무엇인가요?return { initializeStores, } 답변 주시면 감사하겠습니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
스타일링 명시도 질문 (@layer)
@layer base { #__next { display: contents; } }#__next를 레이어 두어 스타일링 명시도를 낮춘 것에 대한 이유가 궁금합니다.혹시 next.js 내부에서 (프레임워크 내부에서) id : __next 를 스타일링하면 내가 작성한 코드보다 우선시 되도록 하기 위함인가요??
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
캐시 stale 질문입니다.
안녕하세요 강의 감사합니다. 잘듣고잇습니다.헤더에서 처음보는 값이 잇는데x-nextjs-cache:STALEhit는 알겟습니다. stale이 라고 표기되는 기준이 무엇인가요?서버의 최신 값이 아닌걸 어떻게 알죠?revalidate 되기 전에는 hit 로 표기되고revalidate 되는 동안에는 stale 표기가 되는 건가요?그리고 추측이 맞다면 revalidate 되는 동안이라는건 서버에 다시 요청보내고 응답받을때 까지를 말하는게 맞을까요?(* 여기는 읽으실 필요 없습니다. 질문이랑 같이 메모한거에요그리고 revalidate 되었는데 값이 안바뀌면 캐시는 stale이라하더라도 e-tag로 2차 검증하고 태그 값이 같아서 그래도 사용한다 (강의 내용 그대로)값이 바뀌면 hit 되고 e-tag값도 갱신한다. )
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
ssr 캐시 가능한지 질문
ssr인데 해당 html에 연결된 js 파일이 있어서 js파일로 동적으로 렌더링하면 ssr로 내려진 html 자체는 캐시가 가능한가요?*ex) ssr로 받아온 infren.html 안에 user.js 파일 있고user.js에서 ajax로 사용자 이름만 json으로 받아와 렌더링하면 infren.html과 user.js은 캐시할 수 있나요???
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
API Routes로 변경 후 JSON 오류
안녕하세요 강사님. 먼저 강의 감사히 잘 듣고 있습니다.다름이 아니라 API Routes로 프로젝트를 변경한 이후 아래와 같은 에러가 발생합니다.아래 자막에 달아 두신 것과 같이 .env파일도 정상적으로 배포한 사이트로 바꿔 두었고 혹시몰라 JSON파일에 대한 파싱문제가 있는것인지 확인하고 싶습니다.https://github.com/eugene028/NextJsMapgithub주소도 남깁니다. 잘 되다가 API Routes로 변경하니까 이런 에러가 뜨네요!! ㅜㅜ
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
Google api 매장 데이터
안녕하세요 현재 네이버맵 대신 구글맵 api를 사용중인데 아무리 찾아봐도 선생님 stores.json 값처럼 json데이터를 찾을수가없네요 ㅠㅠ 일단 현재 그냥 stores.json 선생님이 가지고있는데이터 사용중이긴한데 다른질문 답변보니 크롤링하셔서 데이터를 만드신거같은데 혹시 저의경우에는 방법이있을까요??
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
nextjs에서 cra처럼 사용 질문입니다
CRA 환경에서는 클라이언트 사이드로 렌더링 되는건데요NEXTJS에서 서버사이드렌더링 없이 CRA처럼 CRS만으로도 구현할수 있나요?이럴 경우에는 getStaticPros, getServerSideRedering 을 사용안하면 무조건 CRS가 되는건가요?seo 적용안하고 CRS로 하고 싶을 경우 강의에서 말씀하신 [_app] 에 next-seo를 추가하지 않고 getStaticPros, getServerSideRedering 없이 그냥 작업하면 모든 페이지가 CRS가 되는거죠 ?그런데 루트에 [_app], [_document] 이 파일은 무조건 실행이 되더라구요이것의 정체는 무엇인지 궁금합니다 CRS인데 NEXT를 사용하려는 이유가 첫번째, 사이트를 만들때 사용자페이지, 관리자페이지 구분을 두고 사용자페이지는 SSR , 관리자페이지는 CSR을 적용하려고 하고 두번째, 코드스프리팅이 지정해줄 필요없이 자동적으로 모두 되어 있어서 NEXTJS를 사용하려고 합니다
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
스프라이트 이미지 사용 이유가 궁금합니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 강의 잘 보고 있습니다.여러 아이콘을 저장해놨다가 사용하는 방법도 있는데스프라이트 이미지를 사용하시는 이유가 궁금합니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요.
일단 강의 잘 보고 있습니다.제 학습 수준이 아직 낮아서, 더이상 진도는 안나가고 있고 다시 리액트를 좀 복습중입니다.ㅎㅎ저도 언능 수준이 올라가서, 박용주님처럼 이것저것 만들어보고 싶네요. 최종 목표는 웹게임을 만들어보는겁니다.ㅎㅎ아무튼. 질문이 하나 있는데요~혹시 next.js로 개발을 할 때 Redux는 잘 사용 안하나요?리액트 배우면서 redux를 아주 중요하게 다루는것 같은데, next.js강의는 여러곳을 돌아다녀 봐도redux에 대해서는 안가르치는것같더라구요. 리액트에서 당연히 배워왔을 소양이라서 커리큘럼에 없는건지, 아니면 next.js에서는 redux는 잘 사용 안하는건지 궁금합니다!
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
깃헙주소 어디서 확인할 수 있나요?
안녕하세요 강의시작마다 브랜치가 나오는데, 깃헙주소 알 수 있을까요?감사합니다.1-2 브랜치 1-4 브랜치가 어디에 있는지 알 수 있을까요?강의 중간중간 보시면 git checkout 하시는 것으로 보아 github주소가 있는 것 같습니다. github 주소 공유해부탁드립니다. 감사합니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
네트워크창에서 API Key를 감추고 싶습니다.
안녕하세요 튜터님,일전에 마커 클러스터링에 관해 질문했던 수강생입니다.먼저 튜터님의 강의로 제 사이드 프로젝트가 잘 마무리 됬다는 것을 알려드리고 싶어 아래 도메인도 공유 드리고 싶습니다.https://www.by-zip.com/튜터님이 가르쳐 주신 내용을 적극 활용했으니 피드백도 주시면 더욱 감사드리겠습니다 !https://forms.gle/rKAjAws43XLUAJsA9(사실 8,9,10 까지 피드백 주시면 스타벅스 기프티콘도 1장씩 드리고 있습니다ㅋㅋ) 아무튼... 본론으로 들어가서 .. 현재 저의 문제 상황은네트워크 창에서 아래 이미지와 같이 키값이 노출된다는 문제 입니다.저희는 실제 서비스를 목표로 하고 있어서키값이 노출되는건 반갑지 않은 상황이라서요 ..그래서 제가 시도했던 방법은next.config.js 에서 rewrite() 를 적용해보는 것이였습니다.위 그림과 같이 시도해보았으나. API 인증에 실패했습니다. encode url component 로 시도해 보았지만 결과는 실패였습니다.. 어떻게하면 좋을지 답을 찾기가 힘들어 문의드립니다.. 좋은 강의 만들어주시어 감사드립니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
질문좀 드릴께요 지도
안녕하세요 선생님 혹시 지도는 구글지도를 이용해서 하는 방법은 없을까요? 수강신청했습니다