묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
컴포넌트,페이지 파일명 기준
안녕하세요 정환님강의를 듣다 우연히 궁금한 점이 생겨 문의드립니다.제가 리액트 > 타입스크립트 > next.js 까지 쭉 듣고있는데요!파일명을 짓는 기준이 궁금하여 문의드려요 리액트 컴포넌트파일명을 지을때는 맨 앞글자가 대문자가 기준인 것으로 알고있었는데next.js 에서 ${페이지}.tsx 로 지으실때는search-layout.tsxglobal-layout.tsx이런식으로 대시방식을 사용하시는것같더라구요!!혹시 현업에서 사용하는 파일명짓는 기준이나일반적인 react,next.js에서 사용하는 파일명 기준이 있을까요??실무를 겪어보지 못해 잘 몰라서 해당건 질문드립니다,,,,,, 강의 항상 잘 듣고있어요 감사합니다 🙂
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
✅ Supabase에서 테이블 옆에 Unrestricted가 뜨는 이유와 해결법 정리
Supabase에서 Table Editor > 테이블 옆에 Unrestricted가 아래처럼 뜨시는 분들은 RLS disabled를 클릭한 후에 RLS를 Enable로 해주시면 됩니다.RLS(Row Level Security)가 꺼져 있으면, 누구나 API로 테이블 데이터를 볼 수 있습니다.실제 서비스에서는 RLS를 반드시 켜고, 접근 정책(Policy)을 설정해야 데이터가 안전하게 보호됩니다.RLS 활성화는 Table Editor에서 “Enable RLS” 클릭 → 정책 추가로 진행하면 됩니다.
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
토스페이먼츠 연동하여 결제하기 오류
토스페이먼츠 연동하여 결제하기 기능 구현시 강사님의 영상과 다르게 오류가 나는데 도메인 localhost 가 실제 도메인 사용해야 한다고 합니다.이럴경우 어떻게 해야 하나요?영상과 실제가 너무 달라 애를 먹고 있어요.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
` /home -> / ` 아니라 ` /index -> / ` 아닌가요?
7.중첩 라우터와 그룹폴더의 활용 / 영상 시작 0:30 질문: ### /home -> / ### 이 아니라 ### /index -> / ### 아닌가요?이 부분 설명에서 /home 은 실제 home 디렉토리를 찾습니다.상위 경로에 _layout.tsx, index.tsx 가 있으면 상위 경로 index.tsx 로 이동하니까index.tsx 파일이 설명에 부합하는거 같아서 질문드립니다.### /index -> / ###
-
미해결Next + React Query로 SNS 서비스 만들기
폴링이 필요없는 이유
폴링이 필요없는 시대라고 하셨는데 그 이유가 궁금합니다
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
npx create-react-app
npx create-react-app myproject 입력하니까 무한로딩만 되고 설치가 안 돼서 yarn create react-app myproject으로 했는데도 안 되더라구요 다른 방법이 있을까요?
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
fetchTravelproductsIPicked 관련 질문 드립니다
해당 API 요청 시사진처럼 $regex 오류 때문에 data를 받아오지 못하고 있습니다.백엔드 문제일까요?
-
해결됨타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
객체 상태 다루기 정리에서
불변성을 유지하기 위해 깊은 복사를 해야 한다고 설명하셨는데 스프레드 연산자는 얕은 복사아닌가요??왜 깊은 복사라는 표현을 사용하셨는지 궁금합니다!
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
14-08 수업 확인 요청 드립니다.
아래 코드는 강사님의 git에서 가져온 코드입니다.auto// [Next.js 프로젝트] // pages/blog/index.js import { useEffect, useState } from "react"; export async function getServerSideProps(context) { // http://localhost:3000 에서의 쿠키를 API 요청에 활용 const headers = { Cookie: context.req.headers.cookie, }; console.log("headers: ", headers); const url = "http://localhost:8000/blog/whoami/"; const response = await fetch(url, { headers }); const responseText = `상태코드: ${response.status} ${await response.text()}`; // props로 전달한 값이 컴포넌트의 속성값으로 주입 return { props: { message: responseText } }; } // 웹브라우저에 코드가 다운로드된 후에 수행. function WhoamiPage({ message: messageSSR }) { const [messageCSR, setMessageCSR] = useState("no message"); // 컴포넌트 초기화 시에 1회만 실행. useEffect(() => { fetch("http://localhost:8000/blog/whoami/") .then((response) => response.text()) .then((responseText) => { setMessageCSR(responseText); }); }, []); return ( <div> <h2>whoami</h2> <pre>CSR: {messageCSR}</pre> <pre>SSR: {messageSSR}</pre> <hr /> <small>by Next.js</small> </div> ); } export default WhoamiPage;강의에선"fetch api 에서 config 설정도 없이 protocol host 포트 번호를 제거하고 호출합니다..."라고 말씀하셨습니다. 그런데 위 코드는 protocol + host + port 번호까지 전부 적혀 있는 상태이지 않나요? 그런 이유로 해당 코드는 localhost:3000/blog에서 CORS 오류가 발생합니다. 저 코드를 사용하신 이유를 잘 모르겠어요.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
nextjs git 관리?
섹션 12장부터 학습한 장고 프로젝트를 git에 넣어서 관리하고 있습니다.14장부터 next.js서버를 도입하는데, next 서버는 어떤 방식으로 git 저장소 관리를 해야할 까요?'장고+넥스트'로 함께 관리할지, 따로 관리해야 할지 몰라서 문의드립니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
질문 있습니다.
안녕하세요 강의 듣던 중 질문 있습니다.access token 을 넣어서 fetch 함수를 사용하고 싶은데 클라이언트 레이어에서는 정상적으로 주입한 access token이 보이는데 서버 레이어에서는 구워진 access token이 없더라고요. 혹시 짐작 가는게 있으실까요??감사합니다.
-
미해결리액트 취준생을 위한 Zustand 실전 입문 가이드
[문의] 섹션 4 “미니 프로젝트로 배우는 Zustand” 업로드 일정
안녕하세요.혹시 현재 강의에서 섹션 4 “미니 프로젝트로 배우는 Zustand” 부분이 준비 중인 것으로 확인했는데, 혹시 해당 섹션은 언제쯤 업로드될 예정인지 궁금하여 문의드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
프로젝트 1 카운터앱만들기에서 props로 넘겨주기 궁금한부분이잇습니다.
6.3)기능 구현하기 부분에서<Controller/>에서 <Viewer/>로 count를 넘겨주는게 불가능하다고하셨는데const Viewer = ({ count }) => {}로 props로 넘겨주는거 가능하지않나여 ?그렇게 해서 잘넘어와서 카운터앱만들기 성공했는데 왜 안된다구하신건지 이렇게하면 안되는 이유가 궁금합니다!이전강의해서 배운대로 사용했는데 이부분에서 갑자기안된다고하셔서 궁금해서 여쭤봅니다.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
14-07에서 SESSION_COOKIE_DOMAIN = None 처리 필요.
14-06수업에서 07 수업할 때 이를 주석처리하도록 의미하셨는지는 모르겠더라구요. 07수업에서 해당 내용에 대한 언급이 없어서계속해서 localhost:3000에서 원하는 결과를 얻지 못했어요. 그래서 SESSION_COOKIE_DOMAIN을 None으로 하니까 되더라구요. (당연하게도) 다른 분들에게 도움되라구 남겨요~
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
린캔버스 기능 구현은 왜 못하나요.... 구현하고 싶습니다...
왜 배포전에 기능 다 구현하고 했는데, 배포하면 이런 기능을 못 쓰고, 추가로 파이어베이스 등을 사용해야만 가능한가요....정 방법이 없나요?아니면 파이어 베이스 까지 활용해서 기능을 성공적으로 구현하는 걸 보고 싶은데 안될까요?? 추가 강의로든, 이 질문에 대한 답변으로든, 꼭 이번 프로젝트의 끝을 보고 싶습니다..!!
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
컴파일 에러 및 의존성 충돌 문제
안녕하세요, 진행하다가 여러 이슈가 발생해서 한 번에 묶어 여쭤보고자 합니다!오류가 계속 발생해서 강사님 코드도 보았는데도 잘 모르겠습니다. Q: Hydration Mismatch 에러가 발생합니다. 서버와 클라이언트에서 렌더링되는 HTML이 다르다는데 어떻게 해결하면 될까요? Q: Next.js 15.3.0에서 remarkGfm과 rehype 플러그인들이 호환성 문제가 발생합니다."Cannot read properties of undefined (reading 'inTable')" 에러 // app/blog/[slug]/page.tsx <MDXRemote source={markdown} options={{ mdxOptions: { remarkPlugins: [remarkGfm], rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode], }, }} /> Q: next-mdx-remote에서 rehype 플러그인 사용 시 타입 에러가 발생합니다."Type 'Transformer<Root, Root>' is not assignable to type 'Transformer<any, any>'" 에러// app/blog/[slug]/page.tsx (164번째 줄) rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode],Failed to compile. ./app/blog/[slug]/page.tsx:164:62 Type error: Type '(options?: Options | undefined) => void | Transformer<Root, Root>' is not assignable to type 'Pluggable<any[]>'. 162 | mdxOptions: { 163 | remarkPlugins: [remarkGfm], > 164 | rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode], | ^ Next.js build worker exited with code: 1 and signal: null Q: react-day-picker와 date-fns 버전 충돌이 발생합니다.react-day-picker@8.10.1은 date-fns@^2.28.0 || ^3.0.0을 요구하는데,현재 date-fns@4.1.0이 설치되어 있어서 충돌합니다. // package.json { "dependencies": { "date-fns": "^4.1.0", "react-day-picker": "^8.10.1" } }Error: Command "npm install" exited with 1 npm error code ERESOLVE npm error ERESOLVE could not resolve npm error While resolving: react-day-picker@8.10.1 npm error Found: date-fns@4.1.0 npm error Could not resolve dependency: npm error peer date-fns@"^2.28.0 || ^3.0.0" from react-day-picker@8.10.1
-
미해결
[React 개발자 모집] MAU 1400명 후불제 소개팅 앱
자세한 공고 내용은 아래 링크에서 확인 가능합니다 !https://www.notion.so/FE-MAU-1400-236fe7ee433280b4b870c6a022b1ec2a [매출 지표] 출시 후 월 평균 매출 상승률 20% 달성, 월 최대 매출 540만원 달성- 공고 내 증빙 내용 참조[고객 지표] Data dog 기준 2주일에 1회 이상 접속자 1K 돌파 (휴면 회원 포함 시 1317명)- 공고 내 증빙 내용 참조[정책 자금 대출 - 2건 선정] 중소기업진흥공단 청년창업자금 50백만, 기술보증기금 100백만- 공고 내 증빙 내용 참조자격 요건컴퓨터 관련 전공자 또는 그에 상응하는 지식을 보유하신 분html, css, javaScript 를 능숙하게 다루고, react를 이용한 프로젝트 경험이 있는 분형상 관리 툴(Git, Github 등)을 활용한 소스 관리 경험이 있는 분기술 스택코어: react, typeScriptUI 라이브러리: react상태 관리: React Context, React QueryCI/CD: GitHub지원 가능 대상지역 → 수도권 거주자 (서울, 경기, 인천) | 성별 → 무관나이 → 만 20세 ~ 만 30세 이하 [팀 평균 나이대 고려]대학교 재학생, 휴학생, 졸업생, 취준생, 경력자이런 분을 원해요 !단기간 내 프로젝트에 많은 시간을 투자하여 멋진 포트폴리오를 만들고 싶은 대학생 혹은 경력자단순하게 주어진 업무 수행을 넘어, 끊임없는 개선을 고민하고 시도하시는 분본인 업무에 대한 배움과 학습 의지가 강하신 분스타트업이나 다른 기업에서 인턴 경험이 있으신 분협업 기한최소 3개월 이상 프로젝트 몰두할 수 있는 분!프로젝트에 최소 주 20시간 이상 시간 투자할 수 있는 분 ! (시험 기간 등 개인 사정이 있는 경우, 당연히 예외 적용 가능합니다) 💡 < 운영 기간 10개월, 누적 매출 4000만원, 누적 고객 4000명, WAU 1,000명 B2C 서비스 >서비스명 : 사랑이 찾아온 순간에만, PLOT아이템 개요 : 1대1 매니저가 관리해주는 후불제 소개팅 플랫폼사이트 링크 : https://plotting.kr 자세한 공고 내용은 아래에서 확인 가능합니다 !https://www.notion.so/FE-MAU-1400-236fe7ee433280b4b870c6a022b1ec2a[지원 링크]https://forms.gle/nnKxycN1s5BkJqGT9위 구글폼으로 지원주시면 3일 이내 연락드립니다 공고 관련 문의사항→ 플롯 대표 김현욱 010 8354 5572
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
notes 없음 읽기 오류
제가 본 바로는, 원래 notes 속성으로 db.json에 사전에 기입해둔 데이터가 있어서 실습하는 과정에서 해당 린캔버스는 오류가 없었는데, 다른 린캔버스 들어가면서 이런식으로 에러가 뜨네요. 전 짐코딩님 강좌 처음부터끝까지 다 스킵 안하고 보고 있는데, 저만 이런 오류가 뜨나 해서요.혹시, 강좌에서 코드에 이런 오류는 반영이 안된걸까요?
-
미해결Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기
랜덤 키 생성
키가 부팅 시 생성되는 랜덤 키라 하셨는데,로그인 쪽 서버 인스턴스가 단일이 아니라 다중이라면 어떻게 되나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
11-3. context 분리, 핫리로드
수업을 따라 진행 중인데, 이 부분에 오류가 뜹니다. export const TodoStateContext = createContext();export const TodoDispatchContext = createContext(); Fast refresh only works when a file only exports components. Move your React context(s) to a separate file.eslint(react-refresh/only-export-components) 찾아보니 핫리로드 규칙 때문이라고 하는데요. 어떻게 해결할 수 있을까요?