이렇게 뜨는데 어떤 익스텐션 설치해야될까요?

!e.nativeEvent.isComposing 해당 코드가 이해가 되지 않아 찾아보았지만(아래 설명..), 정확히 어떻게 쓰이는지 잘 모르겠습니다. 설명 좀 부탁합니다. ev.nativeEvent.isComposing은 복잡한 문자 입력 도중 발생하는 이벤트를 처리하기 위한 속성으로, IME를 통한 입력이 완료되지 않았을 때 특정 키 이벤트를 무시하는 데 사용됩니다. 이를 통해 불완전한 입력에 대한 처리를 방지할 수 있습니다

https://dingco.notion.site/78c13cff9abd4bbea4a8e4692db6c66dsolution("marco", 970219); // marco971204에서 marco971204 ->marco970219

Context를 이용하여 props를 분리하고, onUpdate, onCreate같이 한번만 수행되는 함수들은 useMemo를 이용하여 메모이제이션을 한다고 했습니다. 아래 코드처럼요 const memoDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete, }; }, []);그런데 이전 시간에 각각의 함수를 useCallback를 통해 메모이제이션 했는데 한번 더 하는 이유가 이해 가지 않아 질문 드립니다. 아래 코드처럼 useCallback를 통해 처음 렌더링 될 때만 실행되고 이후에는 실행되지 않도록 코드를 작성 했는데 맨 위의 코드처럼 한번 더 감싼? 이유가 잘 이해가 되지 않습니다.const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }, []);

자식 컴포넌트 Bulb와 Counter를 해당 강의에서 분리했는데 다음과 같은 의문이 생겼습니다. 이렇게 분리했더라도 결국 Counter의 state가 변경되면서 Counter가 리렌더링 되는 걸로 알고 있습니다. 이러한 경우 부모 컴포넌트인 App도 리렌더링되면서 Bulb 컴포넌트도 리렌더링되는 것 아닌가요?

npx create-expo-app@latest 이렇게 설치했는데 강의랑 설치하는게 다르고 폴더구성도 다르더라구요

(a,b)가 어떤걸 의미하는지 모르겠고-1, 1, 0을 반환했을때 배열내부적으로 어떻게 처리되는지도모르겠습니다. let colors = ["green", "blue", "purple"]; const compare = (a, b) => { if (a > b) return -1; else if (a < b) return 1; else return 0; }; colors.sort(compare); console.log(colors);

1. npm create vite@latest2. 프로젝트 이름 입력 3.react 선택 4. javascript 선택5.패스 이동후 npm i6.npm run dev로 했을떄import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App.jsx' import './index.css' createRoot(document.getElementById('root')).render( <StrictMode> <App /> </StrictMode>, ) 이런식으로 나오네요 ..일가장 프로젝트는import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; import { BrowserRouter } from "react-router-dom"; ReactDOM.createRoot(document.getElementById("root")).render( <BrowserRouter> <App /> </BrowserRouter> ); { "name": "webproject", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.9.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^9.9.0", "eslint-plugin-react": "^7.35.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "vite": "^5.4.1" } } 현재 설정파일은 이렇습니다.이렇게 되어있는데 두개 차이가 뭐때문에 생기는건지 궁금합니다.

onClick에 onClickButton(-10) 이 아닌 화살표 함수를 이벤트 핸들러로 설정하고 그 안에 호출하는 이유가 어렵습니다 ㅜㅜ 5.5)이벤트처리하기, 6.3) 기능구현하기 강의에서 함수호출의 결과를 넣으면 안되고 인수를 넘기기 위해서 라고 하셨는데 바로 onClickButton(1)를 왜 넣으면 안되는지 모르겠어요,, 자바스크립트만 하다 리액트 하려니 헷깔리네여 ㅜㅜ <button onClick={() => { onClickButton(-10); }} > 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

useMemo 강의에서 함수를 작성할 때, const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone; ).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount }; }, [todos]);위의 코드처럼 작성하고 아이템의 체크 박스를 누르면 아래 사진과 같은 오류가 발생합니다.todos 배열 객체의 isDone 속성이 정의되지 않았다고 하는 것 같은데 해결 방법을 몰라 질문 드립니다...ㅠㅠ 혹시 몰라 List.jsx 전체 코드도 같이 올려두겠습니다.항상 좋은 강의 만들어주셔서 감사합니다!import "./List.css"; import { useState, useMemo } from "react"; import TodoItem from "./TodoItem"; function List({ todos, onUpdate, onDelete }) { const [search, setSearch] = useState(""); const searchHandler = (e) => { setSearch(e.target.value); }; const filterFunc = () => { if (search === "") { return todos; } return todos.filter((todo) => todo.content.toLowerCase().includes(search.toLowerCase()) ); }; const filterArr = filterFunc(); const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone; ).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount }; }, [todos]); return ( <div className="List"> <h4> Todo List 🌱</h4> <div> <div>total: {totalCount}</div> <div>done: {doneCount}</div> <div>notDone: {notDoneCount}</div> </div> <input placeholder="검색어를 입력하세요" onChange={searchHandler} value={search} ></input> <div className="wrapper"> {filterArr.map((todo) => { return ( <TodoItem key={todo.id} {...todo} onUpdate={onUpdate} onDelete={onDelete} /> ); })} </div> </div> ); } export default List;

안녕하세요!Header.jsx 파일에서 이 오류가 사라지지 않아서 질문 드립니다! 어떻게 해결해야 하나요...?

queue : enqueue, dequeue, peekclass Node { prev = null; next = null; constructor(value) { this.value = value; } } class Queue { length = 0; head = null; tail = null; enqueue(value) { // stack.push와 동일 const newNode = new Node(value); if (this.length == 0) { this.head = newNode; this.tail = newNode; } else { newNode.prev = this.tail; this.tail.next = newNode; this.tail = newNode; } this.length++; return this.length; } dequeue() { let rslt; // head.next의 prev를 null로 설정 & head 업데이트 if (this.length > 0) { if (this.length == 1) { rslt = this.head.value; this.head = null; this.tail = null; } else { rslt = this.head.value; this.head.next.prev = null; this.head = this.head.next; } this.length--; } return rslt; } peek() { return this.head?.value; } get length() { return this.length; } } const queue = new Queue(); queue.enqueue(1); queue.enqueue(3); queue.enqueue(5); queue.enqueue(4); queue.enqueue(2); console.log(queue.length); // 5 console.log(queue.dequeue()); // 1 console.log(queue.length); // 4 console.log(queue.peek()); // 3 console.log(queue.dequeue()); // 3 console.log(queue.peek()); // 5 console.log(queue.dequeue()); // 5 console.log(queue.peek()); // 4 console.log(queue.dequeue()); // 4 console.log(queue.dequeue()); // 2 console.log(queue.length); // 0 console.log(queue.dequeue()); // undefined console.log(queue.peek()); // undefined stack : push, pop, topclass Node { prev = null; next = null; constructor(value) { this.value = value; } } class Stack { length = 0; head = null; tail = null; push(value) { // 비어있으면 head = tail = newNode // 그 외엔 tail에다 추가 후 tail 업데이트 const newNode = new Node(value); if (this.length == 0) { this.head = newNode; this.tail = newNode; } else { newNode.prev = this.tail; this.tail.next = newNode; this.tail = newNode; } this.length++; return this.length; } pop() { // tail.prev를 tail로 업데이트 // 비어있거나 하나만 있으면 undefined 반환 let rslt = this.tail?.value; this.tail = !this.tail ? null : this.tail.prev; this.length = this.length - 1 < 0 ? 0 : this.length - 1; return rslt; } top() { return this.tail?.value; } get length() { return this.length; } } const stack = new Stack(); stack.push(1); stack.push(3); stack.push(5); stack.push(4); stack.push(2); console.log(stack.length); // 5 console.log(stack.pop()); // 2 console.log(stack.length); // 4 console.log(stack.top()); // 4 console.log(stack.pop()); // 4 console.log(stack.top()); // 5 console.log(stack.pop()); // 5 console.log(stack.top()); // 3 console.log(stack.pop()); // 3 console.log(stack.pop()); // 1 console.log(stack.length); // 0 console.log(stack.pop()); // undefined console.log(stack.top()); // undefined

 const start2 = async () => { try { let result = await Promise.all([workA(), workB(), workC()]); result.forEach((res) => console.log(res)); } catch { console.log(err); } }; 해당 코드에서 반환된 프로미스 객체는 배열의 형태로 result 변수에 저장되는 건가요?

조금씩이지만 열심히 따라서 구현을 해 보려고 하지만 모르는게 너무 많아 조금은 힘드네요 그래도 강의 내용이 스텝 바이 스텝으로 상세해 아주 큰 도움이 됩니다  저희 중요 업무는 고객 요구 사항들 (텍스트/ 이미지)이 기록되어 있는 문서를 참조로 현재 개발된 디자인이 모든 요구 사항들을 다 잘 지켜서 개발이 완료된 건지를 체크하는 일입니다 기존에 일일히 하나하나 체크를 하다 보니 시간도 너무 오래 걸리고 일부 경험 많은 엔지니어의 경우 기존 경험에 의존해 체크가 누락되는 경우도 발생이 되고 있습니다  이에 고객 요구 사항들을 AI (gpt-4o)에게 학습시키고 완료된 디자인 문서를 프로프팅 창에 입력해 자동으로 미지원 항목을 체크해 알려주는 기능을 만드는 것이 목표입니다  이를 위해 프롬프트 창에 디자인 문서 (텍스트/ 파워포인트/ PDF/ JPG 등) 멀티모달 프롬프팅이 되어야 디자이너 스스로 자기가 만든 디자인 파일의 셀프 체크가 가능하기에 gpt-4o를 선택해서 구현을 할려고 합니다 여기서 중요한건 비교를 해야 하는 고객 요구 사항을 어떻게 gpt-4o에게 학습시키는지에 대해 잘 몰라 난감해서 문의 드립니다 가장 효과적인 학습 방법에 대한 조언을 주실 수 있으실지요?사내 전용 우리 회사만의 GPT라면 비교 자료도 나만의 자료가 되는게 필요해서 문의 드립니다 답변 부탁 드리겠습니다감사합니다  

XMLHTTPRequest실습 수업을 듣고 따라는데 사진이 나타나지 않아요ㅜ 다른 이유가 있을까요? js작성한 코드는 아래 사진이 다 입니다. 

안녕하세요~끝장내기 수업 정도나 이상의 긴호흡의 강의는출시하지 않으실 예정이신지궁금 합니다!

투두를 수정, 삭제하는 강의를 보면서버튼을 클릭할 때, 제가 누른 버튼이 어떤 버튼인지 알 수 없기 때문에 이벤트 객체를 이용해야 한다고 생각했습니다.내가 클릭한 버튼의 아이디를 수정, 삭제하는 함수의 인수로 전달해야 한다고 생각해서 아래와 같은 코드로 작성해야한다고 생각했습니다. const onChageCheckBox = (e) => { onUpdate(e.target.id); }; const deleteHandler = (e) => { onDelete(e.target.id); };  하지만 강의에서는 아래 코드처럼 알려주셔서요! const onChageCheckBox = () => { onUpdate(id); }; const deleteHandler = () => { onDelete(id); };이벤트 객체를 사용하지 않고 id만으로 함수가 실행되는 점이 이해가 가지 않아 질문 드립니다.더불어 이벤트 객체를 사용해서 코드를 작성하는 방법도 있는지 질문 드립니다. 항상 좋은 강의해주셔서 감사합니다!

 import { Test } from '@nestjs/testing'; import { UsersService } from '../users.service'; import { IContext } from 'src/commons/interfaces/context'; import { Request, Response } from 'express'; // 주로 DB 작업할 때 가짜DB 만들 때 사용함 class MockUsersService { mydb = []; create({ email, password, name, age }): string { this.mydb.push({ email, password, name, age }); const token = 'token'; return token; } } describe('UsersResolver', () => { let usersService: UsersService; beforeEach(async () => { const usersModule = await Test.createTestingModule({ providers: [ UsersService, { provide: UsersService, useClass: MockUsersService, }, ], }).compile(); usersService = usersModule.get<UsersService>(UsersService); }); describe('fetchUser', () => { it('유저 정보 찾기', () => { const mockRequest: Request & { user?: { id: string } } = { user: { id: '12345' }, } as Request & { user: { id: string } }; const mockResponse: Response = {} as Response; const mockContext: IContext = { req: mockRequest, res: mockResponse, }; expect(mockContext.req.user).toStrictEqual({ id: '12345' }); }); }); describe('createUser', () => { it('유저 등록하기', async () => { const mockToken = 'token'; const mockUser = { email: 'aaa@aaa.com', password: '1234', name: '정중식', age: 12, }; const result = await usersService.create({ ...mockUser }); // 반환 값이 mockToken과 일치하는지 확인 expect(result).toBe(mockToken); }); }); }); 강의에서는 app.controller.spec랑 똑같이하시면됩니다~ 하고 넘어가셔서 챗지피티랑 손잡고 짜봣는데요.. 어떤가요? 맞게했나요?..개념도 생소하고 코드짜는게 넘 어렵네요.. 챗지피티 이자식은 목업클래스 안만들어주고 지름길 같은jest.fn()같은 메서드로 목업함수 만들어주고.... 선생님 답변기다리겠씁니다!

백엔드를 이 강의로 처음 알아가고 있는데 .Horizontal Scaling 가 정확히 뭔지모르겠어요 설명해주시는 것중에서 Redis , in-memory 등 서버들이 같은정보를 바라보고서 사용자 정보를 우리가 판단 한다.. 이게 무슨말인지 아예 와닿질않아요 설명 해주실 수 있을까요

수강생 참고자료 및 완성본 다운로드 => 다운로드 해도 소스 텍스트가 없습니다. ㅜㅜ 못 찾는건지 모르겠는데...찾지못해서 일일이 치고 있어요. 소스텍스트가 어디있는지 알려주세요.