const navigateFn = vi.fn(); vi.mock('react-router-dom', async () => { const original = await vi.importActual('react-router-dom'); return { ...original, useNavigate: () => navigateFn }; });useNavigate 함수에 스파이 함수를 전달할때 위 코드를 사용하고 있는데요. 이부분에서 이해가 어려운게 있습니다. //ErrorPage.jsx const navigate = useNavigate(); const handleClickBackButton = () => { navigate(-1); }; 실제로 네비게이션에 활용하는 함수는 navigate() 잖아요.그런데 왜 스파이 함수를 useNavigate()에 전달하는 건가요? 직관적으로 보자면, expect(navigate함수에 전달된 spyFn).toHaveBeenNthCalledWith(1, -1) 이여야 할 거 같다고 느껴져서 이해가 안갑니다.  

   혹시 계정 가입한지 얼마 안돼서 오류가 발생하는걸까요..ㅠ

  it('focus가 활성화되면 border 스타일이 추가된다.', async () => { const { user } = await render(<TextField />); const textInput = screen.getByPlaceholderText('텍스트를 입력해 주세요.'); //await user.click(textInput); expect(textInput).toHaveStyle({ borderWidth: 'px', borderColor: 'rbg(25,a118,210)', }); });  (1) user.click(textInput)을 주석 처리 했습니다.그리고(2) toHaveStyle 부분에서,borderWidth, borderColor 두 값을 위와 같이 넣었는데도 테스트가 아래처럼 통과합니다.  수업 노트에 적혀진 이슈 (링크)의 내용대로 "1px"이라고 작성하면 test가 fail이 됩니다. 혹시 제가 잘 못 이해한 부분이 있는걸까요?

this.template 메소드를 innerHTML에 할당하는 방식이 아닌 createElement와 appendChild 등으로 해결해도 괜찮나요? 이렇게 하면 변경되지 않은 부분만 체크하여 필요한 부분만 DOM을 다시 추가하는 방식을 사용할 수 있을 것 같은데

App 컴포넌트에서 모든 컴포넌트들의 상태가 관리되는 건가요? 컴포넌트들은 각각의 상태를 관리하고 가 상태를 업데이트하면서 상태관리를 하는게 아닌가요? 이건 모든 상태를 App 컴포넌트에서 관리하고 하위 컴포넌트들은 자신의 상태가 될 데이터를 내려받아서 그냥 render만 해주는 느낌이 들어서요 이렇게 되면 App 컴포넌트에서 관리해야 할 상태들이 너무 많아지고 App 컴포넌트가 복잡해지는 거 아닌가요..? 각 컴포넌트에서 독립적으로 본인의 상태를 관리하고 필요에 따라 상위 컴포넌트에서 상태를 전달받아 render 한다..? 이렇게 이해했는데.. 컴포넌트 단위로 개발하는 spa 개발 개념이 좀 부족한건지 이해가 잘 안되네요

인프런 아이디 : ljm5697인프런 이메일 : ljm5697@naver.com깃헙 아이디 : ljm5937@gmail.com깃헙 username : zzeongm

ㅠㅠ https://www.notion.so/MBIT-My-Best-IT-personalities-3d9128d972054b498b98365f1df4e656#ea988d6fd9ef495daae54c5b9ae8c7e9여기에 파일이 없는데..

[{"model": "main.developer", "pk": 1, "fields": {"name": "���ü��", "count": 0}}, {"model": "main.developer", "pk": 2, "fields": {"name": "����ü��", "count": 0}}, {"model": "main.developer", "pk": 3, "fields": {"name": "���ü��", "count": 0}}, {"model": "main.developer", "pk": 4, "fields": {"name": "����ü��", "count": 0}}, {"model": "main.developer", "pk": 5, "fields": {"name": "�ݾ�ü��", "count": 0}}, {"model": "main.developer", "pk": 6, "fields": {"name": "����ü��", "count": 0}}, {"model": "main.developer", "pk": 7, "fields": {"name": "����ü��", "count": 0}}, {"model": "main.developer", "pk": 8, "fields": {"name": "����ü��", "count": 0}}, {"model": "main.question", "pk": 1, "fields": {"number": 1, "content": "����� �� Ư¡�� ��մϱ�?"}}, {"model": "main.choice", "pk": 1, "fields": {"content": "��ī�Ӱ� �ѷ��� �λ�, �ε巴�� �ձ� �λ�, ��ü������ ���� �λ� ������ �λ�,", "question": 1, "developer": 1}}]깨져도 상관없는 것인가요?

네

 풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]잔재미코딩PDF 파일 예제shorturl.at 링크로 들어가면something went wrong while fetching invitation문구가 뜨고 안됩니다 

안녕하세요 강의 잘 듣고 있습니다.양질의 강의 항상 감사드립니다. 첫 번째 실습 프로젝트 소개, 환경 구성, 코드 분석 강의 1:22 에서 npm i 설치하는 이유가 무엇일까요? 강의 시작할 때 node js를 윈도우에 설치하였는데(npm 최신 버전 설치) vscode 터미널로 이동해서 npm i를 하는 이유가 궁금하여 질문드립니다. 

그런데 글만 회고록에 글만입력하면 오류가 납니다. 오류의 원인은 speed.js파일 때문이라고 합니다. 현재 코드는 아래와 같습니다. 허파가 뒤집어집니다.import { Input, Button} from 'antd'; const { TextArea } = Input; import { useState } from "react";// 저장하는 곳임포트 const DiaryInput = ({ isLoading, onSubmit }) => { const [userInput, setUserInput] = useState(""); // isLoading 로딩상태에서 사용하는 변수 // inSubmit 다입력 작성하면 사용 const handleUserInput = (e) => { setUserInput(e.target.value); }; const handleClick = () => { onSubmit(userInput); }; return ( <div> <TextArea value={userInput} onChange={handleUserInput} placeholder="오늘 일어난 일들을 간단히 적어주세요." /> <Button loading={isLoading} onClick={handleClick}> GPT 회고록을 작성해줘! </Button> </div> ); } export default DiaryInput; // import { Input , Button} from 'antd'; // import { useState } from 'react'; // const { TextArea } = Input; // const DiaryInput = ({isLoading, onSubmit}) => { // const [userInput, setUserInput] = useState(""); // //사용자의 입력을 받아 상위 컴포넌트로 넘기기 // // 로딩상태에서는 제출버튼 못누루게 // const handleUserInput =(e)=>{ // setUserInput(e.target.value); // const handleClick = ()=>{ // onSubmit(userInput); // } // } // return ( // <div> // <TextArea value={userInput} onChange={handleUserInput} placeholder='오늘 하루 회고'/> // <Button loading={isLoading} onClick={handleClick}>GPT회고록 시작</Button> // </div> // ); // }; // export default DiaryInput;import { useState } from 'react'; import { CallGPT } from './api/gpt'; import DiaryInput from './components/DiaryInput'; const dummyData = { "title": "고립된 개발자의 고민", "thumbnail": "https://source.unsplash.com/1600x900/?programming", "summary": "혼자 코딩과제를 진행하면서 걱정이다.", "emotional_content": "최근 혼자 코딩과제를 진행하면서, 협업이 없이 모든 것을 혼자 결정하고 해결해야 한다는 부담감에 많이 무겁습니다. 강의를 듣고 최선을 다해 프로젝트를 진행했지만, 예상치 못한 버그들로 인해 스트레스가 많이 쌓였습니다. 스택오버플로와 GPT를 통해 문제를 해결하긴 했지만, 이러한 문제해결 방식이 정말로 제 개발 실력을 향상시키는지에 대해 의문이 듭니다. 왠지 스스로의 능력을 시험할 기회를 잃은 것 같아 아쉽고, 불안감도 커지고 있습니다.", "emotional_result": "이 일기에서 감지되는 감정은 불안, 부담감, 그리고 자신감의 결여입니다. 고립된 상황에서의 성공에 대한 압박감과 문제 해결 방법에 대한 의심은 정서적으로 큰 부담을 주고 있습니다. 자기 효능감이 낮아짐을 느끼는 상황입니다.", "analysis": "고립되어 문제를 해결하는 과정은 큰 스트레스와 불안을 유발할 수 있습니다. '혼자서 하는 일은 좋은 일이든 나쁜 일이든 더욱 크게 느껴진다'는 에릭 에릭슨의 말처럼, 혼자서 모든 것을 해결하려는 시도는 때로는 개인의 성장에 도움이 될 수 있지만, 지속적인 고립은 자기 효능감을 저하시킬 수 있습니다. 이러한 상황에서는 자신의 노력을 인정하고, 필요한 경우 도움을 요청하는 것이 중요합니다.", "action_list": [ "프로젝트 중 발생하는 문제를 혼자 해결하려 하지 말고, 멘토나 동료 개발자와 상의를 통해 해결 방안을 모색하라.", "정기적으로 자신의 학습 방법과 진행 상황을 평가하여, 필요한 경우 학습 방식을 조정하라.", "개발 과정에서의 스트레스 관리를 위해 적절한 휴식과 여가 활동을 통해 정서적 안정을 찾으라." ] }; function App() { const [data, setData] = useState(dummyData); // 우선 빈문자열로 해놓고 const [isLoading, setIsLoading] = useState(false); const handleClickAPICall = async (userInput) => { try { setIsLoading(true);// 처음에는 로딩을 트루 const message = await CallGPT({ prompt: `${userInput}`, }); // Assuming callGPT is a function that fetches data from GPT API setData(JSON.parse(message)); } catch (error) { // Handle error (you might want to set some error state here) } finally { setIsLoading(false);//다음에는 펄스로 } }; const handleSubmit = (userInput) => { handleClickAPICall(userInput); }; console.log(">>data", data); return ( <> <DiaryInput isLoading={isLoading} onSubmit ={handleSubmit} /> <button onClick={handleClickAPICall}>GPT API call</button> <div>title : {data?.title}</div> <div>analysis : {data?.analysis}</div> <div>emotional_content : {data?.emotional_content}</div> <div>emotional_result : {data?.emotional_result}</div> </> ); }; export default App; // import { useState } from "react"; // import { CallGPT } from "./api/gpt"; // import { message } from "antd"; // import DiaryInput from "./components/DiaryInput"; // const dumyData = JSON.parse(` // { // "title": "당황스러운 예제 에러", // "thumbnail": "https://source.unsplash.com/1600x900/?confused", // "summary": "가끔 예제 에러가 발생하여 당황함", // "emotional_content": "가끔 예제 에러가 나타나는 것이 정말 당황스럽다. 이런 상황들은 예상치 못한 문제로 인해 나를 혼란스럽게 만든다. 그럼에도 불구하고, 이런 에러들은 동시에 나의 문제 해결 능력을 시험한다.", // "emotional_result": "당황스러움과 혼란스러움이 느껴진다. 그러나 이는 예상치 못한 문제에 대처하는 능력을 향상시키는 과정일 수 있다.", // "analysis": "당신의 당황함과 혼란스러움은 예상치 못한 상황에 대한 불안감과 두려움을 반영할 수 있습니다. 하지만, '문제는 기회다'라는 유명한 격언을 기억하십시오. 이러한 에러들은 당신의 문제 해결 능력을 향상시키는 좋은 기회일 수 있습니다.", // "action_list": [ // "예상치 못한 에러에 대비하는 습관 만들기", // "문제 해결 능력 향상을 위한 자기계발", // "당황하지 않고 차분하게 상황을 평가하는 능력 기르기" // ] // } // `); // function App() { // const [data, setData] = useState(dumyData); // const [isLoading, setIsLoading] = useState(false); // // 여기로딩상태가 // const handleClickAPICall = async (userInput) => { // try{// try catch로 감싸서, 처음에는 로딩상태를 트루라고 하고 // setIsLoading(true); // const message = await CallGPT({ // prompt:'{userInput}', // }); // setData(JSON.parse(message));// 그리고 데이터가 잘오면 받아보자 // } catch (error){ // }finally{ // setIsLoading(false);// 나중에는 false라고 하자 // } // }; // const handleSubmit = (userInput)=>{ // handleClickAPICall(userInput); // }; // console.log(">>data", data); // return ( // <> // <DiaryInput isLoading={isLoading} onSubmit={handleSubmit} /> // // 여기로 옴 // <button onClick={handleClickAPICall}>GPT API call</button> // <div>data : {data?.title}</div> // <div>thumbnail: {data?.thumbnail}</div> // <div>summary : {data?.summary}</div> // <div>emotional_resul : {data?.emotional_resul}</div> // <div>emotional_content : {data?.emotional_content}</div> // <div>analysis: {data?.analysis}</div> // <div>action_list: {data?.action_list}</div> // </> // ); // } // export default App;{ "name": "my-gpt-diary", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@ant-design/icons": "^5.4.0", "antd": "^5.20.1", "react": "^18.3.1", "react-dom": "^18.3.1", "styled-components": "^6.1.12" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.15.0", "@typescript-eslint/parser": "^7.15.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "typescript": "^5.2.2", "vite": "^5.3.4" } }

exist 메서드 deprecated 됐다고 exists 써야한다고 하네요 ㅎ

update 항목에서 true false 가 반대로 설명된 게 아닌지요?(화면 소스코드 코멘트)update 가 true 일 때 값을 변경 가능한 게 아닌지...

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM안녕하세요 강의 감사히 듣고 있습니다.다름이 아니라 릴레이션 설정을 할 때 객체 방식으로 선언시postman 결과는 잘 나오는데 IDE 에서 타입에러가 발생해서요 IDE 의 차이일까요? IDE 는 웹스톰을 사용 중 이고typeORM 0.3.17 버전입니다.찾아보니 TypeORM 0.3.x 이상 버전에서 제공되는 확장된 기능입니다 라는데 두 개의 방식 모두 사용해도 괜찮은지 궁금해서 글 남깁니다Argument type {relations: {profile: boolean}} is not assignable to parameter type FindManyOptions<UserModel> | undefined  

$tabBar.forEach((elm) => { elm.addEventListener('click', () => { onClick(elm.id); }); }); 이 onClick 함수 this.onClick으로 호출하지 않았는데,이러면 TabBar 인스턴스의 onClick 메소드는 쓰지 않는 거 아닌가요? 

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요, 알찬 강의와 친절한 답변 덕분에 열심히 학습하고 있습니다. 감사합니다! 이번 수업에서 사용하셨던 예제입니다.async function runner() { const result1 = await getPromise(1); // 1초 소요 const result2 = await getPromise(5); // 5초 소요 const result3 = await getPromise(8); // 8초 소요}runner();console.log('실행 끝') 질문입니다.위의 코드에서, runner()를 실행했을 때 총 소요시간은 14초가 걸린다고 수업에서 말씀하셨습니다. async, await 키워드를 사용하면 promise chaining 처럼 동작하는 건가요? Promise.all() 처럼 동작해야 비동기의 효율성을 극대화할 수 있다고 생각했는데 의외여서요! promise chaining으로 동작하는 것은 마치 동기 함수들을 연속적으로 실행하는 것과 다를 바가 없어보입니다.. 어떤 부분을 제가 잘못 이해하고 있는걸까요?

 안녕하세요,프론트(리액트)에서 프론트에서 credentials: include로 설정한경우 cors 문제가 발생하고있습니다.  이런 에러가 발생하고있는데요,프론트측에서 해줘야하는 설정과서버에서 해줘야하는 설정은 맞게해준것 같습니다. 먼저 프론트에서 해줘야하는 쿠키설정은const httpLink = createHttpLink({ uri: 'http://localhost:3001/graphql', credentials: 'include', }); 이렇게 해줬습니다. 그리고 서버쪽에서는 onst app = await NestFactory.create(AppModule, { cors: true }); app.enableCors({ origin: 'http://localhost:3000', credentials: true, exposedHeaders: ['Authorization'], // * 사용할 헤더 추가. }); 이렇게 해주었는데요..이렇게해주고나서 로그인하면 맨위의 사진처럼 에러가납니다.. 버전은"@apollo/server": "^4.10.4", "@nestjs/apollo": "^12.2.0",이렇게되어있는데.. https://www.inflearn.com/community/questions/896182/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-credentials-include%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%9C%EA%B2%BD%EC%9A%B0-cors-%EB%AC%B8%EC%A0%9C이분이 해결하신거를 참고해봤는데,저분이 app.module설정을 통해 해결하셨지만,저는 버전이달라서그런가 거기에 cors설정을하면 에러가나더라구요.. 혹시 어떻게 하면 이 이슈를 헤쳐나갈수있을까요?..

  @UseGuards(GqlAuthGuard('refresh')) @Mutation(() => String) restoreAccessToken( @Context() context: IContext, // ): string { const user = context.req.user; return this.authService.restoreAccessToken({ user }); }  대충 이렇게 헤더에담긴 리프레시토큰을 그래프큐엘 가드에서 인가후 accessToken재발급이 이루어지고 있는데..실무에서 그래프큐엘을 사용할 경우 저렇게 그래프큐엘 가드를 사용해서 헤더에 담긴 리프레시토큰을 인가하여accesstoken이 재발급되게 하는 코드를 사용하는지 아니면 선생님이 저희의 실습을위해 작성하신 코드인것인지 궁금합니다. jwt와 리프레시토큰 부분은 Rest API식으로 하는게 나을까요?

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 질문 ;엔티티의 버전 번호를 업데이트한다는 이해했는데.어떤필드가 업데이트되었는지 로그가 궁금할땐 어떻게 처리해야하나요 ? 변경사항을 로깅할 땐 보통 어떻게 작업하는지 궁금합니다.