inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

next-auth Login 시 middleware 이슈 질문 드립니다.

해결됨

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

안녕하세요. next-auth 로그인시 해결되지 않는 부분이 있어서 질문드립니다. 로그인을 계속 실패하고 있습니다. next-auth의 버젼 (4였다가 삭제하고 3으로도 시도 해봤습니다.) "dependencies": { "next-auth": "^5.0.0-beta.3", }, 로그인을 시도했을때 뜨는 화면: The Middleware "/src/middleware" must export a middleware or a default function This error happened while generating the page. Any console logs will be displayed in the terminal window. 로그인을 시도했을때 콘솔 화면: 로그인을 시도했을때 네트워크 화면 : middleware.ts code 입니다. import { auth as middleware } from "./auth"; // See "Matching Paths" below to learn more export const config = { matcher: ["/compose/tweet", "/home", "/explore", "/messages", "/search"], }; auth.ts code 입니다. import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; console.log("-", process.env.AUTH_URL); export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }); if (!authResponse.ok) { return null; } const user = await authResponse.json(); return user; }, }), ], }); handers.ts의 로그인쪽 코드입니다. import { http, HttpResponse, StrictResponse } from "msw"; import { faker } from "@faker-js/faker"; export const handlers = [ http.post("/api/login", () => { console.log("로그인"); return HttpResponse.json({ id: "zerohch0", nickname: "제로초", image: "/5Udwvqim.jpg" },, { headers: { "Set-Cookie": "connect.sid=msw-cookie;HttpOnly;Path=/", }, }); }), ];

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

수리검이 날아가지 않습니다

미해결

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

const renderGame에서 keyMotion()까지는 작동을 하는데그 이후 forEach부분부터는 작동하지 않는것같습니다, 왜이럴까요?오타도 없고 아무이상없습니다!혹시 window.requestAnimationFrame이 너무 빨라서 bulletComProp foreach가 씹히는걸까요? ㅠㅠ... 코드 보내드립니다 <game.js> const renderGame = () => { hero.keyMotion(); bulletComProp.arr.forEach((arr,i)=>{ arr.moveBullet(); }) window.requestAnimationFrame(renderGame); } <class.js> if(key.keyDown['attack']){ this.el.classList.add('attack'); bulletComProp.arr.push(new Bullet()); } class Bullet { constructor(){ this.parentNode = document.querySelector(".game"); this.el = document.createElement("div"); this.el.className = "hero_bullet"; this.x = 0; this.y = 0; this.speed = 30; this.distance = 0; this.init(); } init(){ this.x = hero.position().left + hero.size().width/2; this.y = hero.position().bottom - hero.size().height/2; this.el.style.transform = `translate(${this.x}px, ${this.y}px)`; this.parentNode.appendChild(this.el); } moveBullet(){ this.distance += this.speed; this.el.style.transform = `translate(${this.distance}px, 100)`; this.el.style.backgroundColor = 'red'; } }

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
litzoo 댓글 1 좋아요 0 조회수 252

안녕하세요 이미지 관련해서 질문이 있습니다,

해결됨

[코드캠프] 강력한 CSS

안녕하세요 현재 이미지 관련해서 제공해주신 가이드 따라 작업 중에 있는데 비율이 다른 이미지 같은 경우 하나의 행에서는 height가 같았으나 flex-wrap 으로 다음 줄로 넘어가면 height가 달라지는지 궁금합니다. 반응형 제작 중에 있는데 desktop 미디어 쿼리에서 한 줄에 두 개의 이미지 아이템이 있을 경우 height는 같은데 mobile 미디어 쿼리에서 한 줄에 하나의 이미지만 디스플레이 하고자 할 때 height값이 달라져 이것저것 찾아보고 하루 통으로 날리고 질문드려 봅니다.....ㅠㅠ 혹싀...이미지 원본 비율과도 관련이 있을까요....

  • HTML/CSS
채범석 댓글 1 좋아요 0 조회수 390

오류가 뜹니다ㅜ

미해결

처음 만난 리액트(React)

이거 왜 이런가요ㅜㅜ npm uninstall -g create-react-app 치면 저렇게 돼요ㅠㅠ

  • HTML/CSS
  • javascript
  • react
twjung 댓글 2 좋아요 0 조회수 1046

동적페이이지 이동, 8강 10분56초에서 허공에 클릭하시는데 페이지가 이동하는것 같은데요...

미해결

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

8강 10분56초에서 하늘색 허공에 클릭하시는데 페이지가 이동하는것 같은데요. 어떻게 하신것인지 궁금해서 질문드립니다. 글자를 클릭해야 하는것 아닌가요? 근데 영상에서 동작은 또 잘되네요...?... 제가 잘 몰라서 이해를 잘못한걸까여?... 아래는 제 코드입니다..

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
전경환 댓글 1 좋아요 0 조회수 274

flexbox와 grid

해결됨

HTML5 & CSS3 기초 문법 올인원

이런 사이트를 만든 적이 있는데요, 가로나 세로 단일방향에 대한 것(음료/푸드/상품탭)은 display : flex; 로 하는게 맞는거고 저는 그당시 테두리 있는 박스 두개를 먼저 display : grid; justify-content : center; 를 주고, 내부에 개별 이미지들을 display: flex; flex-wrap: wrap; justify-content: flex-start; 이렇게 줬었더라고요 오늘 수업에 따르면 이미지 배치는 행과 열이니까 display : grid; 로 두고 행, 열, 여백 등을 지정해서 4열xn행 이렇게 되게 코드를 짰어야 하는걸까요? 저 프로젝트할때는 저게 최선인거 같았는데 css 다시 공부하면서 꺼내보니까 왜 저렇게 했었는지도 기억이 안나네요ㅠ

  • HTML/CSS
hoje 댓글 2 좋아요 0 조회수 499

#21 그리드 강의 정렬 관련 속성

미해결

HTML5 & CSS3 기초 문법 올인원

.container { justify-items(가로 방향 정렬) : center; align-items(세로 방향 정렬) : center; } 를 설정하는데 각각 색깔이 차있는 div박스가 왜 찌부되는건가요.....???? 가로세로 길이가 지정되있지 않아서 인가요? 외부 컨테이너에서 정렬을 한다는게 내부 요소를 정렬하는건가요? 자식요소를 정렬하는건가요?(둘이 같은 의미인가요??) 다른 프로젝트 할 때도, 뭐가 자꾸 원하는대로 가운데로 안가서 justify-items : center를 쓰면된다는 소리를 듣긴 했었는데, 그때는 아예 의미도 모르고(다른 강사가 안짚어줬는지 까먹었는지) 아 저거 써도 왜 가운데로 안가냐ㅠ 했던 기억이 있는데 정확한 정황은 까먹었네요. 그래서 왜 찌부가 되고 있는걸까요? html&css 강의 마지막에 큰 멘붕 왔습니다

  • HTML/CSS
hoje 댓글 2 좋아요 0 조회수 340

이번에 F유형이 추가된다고 들었어요..!

해결됨

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

이 강의 잘 학습하며 1분기 시험 준비하고 있는 사람입니다! 며칠전에 정확한 일정 알아보기 위해 큐넷 사이트 들어갔고 이것저것 눌러보다 작년 4분기때 F 유형이 또추가가 되었다고 하더라구요.. 혹시 이 부분도 준비중일까요?

  • HTML/CSS
  • jquery
  • 웹-디자인
도트유우카프사 댓글 1 좋아요 1 조회수 316

그림 링크 아무것도 안뜹니다.

미해결

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

수업 영상강의처럼 진행하는데 같은 링크를 걸어도 그림이 안뜹니다!! <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <p>안녕하세요 그랩입니다.</p> <p>안녕하세요 그랩입니다.</p> <p>안녕하세요 그랩입니다.</p> <br /> <p>안녕하세요 그랩입니다.</p> <a href="https://naver.com">네이버 넘어가기</a> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="구름 사진" /> </body> </html>

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
김재훈 댓글 2 좋아요 0 조회수 379

현재 23.01.07 기준으로 하시는 분 계시면 보세요.

미해결

파이썬으로 영화 예매 오픈 알리미 만들기

해당 강의에서 작성하는 코드를 그대로 실행하면 되지 않습니다. 현재 iframe 태그가 자바스크립트를 통해 실행되기 때문에 페이지가 로드된 후에도 자바스크립트가 실행될 시간이 필요합니다. 강의처럼 iframe의 주소만 따와서 실행시키는 것이 아닌 전체 주소를 가져와 iframe 태그로 전환시켜주고 자바스크립트 실행까지 기다려 주는 방식으로 진행하셔야 합니다. https://velog.io/@os_js/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%9B%B9-%ED%81%AC%EB%A1%A4%EB%A7%81%EC%9D%B4%EC%9A%A9-%ED%85%94%EB%A0%88%EA%B7%B8%EB%9E%A8-%EC%B1%97%EB%B4%87 저도 강의중 안됐던 내용이 있었기에 그에 대한 내용을 블로그에 올려두었습니다. 강의 진행대로 따라하다가 안되는 부분만 정리하여 올렸기 때문에 강의내용과 비교하시면서 보셔야 될 듯 합니다.

  • python
나도했음 댓글 1 좋아요 0 조회수 612

Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?

미해결

애플 웹사이트 인터랙션 클론!

안녕하세요. 근래에 vanila JS로 SPA를 구현해보고 싶어서 구글링을 해보았습니다 생각보다 여러 자료들이 나오는데 어떤 자료가 적합할지 모르겠어서 혹시 자료를 추천해주실 수 있으신가하여 질문 올리게 되었습니다:) 자료가 많아서 몇개를 선정하기 애매하시다면 혹시 vanilla JS로 SPA 구현할때 참고자료로 삼기위한 기준을 알려주실 수 있으실까요? 글 읽어주셔서 고맙습니다! 새해 복 많이 받으세요:)

  • HTML/CSS
  • 클론코딩
  • spa
  • vanillajavascript
진호 댓글 1 좋아요 1 조회수 508

가상 클래스(의사 클래스)의 정의가 이해가 되지 않습니다.

미해결

따라하며 배우는 HTML, CSS

수업을 듣는 중에 가상 클래스의 정의가 이해가 가지 않아서 질문을 드려요수업에서는 가상 클래스의 정의를 ' 별도의 클래스를 정의하지 않아도 지정한 것처럼 ' 이라는 문구가 적혀있는데,가상 클래스의 사용할 때는 '클래스의 이름: 가상 클래스의 이름' 으로 작성을 하는 데, 이러면 클래스를 정의한 상태인 것 같아서 이해가 되지 않습니다. 혹시 좀 더 풀어서 설명해 주시면 안될까요?

  • HTML/CSS
스케치 댓글 2 좋아요 0 조회수 243

강의에 사용되는 노션 링크가 어디있을까요?

해결됨

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

다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요. 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ ex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다! 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 강의에 사용하시는 노션 링크가 영상 하단에 있다고 커뮤니티에서 찾아보았는데, 아무리 찾아도 없어서, 혹시 어디서 찾아볼수있을까요?

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

스토리 생성하기 부분에서

미해결

따라하며 배우는 HTML, CSS

안녕하세요. 수업 잘 듣고 있습니다. 스토리 생성하기 부분에서 story__picture 부분에 top과 left 값을 주고 왜 다시 transform 값을 줘서 위치를 변화 시키는건가요?? top 과 left만 사용해서 위치를 변화시키는 것과 차이가 있을까요?

  • HTML/CSS
Lili 댓글 1 좋아요 0 조회수 190

강의 소스코드는 어디서 찾을 수 있을까요?

미해결

프로젝트를 통해 배우는 파이썬 프로그램

안녕하세요. 강의 소스코드는 어디서 찾을 수 있을까요? 말씀하신 사이트에 로그인했는데, 그다음이 없네요. 확인 부탁드립니다.

  • python
  • Raspberry-Pi
  • iot
훈쭌엄마 댓글 2 좋아요 0 조회수 336

그림 링크 오류

미해결

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

Failed to load resource: the server responded with a status of 403 () 이런 에러가 뜨는데 어떻게 해결하나요ㅜ

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
임재원 댓글 2 좋아요 0 조회수 296

https://cataas.com/undefined 로 나오는데 왜그런건가요?

미해결

만들면서 배우는 리액트 : 기초

https://cataas.com/undefined 로 나오는데 왜그런건가요? 28강 수강하고 있는데 fetch를 사용하려고 하는데 이미지가 안나와요 ㅠㅠㅠ

  • javascript
  • react
Park A Reum 댓글 4 좋아요 1 조회수 633

float과 높이 값 질문드립니다

해결됨

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

자식요소에 float값이 있으면 부모요소는 높이 값을 잃어버릴때, float : left 와 right 둘 다 있을 때 높이를 잃어버리는건가요? 자식요소가 여러 개 있으면 여러 개 모두 float 있을 때 잃어버리는거지요? 혹시 부모요소에 overflow:hidden을 해서 높이 값을 찾아주는 것에 원리가 있을까요?

  • HTML/CSS
  • jquery
d111 댓글 2 좋아요 1 조회수 317

인기 태그

인프런 TOP Writers

주간 인기글