inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

유저정보 유지관련해서 세션쿠키, 엑세스토큰 질문드립니다.

미해결

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

안녕하세요 선생님 선생님강의 따라서 로그인을 구현했습니다. auth에서 관리해주는 세션으로는 프론트용, 로그인 후 내려주는 connect.id 세션으로는 백엔드용, 으로 사용했습니다. 그런데 궁금한게 로그인을 하고 기간이 지나거나 그런 경우를 대비해서 엑세스토큰, 리프레시 토큰을 많이 사용하는 것을 보았는데 선생님은 넥스트에서 어떤 방식을 사용하시는지, 어떤방식을 추천하시는지 궁금합니다. 검색해보니까 엑세스토큰이 아닌 쿠키세션으로 사용할때에는 일정시간 inter시켜주고 특정시간지나면 쿠키시간을 업데이트해주기도 하더라구요. 선생님 조언이 궁금합니다. 감사합니다.

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

부트 프로젝트 생성 시

미해결

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

부트 프로젝트 생성 시에 jdk 버전을 17로 해도 따라서 학습하는데에 지장 없나요??

  • react
  • spring-boot
  • jdk
조영서 댓글 1 좋아요 0 조회수 246

Cannot return null for non-nullable field ~~~ 에러

미해결

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

위와 같이 작성하여 요청하였을 때 이러한 에러가 나타납니다 무엇이 문제일까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
박진성 댓글 1 좋아요 0 조회수 268

3:07에 const result = 입력하는 부분은 복붙인가요??

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

플러그인이나 단축키가 따로 있는지 기존에 작성하신 코드 복사 붙여넣기인지 궁금합니다.

  • react
  • 클론코딩
  • next.js
  • supabase
정중한 몽구스 댓글 1 좋아요 0 조회수 191

안녕하세요 배포관련 질문드립니다 !

해결됨

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

안녕하세요 배포를 마쳐서 이런식으로 떠서 Production 링크를 누르면 저는 잘 들어가지는데 이 링크를 공유를 하면 다른사람들은 Vercel에 로그인을 하라는 창이 뜨더라고요,,, 어떤 해결방안이 있을까요,,,

  • javascript
  • react
  • node.js
kjklovekhw 댓글 1 좋아요 0 조회수 259

7-37번 강의 관련 커밋 페이지 오류인것같습니다.

미해결

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

7-37번강의에 관련 커밋으로 아래 처럼되어 있는데 delete 예시 url이 잘못연결되어 있는것같습니다. pre_save 예시 : slugify 자동 호출 post_save 예시 : User 생성 시에 Profile 자동 생성 post_delete 예시 : Profile 삭제 시에 관련 이미지 파일 자동 삭제 django-lifecycle 예시 : blog.Post의 content/status 변경 탐지 연결되야할 페이지: https://github.com/pyhub-kr/course-django-complete-guide-v3/commit/563749a5be33f10ec46a166faf29bbaa0e1d7144 현재 연결된 페이지: https://github.com/pyhub-kr/course-django-complete-guide-v3/commit/714c274e0d6f26b68aa5bc75a9bf2a78c924633c 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

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

채팅 구현했는데 소켓 연결이 됐다 안됐다 늦게 됐다 합니다.

해결됨

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

안녕하세요 선생님 강의를 보고 참고해서 채팅 기능을 만들었습니다. 그런데 a,b가 채팅화면에 들어왔을때 소켓 연결이 안되거나, 늦게 되거나 하는 경우가 있어서 제가 로직을 잘못짠건지 어딜 확인해야하는건지 조언을 들을수 있을까해서 문의 남깁니다. 먼저 서버에서 이렇게 socket.io 를 설정해주고 /app.js const app = express(); const httpServer = new createServer(app); const io = new Server(httpServer, { cors: { origin: 'https://zzimzzim.com', credentials: true, }, }); /utils/io.js module.exports = function (io, db) { const userSockets = {}; const nsp = io.of('/messages'); nsp.on('connection', (socket) => { console.log('soket connected'); socket.on('disconnect', () => { console.log('-----------------user disconnected'); }); socket.on('login', (user) => { userSockets[user.id] = socket.id; console.log(userSockets, '-------------------------------userSockets'); console.log(`User ${user.id} connected with socket id ${socket.id} --------- 유저입장`); }) socket.on('sendMessage', async (data) => { try { const roomId = data.room.split('-').sort().join('-'); console.log(roomId, '---------------------------------roomId'); console.log(data, '---------------------------------data'); console.log(userSockets, '---------------------------------userSockets'); let room = await db.Room.findOne({ where: { room: roomId }, include: [ { model: db.User, as: 'RoomSender', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}], }, { model: db.User, as: 'RoomReceiver', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}] }, ] }); if (room) { room = await room.update({ content: data.content }); } else { const roomCreated = await db.Room.create({ SenderId: data.senderId, ReceiverId: data.receiverId, content: data.content, room: roomId, }) console.log(roomCreated, '------------------------------roomCreated') room = await db.Room.findOne({ where: { room: roomId }, include: [ { model: db.User, as: 'RoomSender', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}], }, { model: db.User, as: 'RoomReceiver', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}] }, ] }) } const savedMessage = await db.Message.create({ SenderId: data.senderId, ReceiverId: data.receiverId, content: data.content, room: roomId, }); // console.log(savedMessage, '------------------------Message saved'); console.log(room, '------------------------room saved'); const receiverSocketId = userSockets[data.receiverId]; if (receiverSocketId) { socket.to(receiverSocketId).emit('receiveMessage', savedMessage); socket.to(receiverSocketId).emit('receiveRoom', room); } else { console.log(`User ${data.receiverId} is not connected`); } } catch (error) { console.error('Error saving message:', error); } }); }) } 클라이언트에서는 선생님이 useSocket만든것과는 다르게 useContext를 이용해서 /src/app/(afterLogin)/messages/_component/SocketProvider.tsx 'use client'; import { useSession } from 'next-auth/react'; import { ReactNode, createContext, useCallback, useEffect, useMemo, useState } from 'react'; import { io, Socket } from 'socket.io-client'; type Props = { children: ReactNode }; type SocketContextType = { socket: Socket | null; isConnected: boolean; disconnect: Function; goDown: boolean; setGoDown: Function; } export const SocketContext = createContext<SocketContextType>({ socket: null, isConnected: false, disconnect: () => { }, goDown: false, setGoDown: () => {}, }) export default function SocketProvider({ children }: Props) { const { data: session } = useSession(); const [socket, setSocket] = useState<any | null>(null); const [isConnected, setIsConnected] = useState(false); const [goDown, setGoDown] = useState(false); const disconnect = useCallback(() => { socket?.disconnect(); setSocket(null); }, [socket]); const value = useMemo(() => { return { socket, isConnected, disconnect, goDown, setGoDown } }, [socket, isConnected, disconnect, goDown]); useEffect(() => { console.log(socket, '-----------------------------------------socket???'); if (!socket) { const socketInstance = io(`${process.env.NEXT_PUBLIC_BASE_URL}/messages`, { withCredentials: true, }); socketInstance.on('connect', async () => { setIsConnected(true); console.log("소켓연결 성공!!!", socketInstance.id); // console.log(socketInstance, '--------------------socketInstance'); }) setSocket(socketInstance); } }, [socket]); useEffect(() => { if (socket?.connected && session?.user?.id) { console.log('--------------------------------------------socket emit login') socket?.emit('login', { id: session?.user?.id }); } }, [session, socket]); return ( <SocketContext.Provider value={value}> {children} </SocketContext.Provider> ) } 이런식으로 만들고 /src/app/(afterLogin)/messages/layout.tsx import { ReactNode } from 'react'; import SocketProvider from './_component/SocketProvider'; type Props = { children: ReactNode }; export default function Layout({ children }: Props) { return ( <SocketProvider> {children} </SocketProvider> ) } 레이에다가 적용해주었습니다. 이런식으로 해주면 소켓연결을 한번만 하고 원할때 메세지를 주고 받을 수 있을거라고 생각해서 적용한건데 혹시 소켓 연결 관련해서 더 확인해야하거나 수정할 부분이 있을지 궁금합니다. 감사합니다!

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

만약 상호작용하는 컴포넌트에서 각각 상태를 관리하고 있다면

해결됨

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

안녕하세요. 효율적인 테스트를 위해 상태 관리는 상위 컴포넌트에 응집해서 관리하는것이 좋다고 하셨는데 컴포넌트가 캡슐화 되어있으면 서로 상호 작용하는 컴포넌트지만 동일한 상태 조회를 각 컴포넌트에서 독립적으로 하게되는 경우도 있을거 같습니다. 이런 경우는 테스트에 용이하도록 구현 코드를 수정해야하는지, 아니면 번거롭더라도 그대로 테스트 코드를 작성해야 하는지 궁금합니다. 애초에 컴포넌트 설계를 잘못했다고 판단해야 할까요?

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
팀오 댓글 1 좋아요 0 조회수 189

주소 변경없이 모달창 구현하기

미해결

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

Q질문 로그인 버튼 클릭시 주소변경없이 모달창을 보이게 하려면 결국 라우팅만 이용해서는 할 수 없고 , 기존에 리액트에서 사용하던 모달 state를 관리해주는 방식 으로 해야한다. 라고 생각되어집니다. 이 부분에 대해서 강사님의 생각을 여쭤봅니다. 이렇게 생각한 이유는 로그인 버튼 클릭시 주소변경없이 모달창을 띄우려면 우선, 패러렐 라우팅과 인터셉트 라우팅 둘다 사용해야 하며 '/' 주소가 아닌 '/login' 주소로 바뀌어야만 한다. (이때 인터셉트 라우팅을 사용해야 하는 이유는 새로고침이 뒤에있는 모달창을 안보여도, 뒤에있던 화면은 보여야하기 때문이다. ) 주소가 바뀌어야 하는 이유를 설명하자면 패러렐 라우팅을 '/' 주소로 하게 되면 처음 브라우저에 방문하게 되면 모달창이 보이게 되기 때문이다. 그러므로 로그인 버튼 클릭시 '/login' 의 주소에서 홈화면과 모달창이 보이게 해야한다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
한나릴 댓글 1 좋아요 1 조회수 205

vercel 배포 설정 오류

해결됨

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

안녕하세요. vercel를 통한 배포를 위해 설정을 하던 중 In which directory is your code located? ./ 이 부분에서 엔터를 눌러서 넘어가려 했는데 엔터를 누르자 Error: Your Team encountered an unknown problem. Please reach out to our support team for details. 이런 에러가 뜨면서 진행이 막히고 있습니다. 혹시 해결 방법을 알려 주실 수 있으신가요?

  • javascript
  • react
  • node.js
  • vercel
jwhong135 댓글 1 좋아요 0 조회수 443

react hot reloader

미해결

React & Express 를 이용한 웹 어플리케이션 개발하기

webpack설정하면서 hot reloader에 대한 모듈설치부터 설정까지 나오는데요... 저는 1.8버전을 설치했습니다. 강의는 아무래도 좀 오래된 버전이구요.. 그러다 보니 현재 1.7이나 1.8버전에서의 설치할 모듈부터 설정까지 조금씩 달라진것 같습니다. 1.8버전에 대한 hot reloader 설정관련한 내용좀 알수있을까요? 검색해봐도 잘 안나오고 쉽지 않네요 .감사합니다.

  • react
odark 댓글 1 좋아요 0 조회수 218

onRightClickTd가 작동을 하지 않습니다.

미해결

웹 게임을 만들며 배우는 React

const onRightClickTd = useCallback( (e) => { e.preventDefault(); if (halted) { return; } console.log(`Right click on cell [${rowIndex}, ${cellIndex}]`); switch (tableData[rowIndex][cellIndex]) { case CODE.NORMAL: case CODE.MINE: dispatch({ type: FLAG_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.FLAG_MINE: case CODE.FLAG: dispatch({ type: QUESTION_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.QUESTION_MINE: case CODE.QUESTION: dispatch({ type: NORMALIZE_CELL, row: rowIndex, cell: cellIndex }); return; default: return; } }, [tableData[rowIndex][cellIndex], halted] ); return ( <td style={getTdStyle(tableData[rowIndex][cellIndex])} onClick={onClickTd} onContextMenu={onRightClickTd} > {getTdText(tableData[rowIndex][cellIndex])} </td> ); }; export const TableContext = createContext({ tableData: [], halted: true, dispatch: () => {}, }); const initialState = { tableData: [], timer: 0, result: "", halted: true, }; 강의에서 나온대로 적용하여 수업을 듣고 있는데, onRightClickTd가 작동을 하지 않습니다. 콘솔에는 누를때마다 찍히는데, 오른쪽 마우스 이벤트 자체를 인식을 못하는 것 같습니다. 혹시몰라 Td.jsx 컴포넌트 코드를 다 올립니다! 어떤 문제 때문에 작동을 안하는걸까요? import React, { useCallback, useContext } from "react"; import { CLICK_MINE, CODE, FLAG_CELL, NORMALIZE_CELL, OPEN_CELL, QUESTION_CELL, TableContext, } from "./MineSearch"; const getTdStyle = (code) => { switch (code) { case CODE.NORMAL: case CODE.MINE: return { background: "#444", }; case CODE.CLICKED_MINE: case CODE.OPENED: return { background: "white", }; case CODE.QUESTION_MINE: case CODE.QUESTION: return { background: "yellow", }; case CODE.FLAG_MINE: case CODE.FLAG: return { background: "red", }; default: return { background: "white", }; } }; const getTdText = (code) => { switch (code) { case CODE.NORMAL: return ""; case CODE.MINE: return "X"; case CODE.CLICKED_MINE: return "꽝"; case CODE.FLAG_MINE: case CODE.FLAG: return "!"; case CODE.QUESTION_MINE: case CODE.QUESTION: return "?"; default: return ""; } }; const Td = ({ rowIndex, cellIndex }) => { const { tableData, dispatch, halted } = useContext(TableContext); const onClickTd = useCallback(() => { if (halted) { return; } console.log(`Right click on cell [${rowIndex}, ${cellIndex}]`); switch (tableData[rowIndex][cellIndex]) { case CODE.OPENED: case CODE.FLAG_MINE: case CODE.FLAG: case CODE.QUESTION_MINE: case CODE.QUESTION: return; case CODE.NORMAL: dispatch({ type: OPEN_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.MINE: dispatch({ type: CLICK_MINE, row: rowIndex, cell: cellIndex }); return; } }, [tableData[rowIndex][cellIndex], halted]); const onRightClickTd = useCallback( (e) => { e.preventDefault(); if (halted) { return; } console.log(`Right click on cell [${rowIndex}, ${cellIndex}]`); switch (tableData[rowIndex][cellIndex]) { case CODE.NORMAL: case CODE.MINE: dispatch({ type: FLAG_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.FLAG_MINE: case CODE.FLAG: dispatch({ type: QUESTION_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.QUESTION_MINE: case CODE.QUESTION: dispatch({ type: NORMALIZE_CELL, row: rowIndex, cell: cellIndex }); return; default: return; } }, [tableData[rowIndex][cellIndex], halted] ); return ( <td style={getTdStyle(tableData[rowIndex][cellIndex])} onClick={onClickTd} onContextMenu={onRightClickTd} > {getTdText(tableData[rowIndex][cellIndex])} </td> ); }; export default Td;

  • react
ssi02014 댓글 1 좋아요 0 조회수 251

util 함수, const를 사용하지 않는 이유가 있을까요 ?

미해결

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

'특정 아이템의 수량이 변경되었을 때 값이 재계산되어 올바르게 업데이트 된다' 테스트 실행시 변경점이 있는 price를 '$4,045.00'과 같이 직접 입력하셨는데요. 이 부분을 formatPrice(809*4) 이런식으로 하면 formatPrice에 변경점이 생겼을 때도 테스트가 깨지지 않고 검증할 수 있고, 작성하기 더 쉬워보인다고 생각하는데요. 혹시 그렇게 하지 않은 이유가 따로 있을까요 ? (독립성을 보장한다던가..) 아래의 '특정 아이템의 수량이 1000개로 변경될 경우 "최대 999개 까지 가능합니다!"라고 경고 문구가 노출된다' 테스트의 cartValidationMessages.MAX_INPUT_VALUE 값도 마찬가지입니다 !!

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
tumblbug.study 댓글 2 좋아요 0 조회수 320

use client

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요 ㅎㅎ 강의 너무 잘 듣고있습니다. use client 사용하는 이유에 대해서 잘 모르겠어서 질문을 드립니다 .ㅎㅎ 설명을 들었을때 server slide rendering 이지만 server side 기능을 하는것이 아니라 client side 로 넘어온다? 로 이해를 했는데 , 그렇다면 굳이 저 위의 지시어 use client 를 사용해야할때가 있을까 ?? 생각을 했습니다 ㅎㅎ

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
SJ 댓글 1 좋아요 1 조회수 237

감정일기장 useRef

해결됨

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

강의 내에서 mockData 를 id: 3 까지 만들고, useRef 초기값을 3 으로 주었는데, 이렇게되면 onCreat 가 처음으로 호출됐을 때 최초 생성된 일기가 id를 3으로 가지게되고(후위증감연산자로 그 다음 생성된 일기부터 id가 4로 생성됨), 이미 만들어져있는 3번일기랑 id값이 같아지게 됩니다. 그래서 최조 생성된 일기를 onUpdate 해주었을때 수정내용으로 바뀐 최초 생성된 일기, 수정내용으로 바뀐 3번일기 이렇게 똑같은 내용 으로 2개가 생기는 상황이 발생합니다. 따라서 useRef 초기값을 4 로 주는게 맞지않나 문의드립니다.

  • javascript
  • react
  • node.js
JJun 댓글 1 좋아요 1 조회수 357

tailwind.config.ts

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

tailwind.config.ts 를 변경하려고 하는데 변경이 되지 않습니다. 다른 파일들도 수정하려고 보니까 수정이 안되네요ㅠㅠㅠ 이렇게해서 생성을 진행했구요. 잘은 모르겠지만 npx create-next-app . 로 설치를 진행했는데 권한 에러가 발생하더라구요 npm error code EACCES 그래서 sudo 를 앞에 붙여서 진행을 했습니다. 혹시 이 문제일까요 ?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
SJ 댓글 2 좋아요 1 조회수 335

정규 표현식 질문

해결됨

React 기반 Gatsby로 기술 블로그 개발하기 v2

안녕하세요 저번 개츠비 강의 너무 맘에 들어서 후속 강의도 거의 나오자마자 지른 수강생입니다! 열심히 따라하면서 강의 진행하던 와중에 "게시글 렌더링 커스터마이징하기(2)" 강의 안 코드 블럭 메타데이터 파싱 기능 개발하기 파트에서 CODE_METADATA_REGEX 부분 정규표현식에 대해서 질문드립니다 본문에 const CODE_METADATA_REGEX = /^language::(\\w+)/ 이런 식으로 정규표현식이 작성되어서 따라 진행했는데 자꾸 정규표현식을 인식 못하는거 같아 /^language::(\w+)/ 위와 같이 문법을 고쳐 사용했는데 오타인가 여쭤봅니다

  • react
  • typescript
  • 블로그
  • gatsby
김지훈 댓글 2 좋아요 1 조회수 282

리액트 부트연결

미해결

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

리액트랑 부트 연결하는 방법 axios까지 코드입력했는데 cmd라던지 연동하는 방법은 안알려주시나요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
red9123 댓글 1 좋아요 0 조회수 250

this.props.name할때

미해결

React & Express 를 이용한 웹 어플리케이션 개발하기

상위로부터 값을 가져올때 name="velopert"라고하다가 number={5} 이렇게 중괄호는 뭔가요? 갑자기 설명도 없이 ㅠㅠ

  • react
odark 댓글 1 좋아요 0 조회수 207

시작부터 안됩니다.

미해결

React & Express 를 이용한 웹 어플리케이션 개발하기

codepen.io 에서 Add External Scripts/Pens 에서 react로 검색해서 https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/cjs/react.production.min.js 이거랑 https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/cjs/react-dom.production.min.js 이렇게 두가지가 나오고 save and close도 아니고 close만 있구요 close만 해도 상태는 유 지되는건지 모르겠네요 ..그래서인지 몰라도 코드넣고 실행해보면 에러납니다. class CodeLab extends React.Component { render() { return ( <div>CodeLab</div> ); } } class App extends React.Component { render() { return ( <CodeLab /> ); } } ReactDOM.render(<App />, document.getElementById('root')) Uncaught ReferenceError: React is not defined 에러나고 그래서 강좌에 없는 import React from 'react' 넣고 나면 Uncaught ReferenceError: require is not defined 이 에러가 납니다. 도무지 진행이 안되네요 ㅠ Uncaught ReferenceError: React is not defined Uncaught ReferenceError: React is not defined

  • react
odark 댓글 2 좋아요 1 조회수 499

인기 태그

인프런 TOP Writers

주간 인기글