묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
dynamic page에서의 API 호출, 코드상 질문 드립니다.
export default function Page({ params }: { params: { postId: number } }){ } 다음과 같이 app/(Logined)/home/Post/[postId]/page.tsx 에서 params를 불러왔을 때,prisma와 REST API를 이용하여 데이터를 요청하고 가져오는 것을 할 때,1.page가 params.postId를 이용하여 NextRequest를 요청하면2. route.ts가 해당 Request를 받고 prisma를 통해 쿼리를 한 뒤,3. NextResponse로 page에 답장하는 형식을 구현하고자 합니다. 근데 해당 구현에 대해서, 공식 문서에서 제가 해당 내용을 잘 응용하지 못하는 것인지,GET http://localhost:3000/api/post/4 500 (Internal Server Error)에러만 발생하고 'post'를 불러오지 못하고 있습니다. 이에 눈에 띄는 코드 오류는 없는지 핵심 부분이 빠진 것은 없는지 질문 드립니다.// app/(Logined)/home/Post/[postId]/page.tsx "use client"; import React, { useEffect, useState } from "react"; import { PostType } from "@/app/(Logined)/_components/TYPE_post"; export default function Page({ params }: { params: { postId: number } }) { const [post, setPost] = useState<PostType | null>(null); const postid = params.postId; useEffect(() => { const fetchPostData = async () => { try { const response = await fetch(`/api/post/${postid}`); if (response.ok) { const postData: PostType = await response.json(); setPost(postData); } else { console.error("Error fetching post"); } } catch (error) { console.error("Error:", error); } }; if (params.postId) { fetchPostData(); } }, [params.postId]); if (!post) { return <div>Loading...</div>; } return ( <div> <h1>Post Details</h1> <p>Description: {post.description}</p> <p>Event Date: {post.eventDate.toString()}</p> <p>Deadline: {post.deadline.toString()}</p> </div> ); } // pages/api/post/[postId]/route.ts import prisma from "@/app/lib/prisma"; import { NextResponse, NextRequest } from "next/server"; export async function GET(req: NextRequest) { const postId = parseInt(req.nextUrl.searchParams.get("postId") || "0"); if (!postId) { return new NextResponse(JSON.stringify({ message: "Invalid post ID" }), { status: 400, }); } try { const post = await prisma.post.findUnique({ where: { id: postId }, select: { description: true, eventDate: true, deadline: true, }, }); if (post) { return new NextResponse(JSON.stringify(post)); } else { return new NextResponse(JSON.stringify({ message: "Post not found" }), { status: 404, }); } } catch (error) { console.error("Error fetching post:", error); return new NextResponse( JSON.stringify({ message: "Error fetching post" }), { status: 500 } ); } }
-
미해결
NICEAPI 본인인증 구현해보신분 계실까요?
혹시 NICEAPI 본인인증 구현해보신분 계실까요?암호화 토큰 발급 API 호출이Postman이나 Thunder또는 curl을 이용하여 Http 호출을 하면, 정상적으로 호출이 되는데,브라우저, Node.js, Spring 과같은에서 브라우저/서버 환경에서 호출시 500(pre:AccessControlByClientIDFilter)또는 503 Service Error가 발생하네요둘의 차이점은 뭐고, 서버에서 호출가능한 방법이 있을까요?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
외부 REST API 사용시 보안관련한 문제
안녕하세요~ 제가 현재 Nestjs 와 React로 구성한 app애서 추가로 다른 app의 API를 사용해야되는 상황인데요. API키와SECRET을 생성하고 이를 이용하여 호출하고 있는데, 이 때 클라이언트에서 요청을 한 내용을 보면 이 Authentication 관련된 토큰들이 다 노출되서 고민입니다.정확히 말하면 이건 백엔드 관련도 아니라 프론트쪽이긴한데요.. 프론트에서 다른 앱의 Restful API를 사용하여 요청할때 사용되는 토큰을 보안적으로 안전하게 숨길 수 있는 방법이 있을까요?
-
미해결모든 개발자를 위한 HTTP 웹 기본 지식
쿠키 & 세션을 REST API로 개발할 때
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예)[질문 내용]쿠키에 대해서 알게 되었지만 궁금한점이 있습니다.구글에 검색하다 본 기억이 있는데 쿠키 & 세션을 REST 개발환경에서는 못쓴다고 본적이 있는거 같은데 스프링 부트로 rest형식으로 개발할 때는 쿠키 & 세션을 못쓰는게 맞나요? 만약, 못쓰는게 맞다면 그러면 로그인 유지나 광고 3일 동안 안보겠습니다 같은 쿠키를 사용해야 할 때는 어떤식으로 시켜줘야나요? 리액트와 협업하면 프론트에게 맡겨야 하나요?
-
미해결스프링 시큐리티 OAuth2
restfual api 개발할때
안녕하세요 선생님. 지금가지 선생님의 강의를 바탕으로 oauth 를 사용하는 프로젝트를 구축하는데 있어 궁금점이 생겨 질문드립니다.소셜로그인 인증 챕터 부분에서는 전형적인 session 인증 방식인데 restful api 서버 개발시에는 어떻게 설정해야할까요? 대안으로 찾아본바 successHandler 를 커스텀하게 설정하여 jwt 로 암호화해서 서버 api로 리다이렉트 시 쿼리파라미터에 jwt를 넣어 프론트에게 jwt 를 전달하는데 이 방식이 맞나요?또한 강의에서 restfual api 에 대해 다루신다면 어느 챕터에서 확인할 수 있을까요?
-
미해결[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
REST API 서버 만들기 경로 문제입니다!
안녕하세요! 강의를 수강중인 학생입니다!강의를 보면서 서버를 작성해보다가 에러가 발생했습니다. 에러메시지를 보고 경로 문제인것을 확인했습니다. 그런데 같은 폴더 안에서 해당 파일을 readFile()로 불러왔는데 이름도 경로도 모두 맞는데 어떤 부분때문에 읽지를 못하는 걸까요?ㅠ 코드를 깃에서 받아서 그대로 실행했는데 파일을 읽어오지 못합니다ㅠ! 단순한 문제인것 같은데 번거롭게 해드려서 죄송합니다 ㅠㅠ 확인해주시면 감사하겠습니다!
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
http://localhost:3095/api/users 동작안하는문제
안녕하세요. 하루에 한챕터씩 따라가고 있는 수강생입니다. 어제 '메뉴와 모달만들기'까지 수강을 완료하고, 금일 'DM목록 만들기'를 수강하던 중, 언제부터인지는 확실하지 않으나, 추측은 proxy서버설정후 부터 GET /api/users 정보를 가져오지 못하고 있습니다. mysql workbench에서 users테이블을 확인해보면 데이터가 정상적으로 들어있습니다. back폴더에서 'npm run dev'실행 하여 'DB 연결 성공'이라는 메시지 확인후, postman을 이용해서 'http://localhost:3095/api/users' 리퀘스트를 보내보아도 false가 리턴됩니다.(status code 404) 어떤 문제인지 확인이 가능할까요?
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
protectedRoute
protectedRoute.js 부분이 강의에서 제 지식에 비해 다소 설명이 부족한 것 같아서 의문점이 생겨 질문드립니다. 1. ...rest는 어디서 나온 데이터 인가요? 2. {...rest}가 이 코드에서 하는 역할이 무었인가요? (테스트결과 삭제해도 수정하는데는 아무 이상이 없습니다) 3. props는 PostEdit.js 에서 넘어오는 데이터 인가요? 라우터에 exact component={PostEdit}를 했기때문에 넘어오는 데이터 인건가요? 4. component: Component는 왜이렇게 하나요? component: Component vs Component 차이를 모르겠습니다. Component만 써보니 전자와 달리 console.log({props})는 찍히지 않으나, 수정하는데는 문제가 없던것 같습니다. 5. protectedRoute없이도 사실 데이터 변경은 불가능 한가요? 서버측에서 수정 라우터에 auth 미들웨어를 삽입했기때문에 사실 없어도 데이터 변경은 불가능한것 맞나요? 강사님께서 한번 언급하신것처럼 보안성을 좀더 강화(프론트 부분에서도 보안처리)하기 위한 방식인거죠? --매번 consolo.log를 찍어도 모르는게 많습니다. (질문이 너무 많아서 죄송합니다)
-
해결됨얄팍한 GraphQL과 Apollo
csv 데이터에 대해서 질문 드립니다.
강사님 안녕하세요, 반갑습니다. 저는 얄코의 구독자이며 영상은 매우 잘 챙겨보고 있습니다. csv를 데이터베이스로 이용한 하신것에 대해서 깜짝 놀랐고, " 이걸로 다 CRUD를 구현을 하셨단 말이야?? ,, 하고 매우 기뻤습니다. " 그러나 강의에서 POST 로 localhost:3000/api/team >> 통해서 데이터를 넣어주면~ post man에서 들어간 데이터가 잘 확인이 되고, 브라우저에서도 확인을 해도 데이터가 잘 들어간 것이 확인이 됩니다. 근데 서버를 내렸다가 다시 올리면... 데이터가 없어져 있더라구요?? CSV데이터에 실제로 CRUD를 해보고 싶다는 생각이 듭니다. 1. csv 데이터베이스에 CRUD를 배워서 할 바에는 몽고디비를 쓰는 것이 좋을까요? 2. 구글에 검색을 해보니 하는 방법에 대한 글이 많더라구요, 추천하시는 글이 있으시면 추천이 가능하실까요? ps. 바쁘시면 답글 안다셔도 감사합니다. ㅋㅋㅋ
-
미해결[개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발
만약 회원 가입을 위해 리액트에서 액션을 디스패치 한다면 data 형식은 어떻게 정해지나요?
리액트에서 회원 가입이나 포스팅을 위한 post 액션을 디스패치 할경우 data로 뭘 날려야할지 자바 백엔드와 어떻게 협의하는지 궁금합니다. 예를 들어 서비스 계층에서 아래와 같이 user 정보를전달받아 다음과 같이 저장할 경우 public User save(User user) { if (user.getId() == null) { user.setId(++usersCount); } users.add(user); return user; } 액션 요청할때 data에 무엇이 설정되어야 하는지 어떻게 협의되는지 문서를 통해 알려주는지 메신저를 이용하는지 아니면 타입 추론 같은 기능들을 이용하는지 궁금합니다. const onSubmitForm = useCallback(() => { console.log("게시글 추가 submit click !!"); console.log("text 확인 : ", text); dispatch({ type: ADD_POST_REQUEST, data: { text, }, }); }, [text]);
-
미해결모든 개발자를 위한 HTTP 웹 기본 지식
HTTP API 설계 질문
안녕하세요. 좋은 강의 감사드립니다. HTTP API 설계와 관련하여 궁금한 점 질문 드리고자 합니다. 1. /members/{id} 와 같은 API URL에서 {id}에는 특정 회원을 식별할 수 있는 값, 주로 회원 테이블의 PK 값이 들어간다고 생각하면 될까요? 2. 만약 그렇다면 API 설계 시 URL에 PK 값을 노출시키는 것은 보안 상으로 문제가 되지 않는 것인가요? 3. 만약 회원 테이블의 PK가 id, email이라면(즉 특정 회원을 식별하기 위해서 id, email 두 개의 값이 필요하다면) /members/{id}/email/{email} 이런 식으로 설계해야 할까요? 실제 현업에서는 어떤 방식으로 하시는지 궁금해 여쭤봅니다. 감사합니다.