안녕하세요 제로초님틱택토 2강 중에 클릭 이벤트 부분 진행 중 질문 드립니다저는 https://playcode.io/ 라는 온라인 에디터에서 공부 중인데요 여기 환경에서 ESLint Warning 이 떠서 문의드립니다.const elemTable = document.createElement('table'); let turn = 'O'; for (let i = 0; i < 3; i++) { const elemTr = document.createElement('tr'); for (let i = 0; i < 3; i++) { const elemTd = document.createElement('td'); elemTd.addEventListener('click', (e) => { // ESLint Warning if (e.currentTarget.textContent) return; // ESLint Warning e.currentTarget.textContent = turn; // ESLint Warning turn === 'O' ? turn = 'X' : turn = 'O'; // ESLint Warning }) // ESLint Warning elemTr.insertAdjacentElement('beforeend', elemTd); } elemTable.insertAdjacentElement('beforeend', elemTr); } document.body.insertAdjacentElement('afterbegin', elemTable);'Function declared in a loop contains unsafe references to variable' -> 루프에서 선언된 함수에 변수에 대한 안전하지 않은 참조가 포함된다.라는 내용이라고 하는데 위 내용을 구글링 해보면 반복분 for에서 var 대신 let은 쓰면 해결된다는 내용뿐이라(이미 let 사용중) 어떤 부분이 원인인지 잘 모르겠어서요. 코드는 잘 실행됩니다저는 삼항연산자를 썼지만 강의 내용대로 if문을 써도 동일한 ESLint Warning이 나오고 있습니다.배포된 페이지도 공유드립니다.https://1710512.playcode.io/

위 예제에서 value의 타입이 string 혹은 number가 아니라 any인 이유가 궁금합니당..

안녕하세요, 젯브레인 사용중이라 혹시 도움될까싶어 글 남겨요.버전에 따라 조금씩 다를지 모르겟는데, 우측 상단에Current File > Edit Configurations... 클릭 Run/Debug Configurations 화면에서+ 또는 Add new... 클릭NodeJS 선택 후 Name은 Debug로 입력 그리고 아래 Configuration 탭에서 Node Parameters: node_modules/@nestjs/cli/bin/nest.js start --debug --watchJavascript File: src/main.ts그리고 Apply, OK 로 설정 완료 후 처음 Current File 부분이 Debug로 변경되어있는것 확인 후, 우측 실행버튼 클릭그러면 하단에 실행 화면이 나오는데, 스크롤 위로 올려보면 ws://127.0.0.1:..../aaaa-bbbb-cccc-dddd 링크 클릭 > Threads & Variables 탭 누르면나머진 강의하고 똑같이 나오니 강의 설명으로 참고하시면 돼요

import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Board from "./common/Board"; import Login from "./component/Login"; import { useEffect } from "react"; function App() { useEffect(() => console.log("app is loading"), []); return ( <BrowserRouter> <Routes> <Route path="/login" element={<Login />}></Route> <Route path="/board/:boardId/page/:page" element={<Board />}></Route> <Route path="/board/:boardId/new" element={<Board />}></Route> <Route path="/board/:boardId/post/:postId" element={<Board />}></Route> <Route path="/board/:boardId/post/:postId/edit" element={<Board />} ></Route> </Routes> </BrowserRouter> ); } export default App;  import React, { useEffect, useState, useContext } from "react"; import { useNavigate, useParams } from "react-router-dom"; // useParams를 import import BoardList from "../component/BoardList"; import BoardEdit from "../component/BoardEdit"; import BoardView from "../component/BoardView"; import Layout from "../layout/Layout"; import axios from "axios"; import { TokenProcess } from "../common/TokenProcess"; export const BbsSettingContext = React.createContext(); const Board = () => { const { boardId, postId, page } = useParams(); // const [currentUrl, setCurrentUrl] = useState(null); const [boardSettData, setBoardSettData] = useState(null); const navigate = useNavigate(); useEffect(() => { console.log("board:::::::::::::::::"); const fetchData = async () => { const access_token = localStorage.getItem("Authorization"); try { const response = await axios.get( `http://localhost:8080/api/board/${boardId}`, { headers: { Authorization: `Bearer ${access_token}`, }, } ); setBoardSettData(response.data.returnData.board); let mode = ""; if ( window.location.pathname.split("/")[3] == "page" && window.location.pathname.split("/")[5] == null ) { mode = "page"; } else if ( window.location.pathname.split("/")[3] == "post" && window.location.pathname.split("/")[5] == null ) { mode = "view"; } else if (window.location.pathname.split("/")[5] == "new") { mode = "new"; } else if (window.location.pathname.split("/")[5] == "edit") { mode = "edit"; } else { mode = ""; } setCurrentUrl(mode); console.log("모드" + mode); } catch (error) { console.log(error); if ( error.response.status == 401 && error.response.data.data == "EXPIRE_TOKEN" ) { (await TokenProcess()) ? fetchData() : navigate("/login"); } else { console.log(error); return false; } } }; fetchData(); }, [window.location.pathname]); return ( <BbsSettingContext.Provider value={boardSettData}> {currentUrl == "page" ? ( <Layout> <BoardList boardId={boardId} page={page} /> </Layout> ) : currentUrl == "new" ? ( <Layout> <BoardEdit /> </Layout> ) : currentUrl == "edit" ? ( <Layout> <BoardEdit boardId={boardId} postId={postId} /> </Layout> ) : currentUrl == "view" ? ( <Layout> <BoardView boardId={boardId} postId={postId} /> </Layout> ) : null} </BbsSettingContext.Provider> ); }; export default Board; 아래는 상세 보기입니다.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"; import { TokenProcess } from "../common/TokenProcess"; const BoardView = ({ postId }) => { const titleInputRef = useRef(); const contentsAreaRef = useRef(); const toastEditorRef = useRef(); // ToastEditor의 ref const navigate = useNavigate(); const [post, setPost] = useState({ postId: "", postTitle: "", postContent: "", 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(() => { console.log("view>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"); if (boardSetData) { setBoardSetting(boardSetData); const access_token = localStorage.getItem("Authorization"); const fetchData = async () => { try { const response = await axios.get( `http://localhost:8080/api/board/${boardSetData.boardId}/post/${postId}`, { headers: { Authorization: `Bearer ${access_token}`, }, } ); console.log(response.data.returnData); setPost({ postId: response.data.returnData.postId, postTitle: response.data.returnData.postTitle, postContent: response.data.returnData.postContent, regDate: response.data.returnData.regDate, }); } catch (error) { console.log(error); if ( error.response.status == 401 && error.response.data.data == "EXPIRE_TOKEN" ) { (await TokenProcess()) ? fetchData() : navigate("/login"); } else { console.log(error); return false; } } }; fetchData(); } }, [boardSetData, postId]); const editBoard = async () => { navigate(`/board/${boardSetting.boardId}/post/${postId}/edit`); }; return ( <div className="BoardView"> <div className="upInfoArea"> <div type="text" name="boardTitle" className="titleDiv"> {post.postTitle} </div> <div type="text" name="regId" className="regIdDIv"> {formatDate(post.regDate)} </div> </div> <div className="contentArea"> <div className="contentsText">{post.postContent}</div> </div> <section> <div className="btnArea"> <MyButton text={"리스트이동"} onClick={() => Navigate(-1)} /> <MyButton text={"수정하기"} type="positive" onClick={editBoard} /> </div> </section> </div> ); }; export default BoardView;  리스트이동이라는 버튼을 누르면 바로 이동을 하는데브라우저에서 <- 뒤로가기 버튼을 누르면 갑자기 BoardView의 useEffect를 타는데 이유를 모르겠습니다 .어떻게 해야될까요. .. 

 const showBall = (number, $target) => { const $ball = document.createElement('div'); $ball.className = 'ball'; $ball.textContent = number; $target.appendChild($ball); }; for (let i = 0; i < 6; i++) { setTimeout(() => { showBall(winBalls[i], $result); }, 1000 * (i + 1)); } setTimeout(() => { showBall(bonus, $bonus); }, 7000);

1. 사용자에게 로또번호 받기(form태그로 구현) 2. checkInput을 통해 입력값 통제 1. 2 자릿수까지만 입력 2. 숫자만 입력 3. 이미 입력한 숫자는 재사용 불가 4. 빈 값 입력 불가 3. 사용자 입력이 끝나면 classList를 통해 form 부분을 사라지게 만들었습니다.  4. 사용자 입력번호와 랜덤으로 추출한 번호가 일치하는지 구현 1. winningLottoNumber(보너스 번호를 제외하고 일치하는 번호가 있는지) 변수를 통해 카운트 2. winningLottoBonusNumber(보너스 번호) 변수를 통해 카운트 => 여기서 includes를 써도 카운트가 안됐습니다. 찾아본 결과 includes는 형까지 똑같아야 true로 나와서 형 변환 후 검증했습니다. 5. 랜덤 로또 번호가 다 나온 후 결과가 나오게 setTimout을 9초로 설정했습니다!혹시나 이상한 부분이나 고쳐야 할 부분이 있는지 문의 드립니다 ㅠㅠ 코드가 길어서 깃허브 주소 첨부 했습니다~!감사합니다.https://github.com/diderot7/JS-PRACTICE/blob/main/lotto.html   

해당 강의에서 예로 들어주신 부분 코드를 가져와 보면async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonResponse = await rawResponse.json(); console.log(jsonResponse); } getData();위 코드를 예로 들어 주셨는데요 여기서 질문이 있는데async 내부에서 await은 비동기를 동기적으로 실행하게 하는 거라고 해주셨는데요그러면 위 코드에서 async await 자체를 쓸 필요가 없는거 아닌가 하는 궁금증이 들었는데요혹시 말씀해주신 '비동기를 동기적으로 실행하게 한다' 라는게 해당 함수 내부에서만을 말씀해주신 걸까요??제가 이해한게 맞나 확인 부탁드립니다.코드를 실행 하면 차례대로 한줄씩 실행된다.getDate함수를 호출하는 코드가 실행되면 코드의 실행 순서는 getDate함수로 이동한다.getDate함수 내부의 await을 만나면 거기서 getDate함수의 실행은 멈춘다.getDate함수의 await 작업이 끝날 때까지 getDate함수는 실행을 멈추고 실행은 다시 전체 코드에서 getDate함수를 호출한 부분 이후의 코드가 실행된다.await 작업이 끝나면 실행은 다시 getDate함수 내부의 await 이후 코드가 실행되고 getDate 함수의 실행이 끝나면 다시 실행은 이전까지 실행했던 부분이후로 넘어간다라고 이해 했는데요... 이게 맞을까요??아! 그리고 비동기 함수가 넘어가는 부분도 자바스크립트 처럼 싱글쓰레드라 비동기 함수들을 하나씩 처리하나요?? 아니면 비동기 작업을 처리하는 부분은 멀티쓰레드 형식이라 동시에 비동기작업을 처리하는것이 가능한가요??

영상 : [손쉬운 조작 OrbitControls] 에서 three의 경로 설정 중 THREE.WebGLRenderer: WebGL 1 support was deprecated in r153 and will be removed in r163WebGL 1 지원은 r153에서 사용 중단되었으며 r163에서 제거될 예정입니다.라는 메세지가 나왔습니다. 질문 : 이게 나중에는 오류가 날 수 있다는 뜻인가요? 맞다면 어떻게 대비를 해야 하는지 궁금합니다.

퀴즈 답안지는 따로 제공되지 않나요?

function solution(arr) { let answer = Array.from({ length: arr.length }, () => 0); let rank = 1, max = Number.MAX_SAFE_INTEGER; for (let i = 1; i <= arr.length; i++) { let idx = arr.findIndex((val) => val === Math.max(...arr)); if (arr[idx] === max) { // 동점자이면 answer[idx] = rank; } else { answer[idx] = i; rank = i; } max = arr[idx]; arr[idx] = -1; } return answer; } let arr = [87, 89, 92, 100, 76]; let arr2 = [20, 20, 20, 10, 50, 15]; console.log(solution(arr)); 저 혼자 풀었을 때 이중 for문이 아닌 위와 같이 풀었는데 혹시 이렇게 풀어도 되는걸까요?

안녕하세요.아래 두가지 어노테이션 차이가 궁금합니다.@Column({select: false}) password@Exclude() password차이가 뭔가요?둘중 어느것을 써도 find() 에서 password 를 숨겨지는거같은데 용도 차이가 궁금합니다.

NestJS 공식문서에 강의대로 여러가지 Mapped types들이 있더라고요.https://docs.nestjs.com/openapi/mapped-types#pick 강의에서는 PickType(UsersModel, [ 'nickname', 'email', 'password', ]) {이렇게 사용 되는데PickType(CreateCatDto, ['age'] as const)공식 문서에서는 as const 이게 붙더라고요 무슨 차이가 있는 걸까요?

강의를 보고 나니 Restful한 api를 설계 하기 위해선Profile 에 해당하는 프로퍼티가name: string;age: number;address: string;있을때 1. patch[client 요청]{ name: 'codefactory', age: 98000, address: '판교'}프로퍼티를 전체 수정 또는 생성 한다. 해당 resource id값에 해당하는 데이터가 없으면 에러를 던지지 않고 새로 생성한다.모든 프로퍼티를 기입 해야하고 전체 수정이 발생하거나 새로 생성 된다.2. patch[client 요청]{ name: 'codefactory2',}수정 하고자 하는 프로퍼티만 기입해당 resource id값에 해당하는 데이터가 없으면 찾을 수 없다는 error를 던져준다.  제가 이해한것을 정리 해보았고, 궁금한점을 한가지 질문을 적어 보자면그렇다면 만약, 모든 프로퍼티를 보내지만, 데이터가 없을때 새로 생성하지 않고 에러를 던지는 api가 필요하면 이것은 put인가요 patch 일까요?

java와 spring을 공부 할때 당시에 사용 했던게 Annotation이라는 용어를 사용 했던걸로 기억합니다.(@Controller, @Service 등) 근데 typescript와 Nestjs를 검색 해보니까 Annotation이라는 용어보다는 Decorator라는 용어로 많이 사용하는것 같던데 Annotation vs Decorator가 같은거라고 보면 될까요?

강의 너무 잘 보고 배우고 있습니다!! 감사합니다 🙂 카드를 한장이 아니라 여러 장이 나오게 만들고 싶어서 혼자 코드를 수정해봤는데요 key 값이 없어서 오류가 난다고 하는데요 1-1.이 상태에서는 어떻게 key값을 넣어줘야 할까요?1-2. 다른 방법은 없을까요? import Card from "./Card"; const names = [ { id: 1, name: "학생 1", comment: "리액트 공부중입니다" }, { id:2, name: "학생 2", comment: "리액트 공부중임니댜" } ] function ProfileCard(props) { <div> {names.map((name) => { return ( <Card title={name.name} backgroundColor="#B57EDC" comment={name.comment} /> ) })}; </div> } export default ProfileCard;

Client 에서 Refresh Token 을 localStorage 보다는 cookie 에 저장을 하는게 보안에 더 좋다는 이야기를 들었는데요. 만약에 구현을 하려고 하면 강의에서처럼 로그인 했을때 accessToken 과 refreshToken 을 함께 보내는게 아니라 이런식으로 보내면 될까요?res.cookie( 'refreshToken', refreshToken, { httpOnly: true, secure: true, sameSite: 'strict' }); return {accessToken: '엑세스 토큰'};배포 과정과 강의를 담은 Part 2는 언제 나올까요? 

sort 함수의 예시에서[1, 9, 7, 5, 3] 을 내부적으로 비교하게 될 텐데비교하는 순서가1, 91, 71, 51, 3 다 비교한 후에9, 79, 59, 3이런 식으로 순차적으로 비교하나요?

안녕하세요 강사님, 섹션 4 장고 개발 준비에서 .idea파일을 ignore에 적으라고 하셨는데, 제 맥북에는 .idea파일이 없는데 그럼 그냥 무시하고 진행하면 되는 걸까요? (이전단계는 강사님이 하신대로 똑같이 따라 했습니다.)

 현재 [섹션0]까지 수강 완료하였습니다.index.html 파일 실행 시 이렇게 CORS 문제가 발생됩니다.어떻게 해결할 수 있을까요?ㅠㅠ

안녕하세요.토큰시스템을 사용하도록 엔드포인트 변경하기 편을 보고 질문드립니다.보통 login api 라고 하면 token 없이 email, pw 만 받아 validation 하는 것을 목적으로 한다고 알고있는데기획에 따라 헤더의 authorization 필드를 사용한 token 로그인도 해야할 수 있다고 하셔서 궁금한점이 생겼습니다.어떤 경우에 그런 상황이 있는지 대략적인 케이스를 소개해주실수있을까요?강의 잘 보고있습니다. 감사합니다.