inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

그림 삽입 이미지 크기 오류

미해결

[2025년 개정]이것이 진짜 한글자동화다[실전편]

그림을 아래코드처럼 삽입하면 표 안 중앙 위치에 삽입되는게 아니라 오른쪽으로 치우치게 삽입이 됩니다 어디에서 오류가 나는건지 몇 번 다시 반복해봐도 안되고 코드를 사용하지 않고 수동으로 복사 붙여넣기로하면 정사적으로 이미지가 표안에 크기가 맞추어 삽입이 되는데 해결방법 알려주십시오. hwp.insert_picture(r"C:\Users\rkdmf\Downloads\number\002.png")

  • python
  • excel
  • pandas
  • rpa
  • 한글
박상아 댓글 1 좋아요 0 조회수 223

윈도우 -> 맥 파일 옮기기 / 실행

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

안녕하세요! 지금까지 수업을 윈도우 노트북으로 듣고 있었습니다. 그런데 노트북에 문제가 생겨 새로운 노트북으로 구매 후 파일을 옮기려고 하는데 이번에 구매한 노트북 운영체제 맥os입니다. 간편하게 옮기고 빠르게 실행 할 수 있는 방법이 있을까요?? 일단 node, npm, yarn까지 다운 받은 상태 입니다.

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
skykwj0422 댓글 1 좋아요 0 조회수 156

requirements.txt 알려주세요.

해결됨

챗GPT와 파이썬으로 주식 자동매매 앱 및 웹 투자 리포트 만들기

windows 에서 pip freeze로 requirements.txt 를 만들기 위해선 아래와 같은 명령어를 사용하시면 됩니다. pip list --format=freeze > requirements.txt 강의 마지막까지 진행된 conda 환경에서 실행하시고 결과 답변주세요. 감사합니다.

  • python
WebWH 댓글 1 좋아요 0 조회수 216

커서 유료버전 써야하나요?

미해결

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

현재 2주 free같은데 claude3.5 3.7 4 등등 모든 버전에서 코드짜는게 안되고 Anthropic's latest models are currently only available to paid users. Please upgrade to a paid plan to use these models. (Request ID: aec9ae0d-5eb4-4514-a54e-478383ef2f0a) 라고 뜹니다. Free users can only use GPT 4.1 or Auto as premium models (Request ID: 849c6230-8e63-4751-9b03-9def2bab9e86) 라고 뜰 때도 있고요

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
ㄹㄹㄹ 댓글 2 좋아요 0 조회수 1379

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

미해결

Slack 클론 코딩[실시간 채팅 with React]

강좌에서 언급한대로 직접 세팅하기보다는 그냥 settings/ts 폴더 클론받아서 하시는 것을 추천드립니다. 직접 세팅하기에는 버전이 자꾸 달라져서 세팅법이 바뀌고, 입문자분들한테는 버겁습니다. 폴더가 많아서 헷갈리니 back 폴더는 백엔드 용으로 남겨두시고, setting/ts 폴더를 front 폴더로 바꾼 뒤 나머지 폴더는 전부 지워버리세요. 라는 말씀에 따라 다음과 같이 세팅을 했는데, alecture 폴더로 들어가 npm init 을 하라고 하시는 부분이 이해가 어렵습니다.

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
서호 댓글 2 좋아요 0 조회수 123

Object.assign 문법

미해결

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

function create(baseURL, options) { const instance = axios.create( Object.assign({ // baseURL: baseURL, baseURL, // key 와 값이 같으면 생략 가능 }), options, ); return instance; } 제가 사용한 코드입니다.(강의 내용 그대로 담았습니다. 주석 빼고 보면 강의 시 사용한 코드와 동일합니다. 제가 궁금한 것은, 인터넷으로 관련 문법을 찾아 본 결과 Object.assign(A,B,C)같은 형식으로 하여, A,B,C 각각의 객체를 merge한다고 알고 있는데, 강의에서는 Object.assign({baseURL}),options 으로 options객체를 object.assign 함수 바깥에 위치하더라구요? 이러면 아무 의미 없는 코드가 되어 버리는것 아닌가요? Object.assign({baseURL,},options)를 해야 되는거 같은데, 제가 놓친 부분이 있는걸까요? (코딩이 전공이 아니라 제가 잘 모르는 걸수도 있습니다. 알려주시면 감사하겠습니다)

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
주병규 댓글 1 좋아요 0 조회수 88

백엔드 도커 실행 에러가 뜹니다 ㅠ

해결됨

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

에러 로그는 아래와 같아요 File "<frozen importlib._bootstrap_external>", line 999, in exec_module File "<frozen importlib._bootstrap>", line 488, in call with_frames_removed File "/app/ main.py ", line 6, in <module> from app.db.database import Base, async_engine File "/app/app/db/ database.py ", line 1, in <module> from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine ModuleNotFoundError: No module named 'sqlalchemy' WARNING: WatchFiles detected changes in 'app/db/crud/ user.py '. Reloading... Process SpawnProcess-2: Traceback (most recent call last): File "/usr/local/lib/python3.12/multiprocessing/ process.py ", line 314, in _bootstrap self.run () File "/usr/local/lib/python3.12/multiprocessing/ process.py ", line 108, in run self._target(*self._args, **self._kwargs) File "/usr/local/lib/python3.12/site-packages/uvicorn/_ subprocess.py ", line 80, in subprocess_started target(sockets=sockets) File "/usr/local/lib/python3.12/site-packages/uvicorn/ server.py ", line 67, in run return asyncio.run (self.serve(sockets=sockets)) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/local/lib/python3.12/asyncio/ runners.py ", line 195, in run return runner.run (main) ^^^^^^^^^^^^^^^^ File "/usr/local/lib/python3.12/asyncio/ runners.py ", line 118, in run return self._ loop.run _until_complete(task) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "uvloop/loop.pyx", line 1518, in uvloop.loop.Loop.run _until_complete File "/usr/local/lib/python3.12/site-packages/uvicorn/ server.py ", line 71, in serve await self._serve(sockets) File "/usr/local/lib/python3.12/site-packages/uvicorn/ server.py ", line 78, in _serve config.load() File "/usr/local/lib/python3.12/site-packages/uvicorn/ config.py ", line 436, in load self.loaded_app = import_from_string( self.app ) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/local/lib/python3.12/site-packages/uvicorn/ importer.py ", line 22, in import_from_string raise exc from None File "/usr/local/lib/python3.12/site-packages/uvicorn/ importer.py ", line 19, in import_from_string module = importlib.import_module(module_str) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/local/lib/python3.12/importlib/__init__.py", line 90, in import_module return bootstrap. gcd_import(name[level:], package, level) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "<frozen importlib._bootstrap>", line 1387, in gcd import File "<frozen importlib._bootstrap>", line 1360, in find and_load File "<frozen importlib._bootstrap>", line 1331, in find and_load_unlocked File "<frozen importlib._bootstrap>", line 935, in load unlocked File "<frozen importlib._bootstrap_external>", line 999, in exec_module File "<frozen importlib._bootstrap>", line 488, in call with_frames_removed File "/app/ main.py ", line 6, in <module> from app.db.database import Base, async_engine File "/app/app/db/ database.py ", line 1, in <module> from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine ModuleNotFoundError: No module named 'sqlalchemy' 위 에러 때문인지 코드에서 아래 에러? 도 뜨네요 uvicorn main:app --reload도 당연 에러 뜨구요.. 어떤 부분을 확인하면 될까요? ㅠ

  • react
  • mysql
  • docker
  • rest-api
  • FastAPI
호호하하 댓글 2 좋아요 0 조회수 170

next Request Memoization과 react cache

미해결

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요. 만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요? axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!

  • react
  • typescript
  • next.js
변재정 댓글 1 좋아요 0 조회수 96

next Request Memoization과 react cache

미해결

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

next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요. 만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요? axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
변재정 댓글 2 좋아요 0 조회수 134

ch5-1 관리자 페이지 IP블랙리스트 기능구현 관련

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

안녕하세요.. 아래와 같이 에러가뜨는데요;; code: 'MODULE_NOT_FOUND', requireStack: [ '/Users/sungwon/Desktop/Project/Web/company_website/backend/index.js' ] } Node.js v24.4.0 [nodemon] app crashed - waiting for file changes before starting... . backend > index.js코드 입니다. require("dotenv").config(); const express = require("express"); const mongoose = require("mongoose"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const app = express(); const PORT = 3000; const userRoutes = require("./routes/user"); app.use(express.json()) app.use(express.urlencoded()) app.use(cookieParser()); app.use(cors({ origin: "*", credentials: true, })); app.use("/api/auth", userRoutes); app.get("/", (req, res) => { res.send("Hello world"); }); app.get("/api/check-ip", (req, res) => { const clientIP = req.ip || req.connection.remoteAddress; const blacklistedIPs = JSON.parse(process.env.IP_BLACKLIST || '[]'); console.log("Client IP:", clientIP); console.log("Blacklisted IPs:", blacklistedIPs); if (blacklistedIPs.includes(clientIP)) { return res.status(403).json({ allowed: false, message: "Access denied - IP is blacklisted" }); } res.json({ allowed: true }); }); mongoose .connect(process.env.MONGO_URI) .then(() => console.log("MongoDB와 연결이 되었습니다.")) .catch((error) => console.log("MongoDB와 연결에 실패했습니다: ", error)); app.listen(PORT, () => { console.log("Server is running"); });

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
댓글 2 좋아요 0 조회수 109

안녕하세요. 강의 들으면서 업무에 적용하고 싶은 수강생입니다.

해결됨

[개정판] 파이썬 머신러닝 완벽 가이드

강사님의 강의들을 잘듣고 있습니다. 정말 실무에 도움이 될까하고 듣고있는데 아직 다듣지는 못하고 있지만 도움이 될것 같습니다. 하지만 실무에서 접하는 내용은 또 강의와 깊이가 다를수 있기에 이렇게 실례를 무릅쓰고 문의 드립니다. 제가 있었던 기업에서 전에 쓰던 기법이였는데 그때는 그냥 그렇게 넘어갔지만 강사님의 강의를 듣고 그때 그런 것이 맞았나 복기하고 공부하고 싶어서 질문드립니다. 먼저 대략은 머신러닝 알고리즘을 두개를 돌리는데 하나는 기초 속성을 가지고 lightgbm으로 분류 작업 (1,0) 속성으로 예측을 합니다. 그리고 그 결과중 y_proba를 가지고 k-means 군집화를 하여 군집 클러스트링을 만들려고 합니다. 0) 여러 학습을 할 속성을 전처리해서 가지고 옵니다. 속성을 많은데 뒤에 예측을 하는 20개의 결과 값을 속성과 함께 자지고 온뒤 나중에 원본값은 대략 저렇고 속성 1----- 속성30 , y_test 1, ... y_test 20 . . . 나중에 y_test 1 부터 y_test20 까지 20개의 예측을 하려고 모델을 만듧니다. 1) LightGBM 으로 분류작업을 합니다. (for 문을 돌아 20개의 예측 즉 모델을 만듭니다.) x_tr1 속성1 속성2 속성3 ...... 속성30 y_test1 0 1 1 ..... 0. 1 . . . x_tr15 속성1 속성2 속성3 ...... 속성30. y_test20 1 0 1 ..... 1 . . . 2) Y_test1. y_pred1 y_proba1 0 1 0.91 1 1 0.43 1 1 0.73 0 1 0.80 . . . Y_test15. y_pred20 y_proba20 0 1 0.34 1 1 0.35 1 1 0.73 0 1 0.91 . . . 3) 군집화(k-means) 를 위한 데이터를 만듭니다. Y_proba1. ......... Y_proba20 0.91 .... 0.34 0.43. .... 0.35 0.73 .... 0.73 0.80 .... 0.91 4) 제가 재기하는 문제는 다음입니다. 군집화를 위한 데이터를 분류의 결과값중 하나인 y_proba를 써도 되는 건지? 왜냐하면 y_proba는 그 맞는지에 대한 확률 값이 아니고 그 값을 예측하기 위한 신뢰도 아닐까요? ( 예전 현업들은 그 값(y_proba)들을 최종 확률 [즉 맞는 확률 예를 든다면, 암에 걸릴 최종 확률] 로 알고 있더군요. ) 즉 1 = 예측 0 = 정답 y_proba = 0.9 라는 의미는 0.9의 신뢰혹은 확신으로 예측을 했으니 결과로 틀렸다. 라는 개념인데 이것을 마치 (암에 걸릴 확율이 90% 야)의미 있는 값의 나열로 보고 군집을 하려는게 과연 의미있는 결과로 군집이 될지 의문입니다. 저희가 붓꼿꽂데이터로 클러스트링으로 군집을 하지만 그 속성들로는 너비같은 관련이 있는 속성을 쓰잖아요. 하지만 제가 보내드린 예는 속성이 0.91이라는게 예측이 틀리건 맞건 그냥 그 예측을 위한 신뢰확률성인데 말이죠. 즉 군집화를 위한 기초 값들이 y_proba1. y_proba2 .... y_proba 20 0.91 0.43 0.80 . . . y_proba1. y_proba2 .... y_proba 20 0.32 0.62 0.65 있다면 의 값의 의미는 예를 들어 하나의 로의 하나의 로 의 의미가 0.91 이라 한다면 이건 앞서 lightgbm 예측이 틀린 경우와 맞는 경우를 구분할수 없는 숫자들의 나열 아닌가요? 물론 열로 쭉 늘어 놓은 패턴으로서의 군집을 하려는 의미는 있을지는 모르겠으나... 전문가의 선생님의 의견을 꼭 듣고 싶네요. 주말에 이렇게 질문드려서 죄송해요. 그냥 열정이라고 생각해 주시면 좋겠어요, 더운데 몸 조심하세요.

  • python
  • 머신러닝
  • 통계
열심강의듣기 댓글 1 좋아요 0 조회수 123

소셜 로그인 질문 있습니다

미해결

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

social 유저는 기존 회원보다 위험한 유저이므로 회원 정보 수정 페이지로 이동시켜야 한다 라고 하셨는데 이유가 뭔가요??

  • react
  • typescript
  • spring-boot
  • jpa
  • jwt
moriental 댓글 2 좋아요 0 조회수 86

카카오 로그인이 안됩니다.

미해결

React Native with Expo: 제로초에게 제대로 배우기

//app\login.tsx import { initializeKakaoSDK, getKeyHashAndroid } from "@react-native-kakao/core"; const onKakaoLogin = async()=>{ console.log(await getKeyHashAndroid()); try{ const result = await kakaoLogin(); // 로그인 완료될 때까지 대기 console.log("로그인 결과:", result); } catch (error) { console.error("로그인 실패:", error); } }; 코드를 이렇게 작성해서 콘솔창에 출력된 키 해시를 kakao dev 홈페이지에도 등록했습니다. 이 화면까지는 잘 뜨는데, accept and continue를 눌러도 다시 앱으로 돌아가지도 않고 콘솔창에도 access token과 같은 로그인 여부 로그가 안뜹니다..

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
dbrud5804 댓글 3 좋아요 0 조회수 549

react-router 전혀 기능 안함

미해결

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

lean-canvas 프로젝트 생성부터 react-router-dom 설치하기까지 중간중간 보이는 package.json 을 보고 전부 버전을 맞췄는데, react-router 를 통해 home 에서 about, contact 가는 그게 전혀 작동하지 않습니다. 버전에 맞춰서 새로 영상을 찍어주시거나 가능할까요? 버전을 맞춰도, 작동이 안돼서 어렵네요.. ㅠㅠ 아래는 영상의 package.json 을 보고 버전을 맞춘 코드 입니다. { "name": "lean-canvas-make-downversion", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "lint:fix": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix", "preview": "vite preview", "format": "prettier --write --cache ." }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1", "styled-components": "^6.1.12" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^8.57.0", "eslint-config-prettier": "^10.1.8", "eslint-plugin-react": "^7.34.3", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "prettier": "3.6.2", "vite": "^5.3.4" } }

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
댓글 1 좋아요 0 조회수 82

react-router-dom@6.25.1

미해결

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

제목과 같이 npm i react-router-dom@6.25.1로 해서 package.json 에도 "react-router-dom": "^6.25.1", 라고 뜨는데, 레이아웃을 만들수가 없습니다 ㅠㅠ 처음의 App 컴포넌트는 나오는데, home, about, contact 가 그 밑에 나와야 하는데 나오질 않습니다. ㅠㅠ ㅠ

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
댓글 1 좋아요 0 조회수 61

React Router 최신 스펙

미해결

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

react router 사이트에서 최신 스펙에 대한 튜토리얼을 보면, framework mode, data mode, declarative mode 3가지로 나뉘어 있습니다. 여기서 이 3가지 방식은 각각의 tutorial 에서 보여주는 install하는 방법도 다르고, 그 안에서 route 생성하고 layout 만드는것도 코드 방식이 다 갈리는 것 같습니다. 제가 react router 강의를 거의 시작하지 못한 상태이고, 자세히 몰라서 확실하게 말을 할순 없지만, router 를 만드는 방식을 보면, 강좌의 버전과 지금 현재 버전은 달라도, data mode의 튜토리얼에서 설명하는 코드 방식이 강좌와 매우 비슷한것 같습니다. ex) import {createBrowserRouter, RouterProvider} from 'react-router-dom' 으로 시작하는 것이 똑같습니다. 이 3가지 모드는 뭐가 다른건가요? 강좌에서 나온 홈페이지에서도 이런 형식은 아니었던것 같은데 혼란스럽습니다. 일단 저는 npm i react-router-dom 으로 설치했고, 강좌에 나온 코드를 일단 따라가고는 있는데, 최신스펙과 차이를 어떻게 받아들여야 할지 모르겠습니다. 예를 들어, 최신 스펙에서는 설치코드 부터 'npm i react-router'로 뒤에 '-dom'이 붙지 않습니다. 그럼에도 router생성 과정에서 import {createBrowserRouter, RouterProvider} from 'react-router-dom' 과 같이 코드가 거의 똑같은데 어떻게 받아들어야 하나요? 혹시 강사님은 최신스펙의 react router를 사용하시나요? 그렇다면 강좌에 나온 코드 그대로 최신스펙에서 가져다 써도 문제가 없는지 알 수 있을까요?(경험이 있으시다면, 변경된점에 대해도 알고 계실것 같아서요)

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
주병규 댓글 1 좋아요 0 조회수 242

그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.

미해결

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

그랩님, 강의 잘 듣고 있습니다. 다름이 아니라, 상품 상세 페이지 에러와 의문점이 있어서 어떻게 해결해야 하는지 궁금한 사항이 있어 질문 드리게 되었습니다. 일단 src/main/index.js 소스 코드를 첨부합니다. import './index.css'; import axios from "axios"; import React from 'react'; import {Link} from 'react-router-dom'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("제 mock 서버 주소 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <Link className="product-link" to={`/products/${product.id}`}> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <div className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </div> </div> </Link> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 2.src/product/index.js 소스 첨부합니다. import {useParams} from 'react-router-dom'; import axios from "axios"; import { useEffect, useState } from 'react'; function ProductPage(){ // const params=useParams(); const {id} = useParams(); const [product, setProduct] = useState(null); useEffect(function(){ axios.get('제 mock 서버 주소 넣었습니다/products/${id}' ) .then(function (result) { setProduct(result.data); // console.log(result); }).catch(function(error){ console.error(error); } ); },[]); console.log(product); // console.log(params); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; -->여기서부터 의문점과 문제점이 발생하게 되니 읽어주시고 해결할 수 있는 방법을 알려주시면 좋겠습니다. 위 소스에서 axios.get('제 mock 서버 주소 넣었습니다/products/ ${id}') 처럼 소스를 달러 중괄호 아이디 입력하면 , 아래와 같은 첨부 사진처럼 에러 가 납니다. --> 위 에러 첨부 사진은 어떻게 해결해야 할까요? 3. 하지만, 위 소스대로 입력 안하면 axios.get('제 mock 서버 주소 넣었습니다 /products/1 ') 하면 제대로 데이터를 오류 없이 아래 첨부 사진처럼 받아 오는 것 을 알 수 있습니다. 3-1. 그랩님, 강의 소스에서 처럼 axios.get('제 mock 서버 주소 넣었습니다/products/ ${id} ')해서 하면 위 첨부 사진 처럼 에러가 나는데요, 성공적으로 오류 없이 불러오고 싶은데요 , 어떻게 해야 하나요? 단계별로 어떻게 소스를 수정해야하는지 알려주시면 좋겠습니다. 확인하시면 답변 부탁 드립니다.

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

ch4-6 관리자 계정 로그아웃 , 삭제 관련

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

7:27 시점에서, 터미널에서 선생님은,, eyJhbGcioiJOUzI1N,......주소명이 뜹니다만,,, 저의 경우, 아래와 같이 몽고DB에 연결이 되었습니다만 뜹니다.... 이 경우 어떻게 해야할가요... [nodemon] starting node index.js [dotenv@17.2.1] injecting env (2) from .env -- tip: 🔐 prevent committing .env to code: https://dotenvx.com/precommit Server is running MongoDB와 연결이 되었습니다. [nodemon] restarting due to changes... [nodemon] starting node index.js [nodemon] restarting due to changes... [nodemon] starting node index.js [dotenv@17.2.1] injecting env (2) from .env -- tip: ⚙ suppress all logs with { quiet: true } Server is running MongoDB와 연결이 되었습니다. 아래는 routes폴더에 있는 user.js const express = require("express"); const router = express.Router(); const bcrypt = require("bcrypt"); const User = require("../models/User"); const axios = require("axios"); const jwt = require("jsonwebtoken"); router.post("/signup", async (req, res) => { try { const { username, password } = req.body; const existingUser = await User.findOne({ username }); if (existingUser) { return res.status(400).json({ message: "이미 존재하는 사용자입니다." }); } const hashedPassword = await bcrypt.hash(password, 10); const user = new User({ username, password: hashedPassword, }); await user.save(); res.status(201).json({ message: "회원가입이 완료되었습니다." }); } catch (error) { res.status(500).json({ message: "서버 오류가 발생했습니다." }); console.log(error); } }); router.post("/login", async (req, res) => { try { const { username, password } = req.body; const user = await User.findOne({ username }).select("+password"); if(!user) { return res.status("401").json({message: "사용자를 찾을 수 없습니다."}); } if(!user.isActive){ return res .status(401) .json({ message: "비활성화된 계정입니다. 관리자에게 문의 주세요."}); } if(user.isLoggedIn){ return res .status(401) .json({message: "이미 다른 기기에서 로그인되어 있습니다."}); } const isValidPassword = await bcrypt.compare(password, user.password); if(!isValidPassword){ user.failedLoginAttempts += 1; user.lastLoginAttempt = new Date(); if(user.failedLoginAttempts >= 5){ user.isActive = false; await user.save(); return res.status(401).json({ message: "비밀번호를 5회이상 틀려 계정이 비활성화되었습니다.", }); } await user.save(); return res.status(401).json({ message: "비밀번호가 일치하지 않습니다.", remainingAttempts: 5 - user.failedLoginAttempts, }); } user.failedLoginAttempts = 0; user.lastLoginAttempt = new Date(); user.isLoggedIn = true; try { const response = await axios.get("https://api.ipify.org?format=json"); const ipAddress = response.data.ip; user.ipAddress = ipAddress; } catch (ipError) { console.error("IP 주소를 가져오는 중 오류 발생:", ipError.message); } await user.save(); const token = jwt.sign( { userId: user._id, username: user.username }, process.env.JWT_SECRET, { expiresIn: "24h" } ); res.cookie("token", token, { httpOnly: true, secure: "production", sameSite: "strict", maxAge: 24 * 60 * 60 * 1000, }); const userWithoutPassword = user.toObject(); delete userWithoutPassword.password; res.json({ user: userWithoutPassword }); } catch (error) { console.error("서버 오류:", error.message); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.post("/logout", async (req, res) => { try { const token = req.cookies.token; if (!token) { return res.status(400).json({ message: "이미 로그아웃된 상태입니다." }); } try { const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (user) { user.isLoggedIn = false; await user.save(); } } catch (error) { console.log("토큰 검증 오류: ", error.message); } res.clearCookie("token", { httpOnly: true, secure: "production", sameSite: "strict", }); res.json({ message: "로그아웃되었습니다." }); } catch (error) { console.log("로그아웃 오류: ", error.message); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.delete("/delete/:userId", async (req, res) => { try { const user = await User.findByIdAndDelete(req.params.userId); if (!user) { return res.status(404).json({ message: "사용자를 찾을 수 없습니다." }); } res.json({ message: "사용자가 성공적으로 삭제되었습니다." }); } catch (error) { res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); module.exports = router; env.에 표기한 부분 MONGO_URI=mongodb+srv://sungwon5623:cho121101!@sungwon.oirqw5d.mongodb.net/?retryWrites=true&w=majority&appName=Sungwon JWT_SECRET=c21b6ba5372fa2b8 models폴더에 있는 User.js const mongoose = require("mongoose"); const userSchema = new mongoose.Schema( { username: { type: String, required: true, trim: true, minlength: 2, maxlength: 30, }, password: { type: String, required: true, select: false, }, isLoggedIn: { type: Boolean, default: false, }, isActive: { type: Boolean, default: true, }, failedLoginAttempts: { type: Number, default: 0, }, lastLoginAttempt: { type: Date, }, ipAddress: { type: String, trim: true, }, createdAt: { type: Date, default: Date.now, }, }, { timestamps: true, } ); const User = mongoose.model("User", userSchema); module.exports = User;

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
jasan88 댓글 2 좋아요 0 조회수 145

실행오류

미해결

프로그래밍 시작하기 : 도전! 45가지 파이썬 기초 문법 실습 (Inflearn Original)

똑같이 코드 작성했는데 왜 오류가 나는건지 모르겠어요 ㅠㅠ !

  • python
이서연 댓글 2 좋아요 0 조회수 94

강의 자료 다운로드 관

미해결

[리뉴얼] 처음하는 SQL과 데이터베이스(MySQL) 부트캠프 [입문부터 활용까지]

[리뉴얼] 처음하는 SQL과 데이터베이스(MySQL)부트캠프 [입문부터 활용까지] 강의 결제하여 수강 시작했는데요! 강의자료는 연습문제만 있는 거고 강의 중에 활용하시는 파일은 따로 없는 게 맞는건가요?

  • python
  • sql
  • mysql
  • dbms/rdbms
  • 데이터-엔지니어링
tkdgnsgg 댓글 1 좋아요 0 조회수 111

인기 태그

인프런 TOP Writers

주간 인기글