묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨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. 지도 서비스 개발)
질문좀 드릴께요 지도
안녕하세요 선생님 혹시 지도는 구글지도를 이용해서 하는 방법은 없을까요? 수강신청했습니다
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
궁금한 점이 있어요!
const mapOptions = { ..., logoControlOptions: { position: naver.maps.Position.BOTTOM_LEFT, }, };제 생각에는 전역 컨텍스트에 naver 객체가 생성되어 접근이 가능 한 것 같은데, 전역 컨텍스트에 naver라는 객체가 생성되는 시점이 궁금합니다.. !
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
마커 클러스터링 도입
안녕하세요, 강의 보면서 많은 도움 받았습니다. 제가 추가로 마커클러스터링을 도입하려고 하는데 네이버에서 제공하는 깃헙 예제 코드를 봐도 도무지 이해가 안가서요.. 혹시 어떤식으로 풀어나가면 될지 궁금합니다... ㅠㅠ
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
killall -9 node 가 무엇인지요?
강의에서 포트가 남아있을경우 killall -9 node명령어를 사용하라고 하셨는데요..포트가 남아있다는게 무슨 뜻인지 모르겠습니다..저는 vscode로 진행중이며,npm run bulid 후에 npm run dev로 서버를 다시 시작하고 코드가 변경될때마다 Ctrl + c로 껏다가 다시 재시작 하여 반복 하는데요.강사님께서는 killall -9 node를 사용하시는데 이걸 왜 쓰는지 모르겠어요..그리고 killall node 사이의 -9 는 무슨뜻인가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
API Routes 챕터 빌드시 에러
해당 챕터에서 빌드 시 문제가 발생했습니다.1. getStaticProps 사용 시 발생한 에러입니다.FetchError: request to http://localhost:3000/api/stores failed, reason: connect ECONNREFUSED 127.0.0.1:3000구글 검색해보니 getStaticProps 말고 getServerSideProps를 사용하라 하네요??아마 로컬 서버에 접근을 못해서 그런듯 하구요 getServerSideProps를 사용하니 TypeError: fetch failed 에러로 빌드 실패Axios로 교체 후 시도해도 역시 실패Node 18에서 위와 같은 문제가 발생한다는걸 발견함Node 16으로 교체하니 빌드 성공 결론: 노드 LTS버전 말고 16버전 사용하면 이유는 모르겠지만 해결이 되긴 한다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
VS code 에디터로 사용해도 상관없나요?
vs code로 작업해도 상관없을까요?그리고 npm 말고 yarn을 사용하시는 이유가 궁금합니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
매장 데이터 json 파일
안녕하세요, 강사님 강의 잘 수강하고 있습니다!3-2 매장 데이터 불러오기 강의에서매장 정보가 담긴 json 파일은어디서 구해오는 파일인지 궁금합니다.올려주신 json파일로 강의 수강 진행하고 있지만, 원하는 다른 매장 데이터로 이용하고 싶을 경우 어디에서 이 json 파일을 얻어와야 하는 것인가요? 감사합니다!
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
SSG 설명에서 나온 Disable cache 의 다른 렌더링방식들과 비교
안녕하세요!SSG 관련 설명해주실 때 개발자도구에서 Disable cache를 하면서static 데이터가 이미 들어와있고 etag가 여전히 그대로인 것으로 캐시와 상관 없이 해당 static 데이터가 영향을 주는 것을 확인해주셨는데요. 그렇다면 SSR, CSR에서 Disable cache 했을시 위의 현상과 다른게 있나요 ... ?SSR은 서버에서 계속 보낼테니 cache랑 상관 없을 것 같고 ... CSR도 JS 파일을 들고 있을테니 이 역시 상관 없을 것 같아서요...!혹시 CSR 특징에서 언급해주신 'JS 캐시 가능' 과 관련이 있다면 브라우저가 JS 캐시를 어떻게 활용하는지도 궁금합니다!감사합니다!
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getStaticProps.tsx 에서 getStaticProps함수 질문
안녕하세요!getStaticProps.tsx 에서 데이터 모킹에 사용하는 getStaticProps함수에서 질문입니다.getStaticProps함수에서 return 하는 props 값과 위에 있는 Example 함수가 어떻게 연결이 되는지 궁금합니다. export 가 그 기능을 하는거 같은데(export를 지우니 연동이 안되는거 같아서...) import 문도 따로 없는데 이게 어떻게 가능한가요 ???
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getStaticProps.tsx 의 회색 표시
안녕하세요! 현재 강의 내용을 따라 학습을 재밌게 진행하고 있습니다.회색 네모난 표시의 정체를 알 수 있을까요 ???data 옆에 있는 ': number'(resolve) 옆에 있는 'executor:' 등등등 ...
-
미해결Nuxt.js 시작하기
SSG 시 SPA fallback 및 asyncData & fetch 문의(부분 SPA or CSR)
사내 협업을 위한 인하우스 앱도 nuxt로 새로 개발하려 합니다.문제는 파편화된 기존 백엔드와(대부분 REST API, 최근 몇개는 웹소켓) 지금까지 사용하던 Django (HTML 템플릿 + jQuery) 서비스에 최신 프론트엔드를 붙여야 하는 상황입니다.그러다 보니 SSG 아니면 CSR 밖에 선택지가 없는데, https://nuxtjs.org/docs/concepts/static-site-generation/ 에서 generate.exclude 옵션을 사용한 뒤 nuxt generate로 정적 사이트를 생성하면 해당 경로는 CSR로 된다는 것을 읽었습니다. 이 기능을 사용하고 싶어 검색 후 다음과 같은 게시물을 확인하였습니다.https://stackoverflow.com/questions/68837954/how-do-dynamic-api-calls-work-in-nuxt-js-static-vs-ssr-modehttps://www.reddit.com/r/Nuxt/comments/ndn2vz/comment/gybtj55/ 위 두 글에서 링크한 nuxt 블로그 게시물(https://nuxtjs.org/announcements/going-full-static/#crazy-fast-static-applications )을 확인하니, nuxt 2.14 버전 이후로는 target: 'static'인 상태에서 nuxt generate를 실행 시 클라이언트 사이드 내비게이션에서의 asyncData와 fetch를 모사하기 위해서 HTML을 사전 렌더링할 때 페이로드 파일을 저장한다고 하고 있습니다.this means no more HTTP calls to your API on client-side navigation.즉 SSG 모드를 켜면 더 이상 API에서 값을 가져오는 것이 아닌 generate 할 때의 API 값을 저장해 하나의 html로 만들어버린다는 것인데, 혹시 이 옵션을 끄고 SSG와 SSR, CSR 모두 동일하게 페이지 진입 시 API에서 새 값을 받아올 수 있게 하는 법이 있을까요? API에서 값을 받아오고 싶으면 무조건 exlcude에 경로를 추가해 CSR로 돌려야 하나요?