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토큰을 사용중 입니다!

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 22:03 초 부분 에 cors 설치하시는데 요거는 안하셨는데 해야되는거 맞나요??저는 안하니까 오류나서 설치하라고 뜨더라구요..영상에서는 설치안했는데도 오류 안뜨는 거같아서..아님 제가 잘 못본걸 수도 있어서 알려주시면 감사드립니다!

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Rect.FC의 사용하지않고 아래와 같이해도 무방할까요???

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

학습중에 궁금한부분이 생겨서 문의드립니다제가 알기로는 docker 컨테이너를 실행해도리눅스의 경우 커널같은 코어한 부분은 쉐어한다고 알고있는데요낮은 버전의 우분투에서 도커오 높은 버전의 우분투 이미지를 돌려도 정상적으로 돌아갈까요?

init을 시도하는데 에러가 뜹니다.[init] Using Kubernetes version: v1.26.1[preflight] Running pre-flight checkserror execution phase preflight: [preflight] Some fatal errors occurred:[ERROR CRI]: container runtime is not running: output: time="2023-02-24T23:20:09+09:00" level=fatal msg="validate service connection: CRI v1 runtime API is not implemented for endpoint \"unix:///var/run/containerd/containerd.sock\": rpc error: code = Unimplemented desc = unknown service runtime.v1.RuntimeService", error: exit status 1[preflight] If you know what you are doing, you can make a check non-fatal with --ignore-preflight-errors=...To see the stack trace of this error execute with --v=5 or higher 어떻게 해결해야하나요?? 

안녕하세요. 강의중에 액세스토큰을 변수로 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 상태로 웹 서비스를 런칭하기 위해서는 액세스토큰과 리프레시 토큰을 어떻게 저장해야 할까요? 가장 안전한 방법이라고 할 수 있을까요? 감사합니다.

_app.tsxexport default function App({ Component, pageProps }: AppProps) { axios.defaults.baseURL = process.env.NEXT_PUBLIC_SERVER_BASE_URL + '/api'; axios.defaults.withCredentials = true; const { pathname } = useRouter(); const authRoutes = ['/register', '/login']; const authRoute = authRoutes.includes(pathname); return ( <AuthProvider> {!authRoute && <NavBar />} <div className={authRoute ? '' : 'pt-12'}> <Component {...pageProps} /> </div> </AuthProvider> ); } 해당 부분에서 !authRoute 논리연산자를 추가하면Error: Hydration failed because the initial UI does not match what was rendered on the server.에러가 나옵니다.강사님 파일을 클론 해서 빌드 확인해보니 이런 에러가 안나오길래, 이 강의까지의 나머지 파일도 클론한 것과 모두 같은 것을 확인했는데 왜 저만 이런 에러가 나오는걸까요?해당 에러를 구글링해서 해결책으로 나오는 것들을 적용해봤는데 어느것도 에러를 해결해주지 못했습니다ㅠ어떤 부분을 확인해보면 좋을까요? 

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

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 혹시 아래와 같이 자동완성 사용하는 거랑 같을까요??

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Eslint는 뭔지 알겠는데 밑에 3개는 처음보네요.. 업데이트 되면서 생긴건가요??마지막은 @components/* 이렇게 설정하라고 하던데 맞나요?? 무슨뜻인가요?? 구글링했습니다

lllll@172 server % npm run dev> server@1.0.0 dev> env-cmd -f .env.development nodemon --exec ts-node ./src/server.ts[nodemon] 2.0.20[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: ts,json[nodemon] starting ts-node ./src/server.ts/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:859return new TSError(diagnosticText, diagnosticCodes, diagnostics);^TSError: ⨯ Unable to compile TypeScript:src/routes/subs.ts:139:16 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.139 if (!req.file?.path) {~~~~src/routes/subs.ts:144:22 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.144 unlinkSync(req.file.path);~~~~src/routes/subs.ts:154:26 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.154 sub.imageUrn = req.file?.filename || "";~~~~src/routes/subs.ts:157:27 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.157 sub.bannerUrn = req.file?.filename || "";~~~~at createTSError (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:859:12)at reportTSError (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:863:19)at getOutput (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1077:36)at Object.compile (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1433:41)at Module.m._compile (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1617:30)at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)at Object.require.extensions.<computed> [as .ts] (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1621:12)at Module.load (node:internal/modules/cjs/loader:1117:32)at Function.Module._load (node:internal/modules/cjs/loader:958:12)at Module.require (node:internal/modules/cjs/loader:1141:19) {diagnosticCodes: [ 2339, 2339, 2339, 2339 ]}[nodemon] app crashed - waiting for file changes before starting...     client에서는 rpm run dev가 정상적으로 실행되는데 server에서는 npm run dev를 실행하면 상기와 같은 오류가 발생하네요.구글링해보니 server 디렉토리 내의 tsconfig.json 파일이 문제인 것 같은데 여러 세팅을 바꾸어보아도 해결되지않아 문의드립니다.(tsconfig.json 파일은 강사님이 올려주신 소스코드 파일과 같은 파일 사용중입니다) 

{ "compilerOptions": {"baseUrl": "src" },"include": ["src"]} keonhongkoo@keonhongui-MacBookAir frontend % yarn startyarn run v1.22.19$ react-scripts startnode: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.1error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 이렇게 결과가 출력되는데 해결책이 안보이네요... vscode도 재시작해봤습니다ㅠ

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

안녕하세요 강사님!강사님의 강의를 듣기 위하여 실습 환경을 조성하고 있는데, vagrant up 과정에서 다음과 같은 오류 메세지가 나타났습니다.The adapter to attach a forwarded port to was not found. Please verify that the given adapter is setup on the machine as a NAT interface. 해당 오류 메세지에 대하여 질문은 이미 이 질문글 https://www.inflearn.com/questions/726525/vagrant-up%EC%8B%9C-%EC%98%A4%EB%A5%98 에서 확인하였고 강사님도 "다양한 정책, 보안 설정, 기타 등을 다 고려한 답변을 해 드리기 어렵다" 고 하셔서 여기서 해결책을 찾을 수는 없었습니다.해결책을 찾던 중에 혹시 sysnet4admin/CentOS-k8s 박스 이미지의 최신 버전(0.7.4)이 현재 제 실습 환경과 충돌이 있는 것이 아닌가 하여 이전 버전(0.7.2)을 사용하였더니 구축에 성공하였습니다.이렇게 해서 문제 해결은 했는데, 혹시 이전 버전(0.7.2)의 박스 이미지를 사용해도 실습에 지장이 없을까요? 실습에 문제가 있다면 어떤 부분일지 궁금하여 질문드렸습니다![실습 환경]OS: macOS Ventura 13.1 (x86)VirtualBox: 7.0.6Vagrant: 2.3.4

안녕하세요. 대세는 쿠보네티스[초급~중급] 수강중에 있습니다.MobaXterm과 VM 연결 시, 아래와 같은 오류가 발생합니다.여기서 2가지 질문이 있습니다.질문1.위의 vm환경에서 주소, 넷마스크, 게이트웨이, dns서버를 무엇으로 입력해야 하는지 알려주실 수 있나요?현제 제 윈도우환경에서 ipconfig입력시 나온 출력화면은 아래와 같습니다(무선랜 사용중입니다)이더넷 어댑터 이더넷:미디어 상태 . . . . . . . . : 미디어 연결 끊김연결별 DNS 접미사. . . . :이더넷 어댑터 이더넷 2:연결별 DNS 접미사. . . . :링크-로컬 IPv6 주소 . . . .IPv4 주소 . . . . . . . . . : 192.168.56.1서브넷 마스크 . . . . . . . : 255.255.255.0기본 게이트웨이 . . . . . . :무선 LAN 어댑터 로컬 영역 연결* 1:미디어 상태 . . . . . . . . : 미디어 연결 끊김연결별 DNS 접미사. . . . :무선 LAN 어댑터 로컬 영역 연결* 2:미디어 상태 . . . . . . . . : 미디어 연결 끊김연결별 DNS 접미사. . . . :무선 LAN 어댑터 Wi-Fi:연결별 DNS 접미사. . . . :링크-로컬 IPv6 주소 . . . . :IPv4 주소 . . . . . . . . . : 172.30.1.81서브넷 마스크 . . . . . . . : 255.255.255.0기본 게이트웨이 . . . . . . : 172.30.1.254이더넷 어댑터 Bluetooth 네트워크 연결:미디어 상태 . . . . . . . . : 미디어 연결 끊김연결별 DNS 접미사. . . . : 질문2.MobaXterm에서 현재 강의 내용 그대로 세개가 등록 되어 있는데, 이곳 세개에는 어떤 값들이 들어가야 하나요? 감사합니다. 

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

- 여러분의 질문을 고대하고 있습니다. :-)- 질문 전에 검색을 먼저 해보세요. 사람 사는 게 다 비슷하다는 것을 알게 됩니다.- 예의는 거침없이 질문하기 위한 최고의 발명품입니다.- 100개의 설명이 스크린샷 한방 보다 못할 수 있습니다.- 코드를 첨부하면 전세계 누구나 이해할 수 있는 질문이 됩니다.- 하나의 질문에는 하나의 주제를 담아야 답변도 예리해집니다.- 시행착오를 알려주시면 곧 바로 원하는 문제에 집중할 수 있습니다. 안녕하세요. 선생님 강의 덕분에 개발공부 하는 데 있어 많은 도움을 받고 있습니다. 질문 읽고 답변 달아주셔서 정말 감사합니다.제 질문은 이렇습니다. 5분대에서 startapp 하고 migrate 명령을 쓰셨는데, 저희는 models.py 를 만지지 않았는데도 불구하고 왜 migrate를 하는 것인지 궁금합니다.- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

GCP 에 가상 머신으로 환경 만들어서 하고 있습니다.여기서 static-pod.yaml 생성 후 kubectl get pods 했을 때 에러가 나옵니다.방화벽에서 포트 오픈 해야 되나요? 그 전 시간 까지는 에러가 없이 잘 됐었습니다..확인 부탁드립니다...