inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

개인 팀프로젝트 중에 NextJS + react-query 관련 궁금증입니다.

해결됨

Next + React Query로 SNS 서비스 만들기

먼저 강의와 상관없는 질문 죄송합니다. Next 13 Page Router + React Query v3 사용해서 프로젝트 진행했었고, 이후에 강사님 강의를 수강하고 있습니다. 이전 프로젝트 진행 시 문제를 해결은 했지만 찝찝함이 남아있어 궁금증을 해소하기 위해 질문 남깁니다. getServerSideProps 사용해서 서버사이드에서 데이터를 불러오려고 했습니다. 서버(Spring)에서 쿠키 읽기에 실패해서 클라이언트에서 accessToken을 전달해야만 했습니다. 로그인시 accessToken을 클라이언트에서 쿠키에 직접 저장하고 axios 통신시 쿠키에 저장한 토큰을 꺼내서 header에 추가하여 요청하는 방식으로 구현하였는데, 서버 사이드에서는 브라우저 스토리지에 접근하지 못하므로 토큰을 읽지 못하는 문제가 발생했습니다. 모든 통신에서 토큰이 필요했던 프로젝트였어서 SSR을 포기해야하는건가? 하던 중에 React Query 의 Dehydration 방식을 적용하였더니 getServerSideProps 에서도 토큰을 읽고 전달하는것이 가능해졌습니다. 이러한 경우에도 SSR이 제대로 적용된 것이 맞는지, 그렇다면 React Query는 어떻게 브라우저 스토리지에 저장된 값을 읽을 수 있게 된건지 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
달지 댓글 1 좋아요 0 조회수 311

[질문X] 로컬에서 build 후 npm start 에러

미해결

Next + React Query로 SNS 서비스 만들기

[auth][error] UntrustedHost: Host must be trusted. URL was: http://localhost:3000/api/auth/session .Read more at https://errors.authjs.dev#untrustedhost 백엔드를 로컬에서 돌리고 Next를 build 후 npm start 로 서버를 돌렸을 경우 발생하는 Next-Auth.js(Auth.js) 에러입니다. 신뢰되지 않은 호스트라 발생하는 에러라고 해서 찾아봤습니다. 방법 1. AUTH_TRUST_HOST=http://localhost:3000 .env 파일에 AUTH_TRUST_HOST 추가하기 [참고] https://github.com/nextauthjs/next-auth/discussions/6071 방법 2. export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ trustHost: true, // ... src\auth.ts 파일에 NextAuth 옵션에서 trustHost: true 옵션 추가하기 [참고] https://github.com/nextauthjs/next-auth/issues/6113

  • react
  • next.js
  • react-query
  • next-auth
  • msw
이우열 댓글 1 좋아요 8 조회수 1142

localhost:4000 문제 문의

미해결

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

선생님 안녕하세요! 먼저 강의 잘 듣고 있고, 좋은 강의 해주셔서 감사합니다. 다름이 아니라 제가 업데이트 내역 실시간 확인하기(로컬 환경 설정) 강의를 듣고 있었는데, 원래는 localhost:4000 했을 때 바로 저의 블로그가 나왔었는데, typora를 통해 바로 반영이 되는지 확인하기 위해 다시 localhost:4000 을 작성했는데 사이트에 연결할 수 없다고 뜹니다! cmd, powershell을 껐는데 위의 이유일까요? 감사합니다.

  • 블로그
  • github
문성일 댓글 1 좋아요 0 조회수 409

dto 관련 질문입니다.

미해결

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

컨트롤러(Api) 패키지 안에 만드신 dto(request, response)는 private final로 선언하셔서 데이터가 변경되지 않도록 선언하셨고, 서비스단 패키지 안에 만드신 ReviewDto는 private으로만 선언하여 데이터가 언제든 변경이 되게끔 선언하셨는데 이 차이가 서비스단 로직의 데이터는 비즈니스 로직을 통해 언제든 변할 수 있기 때문이고 컨트롤러단 로직은 받아온 데이터와, 응답하는 데이터이기 때문에 변할 일이 없기에 선언 방식이 다른 것이 맞을까요? 너무 기초적인 부분일 수 있지만 제가 이해한 바가 맞는지 궁금하여 질문드립니다.

  • spring
  • git
  • docker
  • spring-boot
  • jpa
  • github
gggg5555 댓글 2 좋아요 0 조회수 416

전체 핀이 조회되지 않습니다.

해결됨

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

15개 장소db가 있는데 5개만 조회 됩니다. 코드가 잘못된 부분이 있을까요? 아무리 찾아도 잘 모르겠습니다;; function getContent(data) { // 유튜브 섬네일 id 가져오기 console.log(data); let replaceUrl = data.videoUrl; let finUrl = ""; replaceUrl = replaceUrl.replace("https://youtu.be/", ""); replaceUrl = replaceUrl.replace("https://youtube.com/embed", ""); replaceUrl = replaceUrl.replace("https://youtube.com/watch?v=", ""); finUrl = replaceUrl.split("&")[0]; // 인포윈도우 가공하기 return ` <div class="infowindow"> <div class="infowindow-img-container"> <img src="https://img.youtube.com/vi/${finUrl}/mqdefault.jpg" class="infowindow-img" /> </div> <div class="infowindow-body"> <h5 class="infowindow-title">${data.title}</h5> <p class="infowindow-address">${data.address}</p> <a href="${data.videoUrl}" class="infowindow-btn" target="_blank">영상이동</a> </div> </div> `; } // HTML 코드로 바꾸는 함수 function getContent(data) { let videoId = ""; let replaceUrl = data.videoUrl; replaceUrl = replaceUrl.replace("https://youtu.be/", ""); replaceUrl = replaceUrl.replace("https://www.youtube.com/embed/", ""); replaceUrl = replaceUrl.replace("https://www.youtube.com/watch?v=", ""); videoId = replaceUrl.split("&")[0]; const result = `<div class="infowindow"> <div class="infowindow-img-container"> <img src="https://img.youtube.com/vi/${videoId}/mqdefault.jpg" class="infowindow-img" alt="..."> </div> <div class="infowindow-body"> <h5 class="infowindow-title">${data.title}</h5> <p class="infowindow-text">${data.address}</p> <a href="https://youtu.be/${videoId}" target="_blank" class="infowindow-btn">영상이동</a> </div> </div>`; return result; } async function setMap(dataSet) { markerArray = []; infowindowArray = []; for (var i = 0; i < dataSet.length; i ++) { // 마커를 생성합니다 let coords = await getCoordsByAddress(dataSet[i].address) var marker = new kakao.maps.Marker({ map: map, // 마커를 표시할 지도 position: coords, // 마커를 표시할 위치 }); markerArray.push(marker); // 마커에 표시할 인포윈도우를 생성합니다 var infowindow = new kakao.maps.InfoWindow({ content: getContent(dataSet[i]), // 인포윈도우에 표시할 내용 }); infowindowArray.push(infowindow); // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 // 이벤트 리스너로는 클로저를 만들어 등록합니다 // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다 kakao.maps.event.addListener( marker, "click", makeOverListener(map, marker, infowindow, coords)); kakao.maps.event.addListener( map, "click", makeOutListener(infowindow)); } } // 인포윈도우를 표시하는 클로저를 만드는 함수입니다W // 1. 클릭시 다른 인포윈도우 닫기 // 2. 클릭한 곳으로 지도 중심 옮기기 function makeOverListener(map, marker, infowindow, coords) { return function() { // 1. 클릭시 다른 인포윈도우 닫기 closeInfoWindow(); infowindow.open(map, marker); // 2. 클릭한 곳으로 지도 중심 옮기기 map.panTo(coords) }; } let infowindowArray = []; function closeInfoWindow(){ for (let infowindow of infowindowArray) { infowindow.close(); } } // 인포윈도우를 닫는 클로저를 만드는 함수입니다 function makeOutListener(infowindow) { return function() { infowindow.close(); }; } /* ********************************************** 5. 카테고리 분류 */ // 카테고리 const categoryMap = { korea: "한식", china: "중식", japan: "일식", america: "양식", wheat: "분식", meat: "구이", sushi: "회/초밥", etc: "기타", }; const categoryList = document.querySelector(".category-list"); categoryList.addEventListener("click", categoryHandler); async function categoryHandler(event) { const categoryId = event.target.id; const category = categoryMap[categoryId]; try { // 데이터 분류 let categorizedDataSet = await getDataSet(category); // 기존 마커 삭제 closeMarker(); // 기존 인포윈도우 닫기 closeInfoWindow(); setMap(categorizedDataSet) } catch (error) { console.error(error); } } let markerArray = []; function closeMarker() { for (marker of markerArray) { marker.setMap(null) } } async function setting() { try { const dataSet = await getDataSet(); setMap(dataSet); } catch (error) { console.error(error); } } setting();

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
파이리 댓글 1 좋아요 0 조회수 290

이너 클래스 vs 클래스 별도 생성의 차이?

미해결

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

[4-5 맛집 정보 가져오기 API 개발하기] 맛집 정보 가져오기 API 부분 코드 작성해 주시는 부분에서 (2분 34초쯤부터) 메뉴 클래스를 하나 더 만드실지 고민하시는듯 하다가 이너 클래스로 만드신 것처럼 보이는데요, 이전에 request 만드실때는 메뉴 클래스를 분리하셨는데 해당 부분에서는 고민하시다가 이너 클래스로 만드신 이유가 무엇인지 그리고 어떤 경우에 이너 클래스를 쓰고 분리를 하는지 궁금해서 문의드립니다.

  • spring
  • git
  • docker
  • spring-boot
  • jpa
  • github
gggg5555 댓글 2 좋아요 0 조회수 407

bundle install 오류

해결됨

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

이거 bundle install 이 안됩니다 해결방안 좀 알려 주실 수 있나요?

  • 블로그
  • github
김정혁 댓글 2 좋아요 0 조회수 567

git-flow 전략을 사용할 경우 작업 후 머지 할 경우 PR은 두번 해야 되나요?

미해결

게임처럼 공부하는 git 던전

feature에서 작업이 끝난 경우 코드리뷰를 위해 develop에 pull request 날리고, 리뷰가 끝나면 develop에 머지가 되잖아요. 그 후에 main 브랜치에 develop 브랜치를 가지고 pull requet로 머지를 해주나요? 아니면 그냥 merge 해줘도 되나요? hotfix에서 작업이 끝난 경우는 리뷰를 위해 develop에 pull request를 날리고, 리뷰가 끝나면 hotfix 브랜치를 main 브랜치에 리뷰는 없이 pull request를 날려야 되나요? 아님 그냥 hotfix -> main으로 머지 하나요? 답변 부탁드립니다. 감사합니다.

  • git
  • github
토니야 댓글 1 좋아요 0 조회수 411

예제로 이용되는 소스코드는 직접 작성해야 하는가요?

미해결

Git 그리고 VS Code

예제로 실행하는 html 이나, js 파일은 직접 다 작성해야 하나요? 강사님은 복붙하시는데, 수강하는 사람은 직접 다 만들어야 하나요?

  • git
  • vscode
  • github
  • git-bash
  • gitlens
drkim 댓글 1 좋아요 0 조회수 370

만든 버전 GitHub에 올리기

미해결

팀 개발을 위한 Git, GitHub 입문

만든 버전 GitHub에 올릴때 https 라서 그런지 password를 묻는데 Username for ' https://github.com ': Password for ' https://github.com ': 영상에서는 묻지 않고 바로 연결되던데 ㅠㅠ 찾아봐도 잘 해결이 안 돼서 질문 남깁니다!

  • git
  • github
  • 버전관리시스템
dlwnsal13 댓글 2 좋아요 1 조회수 255

docker-compose up 오류

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

docker-compose up을 사용하면 initdb: error: directory "/var/lib/postgresql/data" exists but is not empty initdb: hint: If you want to create a new database system, either remove or empty the directory "/var/lib/postgresql/data" or run initdb with an argument other than "/var/lib/postgresql/data". 라는 오류가 자꾸 발생합니다. 삭제하고 다시 해도 해결이 안되서 질문남깁니다. 어떻게 해결해야하나요.

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
진용 댓글 1 좋아요 0 조회수 837

vscode clangd 설치 후 관련하여 문의드립니다.

미해결

readable_code:: 따라하면 끝나있는 C++ 개발환경 설정 A to Z

안녕하세요, 좋은 강의 감사합니다. vscode에 관하여 질문이 있습니다. 현재 말씀하신대로 clangd를 설치하고 user setting(json)에서도 수정을 하였습니다. 그리고 설치된 eigen을 불러오는 코드를 작성하였는데, vscode에서 eigen include와 관련하여 오류가 있습니다. clangd 설치 전으로 돌아가면 에러가 없습니다. 아래는 cmakelist.txt 입니다. 감사합니다.

  • github
  • Visual Studio Code
Day KIM 댓글 1 좋아요 0 조회수 1880

import 절대경로 설정 방법 질문 드립니다!

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

조은님 안녕하세요 🙂 강의 잘 보았습니다! 강의를 보다가 문득 궁금한 점이 있는데요! import 문 통해서 절대경로로 파일을 불러올 때, 전역에 있는 tsconfig.json 내에서 파일별로 일일이 수동 설정을 해주어야하는 걸로 아는데 조은님께서는 자동으로 @가 붙여진 형태로 불러와지는 거 같아서요! 혹시 따로 설정 어떻게 하셨는지 여쭤봐도 괜찮을까요?

  • react
  • typescript
  • next.js
  • next.js13
killyou18 댓글 1 좋아요 0 조회수 332

강의자료 부탁드립니다!

해결됨

팀 개발을 위한 Git, GitHub 입문

강의자료 부탁드립니다! hyxx95@naver.com

  • git
  • github
  • 버전관리시스템
양보현 댓글 2 좋아요 1 조회수 278

블로그

해결됨

빠르게 git - 핵심만 골라 배우는 Git/Github

강의 내용과 사진을 좀 정리하면서 블로그에 쓰고 싶은데 출처를 남기고 사용해도 될까요 ? :)

  • git
  • github
  • 버전관리시스템
xkdxh625 댓글 2 좋아요 0 조회수 288

슬랙 초대 부탁드립니다 :)

해결됨

코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. wjl0831@gmail.com

  • git
  • github
  • 버전관리시스템
wjl0831 댓글 1 좋아요 1 조회수 295

기존 react 에서 navigate 에 state 로 데이터를 전달했습니다.

해결됨

손에 익는 Next.js - 마이그레이션하기

안녕하세요. 현재 react 로 구성되어 있는 프로젝트를 next.js 로 마이그레이션 하기 위해 강의 신청해서 들었습니다. 마이그레이션 도중 질문이 있어서 글 남겨봅니다. 1) 기존 react 에서 navigate 의 state 값으로 전달하던 데이터 들이 있습니다. 전달된 데이터는 location state 로 가져와서 사용했구요. 2) next 12 버전 까지는 query 에 객체를 담아서 보낼수 있고 url 도 as 를 이용해서 제어할 수 있는걸 확인했습니다. 3) 하지만 13버전 이후부터 next/router -> next/navigate 로 변경되면서 query 객체, as 가 삭제되어진 걸로 확인되는데 페이지 이동시 데이터를 전달하러면 url 에 그냥 꼬라박는 방법 뿐인지 질문 드립니다.

  • react
  • next.js
  • vitejs
이정호 댓글 1 좋아요 0 조회수 735

강의자료 부탁드립니다!

해결됨

팀 개발을 위한 Git, GitHub 입문

강의 자료 부탁드립니다! ak4686@naver.com

  • git
  • github
  • 버전관리시스템
ak4686 댓글 2 좋아요 0 조회수 228

카테고리 별 메인 페이지

해결됨

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

안녕하세요! 블로그를 만들다가 카테고리 별로 깃허브의 README.md 파일 처럼 메인 페이지를 만들고 싶은데 가능할까요? 그게 되지 않는다면 블로그의 메인페이지를 만들고싶습니다. 카테고리 별로 글 내용을 찾기가 힘들어서 메인 페이지에 제목과 링크를 올리고 싶습니다. 이 방법이 가능할까요? 또한 혹시 카테고리명에 띄어쓰기를 사용하면 마치 서브 카테고리 처럼 생성이 되는데 혹시 가능한 방법이 있을까요? 감사합니다!

  • 블로그
  • github
붕붕 댓글 1 좋아요 0 조회수 299

인기 태그

인프런 TOP Writers

주간 인기글