안녕하세요. 질 높은 강의 덕분에 많은 도움 받고 있습니다. 다름이아니라 미니블로그를 학습하며 이해가 되지 않는 부분이 있어서 질문드립니다. 44번째줄의 navigate(`/post/${item.id}`) 에 대한 질문입니다.item.id값으로 data.id의 값이 들어가는 것으로 확인했습니다. 제가 궁금한 것은 어떠한 방식으로 data.id의 값이 item.id값으로 들어가는지 도무지 이해가 되질 않습니다. 관련해서 답변주실 수 있으실까요?

Chapter 06 실습 문제에서 다음과 같은 경고와 함께 콘솔 로그가 나오지 않았습니다. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot React 18버전에서는 ReactDOM에 렌더링하는 방식이 아니라 root를 먼저 만들고 root의 렌더링을 하는 방식으로 바뀌었다고 합니다..  먼저, 실습 자료에서 따라 작성했던 코드입니다.  import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import NotificationList from "./chapter_06/NotificationList"; ReactDOM.render( <React.StrictMode> <NotificationList /> </React.StrictMode>, document.getElementById('root') ) reportWebVitals(); Notification element는 순서대로 제대로 출력되는걸 보아서 JSX element는 제대로 작성한 것 같았고  콘솔 로그가 나오지 않으며 위에 작성한 오류만 나와 react 버전 문제인가 해서 공식문서를 참조해 다음과 같이 변경했습니다.  import React from 'react'; import { createRoot } from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import NotificationList from "./chapter_06/NotificationList"; const container = document.getElementById('root'); const root = createRoot(container); root.render( <NotificationList /> ); reportWebVitals();  ReactDOM을 직접 사용하지 않고, root를 만든 다음 root에서 렌더링을 하는 방식으로 변경하라고 해서 이렇게 했더니 콘솔 로그가 제대로 나왔습니다. 그런데 문제가 있는게 이전에는 Notification element가 1, 2, 3 순서대로 출력이 되었는데 root에 직접 렌더를 하니 1번과 2번 element가 동시에 출력되는 문제가 생깁니다..  로그를 확인해보니 1번 2번 element는 componentDidMount() 이후 Update()를 실행하지 않고 WillUnmount()가 되어버립니다. WillUnmount() 이후에 한 번 더 DidMount()가 되고, Update()로 넘어가지만, 이 이후에도 1번 2번이 같이 호출되고, 그 다음에 3번이 호출됩니다. 3번 역시 DidMount() 이후 Update() 없이 WillUnmount()되고 다시 DidMount()가 됩니다  3번은 Update()되지 않습니다.. 이 이후에는 공식문서에서 해결책을 찾을수가 없어서 문의드립니다.. 

styled-component를 사용해서 코드를 작성했을 때 제 코드는 위와 같이 다 초록색으로 뜨는데 선생님 코드를 보면 CSS코드처럼 색상이 구분되어있습니다. 혹시 어떻게 해야지 색상이 구분이 되는건지 알 수 있을까요?!

Node.js v20.11.1NestJS 10.3.2npm 10.4.0 Yarn 4.1.0강의와 같이 폴더 생성 후 nest new . 로 생성했을 때 yarn install --silent 가 실패했습니다.모두 삭제 후 프로젝트를 만들 폴더에서 nest n cf_sns 로 시도했으나 동일하게 yarn install --silent 가 실패했습니다.nest 로 새 application을 생성 후 해당 폴더 내 yarn.lock 을 만들고 yarn install 을 실행한 후 yarn start:dev 를 실행할 수 있었습니다.저만 그런 건지 모르겠지만 혹시 몰라 기록을 남겨봅니다.---폴더 구성은 이렇게 되던데 최근 뭔가 달라진 걸까요? yarn을 처음 써봐서 잘 모르겠습니다. 🤔---https://yarnpkg.com/features/pnpPnP 때문인가 봅니다.---https://yarnpkg.com/getting-started/editor-sdksPnP 사용 시 VSCode에서 TypeScript가 제대로 작동하지 않는 문제는 이 문서를 통해 해결했습니다.

안녕하세요. 강의 중에는 TodoInput.vue addTodo()를 ...mapMutation로 변경하는 내용이 없습니다. git 에도 $store.commit이 적용된 소스만 있고요.addTodo()는 helper로 대체할 수 없는 건가요? 감사합니다.

안녕하세요. 강사님의 명쾌한 강의 덕분에 vuex에 대한 이해도가 높아졌습니다.실무에서는 Todo app 보다 더 복잡한 컴포넌트를 다루기 때문에 vuex 헬퍼를 왠만한 컴포넌트에 다 import할텐데요. 이렇게요. import {mapGetters, mapMutation 등등} from "vuex";이럴 경우에 한 번만 import해서 전역적으로 사용할 수 있는 방법이 궁금합니다. 감사합니다. 

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

boards.resolver.ts 파일에서 createBoard 함수에서 boardsService클래스에 인자를 전달할때createBoardInput 객체를 보내는데낱개로 된 writer,title,contents 도 아닌데왜 굳이 한번 더 {createBoardInput} 객체로 감싸서 보내는지 이해가 잘 되지 않습니다.  @Mutation(() => String) createBoard( @Args('createBoardInput') createBoardInput: CreateBoardInput, ): string { return this.boardsService.create({ createBoardInput }); //**차이점?? return this.boardsService.create(createBoardInput); }  boards.service.ts 파일에서는create({ createBoardInput }: IBoardsServiceCreate): string { //**차이점?? create(createBoardInput: CreateBoardInput): string { //1.브라우저에서 보내준 데이터 확인하기 console.log(createBoardInput.writer); console.log(createBoardInput.title); console.log(createBoardInput.contents); //2. DB에 접속 후, 데이터를 저장 => 데이터 저장했다고 가정. //3. DB에 저장된 결과를 브라우저에 응답(response) 주기. return '게시물 등록에 성공하였습니다.'; }굳이 IBoardsServiceCreate의 인터페이스를 안만들어도이미 CreateBoardInput 이라는 Class를 타입으로 적용해서 받으면 되는데createBoardInput을 왜 한번 더 { } 객체에 감싸서 보내는지 궁금합니다. 

프로젝트 생성하는 데 오류가 생겨 질문 드립니다

DOM화면의 일부만 찾아서 수정해서 사용자에게 응답해준다고 하였는데 AJAX비동기 통신도 일부 구역만 변경해서 보여주는데 서로 관련이 있나요?? 아직 리액트 처음이라 궁금해서 질문 드려봅니다.

안녕하세요 Basic 토큰을 통해 로그인 인증을 하는 강의를 듣고 나서 생긴 의문점이 있어 질문 남깁니다.현재 강의 내용 중 사용자의 이메일과 비밀번호 그리고 Basic 토큰을 입력 받아서 login 함수를 실행하는 로직이 있는데, 제가 강의를 제대로 들은 것이 맞다면 해당 로그인 로직 상 이메일과 비밀번호를 Basic 토큰으로 변환하는 로직이 없는 것 같습니다.그렇다면 이 경우 로그인 로직을 검증하면서 Basic 토큰으로 변환을 해야하는 것인지, 아니면 이러한 경우에는 이메일과 비밀번호만 입력받아 데이터베이스에서 검증을 해야하는 것인지 이도 아니라면, 따로 특정 기능이나 로직을 통해 자동으로 검증하는 방법이 있는지 궁금합니다!

삽입 정렬로 혼자 풀어보려고 했는데 도무지 생각이 안나서 버블정렬? 로 푼것 같습니다사실 버블정렬도 아닌것 같긴한데혹시 이렇게 풀면 너무 비효율적이거나 반례가 있을까요?function solution(s, arr) { let answer = new Array(s).fill(0); answer[0] = arr[0]; for (let i = 1; i < arr.length; i++) { if (answer.includes(arr[i])) { for (let j = s - 1; j > 0; j--) { if (answer[j] === arr[i]) { [answer[j], answer[j - 1]] = [answer[j - 1], answer[j]]; } } } else { answer.pop(); answer.unshift(arr[i]); } } return answer; }

게시글이 20개 배수로존재할때(ex 총 게시글수가 60개일때) 3페이지에서 다음페이지 정보가 url에 같이 올것같은데 이 부분은 어떻게 보완이 가능할까요? if (dto.where__id_more_than) { where.id = MoreThan(dto.where__id_more_than); } else if (dto.where__id_less_than) { where.id = LessThan(dto.where__id_less_than); } const posts = await this.postsRepository.find({ where, order: { createdAt: dto.order__createdAt, }, take: dto.take, });위 코드에서 where의 조건을 dtd의 order__createdAt 이 'ASC'인지 'DESC'인지를 체크하는것도 괜찮으까요?

이 햄버거 버튼을 active 넣었을때 바꾸려고 하는데 scss에는 도대체 어떻게 넣는지 너무 궁금해요 제가 강의 들으면서 계속 겪는 문제인데 scss에 .active를 적용해도 아무것도 안돼네요 scss 에 active 적용하려면 도대체 어떻게 해야할 지 모르곘어요 항상 강의들으면서 이 부분에서 막히는데 어떻게 해야할 지 도움 구합니다

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.이런 오류가 나오면서 따로 실행이 되지 않습니다

예시<body> <div id="buttons"> <button class="buttonClass">Click Me</button> <button class="buttonClass">Click Me</button> </div> <script> console.log(`buttons`, buttons); </script> </body> Event Delegation 강의 약 8분 조금 지난 부분에서 궁금한 점이 있어 질문 드립니다!이벤트 등록을 buttonList가 아닌 buttons라는 곳에 등록을 했음에도 버튼 이벤트가 잘 작동하더라구요.선언하고 할당하지 않은 buttons라는 변수명?이 어떻게 id가 buttons인 div를 가리키는지 궁금합니다!

안녕하세요! 실습을 하던 도중 react@17 을 가지고 오는 것을 알게되었습니다! 현재 react@18도 나온 것 같은데 17로 실습하는게 나은지 18로도 해도 되는건지 여쭤보고 싶었습니다. 밑에 처럼 바꿔도 되는걸까요?<!-- 리액트 가져오기 --> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <!-- 리액트 컴포넌트 가져오기 --> <script src="MyButton.js"></script>

 function isSame(map1, map2) { if (map1.size !== map2.size) return false; for (const [key, val] of map2) { if (!map1.has(key) || map1.get(key) !== val) return false; } return true; } function solution(s, t) { let answer = 0; const map1 = new Map(); const map2 = new Map(); const n = t.length; const ss = s.slice(0, n); for (const s of t) { if (map1.has(s)) { map1.set(s, map1.get(s) + 1); } else { map1.set(s, 1); } } for (const s of ss) { if (map2.has(s)) { map2.set(s, map2.get(s) + 1); } else { map2.set(s, 1); } } if (isSame(map1, map2)) answer++; for (let i = n; i < s.length; i++) { map2.delete(s[i - n]); map2.set(s[i], map2.get(s[i]) ? map2.get(s[i]) - 1 : 1); if (isSame(map1, map2)) answer++; } return answer; } const s = "bacaAacba"; const t = "abc"; console.log(solution(s, t)); 슬라이딩 윈도우로 처음 t만큼 잘라서 비교한 이후 부터 돌면서 처리 했는데 다른 문제가 있을까요...?

function solution(words1, words2) { const firstWordMap = new Map(); const secondWordMap = new Map(); let answer = "YES"; // 단어 구성 문자열 판별 for (let item of words1) { if (firstWordMap.has(item)) { firstWordMap.set(item, firstWordMap.get(item) + 1); } else { firstWordMap.set(item, 1); } } for (let item of words2) { if (secondWordMap.has(item)) { secondWordMap.set(item, secondWordMap.get(item) + 1); } else { secondWordMap.set(item, 1); } } // 아나그램 판단 for ([key, value] of firstWordMap) { if (secondWordMap.has(key) && secondWordMap.get(key) === value) { answer = "YES"; } else { return "NO"; } } return answer; } // test case console.log(solution("AbaAeCe", "baeeACA")); console.log(solution("abaCC", "Caaab")); 위와 같이 map을 두개 만들어 비교하는 방법은 별로일까요?

동작하는 원리와 각 키워드의 역할에 대해 제가 알고 있는 점을 정리해 봤습니다.어디가 틀리고 맞는지 확인하기 어려워서 질문드렸습니다!  원리모든 task는 Call Stack(Execution Context Stack) 에 쌓인다. main thread는 Call Stack에 있는 작업을 순차적으로 진행한다.그런데 오래 걸리는 요청이 들어오면 main thread가 blocking 된다. 그래서 nonblocking 이 되도록 event loop 와 background, event queue, micro task queue 등 막히는 작업을 해결 해줄 공간이 존재한다.사용자가 요청을 보내면 오래 걸리든 아니든 우선은 Call Stack 에 쌓이게 된다.main thread 가 요청을 하나씩 해결 하는데 오래 걸리는 task를 해결할때 blocking 되지 않도록 CPU의 가용 가능한 main thread 이외의 다른 Thread(background)에 Task를 던진다. 그 후 다음 동작을 진행한다.main thread 와 background 는 동시에 task 를 동작하기에 nodejs 는 그 자체로 single thread 는 아니다. 사용자의 요청과 응답을 하는 task를 실행하는 thread가 1개라는 의미이다.이 background thread에서 작업이 완료된 task는 event queue와 micro task queue 에 순차적으로 들어가게 된다. promise, nextTick 등 우선순위가 높은 작업들은 micro task queue에 쌓인다.Event Loop는 Call Stack에 모든 요청이 실행 완료되면 micro task queue, event queue에 있는 작업을 순서대로 Call Stack에 하나씩 담는다. micro task queue 에 task 가 있으면 event queue 보다 우선순위가 높아서 먼저 Call Stack 으로 이동한다.event loop는 non-blocking을 위해서 task를 background에 던지고 반환되면 event queue, micro task queue에 던지고, call stack을 observing 하다가 비어 있게되면 task를 순서대로 하나씩 넣는다.main thread는 call stack에 있는 task를 실행한다. 역할main thread는 call stack에 있는 task를 실행한다. (얘는 이것만 하는 놈이다.)background는 event loop에서 오래 걸리는 작업을 던짐 당한 곳이고 작업이 완료되면 event loop 에게 알리는 작업을 한다.여기서 Stack과 Queue는 모두 작업이 저장되는 공간인 메모리이다.(call stack, event queue, microtask queue)이 메모리의 작업을 수행하고 던지고 받고 등의 작업을 하는 thread는 main thread와 background 이다.background 는 CPU 에서 가용 가능한 모든 thread 를 말하고 1개일 필요는 없다.