묻고 답해요
147만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
만약 구현해야 할 페이지가 많아지면 Router를 효율적으로 사용하는 방법이 있나요?
안녕하세요. 좋은 강의 공유해주셔서 감사합니다. 덕분에 실무에 잘 활용하고 있습니다. 12.4) 페이지 라우팅 강의를 듣던 중 궁금한 점이 생겨 질문 드립니다. 예시 프로젝트엔 페이지가 3개로 비교적 적은 페이지수라서 App 컴포넌트 밑에 Router 로 경로를 지정해줄 수 있지만 몇 십개씩 혹은 몇 백개씩 넘어가는 페이지를 만들어야 할 때는 Router를 어떻게 활용해야 하나요? Router가 아닌 다른 방법이 있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
03-02 회원가입 질문
왼쪽처럼 입력하는 박스를 박스모양이 아니라 밑줄만 나오게 하려면 어떻게 해야하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
03-02 회원가입 피그마에 나온거 처럼 만드는문제
섹션 03-02 마지막 부분에 나오는 회원가입 피그마 화면처럼 만들기 문제에 대한 답은 업로드 되어있나요? 답을 확인할수 없을까요??
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
django-crispy-form에서 {% include 와 with %}
django-crispy-form에서 {% include 와 with %} 다음과 같이 에러가 나타나고, {% include "_crispy_form.html" %}with 절을 제외하니 정상 동작합니다.정확한 이유는 모르겠으나, 문법이 그 사이에 바뀐 것일 수도 있고 해서 일단 공유하는 마음으로 질문드립니다. 감사합니다.
-
미해결손에 익는 Next.js - 블로그 만들기
PPR 적용 후 여전히 SSG로 배포되는 이슈
안녕하세요 조은님!! 😀 강의 너무 잘봤고 완강 후 질문 남깁니다!마지막 기능인 PPR와 Suspense를 적용한 이후에 html에서 확인해봤을 때 동적인 요소로 채워지고 있는 것을 확인할 수 있었습니다.그런데 Vercel에서 Build Logs를 확인해보면◐ (Partial Prerender) 으로 뜨는 것이 아니라 여전히 ● (SSG) prerendered as static HTML 으로 뜨는데요, PPR 적용이 잘 된게 맞을까요?Suspense가 적용이 잘 되는데 PPR은 적용이 안된걸까요? 코드 작업 후 적용결과 첨부하겠습니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
web APIs 랑 web API랑 혹시 다른 말일까요?
뒤에 s만 소문자로 붙은게 신기해서 구글링을 조금 해봤는데 전부 web API로만 나와서요. 혹시 미세한 차이 같은게 있는지 궁금해서 질문해 봅니다.
-
미해결만들면서 배우는 리액트 : 기초
강의노트
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안 보이는데 어디서 찾을 . 수있나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
로그인, 로그아웃, 토근 작동 안 함
강의가 오래되어 현재 버전과 맞지 않는 코드가 있습니다. 혹시 저처럼 25년에 수강 중인분들은 참고 해주세요.강의 따라 코드가 작동안되어 챗GPT에 물어보면서 찾은 해결법입니다.로그인/ 로그아웃/ 토큰 삭제 및 생성 관련 코드가 콜백 방식으로되어 있어 최선 버전과 맞지 않다고 합니다.then/catch 또는 amsyc/await 방식으로 기능과 미들웨어 부분을 수정하시면 코드 작동합니다.긴 글 읽어주셔서 감사합니다.필요하시면 깃 공유 하겠습니다
-
미해결처음 만난 리액트(React)
npx create-react-app my-app
npx create-react-app 까지는 잘 되는데 그 밑으로는 이런 오류가 뜨면서 되지가 않습니다..
-
미해결처음 만난 리액트(React)
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
ERROR in ./src/chapter_03/Library.jsx 5:0-24Module not found: Error: Can't resolve 'Book' in '/../my-react1/src/chapter_03'Did you mean './Book'?Requests that should resolve in the current directory need to start with './'.Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /../my-react1/node_modules).If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.어떻게 해야 할까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
ssr질문
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요2.11 번 강의에서 ssr 듣다가 궁금한점이 있어서요 ssr은 두번 렌더링이 일어난다고 하셧느데 그러면 첫번째 서버에서 렌더링된 뒤에는 undefined이고 두번째 하이드레이션이 일어나고 그 뒤에는 window가 있으니 밑에처럼 했을때에는 콘솔이 나온느게 맞을까요 ?(하이드레이션 적용된 뒤에가 맞을까요 ?) if (typeof window !== "undefined") { console.log("window.location", window.location); }
-
미해결코드로 배우는 React with 스프링부트 API서버
layout할때 css적용 같은건 그냥 다 따라 쳐야 하나요?
따로 코드가 있나요? 깃허브에 그 코드는 있는데 완성된 코드라 그런지 제가 보는 부분의 코드는 없는거 같아요(이 동영상 말고 다른 동영상에서)동영상이라 코드가 안보이는 부분이 있어서 따라 칠수 없을때도 있는데 어떤식으로 해야 하나요?
-
미해결실무 중심! FE 입문자를 위한 React
4-3 아코디언 컴포넌트 만들기 링크 수정요청
4-3 아코디언 실습코드 링크가4-2 렌더링 과정 실습코드 링크랑 같습니다.pdf 파일 내 4-3 실습 링크변경 요청드리며, 변경된 링크 공유 부탁드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
하이라이트 변경이 없는데요?
메모를 적용 하기 전의 화면(대략 1분55초 정도) 에서의 하이라이트와 적용한 후(대략 4분45초 정도)의 하이라이트에 무슨 차이가 있나요? 저만 그런가요? 테스트 작성한 로컬에서도 하이라이트 변화는 없는데요?
-
미해결Next + React Query로 SNS 서비스 만들기
SessionProvider을 사용해도 하위 컴포넌트가 서버 컴포넌트로 유지되는 것 같은데 이유가 궁금합니다.
SessoinProvider을 사용할 경우 SessionProvider로 감싼 하위 컴포넌트는 모두 클라이언트 컴포넌트가 되는 걸로 알고 있고 클라이너트 컴포넌트의 자식으로써는 서버 컴포넌트가 올 수 없다고 본 것 같은데 코드를 보니까 SessionProvider의 하위 컴포넌트도 서버 컴포넌트로 잘 작동 되는 컴포넌트가 있는 것 같아요.혹시 제가 잘못알고 있는지 궁금합니다.
-
미해결처음 만난 리액트(React)
Chapter_05 터미널, 리액트 에러
안녕하세요, 챕터 05 강의를 듣고 실습 중에 있었는데요.local 3000에서는 이런 에러 메시지가 뜨고,터미널에서는 이런 메시지가 뜹니다.CommentList.jsxindex.js 헷갈리는 부분이 많은데 설명 부탁드립니다!
-
미해결Next.js App router 기반 Chat GPT 만들기
Runtime Error
// db/index.ts 코드 내용 import { neon } from '@neondatabase/serverless'; import { drizzle } from 'drizzle-orm/neon-http'; import * as schema from './schema'; const sql = neon(process.env.DATABASE_URL!); const db = drizzle(sql, {schema}); export default db;// action/signup.ts 내용 "use client"; import bcrypt from "bcryptjs"; import { getUserByEmail } from "@/data/user"; import { SignUpSchema } from "@/schemas/auth"; import { user } from "@/db/schema"; import db from "@/db"; import { redirect } from "next/navigation"; export const signUp = async(_:any, formData:FormData) => { //1. 필드 중요성 const validatedFields = SignUpSchema.safeParse({ name: formData.get("name"), email: formData.get("email"), password: formData.get("password") }) if(!validatedFields.success){ return { errorMessages: "잘못된 입력값이 있습니다.", }; } //2. 존재하는 사용자인지 체크 const {email, name, password} = validatedFields.data; //4. 성공 여부 반환 try { const existingUser = await getUserByEmail(email); if(existingUser){ return { errorMessages: "이미 가입된 사용자입니다.", }; } const hasehdPassword = await bcrypt.hash(password, 10); //3. db에 insert await db.insert(user).values({name, email, password: hasehdPassword}); } catch(error) { console.error(error) return {errorMessage: "알 수 없는 오류가 발생했습니다."}; } redirect("/login"); };회원가입 마무리 코드를 다 입력하고 저장한 뒤에 사이트를 확인했는데, 이런 오류가 납니다. DATABASE URL이 잘못됐나 싶어서 다시 확인해봤지만 이상이 없었습니다. 이전 강의인 회원가입 유효성 검사 기능 제작까지 문제가 없었는데, 문제 해결이 되지 않아 질문 남겨봅니다....
-
해결됨실무 중심! FE 입문자를 위한 React
[10-2] react-router 강의에서 BrowserRouter 를 감싸지 않고 페이지가 나오는 게 맞나요?
10-2 강의 내용에서 BrowserRouter 를 임포트 하고 나서 사용 안하고 Route를 구성하였습니다. 강의 내용대로 페이지 화면이 나와야 되는 데 에러가 발생합니다. BrowserRouter를 감싸지 않고서도 페이지 화면이 나오는 게 맞나요?<div className="App"> <Routes> <Route path="/" element={<PageA />} /> <Route path="/2" element={<PageB />} /> </Routes> </div>
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
Full route cache 질문있습니다.
안녕하세요, 해당과같이 Dynamic page에서는 full route cache가 사용되지 않는다고 설명해주셨습니다.이때, 첫번째 요청에서는 리퀘스트 메모이제이션과 데이터캐시가 당연히 아무것도 없기때문에 백엔드 서버에서 받아온 응답을 데이터캐시에 저장, 그리고 같은 내용을 중복방지를 위해 리퀘스트 메모이제이션에 캐싱하는거까진 알겠습니다. 그런데 두번쨰 요청에서는 같은 요청인데 리퀘스트 메모이제이션에서 MISS가 아닌 HIT을 해야하지 않나요? 왜 같은 요청인데 리퀘스트 메모이제이션은 MISS가 되고 데이터캐시에서 HIT을 하게되고 또다시 리퀘스트 메모이제이션에 SET을 하게 되는걸까요?
-
미해결Next.js App router 기반 Chat GPT 만들기
Route Handler 에서 Post 코드 작성해봤는데 계속 에러가 납니다 ㅠㅠ
제가 수업을 기반으로 작성한 코드는 다음과 같습니다. import { NextResponse } from "next/server"; export async function POST(request: Request, {params}: {params: {testId: string}}){ const userData = await request.json(); console.log("server user data", userData); console.log("server param", params.testId); return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."}); }"use client"; export default function Page({params} : {params: {id:string}}){ const handlerSubmit = async (e:React.FormEvent) => { const response = await fetch('/api/test/1234', { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({name: 'test name', email: 'test email'}), }); console.log(e); const data = await response.json(); console.log("response data", data); } return (<>다이나믹 라우트 페이지: {params.id} <button type="submit" onClick={handlerSubmit}> 전송 </button> </>); } 에러 메시지는 다음과 같습니다. ✓ Compiled /dashboard/[id] in 1716ms (597 modules) Error: Route "/dashboard/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at id (c:\study\chatgpt-clone\next-tutorial\app\dashboard\[id]\page.tsx:21:36) 19 | 20 | > 21 | return (<>다이나믹 라우트 페이지: {params.id} | ^ 22 | <button 23 | type="submit" 24 | onClick={handlerSubmit}> GET /dashboard/12345 200 in 2989ms ✓ Compiled /favicon.ico in 406ms (331 modules) GET /favicon.ico 200 in 543ms ✓ Compiled /api/test/[testId] in 337ms (614 modules) server user data { name: 'test name', email: 'test email' } Error: Route "/api/test/[testId]" used `params.testId`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at testId (c:\study\chatgpt-clone\next-tutorial\app\api\test\[testId]\route.ts:6:39) 4 | const userData = await request.json(); 5 | console.log("server user data", userData); > 6 | console.log("server param", params.testId); | ^ 7 | 8 | return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."}); 9 | } server param 1234 POST /api/test/1234 200 in 1402ms 응답은 잘 되는데, 동기? 비동기? 이쪽부분에서 문제가 있는 것 같습니다.. ㅠㅠ 영상이랑 똑같이 따라한 것 같은데.. 뭐가 문제인건지 감이 안잡히네요 ㅠㅠ (혹시 추가로 필요한 코드가 있다면 말씀해주세요 ㅠㅠ )
주간 인기글
순위 정보를
불러오고 있어요