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" } }
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 🙂 강의를 다 듣고 나서 , ManyToMany 로 하지않고 ManyToOne , OneToMany 로 중간테이블 생성을 했는데요 그렇게해서 중간 테이블에 사용자가 언제 방에 들어왔는지 나갔는지를 체크하려고 했거든요 만약 이렇게 할때 chats.gateway.ts 파일에 socket.join(data.chatIds.map((x) => x.toString())); 이렇게해서 enter_chat 하는거 뿐만아니라 데이터베이스에도 따로 save 를 해줘야하는거죠 ??
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead npm i를 할 때마다 언제부턴가 npm warn이라는 경고창이 뜹니다 왜 이런거죠? ㅠㅡㅠ 찾아보니 최신화를 시켜주라는 말이 있던데 잘 모르기도 하고 괜한 짓을 할까봐 여쭤봅니다...!!!
chapter03.js 에 console.log("Hello"); 를 입력하고 index.html에 <html> <head> <sciprt src="./chapter03.js"></sciprt> </head> <body> Hello World </body> </html> 를 입력했는데 콘솔창에 Hello가 뜨지않습니다 뭐가 문제일까요 ㅠㅠ? html에서 live server 실행시켰습니다
vue-cli로 프로젝트를 생성한 후, vue-router로 페이지까지 설정한 상태인데요. 라우터 설정을 통해 url에 따라 view파일 안의 vue파일들이 출력되고 있습니다. 또 view 파일의 vue파일들은 components 파일의 vue파일이 연결되어있는 상태인데, 제가 원하는 것은 App.vue의 data값을 components 파일의 AppTitle에 props로 내려주는 겁니다. 어떻게하면 구현할 수 있을까요 도움 부탁드립니다!
이게 계속로딩중이라고 뜹니다 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 { 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;
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
부분에서 const user = await this.userService.getUserByEmail( payload.email ); console.log("user->", user); 데이터를 출력해보니까 user 에 password 가 포함되어 있더라고요 @Column('varchar', { name: 'password', length: 200, nullable: true }) @Exclude({ toPlainOnly: true }) password: string; 처럼했는데 password 가 같이 출력되는게 맞을까요 ?? delete user.password; 해도 되지만 의도한것과 다를것 같아서요 ㅎㅎ 감사합니다 !
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 ㅎ 정상적으로는..동작하는것 같은데 사진처럼 초록색으로 response enter_chat 값이 나오는게 아니라 빨간색으로 enter_chat 이 나옵니다. 이유가 뭘까요 ?? User 1 /chats -> enter_chat 으로 1번방과 2번방에 들어가고 User 2 /chats -> enter_chat 2번 User 3 /chats -> enter_chat 1번 이후 send_message 로 1번방에만 message 전달하게 되면 User 1/chats , User 3/chats 만 제대로 받아지고 정상적으로 테스트가 됩니다. 하지만 강사님과 다르게 저는 enter_chat 에 들어갈때 위 사진과 같이 빨간색이 나오는데 이유가 뭘까요 ?? ㅎㅎ
안녕하세요. 현재 강의 중 프로젝트 1 단계를 진행중에 궁금점이 생겨 질문 드립니다. index.html 파일 디자인에 부트스트랩 만으로 작업 하지 않고 순수 css 를 함께 이용하시는데요. 분류 원칙이 따로 있으신가요? 예를 들면 section 요소에 배경이미지는 *. css 파일에 position : relative, position : absolute 처리도 *.css 에서 처리를 하시네요.
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 강의를 잘 듣던 중 궁금한 점이 생겨 질문드립니다. 해당 강의대로 진행하면 access token과 refresh token 모두 만료 전에 재발급받아 token을 연장시키는 개념으로 이해가 됩니다. 그러나 각 token의 만료 시간인 300초, 3600초가 지나지 않은 상태에서 token을 재발급하게 되면 1개의 계정에 다수의 token이 존재할 수 있는 상황이 될 수 있다고 생각됩니다.(예를 들어 만료가 3000초 남은 refresh token으로 refresh token을 재발급하게 되면 3000초 남은 refresh token과 3600초 남은 새로운 refresh token 2개가 존재하게 됩니다.) 그래서 궁금한 점은 아래 두가지입니다. 실제 production 환경에서도 이렇게 다수의 token이 존재할 가능성을 가지고 있는지. 다수의 refresh token이 존재했을때 만약 해당 refresh token이 한번 탈취 당하면 계속해서 만료전에 갱신이 가능해지는 상황인데 이에 대한 대처방법이 따로 있는것인지.(개인적인 생각으로는 user 데이터베이스에 refresh token만 따로 저장하여 유효성 검사를 진행하는 방안도 있을 것 같습니다.)
안녕하세요. 소플님. Custom Hook에 대해서 질문이 있어 글을 남깁니다. import {useState, useEffect} from 'react'; // 커스텀 훅 function useUserStatus(userId){ const [isOnline, setIsOnline] = useState(null); useEffect(() =>{ function handleStatusChange(status){ setIsOnline(status.isOnline); } ServerAPI.subscribeUserStatus(userId, handleStatusChange); return () =>{ ServerAPI.unsubscribeUserStatus(userId, handleStatusChange); } }); return isOnline; } function UserStatus(props){ // 중복된 로직을 custom hook으로 추출하고 호출하여 간편하게 사용 const isOnline = useUserStatus(props.user.id); if (isOnline == null) return "대기중..."; return isOnline ? '온라인' : '오프라인'; } function UserListItems(props){ // 중복된 로직을 custom hook으로 추출하고 호출하여 간편하게 사용 const isOnline = useUserStatus(props.user.id); return ( <li style={{color: isOnline ? 'green':'black'}} > {props.user.name} </li> ); } 위 방식은 강의 내용대로 중복된 로직을 추출하여 Custom Hook을 만들고 함수 컴포넌트 내에서 호출하여 사용하는 방식입니다. 강의 내에서 " 여러 개의 컴포넌트에서 하나의 공통된 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다." 라고 말씀하셨는데 Custom Hook도 본질은 JS함수이기에 함수의 선언의 parameter와 사용의 argument는 다른 것과 같기 때문으로 이해해도 될까요? 좋은 리액트 강의 감사합니다. 꼭 완강하겠습니다!
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
chatsModel 에 @Entity() export class ChatsModel extends BaseModel { @ManyToMany(() => UsersModel, (user) => user.chats) users: UsersModel[]; @OneToMany(() => MessagesModel, (message) => message.chat) messages: MessagesModel; } 위처럼 적혀있는데 one to many 라서 저부분 list 로 하지 않아도 되나요 ??
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
한참 재미있게 배우고 있습니다!. Guard부분을 배우고 있는데 Middleware > Guard > Interceptor > Pipe > 로직 이런 순서로 이루어 진다고 하는데, Middleware부터 Pipe까지 통으로 Express의 Middleware 에서 구현 가능한 하나의 기능과 유사하다고 생각되는데 Nestjs에서는 Express의 middleware에서 하던 기능 중 유용하고, 자주 쓰이는 등의 로직을 저렇게 세분화 해서 더 유연하게 사용될 수 있도록 제공 하며 OOP의 장점을 살렸다?? 정도로 이해 해도 될까요?
