정환님 안녕하세요.질문이 있습니다.DiaryEditor 컴포넌트로 onCreate, onEdit 함수를 전달하여일기를 생성, 수정 하는데요.이때, 일기 생성 후, 일기를 수정 하면 수정된 일기 + 수정된 일기가 1개 더 추가 생성이 되는 에러가 발생하여서요.어떤 부분이 문제인지 짐작이 안갑니다. ㅠㅠ아래 코드 캡쳐본 첨부드립니다.답변주시면 감사하겠습니다.그리고 강의 잘 듣고있습니다. 좋은 강의 감사합니다 :) App 컴포넌트Edit 컴포넌트DiaryEditor 컴포넌트

안녕하세요 🙂React 첫 인강을 소플님의 강의로 시작했습니다.소플님의 인강을 들으면서 유튜브에 올라오는 React 사이드 프로젝트들을 따라하고 있는데 component관련에서 궁금한 사항이 생겨서 늦게나마 질문을 올립니다.  예시) Main component 안에 Button // List // Write 3개의 component가 있다고 가정한다면소플님은 먼저 3개의 작은 component들을 만들고 조합하여 Main component를 완성한다고 말씀하셨습니다.(재사용성 떄문)그런데 어떤분들은 먼저 Main component에서 3개의 작은 component 내용들을 전부다 쓰고 마지막에 3개를 분리하여 각각 해당 component들에 나눠담으시던데  먼저 큰 컴포넌트를 레이아웃을 구성해서 작은 컴포넌트에 나눠 담는게 맞는건지작은 컴포넌트들을 조합해서 큰 컴포넌트를 만드는게 맞는건지 알 수 있을까요? React 처음으로 완강했는데 너무 유익한 강의였습니다 감사합니다:) 

다음 영상이 git 실습이 되어야할 것 같은데 혹시 동영상은 따로 없는 걸까요?

  이 부분에서 if문 들어가기 전 targetId는 uuid로 나옵니다. listsIds는 doing, todo이런 리스트들만 있구요. includes를 해도 해당 targetId인 uuid 값이 listsId에 없어 if문이 넘어갈거 같은데 들어간다는게 이해가 안됩니다.  

main.js, store.js 등에서도 vuex랑 연결 잘되있는데removeOneItems랑 toggleOneItems 클릭시 저런 애러가 뜸니다 addOneItems은 잘되는데

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], ]) );코드 피드백 해주시면 정말 감사하고 아니여도 괜찮습니다!