inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

eslint를 추가하였지만 동작을 안합니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

'react/self-closing-comp': 'warn' 해당 문구를 추가했음에도 동작하지 않습니다. 재부팅도 해보았습니다만 동작하지 않습니다. 제가 잘못한 것이 있을까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
  • eslint
조준희 댓글 3 좋아요 0 조회수 220

vite로 리액트 빌드한 후 깃허브에 배포하는 방법

미해결

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

강사님 강의 보면서 저는 vite 를 이용해서 했는데요, 그런 경우는 깃허브에 배포를 어떻게 해야 하나요? npm run build npm install gh-pages 그 다음에 package.json 파일도 아래처럼 수정을 했습니다. "homepage": " 깃허브주소 넣음 ", "deploy": "gh-pages -d dist" 그다음에 다시 npm run build npm run deploy 하면 깃허브에 gh-pages 가 생겨야 하는데 생기지를 않아서요.... 어디 부분을 잘못 한걸까요?

  • javascript
  • react
gangsugi 댓글 1 좋아요 0 조회수 365

빌드할때 dist 폴더가 만들어지는데요,

미해결

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

마지막에 빌드를 하려고 하는데요, 저는 vite를 이용해서 했구요, 깃허브에 페이지 올리고 pages까지 오픈을 했습니다. 그리고 나서 npm run build 를 하면 강사님하고 다르게 build 폴더가 아니고 dist폴더가 만들어지는데요, 혹시 그럴경우엔 깃허브에 배포할때 명령어가 혹시 강의내용과 다르게 해야 하는 부분이 있는지요? npm install gh-pages package.json 파일에서 소스 추가할때 "deploy": "gh-pages -d build" 위의 파일을 수정한 후 다시 npm run build npm run deploy 여기까지 해도 깃허브 저장소에서 gitpages가 생기기 않습니다...

  • javascript
  • react
gangsugi 댓글 1 좋아요 0 조회수 842

12.11) Home 페이지 구현하기 2. 기능

해결됨

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

해당 챕터에서 강의대로 진행했고 몇번을 다시 확인해봐도 차이점을 도통 찾지 못해서 문의드립니다. Home.jsx에서 데이터를 필터걸어도 걸리지않는 상황 DiaryList.jsx에서 DiaryItem으로 데이터를 보내도 받는쪽에서 받지 못하는 상황(개발자도구에서는 워닝으로 hook.js:608 Warning: Each child in a list should have a unique "key" prop) 발생 이하 소스첨부 드립니다. App.jsx import './App.css' import { useReducer, useRef, createContext } from 'react'; import { Routes, Route } from 'react-router-dom'; import Home from './pages/Home'; import Diary from './pages/Diary'; import New from './pages/new'; import Edit from './pages/Edit'; import Notfound from './pages/Notfound'; const mockData =[ { id : 1, createdDate : new Date("2024-12-6").getTime(), emotionId : 1, content : "1번 일기내용", }, { id : 2, createdDate : new Date("2024-12-5").getTime(), emotionId : 2, content : "2번 일기내용", }, { id : 3, createdDate : new Date("2024-11-15").getTime(), emotionId : 3, content : "3번 일기내용", }, ] 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.id)); default : return state; } } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, [mockData]); const idRef = useRef(3); const onCreate =(createdDate, emotionId, content) => { dispatch({ type:"CREATE", data : { id : idRef.current++, createdDate, emotionId, content, }, }) } const onUpdate = (id,createdDate , emotionId, content) => { dispatch( { type : "UPDATE", data : { id, createdDate, emotionId, content, }, } ) } const onDelete = (id) => { dispatch( { type : "DELTE", data : { id, } } ) } return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete, }} > <Routes> <Route path="/" element={<Home />}></Route> <Route path="/new" element={<New />}></Route> <Route path="/diary/:id" element={<Diary />}></Route> <Route path="/edit/:id" element={<Edit />}></Route> <Route path="*" element={<Notfound />}></Route> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); }; export default App Home.jsx import { useState, useContext } from "react"; import { DiaryStateContext } from "../App"; import Button from "../components/button"; import Header from "../components/Header" import DiaryList from "../components/DiaryList"; const getMonthlyData = (pivotDate, data) =>{ const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth() + 1, 0, 23, 59, 59 ).getTime(); console.log('필터시작일자 : ' + beginTime + '필터종료일자' + endTime) return data.filter((item)=> beginTime <= item.createdDate <= endTime); } const Home = () => { const data = useContext(DiaryStateContext); const [pivotDate,setPivotDate] = useState(new Date()); const monthlyData = getMonthlyData(pivotDate, data); console.log(monthlyData); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1) ); }; const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1) ); }; return <div> <Header title = {`${pivotDate.getFullYear()} 년 ${ pivotDate.getMonth()+ 1 }월`} leftChild={<Button onClick={onDecreaseMonth} text="<" />} rightChild={<Button onClick={onIncreaseMonth} text=">" />} /> <DiaryList data={monthlyData} /> </div>; } export default Home; DiaryList.jsx import './DiaryList.css' import Button from "./button"; import DiaryItem from './DiaryItem'; import { useNavigate } from 'react-router-dom'; import { useState } from 'react'; const DiaryList = ({data}) => { const nav = useNavigate(); const [sortType, setSortType] = useState("latest"); const onChangeSortType = (e) => { setSortType(e.target.value); }; const getSortedDate = () => { return data.toSorted((a, b) => { if(sortType ==='oldest'){ return Number(a.createdDate) - Number(b.createdDate); } else { return Number(b.createdDate) - Number(a.createdDate); } }); } const sortedData = getSortedDate(); return ( <div className="DiaryList"> <div className="menu_bar"> <select> <option value={"latest"}>최신순</option> <option value={"oldest"}>오래된순</option> </select> <Button onClick = {() => nav("/new")} text={"새 일기 쓰기"} type={"POSITIVE"} /> </div> <div className="list_wrapper"> {sortedData.map((item)=><DiaryItem key={item.id} {...item}/>)} </div> </div> ); }; export default DiaryList; DiaryItem.jsx import getEmotionImage from "../util/get-emotion-image" import Button from "./button"; import "./DiaryItem.css"; import { useNavigate } from "react-router-dom"; const DiaryItem = ({id, emotionId, createdDate, content}) => { const nav = useNavigate(); return ( <div className="DiaryItem"> <div onClick={()=>nav(`/diary/${id}`)} className={`img_section img_section_${emotionId}`} > <img src={getEmotionImage(1)} /> </div> <div onClick={()=>nav(`/diary/${id}`)} className="info_section"> <div className="created_date"> {new Date(createdDate).toLocaleDateString()} </div> <div className="content">{content}</div> </div> <div className="button_section"> <Button onClick={()=>nav(`/edit/${id}`)} text={"수정하기"} /> </div> </div> ) }; export default DiaryItem;

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

fetch() 사용 관련 질문입니다.

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. 강의를 전부 수강한 수강생입니다. 강사님의 강의를 보다가 궁금한 것이 있어서 질문 남깁니다. 강의에서는 API 요청 방식을 fetch를 사용하여 전부 Next 서버에서 요청을 보내는 방식이던데 클라이언트 컴포넌트에서 fetch를 사용하여 브라우저를 통해 요청하는 방법과 강의와 같이 사용하는 방법, API Route(Handle) 방식을 사용하는 방법의 차이를 알 수 있을까요?? 또한 Next 서버의 부하는 괜찮은지 궁금합니다.

  • react
  • typescript
  • next.js
dalgonkim 댓글 1 좋아요 0 조회수 141

book_scraper.py 에서 import get_secret 관련 질문

미해결

파이썬 동시성 프로그래밍 : 데이터 수집부터 웹 개발까지 (feat. FastAPI, async, await)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. from app.config import NAVER_API_ID, NAVER_API_SECRET 가 아닌 from app.config import get_secret 로 import 한 이유가 궁금합니다. 클래스 내에 NAVER_API_ID = get_secret("NAVER_API_ID") NAVER_API_SECRET = get_secret("NAVER_API_SECRET") 로 변수 선언한 이유가 있을까요? get_secret은 config 파일에서 이미 수행해 NAVER_API_ID와 NAVER_API_SECRET을 변수로 가지고 있으니, 위처럼 클래스 내에 변수롤 또 선언하면 config 파일에서 get_secret 함수를 이용해 변수를 만든 이유가 없다고 생각이 들었습니다. from app.config import NAVER_API_ID, NAVER_API_SECRET config 파일에서 NAVER_API_ID와 NAVER_API_SECRET을 import해서 바로 사용하면 어떤 차이가 있나요?

  • python
  • 동시성
  • FastAPI
종마 댓글 1 좋아요 0 조회수 128

한글 2024에서는 한글 문서 열기가 안되는데 다른 방법을 써야 하나요?

해결됨

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

한글2024 버전에선 이 코드로 한글 문서가 안열리는데 다른 방법을 써야 하나요? import win32com.client as win32 hwp = win32.gencache.EnsureDispatch("hwpframe.hwpobject") hwp.XHwpWindows.Item(0).Visible = True

  • python
  • 한컴오피스
김재영 댓글 1 좋아요 1 조회수 333

2025 강의

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

질문은 동영상 강의에 들어가서 오른쪽에 커뮤니티 버튼을 통해 해주세요. 그래야 어떤 강좌에서 질문하셨는지 알 수 있습니다. 영상에서 몇 분 몇 초 대를 알려주셔야 제가 한 번에 질문 내용 확인이 가능합니다. 이미 다른 누군가가 질문을 한 이력 이 있을 수 있습니다. 질문 게시판을 한 번 확인 부탁드립니다. 학교의 과제나 타 강사의 코드 등 외부 수업 자료에 대해서는 답변하지 않습니다. 제가 다루는 커리큘럼 외의 이론이나, 너무 디테일한 컴퓨터 이론에 대해서는 답변 드리지 않습니다. 시험에 안 나오는 경우가 많고, 나와 봤자 1문제 나오는데 외워야 할 부분이 많은 것 등 (예시: 서브넷 마스크 계산) 질문을 올릴 때 이 글은 모두 지우고 내용을 입력해주세요. 유튜브로 3회차 합격률 영상보다가 20프로 할인한다는 거 보고 구매했습니다. 2025년도 되면 강의라든가 24년도 3회차 기출문제 풀이 이런것도 최신화가 되나요??

  • python
  • java
  • c
  • 정보처리기사
김기환 댓글 3 좋아요 0 조회수 123

엑셀문서 값을 필드에 입력하기 관련 문의

미해결

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

저는 한글 2014를 사용하고 있습니다. 엑셀문서 값을 필드에 입력하기를 실행했을때 강의에 올라온 영상처럼 엑셀에 있는 자료가 페이지별로 하나하나 생성 되는것이 아닌 마크만 입력되고 나머지는 입력이 되지 않습니다. 제가 타이핑한것이 잘못 됐나 싶어서 강의에 있는 소스를 붙여 넣기 해서 실행을 해봐도 마크만 입력되고 나머지 자료들은 입력이 되지 않는데 왜 그럴까요?

  • python
  • 한컴오피스
김재영 댓글 4 좋아요 1 조회수 319

한 파일의 변경사항을 다수의 파일에 동일하게 반영하고 싶습니다.

해결됨

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

질문 남겨주셔서 감사합니다. 막히면 언제든 무엇이든 자주 질문 던져주세요. 수학/과학이나 알고리즘과는 달리 업무자동화 코딩은 고민해서 풀리는 경우가 정말 드뭅니다. 다시 말씀드리지만, 질문을 자주자주 남겨주세요. 저도 최대한 빠르게 회신 드리겠습니다. 당부드릴 두 가지가 있습니다. ① 가급적 구체적으로 설명해주세요. ② 특정 챕터 관련 질문 남겨주실 때는, 어느 챕터인지 알려주세요ㅜ ==================================== 기본 파일이 하나 있습니다. 그리고, 예를 들면 앞부분이 동일한 파일을 여러개 같이 관리하고 있습니다. 이때 기본파일의 앞부분에 3조의 내용(법령 관련 지침이라 1,2,3,4,~조로 구성)이 변경되었을 때, 기본파일의 변경사항을 바꿀파일에 적용할 수 있을 지 문의 드립니다. 파일 첨부가 안되어서 이미지로 첨부해봅니다. [기본파일 내용] [바꿀파일1] [바꿀파일2]

  • python
  • 한컴오피스
류금열 댓글 2 좋아요 1 조회수 420

데이터베이스 초기화(npx prisma db push) 이슈입니다.

해결됨

한 입 크기로 잘라먹는 Next.js

npm install 해서 의존성 설치후에 npx prisma db push를 했는데 $ npx prisma db push Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": PostgreSQL database "postgres", schema "public" at " aws-0-ap-northeast-2.pooler.supabase.com:5432 " Error: P1001: Can't reach database server at aws-0-ap-northeast-2.pooler.supabase.com : 5432 Please make sure your database server is running at aws-0-ap-northeast-2.pooler.supabase.com : 5432 . 이렇게 나옵니다. 챗지피티랑 스택 오버플로우 이런거 봐도 잘 안돼서 질문드립니다.

  • react
  • typescript
  • next.js
한태현 댓글 2 좋아요 0 조회수 830

corr()이 작동하지 않는 문제

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

안녕하세요. 먼저 좋은 강의 감사드립니다. 저는 이번 9회 시험에서 1유형 30점, 2유형 40점, 3유형 20점 총 90점으로 합격했습니다. 퇴근후딴짓 선생님의 좋은 강의 덕분이라고 생각합니다. 다만 시험 중에 이상한 일이 있었습니다. 이번 3유형에 상관계수를 구하는 문제가 있었는데요, 제가 시험장에서 corr() 메서드를 사용했을 때 작동하지 않았습니다. 자료형이 틀렸거나 옵션 문제 등의 오류가 아니라, 확실히 not defined로 기억합니다. corr() 메서드 호출 자체가 불가능했습니다. 몹시 당황해서 이런저런 라이브러리를 불러도 보고, dir, help 등도 시도해봤지만 호출 자체가 안 되니 할 수 있는 방법이 없더라고요. 마지막으로 통계학 지식을 동원해 수작업 계산을 시도했지만, 결국 시간 부족으로 corr()이 필요했던 두 문제를(각 5점) 틀리게 되었습니다. 혹시 이런 문제가 발생하는 경우에 대해 아시는 바가 있을까요? 합격과는 별개로 너무 궁금하고 답답해서 문의를 드립니다.

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
조현재 댓글 2 좋아요 0 조회수 134

여러줄의 블록설정한 text를 파이썬 변수에 할당하기

해결됨

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

질문 남겨주셔서 감사합니다. 막히면 언제든 무엇이든 자주 질문 던져주세요. 수학/과학이나 알고리즘과는 달리 업무자동화 코딩은 고민해서 풀리는 경우가 정말 드뭅니다. 다시 말씀드리지만, 질문을 자주자주 남겨주세요. 저도 최대한 빠르게 회신 드리겠습니다. 당부드릴 두 가지가 있습니다. ① 가급적 구체적으로 설명해주세요. ② 특정 챕터 관련 질문 남겨주실 때는, 어느 챕터인지 알려주세요ㅜ ==================================== 안녕하세요 일코님~ 블럭처리를 한 상태에서 실행하면 그 블럭의 텍스트를 반환해주는 함수를 쓰고있는데요. def extract_text_from_block(): hwp.InitScan(range=0xff) # 0xff <<선택된 범위 내에서 검색 _, text_blokced = hwp.GetText() # 텍스트만 추출 hwp.ReleaseScan() # 스캔을 해제. return text_blokced # 이경우, 해당 target이 text에 포함되어있으면 True, 아니면 False를 반환. 어떻게 하다보니깐 만들어서 쓰고있는데.. 문제는 이게 para 1개를 넘어가면 \r\n을 반환하고 아무것도 반환하지 않네요.. 단락 하나를 넘어가지 않게 블럭설정하면 잘 작동하는데요. 여러줄에는 먹히지가 않네요.. (1) 일단 블록설정한 text를 변수에 할당할 때 이런식으로 함수를 쓰는게 효율적인 방법인지? (2) 만약 괜찮은 방법이라면, 여러줄을 블록설정한뒤에 변수에 할당하려면 어떻게 해야하는지? 이렇게 두가지가 궁금합니다! 감사합니다!!

  • python
  • 한컴오피스
윤병현 댓글 1 좋아요 1 조회수 117

리스트 선언

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

cnt =[0]*(n+m+3)로 리스트를 선언하셨는데, 저는 문제 풀때 cnf = list()로 선언했는데 Traceback (most recent call last): File "C:\Users\User\Desktop\파이썬 TEST\ AA.py ", line 38, in <module> cnt[i+j] += 1 IndexError: list index out of range 오류가 나더라고요 해당 선언을 하면 왜 오류가 나는것인가요..? 이렇게 해도 문제는 풀려야하지 않나요..? 의문점이 남아서 질문올립니다

  • python
  • 코딩-테스트
heewon221 댓글 1 좋아요 0 조회수 133

파이썬 Class Method 질문

해결됨

실리콘밸리 엔지니어가 가르치는 파이썬 기초부터 고급까지

안녕하세요 ! 섹션 8 듣는 중에 질문 드립니다. 제가 Class의 개념이 조금 부족한 것 같아서 이해를 잘 못했을 수 있습니다. Class Method는 instance의 상태를 변화시킨다고 말씀주셨는데, instance가 여러 개인 경우, 특정 instance만 변경하고 싶을 때는 해당 instance를 지정해주면 되는 걸까요 ? Class Method는 주로 어떨 때 사용하나요 ? Class 내에서 이미 선언된 instance 값을 변경시킬 일이 어떤게 있나 궁금합니다.

  • python
  • 알고리즘
Yoo bo hyun 댓글 2 좋아요 0 조회수 182

docker container network 관련 질문

미해결

Airflow 마스터 클래스

안녕하세요 강사님 강의 잘 보고 있습니다. spark 관련된 질문을 드려도 될까요..? 도커에 spark 컨테이너를 띄워서 airflow의 bash operator로 spark-submit을 해보려 하는데 로그가 다음과 같이 나오면서 spark-submit이 안됩니다. compose 파일도 network 설정을 다시했고, docker network inspect 로 확인해보니 잘 연결된 것이 확인됐습니다. spark submit도 master container 내부에서 잘 실행이되는 상황입니다. shell 파일을 이런식으로 작성한다고 해서 airflow dags로 spark-submit을 할 수 있는건 아닌가요 ? #!/bin/bash script=$1 echo "${script}" echo "start spark submit with bash operator" spark-submit \ --master spark://spark-master:7077 \ ${script}

  • python
  • 데이터-엔지니어링
  • airflow
댓글 3 좋아요 0 조회수 187

CSR, SSR 렌더링 방식 문의

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요~ 설명해주신 CSR, SSR 렌더링 강의보고 CSR, SSR 렌더링 방식에 대해 궁금한점 두가지 남겨봅니다! (유사한 질문이 있는지 찾아봤는데 글이 많아서 찾질 못해서 중복 감안하고 올려봅니다🙏🏻) 질문1 CSR은 bundle js 다운로드 레이턴시 만큼 FCP가 느리고 반대로 SSR은 bundle js 다운로드 레이턴시만큼 CSR보다 FCP가 빠르다고 이해했는데요. TTI 기준으로 보면 결국 CSR, SSR모두 차이가 없는게 맞을까요? (gzip압축 해제, js parse, hydration등의 처리에서 드는 비용의 차이가 있겠지만 이런 부분들은 크게 영향을 주진 않을거라고 생각하여 문의드립니다. 혹시 두 방식에 영향을 미치는 큰 요소가 있다면 그 부분도 고려해서 알려주시면 감사하겠습니다.) 질문2 CSR의 장점으로 초기 렌더링이 느리고 이후에 페이지 이동시 빠르게 화면을 그릴 수 있다고 하셨는데요, CSR에서 초기 렌더링의 속도를 높이기 위해 코드 스플리팅 전략을 취할 수 있을거 같습니다. 이렇게 CSR에서 코드 스플리팅 방식을 취한 경우 페이지 이동시 결국 bundle js 다운르드 레이턴시가 또 발생할거 같은데요. prefetch, preload같은 전략을 취하지 않고 코드스플리팅만 적용한 CSR방식은 단점만 남는 렌더링 전략이 맞을까요? 유일한 장점은 CSR이지만 코드 스플리팅을 했기 때문에 초기 FCP가 조금 빠르다정도일거 같은데 이해한게 맞는지 문의드려봅니다.

  • react
  • next.js
슈퍼장 댓글 2 좋아요 1 조회수 189

Next-Auth 관련해서 질문이 있습니다.

미해결

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

백엔드 취준생인데 프론트를 좀 할 일이 있어서 강의 듣고 있는데 Next-Auth 부분이 이해가 쉽지 않네요... 몇 가지 질문 드리고자 합니다. 1. session 객체에 어떤게 담기는건지 잘 모르겠습니다. export default async function Home() { const session = await auth() if (session?.user) { redirect('/home') return null } return ( <Main/> ); } 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.NEXT_PUBLIC_BASE_URL}/api/login`, { method: 'POST', headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.usename, password: credentials.password, }) }) if (!authResponse.ok) { return null } const user = await authResponse.json() return { email: user.id, name: user.nickname, image: user.image, ...user } } }) ], }) Home 에서 auth() 를 통해 불러온 session 객체에 CredentialsProvider 가 리턴한 객체가 담기는건가요? 그런데 그렇다고 하기엔 객체에 user 라는 속성이 없어서 아닌 것 같기도 해서 아닌 거 같다는 생각도 듭니다. export default function Login() { const router = useRouter() const { data: session } = useSession(); if (session?.user) { router.replace('/home') return null } router.replace("/i/flow/login") return ( <Main /> ) } 마찬가지로 여기서도 session 에 어떤게 담기는지 잘 모르겠습니다 ㅠㅠ auth() 로 리턴한 세션과 같은 객체가 담기는 것 같긴 한데 도대체 session 에 뭐가 담기는지 파악이 쉽지 않네요 ㅋㅋㅋ 그래서 session 객체의 user 를 클릭해서 들어가보니 다음과 같은 interface 가 나오네요. export interface DefaultSession { user?: User expires: ISODateString } auth/core 에 있는 인터페이스인 것 같은데 이 인터페이스가 어느 시점에 등장(?) 하는 건지 잘 모르겠습니다. 2. 지금 진행하는 로그인 방식은 백엔드에 로그인 관련 API 가 있다고 가정하고 진행하는 것으로 저는 이해를 했는데요 export const handlers = [ http.post(`${baseUrl}/api/login`, () => { console.log('로그인'); return HttpResponse.json(User[1], { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' }, }) }), http.post(`${baseUrl}/api/logout`, () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }) }), http.post(`${baseUrl}/api/users`, async ({ request }) => { console.log('회원가입'); // return HttpResponse.text(JSON.stringify('user_exists'), { // status: 403 // }) return HttpResponse.text(JSON.stringify('ok'), { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' }, }); }) ]; 이게 지금 api 를 mocking 한 건데 여기에 요청을 보내고 있으니까요. 그러면 이 API 에서 리턴한 유저(User[1]) 가 세션에 담기는 것인지 궁금하네요. (이것도 1번 질문하고 좀 연관이 되네요) 그러면 만약에 백엔드 API 가 로그인 성공했을 때 http body 에 별도의 객체를 리턴하지 않으면 어떻게 되나? 이런 궁금증도 생깁니다. 3. 그리고 로그아웃을 할 때는 왜 로그아웃 API 에 따로 요청을 보내지 않고 signOut 함수만 사용하는지 궁금합니다. 이것만 사용해도 쿠키가 삭제가 돼서 그런 것인가요? 그러면 백엔드 서버에 별도의 로그아웃 API 를 만들지 않아도 되는 것인지 궁금합니다. 장문의 질문글이 된 거 같은데, 뭔가 Next-Auth 를 처음 접하다보니 사용법이 좀 익숙치가 않네요. AI 에 물어보거나 구글링을 해 봐도 좀 파악이 쉽지 않아 여기에 질문 남겨봅니다. 감사합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
비가싫어요 댓글 1 좋아요 0 조회수 203

filter return 문제

해결됨

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

todos.filter을 사용할 때 내부의 화살표함수에서 return 을 명시하지 않으면 값이 정상적으로 반환되지 않습니다. 강의에서는 return 을 별도로 작성하지 않았는데 값이 정상적으로 반환되는것 같네요 리액트 버전의 문제일까요..?

  • javascript
  • react
  • node.js
박선우 댓글 2 좋아요 0 조회수 221

인기 태그

인프런 TOP Writers

주간 인기글