묻고 답해요
137만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next + React Query로 SNS 서비스 만들기
styled-components 적용중에 질문 있습니다..
안녕하세요 강사님 강의 잘 듣고 있습니다! 항상 좋은 강의와 친절한 답변 감사드립니다.스타일 컴포넌트 적용 중에 궁금증이 생겼는데 검색을 통해서는 명쾌한 답변이 나오지 않아서 질문드립니다.아래 첨부 드린 코드와 같이 스타일 컴포넌트를 적용하려면 use client로 하고 page.tsx 에서 import 해서 사용해야 하는데혹시 이렇게 했을때 강사님이 사용하신 CSS Modules에 비해 안 좋은점이 있을까요?use client를 import해서 사용하다 보니 css modules에 비해 속도가 느리다던가서버 컴포넌트에 클라이언트 컴포넌트로 작성된 스타일을 적용시킴으로서 악영향이 있을까 걱정되어서 질문 드립니다.'use client' import styled from "styled-components" export const Container = styled.div` background-color: ${({theme}) => theme.color.blue2}; `;import { Container } from "./home.styles" export default function Home() { return ( <Container>안녕하세요</Container> ) };
-
해결됨Next + React Query로 SNS 서비스 만들기
로그인 로그아웃 기능 구현
클론코딩 무작정 하다보니 이 부분은 제가 제대로 이해하고 있는 기분이 들지 않아서 다 지우고 해당 기능 구현에 대해서 혼자서 코딩해보고 있는데, 막막하네요.제가 막무가내로 짠 코드 고쳐봤자 의미가 없어서 다시 생각해서 짜보려고 하는데, 어떤 어떤 부분을 순서대로 구현해야 하는지 핵심만 힌트로 알려주실 수 있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
login 시 http://localhost:9090/api/auth/error?error=CallbackRouteError로 리턴
LoginModal.tsx 클라이언트 컴포넌트에서 로그인 호출시http://localhost:9090/api/auth/error?error=CallbackRouteError 로 넘어가서 질문드립니다. (9090서버 열린 것 확인했습니다)비슷한 질문에 대한 답변에 버전 문제가 있어서 버전도 다시 설정해보았습니다.그런데도 여전히 로그인 함수 호출 시 http://localhost:9090/api/auth/error?error=CallbackRouteError 로 리턴되고 있어서요.터미널에는 아래와 같은 오류가 나옵니다..ㅜㅜ
-
미해결Next + React Query로 SNS 서비스 만들기
useQuery와 redux-toolkit은 같이 사용해도되나요?
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다. 수업내용과 관계없이 궁금해서 질문드립니다.두개를 같이 사용했을 때 안 좋은 점이라던지 한가지만 사용해야된다면 그 이유가 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
redirect를 false하는 이유가 서버쪽을 끈다 하였는데
이게 배포 지금 단계에서만 이렇게 하는 건가요?추후 강의에서 백엔드 완료 후 DB랑 연결하면 켜주는 건가요? 배포할 때도 키고요?
-
미해결Next + React Query로 SNS 서비스 만들기
타입스크립트
1분13초에 user 인터페이스를 확인하시던데 그런 인터페이스가 있는지와 어떻게 보시는지 팁이있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
sever Actions 사용하기 강좌 중 회원가입 양식 post 요청 응답없는 오류
서버 컴포넌트에서 Server Actions 사용하기 부분 수강 중에 오류가 발생하여 질문드립니다!회원가입 양식 작성 후 form action 요청 시 response에 아무런 응답이 없는데 원인을 모르겠습니다.. 터미널에서 아래와 같은 내용이 뜨긴 해요.저는 localhost:3002번으로 열었습니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
6:45쯤에 서버포트가 9090인 것에 대해 질문있습니다.
해당 포트가 9090인지 아닌지 어떻게 알 수 있나요? 어떤 환경이든 기본값이 9090인 것인가요?보통 코드 실행할 때 클라이언트 로컬호스트 번호는 3000인 것처럼요?그런데 실습에서 3000이 아니라 3001로 실행된것처럼 서버포트가 달라질 수도 있을까요? 그럴 때는 어떻게 확인해야하죠?
-
미해결Next + React Query로 SNS 서비스 만들기
docker 이미지로 배포시 phase별 환경 설정 로드
안녕하세요.강의 잘 듣고 업무에 활용 중 입니다.감사합니다.업무에 활용 중 문의사항이 있어서 질문 드립니다.next.js 문서를 참고하여 docker 이미지로 next.js application을 배포 했습니다.https://nextjs.org/docs/app/building-your-application/deploying#docker-image프로젝트 특성 때문에하나의 docker 이미지가 phase마다 동일하게 사용이 되는데요.phase별로 환경설정 값들이 달라서 .evn.dev, .env.beta, .env.real등으로 사용을 하고 싶은데요.server가 로드될때 .env.[phase] 를 로드하는 방법에 대해 알고 싶습니다.가능하면 next.js가 지원하는 방법으로 구현을 했으면 싶은데요.가이드를 읽어봐도 이해가 잘 안되어서 문의 남깁니다.https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables감사합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
msw로 Front 미리 만들어두고, 백앤드개발자가 API 만들어주면 나중에 교체하는건에 대해서 질문 있습니다.
msw로 Front에서 미리 만들때 요령이 있나요? 백앤드개발자와 api로 전달 될 값을 json으로 주겠다, 배열로 주겠다, 스트링값으로 주겠다 확정을 짓고 msw를 만들어서 작업해야 하는건가요?msw에서 json으로 만들때 데이터의 구성요소들을 제가 작업한것과 다르게 배열로 준다거나 json안에 데이터의 구조가 예상과 다르게 주면 그에따라 수정이 너무 많이 생길 거 같은데 제가 너무 쓸데없는 걱정하는건가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
useQuery랑 queryClient.getQueryData랑 차이점이 있을까요??
기본적으로 캐싱된 데이터가 있으면, 그 데이터를 가지고 오는 것으로 알고 있는데, const { data} = useQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends});const data = queryClient.getQueryData(['posts', 'recommends']); 두 가지 차이점이 있는지 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
강의중에 정말 궁금한게 있습니다 mock data에 한글이 입력될 경우 msw에서 값을 못 보냅니다
안녕하세요 강의 잘 보고있습니다/api/postRecommends API 호출로 데이터를 부를시에 mock data의 content 부분에 한글이 입력이 될 경우 PostRecommends 파일의 useQuery data 부분이 undefined로 나옵니다 그래서 확인을 해보니 msw의 HttpResponse.json에서 한글이 입력될 경우 Syntax Error 뜨는 것 같은데요 하지만 영어로 작성할 경우 정상적으로 데이터를 받아 옵니다 network 탭을 보아도 한글을 입력하든 영어가 입력되던 response에는 정상적으로 데이터가 보이지만, React-Query Dev Tool에서는 data: null 처리가 되고 실제로 받아오는 data 또한 없습니다 아래는 그에 따른 이미지 입니다 content에 한글이 들어갈 경우content에 한글이 들어가지 않을 경우한글만 들어가면 Syntax Error가 뜹니다특정 버전에 대한 버그인지 원인을 모르겠습니다 ,,
-
해결됨Next + React Query로 SNS 서비스 만들기
이 강의에서 /status/[id] 폴더가 있는 것은 페이지가 여러개 필요해서겠죠?
개인 프로필 상세 페이지가 하나가 아니라 여러개인 것이기 때문이겠죠?[username]/status/[id]에서 id 값이 왜 필요한지 제가 트위터? X? 를 한번도 안써봐서 프로필 페이지가 사용자 이름 외에 또 id가 왜 필요한지 뜬금없이 궁금해져서 질문남기네요...앞의 내용 제대로 들었으면 당연한 소리를 질문 하는거 같습니다만...개발 강의랑 크게 관련 없는 질문일 수 있는데 혹시나 해서 남깁니다.
-
미해결Next + React Query로 SNS 서비스 만들기
넥스트14 질문입니다.
usePathname , useSelectedLayouysegment,패러렐라우트,인터셉팅라우트등 해당 기능들은 넥스트14 기능인지, 넥스트14 app 라우터에 기능인지 궁금합니다. app라우터에 기능이라면 어떤식으로 구분 할 수 있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
Modal 관련해서
모달 만드는 방법이야 많겠지만. 넥스트14 강좌를 위하셔서 인터셉터 라우팅이나 패러렐라우팅 이용하시는건지, 실제로 유용한 방법으로 판단하셔서 사용하는건지 질문드립니당 만약 그런 이유시라면 제로초님이 좋아하시는 모달 만드는 패턴 같은게 있으시면 알려주시면 감사하겠습니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
client-side exception has occurred와 관련하여 질문드립니다.
강의 10:09에서 해당 에러가 나온 경우는 인터셉트 라우트에 해당하는 폴더와 패러렐라우트 경로에 해당하는 폴더가 동시에 존재해서 나타날 수 있다고 하였는데, 생각해보니 그렇다면 이 부분이 패러렐라우트 기능 구현할 때 주의해야 할 부분인 것 같아서 질문 드립니다.혹시 어떤 경우에 지금 이런 에러가 발생하고 이런 에러를 추후에 방지하거나 오류를 수정하려면 어떤 부분부터 확인해야 하는지 미리 조언 얻고 싶습니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
영상 3:45 위치에서 질문이 있습니다.
강의를 위해 준비된 코드 붙여넣고 그 유용함은 이해하였습니다.그거랑 별개로 혼자서 구상해서 만들어보려고 할 때 미리 스타일을 눈으로 보면서 넣는게 아니다보니 무엇부터 배치해서 넣을지 좀 생각하기 까다로운 부분이 있더라고요. 그림 크기나 박스 크기나 아무래도 다르다보니 좌측위에서부터 우측아래로 차례대로 입력하려고 해도 배치 순서를 정하는게 조금 까다로운 부분이 있고요. 그리고 막상 넣다 보면 기존 스타일이 생각한 대로 맞아 들어가지 않아서 스타일 방식을 수정하다보면 간섭도 생겨서 배치를 수정하고서 다시 정렬 시키기도 하고요. 이와 관련해서 클론코딩이 아니라 실제 디자인을 구상한다고 할 때 style이랑 컴포넌트 배치를 어떻게 구상하는지 시행착오를 줄일 노하우를 알고 싶습니다. 예를 들면 화면의 큰 부분부터 채워 넣어 가는게 맞는지 전체적으로 구상을 하고 좌측위부터 아래로 쭉 진행하는게 맞는지... 일단 클론코딩 강의 여기까지 보면서 느낀 바로는 큰 부분부터 채워 넣는게 유리하다는 느낌은 받았지만 그것만으로는 어렵다라고 느끼는데 그냥 경험으로 쌓이는 것일지 알고 싶습니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
이번 강의 영상 제목의 타이핑 외우기가 무슨 의미인가요?
inlay hints를 얘기하는 것일까요?영상제목에 있는 만큼 해당 개념을 인지해두고 넘어가려는데, PostForm 만드는 과정 중에 해당 개념이 어떤 기능의 무엇인지 영상을 봤을 때 잘 모르겠네요.
-
미해결Next + React Query로 SNS 서비스 만들기
page.tsx params 확인 방법
page.tsx에서 props로 받은 params 또는 searchParams를 console.log()로 확인해보고 싶은데 찍히지가 않아서요.원래 그런건가요...?
-
미해결Next + React Query로 SNS 서비스 만들기
react-intersection-observer 무한스크롤페이지 중복호출문제
안녕하세요 제로초님 강의 잘 보고 있습니다.다름아니라 무한스크롤 부분 구현중(개인 프로젝트에 해당 부분만 먼저 적용중이라 jsonplaceholder API로 호출하고 있습니다) fetchNextPage가 2번씩호출이 되어서 delay도 조정해보았는데 계속 2번씩호출이 되서 로직에 혹시 문제가 있는지 봐주실수 있을지부탁드립니다.0. 콘솔에 확인한 결과처음 화면에 ref가 렌더되고 그 이후 data fetching이 완료되어 isFetcing이 false가 되었는데, data를 map으로 div로 뿌리는 렌더링 과정에 시간이 소모되어 inView는 true && isFetching도 false가 되어서 div가 화면에 나타나고 ref div를 가리기 전에 data fetching을 한번씩 더 하고 있는 상황입니다.감사합니다