섹션 2. 1, 2차원 배열 탐색 - 1번문제 앞의 숫자보다 크면 출력하는건데  let arr=[7, 3, 9, 5, 6, 12];arr이 이럴때, 7앞부분엔 아무것동 없는데 정답 출력에 왜 7이 들어가는지 잘모르겠어서요.

// Home.js import { useState, useContext, useEffect } from "react"; import { DiaryStateContext } from "../App"; import MyButton from "./../components/MyButton"; import MyHeader from "./../components/MyHeader"; import DiaryList from "./../components/DiaryList"; const Home = () => { const diaryList = useContext(DiaryStateContext); const [data, setData] = useState([]); const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; useEffect(() => { if (diaryList.length >= 1) { const firstDay = new Date( curDate.getFullYear(), curDate.getMonth(), 1 ).getTime(); const lastDay = new Date( curDate.getFullYear(), curDate.getMonth() + 1, 0 ).getTime(); setData( diaryList.filter((it) => firstDay <= it.date && it.date <= lastDay) ); } }, [diaryList, curDate]); useEffect(() => { console.log(data); }, [data]); const increaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate()) ); }; const decreaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate()) ); }; return ( <div> <MyHeader headText={headText} leftChild={<MyButton text={"<"} onClick={decreaseMonth} />} rightChild={<MyButton text={">"} onClick={increaseMonth} />} /> <DiaryList diaryList={data} /> </div> ); }; export default Home;  // DiaryList.js import { useState } from "react"; const sortOptionList = [ { value: "latest", name: "최신순" }, { value: "oldest", name: "오래된 순" }, ]; const ControlMenu = ({ value, onChange, optionList }) => { return ( <select value={value} onChange={(e) => onChange(e.target.value)}> {optionList.map((it, idx) => ( <option key={idx} value={it.value}> {it.name} </option> ))} </select> ); }; const DiaryList = ({ diaryList }) => { const [sortType, setSortType] = useState("lastest"); return ( <div> <ControlMenu value={sortType} onChange={setSortType} optionList={sortOptionList} /> {diaryList.map((it) => ( <div key={it.id}>{it.content}</div> ))} </div> ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList;  // App.js import React, { useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; const reducer = (state, action) => { let newState = []; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { const newItem = { ...action.data, }; newState = [newItem, ...state]; break; } case "REMOVE": { newState = state.filter((it) => it.id !== action.targetId); break; } case "EDIT": { newState = state.map((it) => it.id === action.data.id ? { ...action.data } : it ); break; } default: return state; } return newState; }; export const DiaryStateContext = React.createContext(); export const DiaryDispatchContext = React.createContext(); const dummyData = [ { id: 1, emotion: 1, content: "오늘의일기 1번", date: 1704809815768, }, { id: 2, emotion: 2, content: "오늘의일기 2번", date: 1704809815769, }, { id: 3, emotion: 3, content: "오늘의일기 3번", date: 1704809815770, }, { id: 4, emotion: 4, content: "오늘의일기 4번", date: 1704809815771, }, { id: 5, emotion: 5, content: "오늘의일기 5번", date: 1704809815772, }, ]; function App() { const [data, dispatch] = useReducer(reducer, dummyData); console.log(new Date().getTime()); const dataId = useRef(0); // CREATE const onCreate = (date, content, emotion) => { dispatch({ type: "CREATE", data: { id: dataId.current, date: new Date(Date).getTime(), content, emotion, }, }); dataId.current += 1; }; // REMOVE const onRemove = (targetId) => { dispatch({ type: "REMOVE", targetId }); }; // EDIT const onEdit = (targetId, date, content, emotion) => { dispatch({ type: "EDIT", data: { id: targetId, date: new Date(Date).getTime(), content, emotion, }, }); }; return ( <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}> <BrowserRouter> <div className="App"> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/edit" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> </Routes> </div> </BrowserRouter> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> ); } export default App;  해당 강의 23분경부터 계속 막힙니다. 아무리 정렬을 바꿔도 정렬이 변경되지 않아요. 따라친다고 따라쳤는데 어디가 틀린지 잘 모르겠습니다.

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.=====================================1강 부터 듣고 있는데 CodeSandBox에서 1강이 끝나고 나와 있는 링크를 따라 CodeSandbox를 연결하였는데 console.log를 찍어도 아무런 반응도 없네요.어디가 문제인가요?

안녕하세요섹션 6. 정적파일 (static files) & 미디어 파일 (media files) - 정적파일 관리하기 - 블로그 포스트 상세 페이지에 부트스트랩 적용하기 을 듣고 있습니다. 거기서 1:31 경, Bootstrap 관련 링크가 수정되었다고 알림이 뜨는데, 그 링크가 잘못되어있습니다. 그 링크를 이용하면, post list 를 카피하게 됩니다.Post detail을 이용하기 위해서는 아래 링크를 사용해야 합니다. https://github.com/StartBootstrap/startbootstrap-blog-post/tree/18e5cfdfb75bc7b06fbb8b04b7d957e0395fe8cc확인 후 수정 부탁드립니다.감사합니다.

안녕하세요, Counter 컴포넌트 호출 회수를 디버깅 하기 위해 console.log("counter 호출!"); 구문을 아래와 같이 추가해주었는데, 강사님과는 다르게 저는 처음 렌더링 될 때와 count의 상태 값이 변화할 때 마다 counter 호출이 두 번씩 일어납니다. 이유가 무엇일까요..? 아무리 생각해봐도 이유를 모르겠습니다. 위 브라우저 콘솔 사진은 최초 렌더링 되고나서 개발자도구를 켰을 때 모습입니다. 처음부터 두 번이 호출되어 있고, 그 이후에도 count의 상태를 변화시킬 때 마다 두 번씩 로그에 찍힙니다. 

 안녕하세요. 구글 로그인시 authService에 setRefreshToken 함수를 불러오면서 setHeader오류가 발생합니다. @UseGuards(GqlAuthGuard('google')) @Get('google') async socialGoogleLogin( @Req() req: Request & IOAuthUser, @Res() res: Response & IContext, ) { let user = await this.usersService.findOne({ findOneUserInput: { email: req.user.email }, }); if (!user) { user = await this.usersService.create({ createUserInput: { email: req.user.email, password: req.user.password, name: req.user.name, }, }); } await this.authService.setRefreshToken({ user, context: res, }); res.redirect('http://localhost:5500/social-login.html'); }  async setRefreshToken({ user, context }: IAuthServiceSetRefreshToken) { const refreshToken = await this.jwtService.sign( { sub: user.id }, { secret: 'coex', expiresIn: '4h' }, ); context.res.setHeader( 'set-Cookie', `refreshToken=${refreshToken}; path=/;`, ); }  @Injectable() export class JwtRefreshStrategy extends PassportStrategy(Strategy, 'refresh') { constructor() { super({ jwtFromRequest: (req) => { const cookies = req.headers.cookie; const refreshToken = cookies.replace('refreshToken=', ''); return refreshToken; }, secretOrKey: 'coex', }); } async validate(payload: any) { return { id: payload.sub }; } } front error{statusCode: 500,message: "Internal server error"}server error[Nest] 90403 - 2024. 01. 10. 오후 7:10:04 ERROR [ExceptionsHandler] Cannot read properties of undefined (reading 'setHeader')TypeError: Cannot read properties of undefined (reading 'setHeader')

 전에 했던 포트가 계속 살아있네요. 왜 그런거죠..? 나갈때 ctrl+z했는데.

window.requestAnimationFrame 에서 계속 호출을 하고 있어서 그런 것 같은데스위치를 만들어야 할까요?

안녕하세요! 강의 수강 중 궁금한 점이 생겨서 질문 드립니다.해당 부분은 8분 55초 , 15분 24초 입니다! 8분 55초 부분에서 설명하실 때 'useState의 상태변화 함수인 setState는 리렌더가 일어나도 동일한 id를 보장한다' 라고 하시는데 이게 클로저랑 연관있는 설명이 맞을까요? setState가 클로저 특성으로 이전의 상태 값을 기억해서 리렌더가 일어나도 상태 값을 기억해서 state를 바꿔주는..! 그래서 동일한 id를 보장하는게 맞을까요? 15분 24초에서는 'setEmotion에서는 emotion을 받아서 보여주고 있기 때문에 가장 최신의 state를 참조할 필요가 없다. 그래서 함수형 업데이트를 전달할 필요가 없다' 하셨는데 이 부분을 잘 이해 못했습니다..! setEmotion으로 최신의 emotion state를 받으니까 최신의 상태인 건 알겠는데 그래서 함수형 업데이트를 할 필요가 없다는 부분을 모르겠습니다.. 함수형 업데이트가 뭐죠..😥제가 이해한게 맞는지, 틀린 부분있다면 말씀해주시면 감사하겠습니다!!

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. function solution(arr) { let answer = arr; for (let i = 1; i < arr.length; i++) { for (let j = 0; j < i; j++) { if (arr[i] < arr[j]) { arr.unshift(arr[i]); arr.splice(i + 1, 1); } else { if (arr[i] < arr[j + 1]) { arr.splice(j + 1, 0, arr[i]) arr.splice(i + 1, 1) } } } } return answer; } let arr = [11, 7, 5, 6, 10, 9]; console.log(solution(arr));

이전 2문제에 비해 다소 쉬웠습니다.function solution(cards, orderNum) { let answer = []; let n = cards.length; // n개 카드수에서 3개를 더한 합의 값이 제일 큰 순서대로 나열 // k번째로 큰 수를 리턴 for (let i = 0; i < n; i++) { for (let j = 0; j < n; j++) { if (i === j) continue; for (let z = 0; z < n; z++) { if (i === z) continue; if (j === z) continue; answer.push(cards[i] + cards[j] + cards[z]); } } } answer = answer.sort((a, b) => b - a); return Array.from(new Set([...answer]))[orderNum - 1]; } const k = 3; console.log(solution([13, 15, 34, 23, 45, 65, 33, 11, 26, 42], k));

//query-runner.decorator.tsimport { ExecutionContext, InternalServerErrorException, createParamDecorator, } from '@nestjs/common'; import { QueryRunner } from 'typeorm'; export const QueryRunnerDecorator = createParamDecorator( (data: unknown, context: ExecutionContext): { qr: QueryRunner } => { const req = context.switchToHttp().getRequest(); if (!req.queryRunner) { throw new InternalServerErrorException('queryRunner가 없습니다.'); } return { qr: req.queryRunner, }; }, );  //posts.controller.ts@Post() @UseGuards(AccessTokenGuard) @UseInterceptors(TransactionInterceptoer) async postPosts( @User('id') userId: number, @Body() body: CreatePostDto, @QueryRunnerDecorator() qr: QueryRunner, ) { .... 중략 }트랜잭션을 interceptor로 관리하는것을 배워서 너무 유익하고 100점 만점의 100점 꿀팁이었습니다.https://www.npmjs.com/package/typeorm-transactional해당 라이브러리를 원래 사용 했으나, 마음에 들지 않았었는데 덕분에 interceptor로 대체 할 수 있을것 같습니다 좋은 강의 만들어 주셔서 감사합니다!

transaction interceptor을 사용할때 body field validation이 안되는 문제가 발생하여 query runner와 transaction interceptor 두코들 제외 하니 validationdl 다시 되었습니다.혹시 어떤문제인지 알수 있을까요? 

안녕하세요 제로초님 강의를 보면서 느낀게 html 코드들을 어디서 가져오는지 모르겠어서 여쭤봅니다. 2년전 답글에 링크가 있어서 링크 클릭해봤는데 없다고 뜨는데 현재는 html 코드를 못가져오고 하드코딩해야할까요?

아는 부분은 제외하고 모르는 부분만 골라서 들으려는데올려주신 깃허브 리포지토리에는 완성본만 남아있더라구요혹시 각 섹션별로 강의 파일을 받을 수 있는 링크가 있을까요?

const renderGame에서 keyMotion()까지는 작동을 하는데그 이후 forEach부분부터는 작동하지 않는것같습니다, 왜이럴까요?오타도 없고 아무이상없습니다!혹시 window.requestAnimationFrame이 너무 빨라서 bulletComProp foreach가 씹히는걸까요? ㅠㅠ... 코드 보내드립니다<game.js> const renderGame = () => { hero.keyMotion(); bulletComProp.arr.forEach((arr,i)=>{ arr.moveBullet(); }) window.requestAnimationFrame(renderGame); } <class.js> if(key.keyDown['attack']){ this.el.classList.add('attack'); bulletComProp.arr.push(new Bullet()); } class Bullet { constructor(){ this.parentNode = document.querySelector(".game"); this.el = document.createElement("div"); this.el.className = "hero_bullet"; this.x = 0; this.y = 0; this.speed = 30; this.distance = 0; this.init(); } init(){ this.x = hero.position().left + hero.size().width/2; this.y = hero.position().bottom - hero.size().height/2; this.el.style.transform = `translate(${this.x}px, ${this.y}px)`; this.parentNode.appendChild(this.el); } moveBullet(){ this.distance += this.speed; this.el.style.transform = `translate(${this.distance}px, 100)`; this.el.style.backgroundColor = 'red'; } }

<html> <head> <meta charset="UTF-8" /> <title>출력결과</title> </head> <body> <script> function solution(n, k, card) { let answer; let newArr = []; for (let i = 0; i < n; i++) { for (let j = i + 1; j < n; j++) { for (let k = j + 1; k < n; k++) { if (newArr.includes(card[i] + card[j] + card[k])) { continue; } else { newArr.push(card[i] + card[j] + card[k]); } } } } newArr.sort((a, b) => b - a); answer = newArr[k - 1]; return answer; } let arr = [1, 2, 3, 4]; console.log(solution(10, 3, arr)); </script> </body> </html>  

it('보여줄 상품 리스트가 더 있는 경우 show more 버튼이 노출되며, 버튼을 누르면 상품 리스트를 더 가져온다.', async () => { const { user } = await render(<ProductList limit={PRODUCT_PAGE_LIMIT} />); await screen.findAllByTestId('product-card'); const showMoreButton = screen.getByRole('button', { name: 'Show more', }); expect(showMoreButton).toBeInTheDocument(); await user.click(showMoreButton); expect(await screen.findAllByTestId('product-card')).toHaveLength( PRODUCT_PAGE_LIMIT * 2, ); });여기서 render 이후에 await screen.findAllByTestId('product-card'); 를 하는 이유가 있나요? 저걸 해주지 않으면 버튼이나 상품 아이템을 그리지 못하는 건 아는데... 그려지는 이유를 모르겠어서요 await로 찾을때까지 대기하는 걸로 이해하면 될까요?1. 그렇다면 render 호출 이후 요소를 찾지 않아도 되는 경우에도 await screen.findAllByTestId('product-card');를 해주어야 하는걸까요?2. 아래와 같이 하는거랑 차이가 있나요?it('보여줄 상품 리스트가 더 있는 경우 show more 버튼이 노출되며, 버튼을 누르면 상품 리스트를 더 가져온다.', async () => { const { user } = await render(<ProductList limit={PRODUCT_PAGE_LIMIT} />); const showMoreButton = await screen.findByRole('button', { name: 'Show more', }); expect(showMoreButton).toBeInTheDocument(); await user.click(showMoreButton); expect(await screen.findAllByTestId('product-card')).toHaveLength( PRODUCT_PAGE_LIMIT * 2, ); });

현재 .eslintre.js 가 오류로 범벅되고 밑줄에 커서를 대보면Delete `` eslint(prettier/prettier) 이 뜹니다..module.exports = { root: true, env: { browser: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', ], plugins: ['prettier', '@typescript-eslint'], rules: { 'prettier/prettier': [ 'error', { singleQuote: true, semi: true, useTabs: false, tabWidth: 2, printWidth: 80, bracketSpacing: true, arrowParens: 'avoid', }, ], }, parserOptions: { parser: '@typescript-eslint/parser', }, };를 정상적으로 복사 붙여넣기 했고 어느 부분에서 오류가 생긴건지 모르겠어 가지고 질문을 올립니다 ㅠㅠ 혹시 몰라 package.json 입니다.{ "devDependencies": { "@babel/core": "^7.23.7", "@babel/preset-env": "^7.23.7", "@babel/preset-typescript": "^7.23.3", "@typescript-eslint/eslint-plugin": "^6.18.0", "@typescript-eslint/parser": "^6.18.0", "eslint": "^8.56.0", "eslint-plugin-prettier": "^5.1.2", "eslint-plugin-react": "^7.33.2", "prettier": "^3.1.1", "typescript": "^5.3.3" } }  

이거 왜 이런가요ㅜㅜnpm uninstall -g create-react-app 치면 저렇게 돼요ㅠㅠ