inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

로그인 폼을 만들고 로컬 스토리지에 jwt저장하기 강의에서 질문입니다!

해결됨

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

import React, { useState } from "react"; import { Card, Button, Form, Input, notification } from "antd"; import { useHistory } from "react-router-dom"; import Axios from "axios"; import { SmileOutlined, FrownOutlined } from "@ant-design/icons"; import useLocalStorage from "utils/useLocalStorage"; export default function Login() { const history = useHistory(); const [jwtAccessToken, setJwtAccessToken] = useLocalStorage( "jwtAccessToken", "" ); console.log("loaded Token: ", jwtAccessToken); // 왜 이게 두번이나 출력되는 것이지? const onFinish = (values) => { async function fn() { const { username, password } = values; const data = { username, password }; try { //응답을 꼭 받아야 한다. 토큰을 받아야 하니까 const response = await Axios.post( "http://127.0.0.1:8000/accounts/token/", data, { headers: { "Content-Type": "application/json" } } ); // const { data: token } = response; 이런 방식은 아래랑 다르다 response에서 data을 꺼내서 이름을 token이라 짓는 것 // const token = response.data 와 일치하며 밑에 녀석은 // const jwtAccessToken = response.data.access 과 일치한다 const { data: { access: jwtAccessToken }, } = response; setJwtAccessToken(jwtAccessToken); notification.open({ message: "로그인 성공!", icon: <SmileOutlined style={{ color: "#108ee9" }} />, }); // history.push("/accounts/login"); //TODO: 이동주소 } catch (error) { console.log(error); if (error.response) { notification.open({ message: "로그인 실패!", icon: <FrownOutlined style={{ color: "#ff3333" }} />, description: "아이디/암호를 확인해 주세요.", onClick: () => { console.log("Notification Clicked!"); }, }); } } } fn(); }; return ( <Card title="login"> <Form labelCol={{ span: 8 }} //부트스트랩은 한 행이 12 컬럼인데 antd는 24컬럼임 wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} onFinish={onFinish} autoComplete="off" > <Form.Item label="Username" name="username" rules={[{ required: true, message: "Please input your username!" }]} //rules을 통해 유효성검사로직이 들어가 잇다 > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[ { required: true, message: "Please input your password!" }, { min: 5, message: "5자리 이상 해주세요" }, // 한글자 한글자 들어갈때마다 검사해준다. ]} > <Input.Password /> </Form.Item> {/* //8칸 이동하고 16칸을 쓰겠다 */} <Form.Item wrapperCol={{ offset: 8, span: 16 }}> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> </Card> ); } 안녕하세요 강사님!! 위에서 15번째 줄에 있는 console.log("loaded Token: ", jwtAccessToken); 이 부분이 페이지의 콘솔창에서 두번이나 나타납니다... 왜 그런지 알 수 있을까요?? 새로고침을 했을때도 두번 나타나고 submit을 했을 때도 2번 출력됩니다. 아 ! 그리고 simplejwt토큰을 사용중 입니다!

  • docker
  • django
  • python
  • react
꺼넝 댓글 1 좋아요 0 조회수 714

안녕하세요. 다른 풀이도 풀었는데 괜찮을까요?

미해결

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

정답은 제대로 나오긴 했는데 시간 초과라던가 하는 문제가 없을까요? 4중 for문은 생각지도 못했네요..ㅠㅠ sudoku = [list(map(int, input().split())) for _ in range(9)] def solution(sudoku): length = len(sudoku) a, b, c, = list(), list(), list() # 행열 검사 for i in range(length): row, col = list(), list() for j in range(length): row.append(sudoku[i][j]) col.append(sudoku[j][i]) if len(set(row)) != 9 or len(set(col)) != 9: return "NO" # 3x3 격자판 검사 a.extend(row[0:3]) b.extend(row[3:6]) c.extend(row[6:]) if i == 2 or i == 5 or i == 8: if len(set(a)) != 9 or len(set(b)) != 9 or len(set(c)) != 9: return "NO" a, b, c, = list(), list(), list() return "YES" print(solution(sudoku))

  • 코딩-테스트
  • python
  • 코테 준비 같이 해요!
HTCho1 댓글 1 좋아요 0 조회수 461

1068번: 트리

미해결

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

제가 다음과 같이 코드를 작성했는데, 100%까지 가다가 틀립니다.. 어떤게 문제일까요? 반례를 제시해주실 수 있나요? 감사합니다. https://www.acmicpc.net/problem/1068 import sys input = sys.stdin.readline n = int(input()) g = list(map(int, input().split())) m = int(input()) cnt = 0 def DFS(x): g[x] = -1 for i in range(n): if g[i] == x: DFS(i) DFS(m) for i in range(n): if g[i] != -1 and i not in g: cnt += 1 print(cnt)

  • 코딩-테스트
  • python
  • 코테 준비 같이 해요!
이도열 댓글 1 좋아요 1 조회수 377

'수업 노트를 확인해 주세요 :)'의 수업노트 위치가 어디인가요?

해결됨

탄탄한 백엔드 NestJS, 기초부터 심화까지

'첫 시작' 챕터 영상 레이아웃의 하단에 '수업 노트를 확인해 주세요 :)'가 있는데 해당하는 수업노트가 어디 있는건가요?

  • node.js
  • express
  • nodejs
  • mongodb
  • nestjs
  • ssr
  • NestJS
skkfea07 댓글 1 좋아요 2 조회수 389

암호화/인증 & 인가 과제 중 질문

해결됨

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

updateUserPwd 구현 중에, 파라미터로 업데이트할 패스워드를 받도록 했습니다. 이 때, API 호출 시, 해당 파라미터의 최소 길이를 8 이상으로 하고 싶은데 따로 방법이 있을까요?

  • tdd
  • node.js
  • rest-api
  • javascript
  • express
  • docker
  • nestjs
  • nodejs
  • NestJS
ZZAMBA 댓글 1 좋아요 0 조회수 426

안녕하세요 리뷰복습하다가, 발견했습니다

미해결

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

최근에 다시 자바스크립트로 돌리면서, 기존에 파이썬으로 했던 것들 다시 모두 자바스크립트로 풀어보면서 문제 풀어보니, 발견했습니다. 이거 첫번째 가정을, 그리디로 접근하면 해결 안되는 문제인것같습니다. 이후 가정들은 당연히 그리디 관념으로 최적값 찾을 수 있는데, 첫번째 가정부터 그리디로 접근하면 해결되는 문제가 아니라서 어긋나기때문에, 그리디관념이 통하지 않는 문제인것같습니다. 완전탐색해버리거나, 시간 더 줄이려면 백트래킹 가지치기 해야하는 문제인것같습니다. 입력입니다! 7 172 67 183 65 179 61 178 62 177 63 170 72 181 60 기존 풀이(무조건 183선발) 가 내주는 답 : 3 감독 현수가 원할 것 같은 답 : 6 그리디로 가장 키 큰 사람 무조건 선발하는 과정이 풀이에서 오류인것같습니다. 183 선발 가정하고 cnt 값 구하고, 그다음 181 선발 가정하고 cnt값 구하고, 쭉 다음 순으로 선발 가정하고 cnt값 구하는데, 만약 어떤 사람 선발 가정하고 cnt값 구하는데 남은 사람 수 다 합해도 기존 Max cnt보다 적을 경우, 백트레킹 가지치기로 break 혹은 return 끊어버리는게 맞는것같습니다. 풀이1. 이중포문 const input = require("fs") .readFileSync("input.txt") .toString() .trim() .split("\n"); const n = parseInt(input[0]); const arr = Array.from(Array(5), () => []); for (let i = 0; i < n; i++) { arr[i] = Array.from(input[i + 1].trim().split(" ")).map((v) => parseInt(v)); } function solution(n, arr) { arr.sort((a, b) => b[0] - a[0]); let cnt = 0; let largest = 0; let res = 0; for (let i = 0; i < n; i++) { largest = arr[i][1]; cnt += 1; if (res >= n - i) { break; } for (let j = i + 1; j < n; j++) { if (arr[j][1] > largest) { largest = arr[j][1]; cnt += 1; } } res = Math.max(res, cnt); cnt = 0; } console.log(res); } solution(n, arr); 풀이2. DFS const input = require("fs") .readFileSync("input.txt") .toString() .trim() .split("\n"); const n = parseInt(input[0]); const arr = Array.from(Array(5), () => []); for (let i = 0; i < n; i++) { arr[i] = Array.from(input[i + 1].trim().split(" ")).map((v) => parseInt(v)); } let cnt = 0; let res = 0; //const list = []; function DFS(s, weight) { if (s < 0) return; if (cnt + n - s <= res) { cnt -= 1; s -= 1; return; } for (let i = s; i < n; i++) { if (arr[i][1] > weight) { cnt += 1; //list.push(arr[i][1]); DFS(i + 1, arr[i][1]); //list.pop(); } } res = Math.max(res, cnt); //console.log(list); cnt -= 1; } function solution(n, arr) { arr.sort((a, b) => b[0] - a[0]); DFS(0, 0); console.log(res); } solution(n, arr);

  • 코딩-테스트
  • python
  • 코테 준비 같이 해요!
ncprog1 댓글 2 좋아요 1 조회수 456

안녕하세요 강의를 따라가던 중 한 번의 이벤트임에도 두 번이 발생합니다.

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

위에 이미지처럼 클라이언트에서 emit을 발생시켰을 때 서버에서 2번이 찍히고, username을 클라이언트로 전달해줄 때도, 클라이언트에서 2번이 찍힙니다. afterInit()함수 내부의 로거도 두번 작동하는데 왜 이럴까요?

  • node.js
  • mongodb
  • express
  • nodejs
  • nestjs
  • ssr
  • NestJS
TTAE TTAE 댓글 1 좋아요 1 조회수 524

액세스토큰을 변수로 저장하면 생기는 문제점

해결됨

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

안녕하세요. 강의중에 액세스토큰을 변수로 req.header에 저장하면 아래와 같이 3가지 문제점이 있다는 것을 구글링을 통해서 확인했습니다. 1.보안: 액세스토큰을 req.header에 변수로서의 토큰은 공격자에 의해 가로채기에 취약합니다. 2.확장성: 애플리케이션에 많은 수의 요청이 있는 경우 req.header 의 변수는 크기가 커지고 성능 문제가 발생할 수 있습니다. 3.지속성: req.header 에 액세스 토큰을 저장하는 것은 영구적이지 않습니다. 사용자가 페이지를 새로 고치거나 브라우저를 닫으면 액세스 토큰이 손실됩니다. 이로 인해 사용자가 보호된 리소스 에 액세스하기 위해 다시 로그인해야 할 수 있습니다. 질문1) 3번 지속성문제의 경우, 브라우저를 새로고침하게 되면, 액세스 토큰이 사라지게 되니 오히려 보안이 좋다고 생각해야 할까요? accessToken이 수업에서는 10분으 로 만료기간을 설정했는데, restoreAccessToken API가 있기 때문에 acessToken을 req.header에 변수로 저장해도 문제가 되지 않을까요? 질문2) 액세스토큰 만료시간을 10분 ~30분 으로 짧게 잡으신 이유가 1번 문제점 보안의 이유라고 생각하면 될까요? 질문3) 선생님, 좋은 강의 해주셔서 진심으로 감사합니다. 저는 선생님의 백엔드와 프론트 강의를 수강후 실제 웹 서비스를 런칭하기위해서 수업을 듣고 있습니다. 현재는 백엔드 강의를 수강중입니다. 실제 웹 서비스런칭시 accessToken을 req.header에 변수로서 저장하고, refreshToken은 쿠키에 저장하는 게 올바른 방법인가요? refreshToken을 수업에서 가르쳐주신 대로 secure : true, httponly: true와 같이 배포환경으로 바꿔서 배포하게 된다면 보안상 안전할까요? 질문4) 구글링을 해보니, 리프레시 토큰을 Redis에 저장하고, 액세스토큰은 쿠키에 저장하는 방법도 있는 것을 확인했습니다. 액세스토큰의 만료기간을 10분으로 잡고, 리프레시토큰의 만료기간을 2주로 잡을 경우, restoreRefreshToken API 때문에 Redis DB에 자주 접속하게 되어서 DB 사용료가 많이 청구 되지는 않을까요? 서버를 stateless 상태로 웹 서비스를 런칭하기 위해서는 액세스토큰과 리프레시 토큰을 어떻게 저장해야 할까요? 가장 안전한 방법이라고 할 수 있을까요? 감사합니다.

  • NestJS
  • node.js
  • express
  • docker
  • rest-api
  • nodejs
  • rest-api
  • javascript
  • nestjs
  • tdd
LI 댓글 1 좋아요 0 조회수 868

로드맵상 다음강의? 크롤링? 퀀트1?

해결됨

문과생도, 비전공자도, 누구나 배울 수 있는 파이썬(Python)!

안녕하세요.. 멋지고 깔끔한 강의 덕분에 2주만에 완강했습니다! 좋은 강의 준비해주셔서 감사합니다. 로드맵상 다음강의가 퀀트part1 으로 되어 있는데, 크롤링을 모르고 가도 상관이 없을까요? 아니면 크롤링 강의 먼저 듣고 가는게 나을까요?

  • python
wk 댓글 1 좋아요 0 조회수 272

GqlExecutionContext가 없다고 나옵니다.

해결됨

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

import { GqlExecutionContext } from '@nestjs/graphql'; @nestjs/graphql 모둘에 내보낸 맴버 GqlExecutionContext가 없다고 에러가 뜹니다

  • node.js
  • nodejs
  • tdd
  • docker
  • rest-api
  • express
  • javascript
  • nestjs
  • NestJS
Han Lee 댓글 1 좋아요 0 조회수 303

npm run start:dev 실행 시 에러..

해결됨

탄탄한 백엔드 NestJS, 기초부터 심화까지

안녕하세요 현재 수강중입니다.. 계속해서 에러가 발생하네요.. 지치네요.......ㅠㅠㅠ 똑같이 한거같은데 다음과 같은 에러가 발생합니다.. 무엇이 문제일까요??

  • node.js
  • ssr
  • NestJS
  • nodejs
  • nestjs
  • mongodb
  • ssr
  • express
평범한 사슴 댓글 1 좋아요 0 조회수 697

JWT 토큰이 어디 저장되어 있는 건가요?

해결됨

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

인증을 하면 JWT 액세스 토큰을 전달 받고, fetchUser의 header에 전달 받은 토큰을 넘겨 인가를 받는다는 것을 알았습니다. 이 때, JWT 토큰에 대해 서버가 알고 있어야 하는데 이것이 어디에 저장되어 있는 건가요?

  • NestJS
  • node.js
  • tdd
  • rest-api
  • nodejs
  • javascript
  • nestjs
  • docker
  • express
ZZAMBA 댓글 1 좋아요 0 조회수 644

jsconfig 오류 질문입니다!

해결됨

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

{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } keonhongkoo@keonhongui-MacBookAir frontend % yarn start yarn run v1.22.19 $ react-scripts start node:internal/modules/cjs/loader:1325 throw err; ^ SyntaxError: /Users/keonhongkoo/Desktop/instagram/frontend/jsconfig.json: Unexpected token / in JSON at position 75 at parse (<anonymous>) at Module._extensions..json (node:internal/modules/cjs/loader:1322:39) at Module.load (node:internal/modules/cjs/loader:1117:32) at Module._load (node:internal/modules/cjs/loader:958:12) at Module.require (node:internal/modules/cjs/loader:1141:19) at require (node:internal/modules/cjs/helpers:110:18) at getModules (/Users/keonhongkoo/Desktop/instagram/frontend/node_modules/react-scripts/config/modules.js:126:14) at Object.<anonymous> (/Users/keonhongkoo/Desktop/instagram/frontend/node_modules/react-scripts/config/modules.js:142:18) at Module._compile (node:internal/modules/cjs/loader:1254:14) at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) Node.js v18.14.1 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 이렇게 결과가 출력되는데 해결책이 안보이네요... vscode도 재시작해봤습니다ㅠ

  • docker
  • python
  • react
  • django
꺼넝 댓글 1 좋아요 0 조회수 811

강의별 전체 코드 git으로 받아볼 수 있을까요?

해결됨

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

안녕하세요 선생님께서 강의하시는 강의별 전체 코드를 받아볼 수 있는 git 주소가 있을까요? 전체 정답 코드를 보지 못하고 따라하다보니 에러가 많이 나서 선생님 것으로 확인해보고자 합니다. 그럼 답변 기다리겠습니다. 감사합니다.

  • node.js
  • nodejs
  • tdd
  • docker
  • express
  • javascript
  • nestjs
  • rest-api
  • NestJS
LI 댓글 1 좋아요 1 조회수 363

products.service.ts 의 update 함수에 대한 질문입니다.

해결됨

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

id 값은 myproduct 안에 이미 있는데 newProduct 에 id: productId 이렇게 넣어주는 이유가 있나요? 45번째 줄을 주석 처리해도 차이 없이 작동하더라구요.

  • node.js
  • nestjs
  • tdd
  • javascript
  • docker
  • nodejs
  • express
  • rest-api
  • NestJS
alice 댓글 1 좋아요 0 조회수 298

socket.io 채팅이 안써져요(안보내져요)

미해결

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

socket.io가 프론트하고 백엔드하고 연결이 되었는지 궁금합니다. 각각의 서버 구동은 프론트는 inflearn/project/sleact/front 에서 npm run dev 로 실행하고 있고, 백엔드는 개인적인 폴더를 하나 파서 아래와 같이 서버를 npm run start:dev 로구동하고 있습니다. 프론트 서버 : 3090 백엔드서버 : 3095 socket.io를 이용해서 채팅을 구현해보려 하는 도중 테스트 해보는데 채팅이 안보내집니다. 아래의 사진과 같이 '123' 이라는 채팅을 치고 엔터를 누르면 그대로 있습니다. 개발자 도구를 키고 Network탭 부분에 나온 스샷 개발자도구 console.log 창 스샷 백엔드 websocket.io 설치버전 프론트 웹소켓 설치버전

  • node.js
  • express
  • nodejs
  • nestjs
  • typeorm
  • TypeORM
  • NestJS
darby 댓글 1 좋아요 0 조회수 783

질문드립니다.

미해결

남박사의 파이썬 기초부터 실전 100% 활용

사용자 입력 예외처리를 하고 있는데, 1)문자 입력 시 오류 2)3자리 숫자가 아닐 경우 오류 다음과 같이 코드를 짰는데 1)의 경우 except 부분에서 "입력 오류"를 출력하지만 2)의 경우 "입력오류"가 출력되지 않고 그냥 재입력하게 되네요. 혹시 이유를 알 수 있나요? 또한 문자 입력 시 "숫자만 입력 가능합니다"를 출력 두자리수 입력 시 "세 자리 수를 입력하세요"를 출력 하도록 하려면 코드를 어떻게 수정해야 할까요? 감사합니다.! #세 자리 숫자만 입력할 수 있게 하는 함수 def input_check(msg, casting = int): while True: try: num = input(msg) # 사용자 입력 num_str = str(num) #맨 앞의 수가 0일경우 0이 잘려버리기 때문에 str을 따로 저장 if(casting(num) and len(num) == 3): return num_str except: print("입력 오류") continue

  • 웹-크롤링
  • 웹-크롤링
  • python
Poki 댓글 2 좋아요 1 조회수 404

아나콘다 버전 관련 문의 드립니다~!

미해결

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

안녕하세요~! 아나콘다를 설치하면서 두가지 정도 질문이 있습니다 1) 2023.02.22날짜로 아나콘다 최신판을 설치하는데 그림과 같이 옵션사항에 환경변수 체크가 되지 않습니다 ㅠㅠ 업데이트 되면서 바뀐것인지 아나콘다 최신판에서 이 옵션을 선택하지 않아도 괜찮을까요?? 2) 2023.02.22날짜로 아나콘다 최신판에서는 파이썬 버전이 3.9버전인데 파이썬 공식버전으로는 3.11까지 배포가 되었습니다 버전 차이가 많이 나도 아나콘다를 설치하는게 사용에 더 편리할까요??

  • python
  • django
  • docker
  • react
서성길 댓글 3 좋아요 0 조회수 1297

강의에서 배운 상품 CRUD를 RESTAPI 로 바꾸기

해결됨

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

강의에서 배운 상품 CRUD를 RESTAPI로 바꿔보고 싶은데, 이게 해볼만한 시도일까요? 참조할만한 자료가 있을까요?

  • express
  • node.js
  • tdd
  • javascript
  • nodejs
  • rest-api
  • nestjs
  • docker
  • NestJS
LI 댓글 1 좋아요 0 조회수 289

인기 태그

인프런 TOP Writers

주간 인기글