import React, { useState, useEffect, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import { BbsSettingContext } from "../common/Board"; import ToastEditor from "../component/ToastEditor"; import MyButton from "../common/ComButton"; const BoardView = ({ postId }) => { const titleInputRef = useRef(); const contentsAreaRef = useRef(); const toastEditorRef = useRef(); // ToastEditor의 ref const [post, setPost] = useState({ nttSj: "", nttCn: "", regDate: "", }); const [boardSetting, setBoardSetting] = useState(null); const boardSetData = useContext(BbsSettingContext); const Navigate = useNavigate(); const formatDate = (timestamp) => { const date = new Date(timestamp); const options = { year: "numeric", month: "long", day: "numeric" }; return date.toLocaleDateString("ko-KR", options); }; useEffect(() => { if (boardSetData) { setBoardSetting(boardSetData); axios .get(`http://localhost:8080/board/${boardSetData.bbsId}/post/${postId}`) .then((response) => { setPost({ nttSj: response.data.post.nttSj, nttCn: response.data.post.nttCn, regDate: response.data.post.regDate, }); }) .catch((error) => console.log(error)); } }, [post]); return ( <div className="BoardView"> <div className="upInfoArea"> <div type="text" name="boardTitle" className="titleDiv"> {post.nttCn} </div> <div type="text" name="regId" className="regIdDIv"> {formatDate(post.regDate)} </div> </div> <div className="contentArea"> <div className="contentsText">{post.nttCn}</div> </div> <section> <div className="btnArea"> <MyButton text={"리스트이동"} onClick={() => Navigate(-1)} /> <MyButton text={"수정하기"} type="positive" /> </div> </section> </div> ); }; export default BoardView; 질문이 있는데 useEffect에서 [post]로 하면 무한 루프가 돌고 저런식으로 [boardSetData,post.postId,post.nttSj,post.nttCn] 으로 놓으면 무한루프가 돌지 않는데 이유를 알수 있을까요 ...postId는 글번호 nttSj 제목 , nttCn 제목이며 const boardSetData = useContext(BbsSettingContext);여기서 boardSetData는 게시판 셋팅 데이터 입니다 .왜 무한 루프가 도는지 알수있을까요 .게시판 셋팅 , 글제목, 글번호 글내용이 바뀌면 useEffect의 axios가 전송 되어야 하게 할려고 합니다 근데 무한 루프가 도네요 ...

강의 커리큘럼에서추가 섹션 부분은 어떻게 이해하면 될까요?갑자기 다른 개념에 대해 강의를 듣는 기분이라 어렵게 느껴지기도 해서요

access token이 만료되었을 떄 refresh 토큰을 통해 access token을 새로 발급 받는 것은 이해가 되는데.. refresh 토큰이 만료되어서 새로운 refresh 토큰을 발급받기 위한 시점에서 만료된 refresh 토큰을 사용할 수 있는 것인가요..? 조금 헷갈리내요..

signToken(user: Pick<UsersModel, 'email' | 'id'>, isRefreshToken: boolean) { const payload = { email: user.email, sub: user.id, type: isRefreshToken ? 'refresh' : 'access', }; return this.jwtService.sign(payload, { secret: JWT_SECRET, // seconds expiresIn: isRefreshToken ? 3600 : 300, }); } async rotateToken(token: string, isRefreshToken: boolean) { const decoded = this.jwtService.verify(token, { secret: JWT_SECRET, }); if(decoded.type !== 'refresh'){ throw new UnauthorizedException('토큰 재발급은 Refresh 토큰으로만 가능합니다!'); } return this.signToken({ ...decoded, }, isRefreshToken); }토큰 생성 시 payload에서 sub에 user.id를 할당하고 있는데 재발급시 decoded 객체를 그대로 할당하면 sub 정보가 사라지지 않나요?

회사가 인터넷이 안되는 개발환경인데요. vue devtools 를 다운로드 해서 파일이동해서 설치 하고 싶은데 다운로드는 안되나요?

비동기 로직을 호출만 하고 끝나는게 아니라 결과값을 활용해야할 때 async, await를 활용해야 한다고 이해하고 있는데요. 한가지 이해가 잘 가지 않는 부분이Auth Service에서async registerWithEmail( user: Pick<UsersModel, 'nickname' | 'email' | 'password'>, ) { const hash = await bcrypt.hash(user.password, HASH_ROUNDS); const newUser = await this.usersService.createUser({ ...user, password: hash, }); return this.loginUser(newUser); }async 함수는 결국 Promise를 반환하니까Auth Controller에서@Post('/register/email') registerByEmail( @Body('nickname') nickname: string, @Body('email') email: string, @Body('password') password: string, ) { return this.authService.registerWithEmail({ nickname, email, password, }); }async, await를 사용하지 않으면 제대로 동작하지 않을 줄 알았는데 비동기 호출의 결과인 token이 잘 반환되더라구요. 혹시 이유를 알 수 있을까요?async, await를 판단하는 강사님 만의 기준이 혹시 있으신지, 그리고 굳이 async, await가 필요 없는 곳에도 사용하게되면 성능의 차이가 생기는지도 궁금합니다.

강의에서 아래처럼 코드를 넣어는데 아래처럼 player와 number가 적용되지 않습니다.제가 어디서 잘못한 것일까요?

안녕하세요.강의 덕분에 많은 것을 배우고 좀 더 nestjs에 익숙해질 수 있었습니다. 그런데 Follow Count Incremet & Decrement 작업하기 - 2 강의에서 다룬 내용이 comment count 작업과 관련한 내용이었습니다. Follow Count Incremet & Decrement 작업하기 - 1 마지막에는다음 시간에 followee count 증가 감소 내용을 다룰 것이라 하셨었거 든요.강의가 누락된 것 같습니다.참고해 주세요! ㅎ좋은 강의 감사합니다. 이어지는 강의도 많이 기대됩니다. 힘내세요!

안녕하세요. 강사님. 항상 강의 잘 보고 있습니다.AskView에서 헬퍼함수(mapGetters)를 사용한 것과 같이 NewsView에서도 동일하게 적용해보았습니다.근데, 이 후 라우팅 파트에서 router-link를 구현할 때 오류가 발생 하더라구요.원인은 비동기로 가져오는 'fetchedNews' 값이 router-link를 렌더링 하는 시점보다 늦게 응답받기 때문이라고 생각했습니다.그러던 중 router-link를 다른 방식으로 작성 하였더니 정상동작해서 질문드립니다..하기 두 방식의 차이점이 무엇인지 잘 모르겠습니다.더불어, 위와 같이 router-link의 기반데이터를 얻는 비동기 응답의 시간이 지연될 때, router-link의 생성을 같이 늦출 수는 없을까요?..[1. 오류가 났던 사용 법]<router-link class="link-text" :to="{ name: 'user', params: { id: item.user } }"> {{ item.user }} <router-link>[2. 수정된 동작한 사용법]<router-link :to="`user/${item.user}`">{{ item.user }}</router-link>

안녕하세요 강사님! 다름이 아니라, UpdatePostDto 코드 작성하는 부분에서 의문이 생겨 질문 드립니다. UpdatePostDto의 코드를 이렇게 작성을 해주셨는데, 하단에이 부분이 왜 필요한지가 이해가 되지 않습니다. PartialType(CreatePostDto)만으로도 충분히 CreatePostDto 안에 있는 프로퍼티들을 Optional 프로퍼티들로 바꾸는거 아닌가요?? 더불어 @IsString validator같은 경우에는 엔티티에서 이미 적용을 해주었기에 더욱 필요없지 않나 싶습니다!따라서 이 두 코드는 동일한 기능을 하는 코드로 생각이 되는데, 이렇게 명시적으로 작성을 하신 이유가 있으신가 해서 여쭤봅니다. 좋은 강의 감사드립니다!

질문 주실 때 항상 2가지를 지켜주세요.브라우저 화면 캡쳐해서 올ㄹ기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 커리큘럼 하단의 자료소스를 다운받았습니다.풀어서보니 퍼블소스, pc소스만 있던데 모바일웹 소스가 없습니다.어디서 다운받아야 하는지요.퍼블리싱 할때도 모바일웹 소스가 있어야 하는거 아닌가 해서요.

강좌섹션, 전진! 3D 스크롤 11(5:49) 에서 mousePos 공식 어떻게 나오게 됐는지궁금해 문의 드립니다! mousePos.x = -1 + (e.clientX / window.innerWidth) * 2;mousePos.y = 1 - (e.clientY / window.innerHeight) * 2;이왕 코드 다 작성하고 이해하는 중에,해당 부분도 이해하고 싶어 문의 드립니다 e.clientX(e.clientY) / window.innerWidth(window.innerHeight)브라우저( window.innerWidth , window.innerHeight ) 가로 세로 기준으로현재 마우스 위치(e.clientX/e.clientY)가 어디인지 구하는 수식으로 이해했습니다. mousePos.x = -1 + ..중략.. * 2; mousePos.y = 1 - ..중략.. * 2;그리고 -1과 1은 결과 반환값으로, -1과 1로 나오기 위해서 지정한 것으로 추측되구요,그 이외에- 하는 것, + 하는 것, * 2 하는 것은 어떤 이유에서 만들어진건지 궁금합니다!

강사님 안녕하세요아래의 코드를 보고 질문을 받아주시면 감사하겠습니다.type testDataType = { testNumber1:number; testNumber2:number; } const Test = () => { const [testData, setTestData] = useState<TestDataType>({ testNumber1:0, testNumber2:0 }); useEffect(()=>{ AxiosPromise로 Api를 호출하는 메서드 1({}) .then((res)=>{ const responseData = res.data; console.log("responseData"+ responseData);//8출력 setTestData({ ...testData, testNumber1: responseData }) AxiosPromise로 Api를 호출하는 메서드 2({}) .then((res)=>{ const responseData = res.data; console.log("responseData"+ responseData);//8출력 setTestData({ ...testData, testNumber2: responseData }) }, []) return (<>{`${testData.testNumber1} / ${testData.testNumber2}`}</>); }일 때, testData.testNumber1 에는 비동기로 가져온 데이터가 반영되는데testData.testNumber2 에는 비동기로 가져온 데이터가 반영이 되지 않습니다.제가 생각한 리액트 코드 순서는 이렇습니다.순서1.맨 처음 마운트 시점에 Test ()가 실행됩니다.그리고 useEffect() 가 실행됩니다.2.아직 마운트 시점입니다.useEffect() 가 AxiosPromise로 Api를 호출하는 메서드 1({})과AxiosPromise로 Api를 호출하는 메서드 2({})를 비동기로 실행합니다.이때 각각의 Axios Promise들은 각각 8이라는 데이터를 읽고useState의 setTestData() 를 실행하여testData.testNumber1에는 8testData.testNumber2에도 8이 들어갑니다.  그 다음에return (<>{`${testData.testNumber1} / ${testData.testNumber2}`}</>);가 실행됩니다.그렇게 웹페이지 UI에는8/8이 보이게 됩니다.그러나 막상 실행해보면0/88/0이 나옵니다. 그리고 그 원인이 2개의 AxiosPromise 메서드에서setTestData({...testData,testNumber1: responseData})setTestData({...testData,testNumber2: responseData})를 실행하기 때문 같습니다.그런데 조금 궁금한 게 있습니다.아무리 AxiosPromise와 UseState의 setter가 비동기 메서드라도 자바스크립트의 메모리 구조에서는태스크큐라는 줄을 서게 됩니다.그리고 호출스택이 비워지면 차례대로 호출스택으로 이동하면서 차례대로 동기적으로 실행된다고 생각합니다.즉, 저 2개의 setTestData() 도 동시에 일어나지 않고 실행 순서가 있다고 생각했습니다. 그래서 2개의 비동기 메서드가 동일한 setTestData를 호출해도 문제가 없다고 생각했습니다.제 생각의 틀린 점을 지적해주시면 감사하겠습니다.

값을 찾을 때 $elemMatch 로 감싸줘야 둘 다 해당하는 값을 찾을 수 있다고 해주셨는데요.반대로, $elemMatch 를 쓰지 않으면 or 조건으로 검색이 된다고 이해했습니다. 여기서위와 같은 필터로 값을 검색 했을 때 username 이 Henry5522 이거나, title 이 ullam esse dolorem 인 모든 값이 필터 결과로 나와야 하는게 아닌가요?

2차원 배열이라 이중 for문이 편해서 이중 for문으로 풀어 보았습니다.function solution(array) { let answer = []; let sum1 = Array.from({ length: array.length }, (v, i) => 0); let sum2 = Array.from({ length: array.length }, (v, i) => 0); let sum3 = 0; let sum4 = 0; for (let i = 0; i < array.length; i++) { for (let j = 0; j < array[i].length; j++) { sum1[i] += array[i][j]; sum2[i] += array[j][i]; if (i === j) sum3 += array[i][j]; if (i === array.length - 1 - j) sum4 += array[i][j]; } } const maxSum1 = sum1.sort((a, b) => b - a); const maxSum2 = sum2.sort((a, b) => b - a); answer.push(maxSum1[0]); answer.push(maxSum2[0]); answer.push(sum3); answer.push(sum4); return answer.sort((a, b) => b - a)[0]; } console.log( solution([ [10, 13, 10, 12, 15], [12, 39, 30, 23, 11], [11, 25, 50, 53, 15], [19, 27, 29, 37, 27], [19, 13, 30, 13, 19], ]) );코드 피드백 해주시면 정말 감사하고 아니여도 괜찮습니다!

음량이 작아지는 강의입니다. 코드팩토리 통합 링크https://links.codefactory.aiFlutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다!

await Promise.all([ comment.save(), Blog.updateOne({ _id: blogId }, { $push: { comments: comment } }), ]);위 코드에서comment.save() 는 정상적으로 동작해서 DB 에 입력이 되었지만 Blog.updateOne 은 알수 없는 오류로 실패가 떨어졌다면,데이터에 싱크가 맞지 않을 수 있을거 같은데요. comment.save 했던걸 되돌리거나 하는 처리가 있어야 할 거 같은데, 어떻게 처리할 수 있나요?

읽는 시점에 populate 부분에 대한 시간도 최소화 하기 위해서 생성하는 시점에 user 의 최소한의 데이터를 넣어주고 있는거 같은데요.이렇게 접근하면, 화면 중심으로 모델이 설계가 되는게 아닐까요?요구사항이 바뀌거나, 다른 서비스에서 해당 API 를 사용하게 되면 매번 모델을 수정하고 데이터를 마이그레이션 해야 하는 이슈가 생길 수 있을거 같은데요.어떻게 생각하시나요?

GPT API 호출, 프롬프트 연동 강의 0:24 계속해서 useState에 다음과 같은 오류가 뜹니다. import { useState } from "react";오류 사유는'useState' is declared but its value is never read. 대체 왜 해결이 안되는 것일까요..?ㅜ.ㅜ 

어찌저찌해서....연결하다보니워크벤치설치-> aws 인바운드규칙 수정 하고mysql워크벤치에서테스트 커넥션까지해서 연결되었다고 하는데ok버튼을 누르니 Improper name이라더군요.이름이 root면 안되는건가요?