inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

API Routes를 사용하는 기준과 장/단점에 대해서 알고 싶습니다!

미해결

Next.js 시작하기

안녕하세요, 강사님 좋은 강의 감사합니다!! 시간 가는지 모르고 빠르게 완강을 하게 되었습니다.API Routes 부분이 조금 헷갈려, 이 부분에 대한 궁금증이 생겨 질문을 남기게 되었습니다.Next.js를 사용하여 API 라우트를 통해 클라이언트에서 서버로 직접 데이터베이스나 외부 서버에 접근하여 클라이언트 단에서 사용할 수 있다는 것을 알게 되었습니다. API 라우트를 통한 외부 서비스 URL 숨기기 서버의 env 사용, 외부 서비스 안전하게 접근. 일반, 서버 DB에 접근해서, 사용하는 것보다 어떤 부분에서 장점이 있는지 크게 와닿지 않아서, 혹시 조금 더 구체적인 실무에서의 API Routes를 활용하는 예시를 좀 더 자세하게 알 수 있을까요? 이를 사용했을 때 서버 DB에 직접 접근했을 때 얻는 것에 비해 가질 수 있는 장점과 단점에 대해 알고 싶습니다.

  • javascript
  • react
  • next.js
김용민 댓글 3 좋아요 1 조회수 946

서버 로그인 방식과 결합

미해결

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

안녕하세요! 개인 프로젝트에서 백엔드 먼저 개발 후 프론트를 Next로 개발하면서 강의를 통해 next-auth를 접했는데요. 저는프론트에서 로그인을 하면 해당 로그인 request가 서버로 전달되고, 서버에서 jwt access, refresh token을 발급해프론트에 전달하고 저장하는 기존의 서버 로그인 방식으로 설계를 하였습니다. 또한 서버의 protected request에 대해 위에서 발급한 access token을 활용하여 유효한지 검증 후 진행하도록 하고자 하는데요. next-auth부분을 보며 현재의 공식 문서와도 조금 다르고 제가 원하는 방식과 통합하여 구현이 가능한지 잘 이해가 안가더라구요ㅠ 혹시 이러한 방식으로도 서버에서 얻은 jwt토큰을 next-auth에 삽입이 가능할까요? 대략적인 흐름은 어떻게 진행될까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
성민최 댓글 2 좋아요 0 조회수 854

그랩마켓 웹 화면 구현하기 코드

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

섹션 2 HTML & CSS 기본 그랩마켓 웹 화면 구현하기 코드 복사할 수 있을까요? 컴퓨터를 새로 샀는데 굳이 다시 구현 할 필요가 없어서 그렇습니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
D3vJ30n 댓글 1 좋아요 0 조회수 246

수정하기 기능

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

이제 promise.all을 사용해서 이미지 미리보기는 가짜 URL로 보여주고 게시글 등록 mutation을 날릴때 이미지 upload 요청을 보내고 응답받은 url을 mutation을 날리고 있는데 수정하기할때도 uploadImage을 하기 위해서 코드의 양이 길어지는데 코드는 길더라도 이게 더 효율적인 방식인건가요?? 그리고 이렇게하면 fetchBoards의 결과로 받아온 결과는 string 타입이고 uploadImage에 사용하는 이미지는 FIle 타입이라서 creacteBoard처럼 각각 다른 배열에 담아서 보내기는 어렵고 만약 upload하고 응답받은 url이면 skip하고 File타입의 데이터라면 imageUpload를 실행시켜 url을 받아오와 배열에 추가해서 updateBoardInput 객체에 추가해서 mutation 보내려고 하는데 이런식으로 접근하는게 맞는지 궁금합니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
박현민 댓글 2 좋아요 0 조회수 173

api repository 폴더 안에 있던 search 폴더가 안보여요

해결됨

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요 Section2-5 강의 " Querydsl설정하기" 강의에서는 분명 repository 폴더 안에 search 폴더가 있었는데 강의를 듣다보니 강사님 화면에서는 search 폴더가 어느새 사라져있습니다.. 강의화면만 보고 어디있는지 알수가 없어서요ㅠ 어느 폴더로 이동해갔는지 알려주시면 감사하겠습니다. 그리고 강사님 화면을 보다가 발견했는데 config 폴더 아래에 RootConfig 파일이 새로 생겨있고, 깃 파일을 확인해보니 modelMapper를 사용하여 DTO 와 entity를 변환해주고 있는데, 앞에 강의에서 제가 듣기론 funciton을 이용해서 변환해주고 RootConfig 파일을 따로 만든 기억이 없습니다ㅠ 교육 뒷 부분에 새로 생기는 건가요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
촉촉한 갈매기 댓글 2 좋아요 0 조회수 242

4.4 getBy~, queryBy~ 질문입니다

해결됨

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

마지막, 삭제 버튼 테스트 Q. 삭제 버튼을 누르면 TableRow가 사라지니까 queryByText('text').not.toBeInTheDocument() 를 사용해서 유무를 확인 하셨는데 getByText('text').not.toBeInTheDocument() 를 사용해서 해당 텍스트가 있는 요소가 없으면 에러가 나타나도록 유도해서 테스트 검증할 수도 있지 않나요?? 가능은 한건지, 권장이 되지 않는건지 질문 드립니다

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
allmy 댓글 1 좋아요 1 조회수 193

소스트리의 ssh키 클라이언트 설정부분

해결됨

모두의 깃 & 깃허브

소스트리의 ssh키 클라이언트 설정부분에서 OpenSSH로 변경했을 때, SSH키가 자동으로 뜨지 않습니다. 이럴때는 뭐가 문제일까요??

  • git
  • github
김대현 댓글 1 좋아요 0 조회수 271

인터셉팅 라우터 활용도

미해결

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

안녕하세요. 실무에서 인터셉팅 라우팅 활용 빈도가 잦을까요? 클론코딩이라 x.com 에서 사용한 방식 그대로 만들기 위한 학습인지 아니면 실무에서도 사용빈도가 높은지 궁금합니다 강의는 들어서 인터셉팅 라우팅을 이해하긴 했지만 실무에서는 로그인, 회원가입 팝업 띄울때 인터셉팅 라우팅을 사용하지 않을것같은 생각이 들어서 질문드립니당 감사합니다

  • react
  • next.js
  • react-query
  • next-auth
  • msw
wkdejrtlr 댓글 1 좋아요 0 조회수 235

Link 컴포넌트의 prefetching 기능

해결됨

Next.js 시작하기

안녕하세요! Link 컴포넌트의 prefetching 기능에 대해 궁금한 점이 있어 질문 남깁니다. 뷰포트에 들어오는 Link 영역에 대해 미리 데이터를 끌어온다고 하셨는데, 어느 정도 범위까지 데이터를 끌어오는걸까요? 만약 그 링크로 연결된 페이지가 서버 사이드 렌더링을 이용하는 페이지라면 페이지를 미리 그려서 HTML 파일을 완성하는 수준까지 prefetching을 하는 걸까요?

  • javascript
  • react
  • next.js
신원세 댓글 1 좋아요 1 조회수 290

백엔드 /api/users/{id}의 응답 데이터에 Followers가 없습니다.

미해결

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

안녕하세요. 강사님 😎 유저 프로필 페이지의 팔로우 버튼을 구현 중에 있었습니다. 예제를 따라하던 중 아래 캡처 이미지와 같이 API /api/users/{id} 의 응답 데이터에 Followers 객체가 없는걸 확인했습니다.. Followers 정보가 없어 세션과 비교하여 팔로잉 여부를 체크할 수가 없네요. 제가 API나 코드를 잘 못 구현하고 있는걸까요?ㅠㅠ (스웨거 및 query-devtool) 강의 영상에는 존재하고요. 추가질문 공부를 집에서는 데스크탑, 카페에서 노트북으로 하다보니 서버를 각각 피씨에 띄우는게 번거로워 하나의 서버를 바라보게 하려고 했습니다. 그래서 개인 서버에 docker형태로 BE서버를 동작시켜 사용하려고 했습니다. 서버는 정상적으로 구동했으나 API 중 인증(로그인)이 필요한 API는 모두 403으로 응답이 오네요ㅠㅠ 방식. 로컬next( localhost:3000 ) -> 외부.BE 서버(be-server:9090) 호출 nest를 알지 못해 깊게 분석은 못해봤고 소스의 logged-in-guard.ts 에 request를 로그로 찍으니 cookie부분이 가 비어 있습니다. import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common'; import { Observable } from 'rxjs'; @Injectable() export class LoggedInGuard implements CanActivate { canActivate( context: ExecutionContext, ): boolean | Promise<boolean> | Observable<boolean> { const request = context.switchToHttp().getRequest(); console.log(request) return request.user?.id && request.isAuthenticated(); } } 간단하게 해결이 가능하면 조언부탁드리며 아니면 무시해주셔도 됩니다. 🙏

  • react
  • next.js
  • react-query
  • next-auth
  • msw
홍홍 댓글 1 좋아요 0 조회수 225

sql 환경 변수 경고 & postgresql 연동

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

강의를 보면서 따라하고 있는데, 2가지 문제점이 있습니다. 우선 첫번째는 아래처럼, 환경 변수 관련 경고가 뜬다는 것입니다. 두번째로는 강의에서는 파이참으로 진행하셨는데, 저는 vs 코드로 진행하여서 sqltools를 다운받아, 드라이브 설치후 진행하였는데 mysql은 잘 연동되었는 postgresql은 연동이 안되더라고요. 앞선 환경변수 문제와 관련이 있는것인지 아니라면 어떻게 해결해야하는것인지 궁금합니다. 오류 코드 docker-compose up -d WARN[0000] The "g" variable is not set. Defaulting to a blank string. WARN[0000] The "z" variable is not set. Defaulting to a blank string. WARN[0000] The "gl8f5tn_" variable is not set. Defaulting to a blank string. WARN[0000] The "g" variable is not set. Defaulting to a blank string. WARN[0000] The "z" variable is not set. Defaulting to a blank string. WARN[0000] The "gl8f5tn_" variable is not set. Defaulting to a blank string. WARN[0000] The "g" variable is not set. Defaulting to a blank string. WARN[0000] The "z" variable is not set. Defaulting to a blank string. WARN[0000] The "gl8f5tn_" variable is not set. Defaulting to a blank string. 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • react
  • python
  • django
  • web-api
  • htmx
백종성 댓글 2 좋아요 0 조회수 408

라우팅 관련해서 질문이 있습니다!

미해결

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

안녕하세요 제로초님! 강의 잘 듣고 있습니다. 화면이 mount 되었을 때는 최상단에 존재하는 page.tsx에 의해 localhost:3000 URL가 나오고 있는 상황입니다. 그런데 처음 mount 되었을 때 localhost:3000/login 형태의 URL을 가지려고 한다면 어떤 방법으로 해야할지 궁금합니다! 제가 생각한 방법은 아래와 같은데 좀 더 좋은 방법이 있을까요? 1. 최상단에 존재하는 page.tsx에서 useEffect 내부에 router.push('/login') 을 한다. next 에서 제공하는 redirect 기능을 사용한다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
bj2525 댓글 1 좋아요 0 조회수 226

동적경로 사용 오류

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요. Route 부분에 오류가 생겼는데 어떤 부분이 잘못되었는지 모르겠어서 질문 남깁니다. Route 함수에 path 경로를 설정할 때, 동적경로를 설정하고 싶으면 ":"과 함께 파라미터의 값을 적어주는 것으로 압니다. 강사님께서 적은 코드와 제 코드가 다른 점이 없는데, 저는 해당 url에 접근했을 때 url경로에 ':'이 포함되어서 나옵니다. 구글링+gpt를 사용해서 해당 오류를 고치려고 해보았지만 찾을 수 없는 상태입니다. 어떤 부분이 문제일까요? import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Routes, Route } from "react-router-dom"; import Home from "./Pages/Home"; import New from "./Pages/New"; import Diary from "./Pages/Diary"; import Edit from "./Pages/Edit"; import Notfound from "./Pages/Notfound"; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); case "DELETE": return state.filter((item) => String(item.id) !== String(action.data.id)); default: return state; } } const mockData = [ { id: 1, createdData: new Date("2024-06-12").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createdData: new Date("2024-06-11").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createdData: new Date("2024-05-11").getTime(), emotionId: 3, content: "3번 일기 내용", }, ]; export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); // 새로운 일기 추가 const Create = (createdData, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdData, emotionId, content, }, }); }; // 기존 일기 수정 const Update = (id, createdData, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdData, emotionId, content, }, }); }; // 기존 일기 삭제 const Delete = (id) => { dispatch({ type: "DELETE", data: { id, }, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ Create, Update, Delete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App;

  • javascript
  • react
  • node.js
focus0007 댓글 2 좋아요 0 조회수 235

상품(product) 수정시 const 사용이 안되는 이유

해결됨

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요 멋진 강의 잘 듣고 있습니다. Todo에서 ReadComponent.js 안에서 read 할때 const makeDiv = () => () 와 같이 Arrow Function을 사용해서 간단하게 표현해주셨는데요, 수정할때도 간단하게 사용해보고 싶어서 Product의 ModifyComponent.js 에서 아래와 같이 만들어 사용해봤습니다. {makeDiv("name", product.pname, "text", handleChangeProduct)} {makeDiv("description", product.pdesc, "text", handleChangeProduct)} {makeDiv("price", product.price, "number", handleChangeProduct)} const makeDiv = (title, value, type, handleChangeProduct) => ( <div className="flex justify-center"> <div className="relative mb-4 flex w-full flex-wrap items-stretch"> <div className="w-1/5 p-6 text-right font-bold">{title}</div> <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-300 shadow-md" name={title} type={type} value={value} onChange={handleChangeProduct} ></input> </div> </div> ); 만들어보니까, price(넘버)는 수정이 되는데, pname과 pdesc는 수정이 안되더라구요, readOnly가 먹혀있었습니다. text와 number가 다른걸까요... 수정이 안되는 이유가 뭔지 궁금합니다ㅠ 추가로, const makeDiv 는 return 아래에 추가를 해주셨는데, return 위에가 아니라 return 아래에 추가한 이유도 궁금합니다. 확인 부탁드립니다. 감사합니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
촉촉한 갈매기 댓글 1 좋아요 0 조회수 194

Docker Volume 오류(reference, lowercase)

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

#ERROR1 repository 이름이 소문자여야 한다는 에러입니다. 제가 폴더 명을 "Docker"로 해놨었더니 이런 오류가 뜨더라고요. 폴더명을 "docker"로 바꿨더니 해결되었습니다. kim-yaegun@gim-yegeons-MacBook-Air Docker % docker run -p 5001:8080 -v /usr/src/app/node_modules -v $(pwd):/usr/src/app yaegun/node docker: invalid reference format: repository name (Docker) must be lowercase. See 'docker run --help'. #ERROR2 레퍼런스가 유효하지 않다는 에러입니다. kim-yaegun@gim-yegeons-MacBook-Air docker % docker run -p 5001:8000 -v /usr/src/app/node_modules -v $(pwd):/usr/src/app yaegunkim/node docker: invalid reference format. See 'docker run --help'. 이건 $(pwd) 를 "$(pwd)" 로 바꾸어 주니 해결되었습니다. kim-yaegun@gim-yegeons-MacBook-Air docker % docker run -p 5001:8000 -v /usr/src/app/node_modules -v "$(pwd)":/usr/src/app yaegunkim/node Successful

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
Yaegun Kim 댓글 1 좋아요 0 조회수 593

이모션에서 props전달시 화살표함수가 원래 이렇게 생겼나요?

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

다른 부분에서 화살표함수 만들면 제대로 만들어지는데 이부분에서만 화살표함수 모양이 다릅니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
leeyunje96 댓글 2 좋아요 0 조회수 205

[섹션3 - 내가 만든 이미지 기억하기 쉬운 이름 주기] 네이밍/태그 에러

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

"docker build -t YaegunKim/hello:latest ./"로 빌드를 잘 한 것 같은데 아래와 같은 에러가 나오더라고요. #COMMAND docker run -it YaegunKim/hello #ERROR Unable to find image 'YaegunKim/hello:latest' locally docker: Error response from daemon: Get "https://YaegunKim/v2/": dialing YaegunKim:443 container via direct connection because has no HTTPS proxy: resolving host YaegunKim: lookup YaegunKim: no such host. See 'docker run --help'. 근데 또 아이디로 run을 하면 잘 되고... #PROBLEM-SOLVING 이유는 버전은 "latest"가 아닌 "lastest"로 해서 에러가 났던 것이었습니다. 다시 빌드 하고 실행해보니 hello가 잘 출력되네요 ㅎㅎ

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
Yaegun Kim 댓글 1 좋아요 0 조회수 247

const Try = require(./Try) 빨간줄

미해결

웹 게임을 만들며 배우는 React

const Try = require('./Try'); 이렇게 불러오면 게임 실행은 되는데 빨간줄이 그어져있어요. 이미 포함된 파일 이름이라는 오류라네요.. './' 지우면 빨간줄은 사라지는데 코드가 실행되지 않네요. 빨간줄 무시하는 게 나을까요?

  • react
현대적인유교보이 댓글 1 좋아요 0 조회수 279

인기 태그

인프런 TOP Writers

주간 인기글