다음처럼 DeletedDateColumn 데코레이터를 붙인 deletedAt은 db에서 nullable이니까 optional 타입으로 하는 것이 맞을까요? @DeleteDateColumn()deletedAt?: Date; 공식 문서에서는 optional 타입으로 되어 있지는 않네요https://orkhan.gitbook.io/typeorm/docs/decorator-reference#deletedatecolumn

안녕하세요. 현재 여러개의 select - option으로 게시된 게시글을 필터링을 해보려고 하고 있고 잘 작동하는데 코드가 너무 지저분합니다. 혹시 좀더 효율적으로 짤 수 있는 팁주실수 있으면 감사하겠습니다. ㅠㅠ const coursePosts = useSelector((state) => state.coursePost.coursePosts); const [group, setGroup] = useState("all"); const [subject, setSubject] = useState("all"); const [level, setLevel] = useState("all"); const fillteredCoursePosts = coursePosts.filter((post) => ( //문제의 부분 start group === 'all' && subject === 'all' && level === "all" ? post : subject === 'all' && level === "all" ? (post.group === group) : group === 'all' && level === "all" ? (post.subject === subject) : group === 'all' && subject === "all" ? (post.level === level) : group === "all" ? (post.subject === subject) && (post.level === level) : subject === "all" ? (post.group === group) && (post.level === level) : level === "all" ? (post.group === group) && (post.subject === subject) : (post.group === group) && (post.subject === subject) && (post.level === level) ) //문제의 부분 End ) const handleGroupChange = (e) => { setGroup(e.target.value); } const handleSubjectChange = (e) => { setSubject(e.target.value); } const handleLevelChange = (e) => { setLevel(e.target.value); } return ( <> <main className="width_content"> <div className={styles.course_box_wrap}> <div className={styles.filter_header}> <div className={styles.ft_select}> <select onChange={handleGroupChange}> <option value="all">ALL</option> <option value="Group1">Group 1</option> <option value="Group2">Group 2</option> <option value="Group3">Group 3</option> </select> <select onChange={handleSubjectChange}> <option value="all">ALL</option> <option value="English">English</option> <option value="Korean">Korean</option> </select> <select onChange={handleLevelChange}> <option value="all">ALL</option> <option value="Core">Core</option> <option value="test1">Embed</option> <option value="test2">Test</option> </select> </div> </div> </div> </main> </> ) }

포트폴리오 과제 중, 게시물을 등록하고 수정할 때 비밀번호를 똑같이 입력했는데 저런 오류가 뜹니다 ....ㅠ 해결방법을 잘 모르겠습니다!

switch (action.type) { case "INIT": { return action.data; } case "CREATE": { const newItem = { ...action.data, }; newState = [newItem, ...state]; break; } case "DELETE": { newState = state.filter((it) => it.id != action.targetId); break; } case "EDIT": { newState = state.map((id) => it.id === action.data.id ? { ...action.data } : it ); break; } default: return state; } return newState;여기에 보면 ...으로 객체 깊은 복사? 하는거 같은데 만약에 CREATE 쪽 const newItem = { ...action.data, }; newState = [newItem, ...state]; 대신 const newItem = { action.data, }; newState = [newItem, state]; 으로 썼을떄 차이점Edit쪽 newState = state.map((id) => it.id === action.data.id ? { ...action.data } : it 대신 newState = state.map((id) => it.id === action.data.id ? { action.data } : it 으로 썼을떄 차이점  INIT 쪽 return action.data; 왜 이건 action.data를 바로 newState에 저장안시키고 리턴하는지 궁금합니다. 

안녕하세요. PORT 5000으로 설정했더니이미 사용중인 포트로 나오더라구요.혹시 같은 증상 있으신 분 있으실 수 있을 것 같아서 남겨둡니다.맥 기준 시스템설정에서 '에어플레이 수신' 을 꺼주면 5000번 포트 사용할 수 있습니다.https://developer.apple.com/forums/thread/682332

redis는 4.6.10 버전 쓰고 있고 connect-redis는 7.1.0 버전을 쓰고 있습니다. 레디스 코드를 깃허브에 업데이트 된 것 처럼 수정해 주었는데 로그인을 하려니 C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\RESP2\encoder.js:17 throw new TypeError('Invalid argument type'); ^ TypeError: Invalid argument type at encodeCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\RESP2\encoder.js:17:19) at RedisCommandsQueue.getCommandToSend (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\commands-queue.js:138:45) at Commander._RedisClient_tick (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:519:76) at Commander._RedisClient_sendCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:506:82) at Commander._RedisClient_legacySendCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:460:105) at Commander.sendCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:432:114) at <computed> [as set] (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:478:27) at Object.set (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\connect-redis\dist\cjs\index.js:24:34) at RedisStore.set (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\connect-redis\dist\cjs\index.js:71:39) at Session.save (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\express-session\session\session.js:72:25) Emitted 'error' event on Commander instance at: at C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:466:31 Node.js v18.16.0이런 에러가 뜨는데 버전 문제인가요? 모듈 내부적으로 발생한 거라 어디를 손봐야 할 지 모르겠습니다.참고로 세션 객체는Session { cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true, secure: false } }이렇게 찍혔습니다.

const errorLink = onError(({ graphQLErrors, operation, forward }) => { //1. 에러 캐치 if (typeof graphQLErrors !== "undefined") { for (const err of graphQLErrors) { //1-2. 해당 에러가 토큰만료 에러인지 체크 if (err.extensions.code === "UNAUTHENTICATED") { return fromPromise( //2. refreshtoken으로 accessToken을 재발급 받기 getAccessToken().then((newAccessToken) => { setAccessToken(newAccessToken ?? ""); //3. 재발급 받은 accesstoken 으로 방금 실패한 쿼리 실행하기 operation.setContext({ header: { ...operation.getContext().headers, //기존의 authorization: Bearer '만료된 토큰' Authorization: `Bearer ${newAccessToken}`, //3-2 authorization 만 바꿔치기 }, }); }) ).flatMap(() => forward(operation)); //3-3 방금 수정한 쿼리 재요청하기 } } } });수업이랑 동일하게 코드를 작성하였으나 버튼을 눌러도 재발급된 accessToken 이 들어가지 않아 error 가 발생하고 2번이상 눌러야지만 accesstoken 이 제대로 수정되서 정상적으로 실행됩니다. 어디가 문제일까요?

윈도우로 하려니 참 수업이 쫒아가기 힘드네요.어찌 어찌 구글링으로 계속 진행하고 있는데요.도커로 올린 후 DB 는 생성을 했는데 테이블 생성이 안되네요. 2. localhost:4000 로 접속을 하면 화면이 보이지도 않구요. 아..도커 참 그렇네요. ^^: 이것 저것 손 댄 코드 입니다. 14 버전이 안되어서 16버전으로 변경# 컴퓨터 만드는 설명서 # 1. 운영체제 설치(node 14버전과 npm과 yarn이 모두 설치되어있는 리눅스) FROM node:16 # 2. 내 컴퓨터에 있는 폴더나 파일을 도커 컴퓨터 안으로 복사하기 COPY ./package.json /myfolder/ COPY ./yarn.lock /myfolder/ WORKDIR /myfolder/ RUN yarn install COPY . /myfolder/ # 3. 도커안에서 index.js 실행시키기 CMD yarn start:dev DB 포트 충돌로 3307번 확인 후 3306 번 접근version: '3.7' services: my-backend: build: context: . dockerfile: Dockerfile volumes: - ./src:/myfolder/src ports: - 4000:3000 env_file: - ./.env.docker my-database: platform: linux/x86_64 image: mysql:latest environment: MYSQL_DATABASE: 'mydocker' MYSQL_ROOT_PASSWORD: '0000' ports: - 3307:3306   도움 좀 부탁드립니다.

여기서 멈춰요

  res.set("Set-Cookie", cookie.serialize("token", token, { httpOnly: true, maxAge: 60 * 60 * 24 * 7, path: "/", }))프론트에 credentials을 true로 하고 cors 부분에도 credentials를 true로 했지만 application/cookie에 저장이 되지 않습니다. header에 response로 토큰은 잘 들어오는데 뭐가 문제일까요?  

리액트 작업을 컴퓨터 이동하면서 하고싶은데 usb론 너무오래걸려서 깃헙으로 하고싶은데 깃헙에 빌드해서 올리면 다시 받을때 어떻게 받아서 작업해야할까요

테이블 생성 마이그레이션 db에 생성 완료 확인하였습니다.(유저 - 주소, 1대 다 관계db.User.hasMany(db.Address)db.Address.belongsto(db.User))하였으나이후 서버를 실행하니 다음과 같은 에러가 발생합니다.throw new Error(`${this.name}.hasMany called with something that's not a subclass of Sequelize.Model`);^Error: User.hasMany called with something that's not a subclass of Sequelize.Modelat Function.hasMany (E:\gmleh\workspace\react-shoppingmall\back\node_modules\sequelize\lib\associations\mixin.js:18:13)at associate (E:\gmleh\workspace\react-shoppingmall\back\models\user.ts:59:17)at Object.<anonymous> (E:\gmleh\workspace\react-shoppingmall\back\models\index.js:41:22)at Module._compile (node:internal/modules/cjs/loader:1126:14)at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)at Module.load (node:internal/modules/cjs/loader:1004:32)at Function.Module._load (node:internal/modules/cjs/loader:839:12)at Module.require (node:internal/modules/cjs/loader:1028:19)at require (node:internal/modules/cjs/helpers:102:18)at Object.<anonymous> (E:\gmleh\workspace\react-shoppingmall\back\app.ts:2:1) addresses 테이블 마이그레이션 -유저모델-주소 모델 - 테이블 생성 확인 -

const onCreate = useCallback((author, content, emotion) => { const created_date = new Date().getTime(); const newItem = { author, content, emotion, created_date, id: dataId.current, }; dataId.current += 1; setData([newItem, ...data]); // initial state인 data = [] 로 인한 문제 }, []); 강의 중에서 useCallback 에서 data 값 갱신 문제에 질문이 있습니다.  우선, data 가 일반적인 값 참조처럼 일어나지 않는다는 점을 이해했습니다. 가장 마지막에 onCreate 가 업데이트되는 시점의 data 값을 기억해 두고 사용한다는 점도 이해했습니다.  그런데 왜 이렇게 동작하는지 궁금합니다. 구체적으로 말하면 Memoization이 어떻게 구현됐기에 이런 문제가 발생하는 건가요? 이전 값을 그대로 가지고 있으려면 단순히 참조 주소를 복사하는 식으로는 안 되고 Deep Copy가 일어나야 하지 않나요?  그리고 Deep Copy를 통해 Memo를 구현했다기에는 석연치 않은 부분들도 있습니다. 우선 매번 Deep Copy를 수행하는 식으로 Memo를 구현했다면 성능 문제가 발생하지 않을까요? 게다가 depth에서는 Shallow Compare 가 일어나니까 Deep Copy를 통해 구현하지는 않았을 것 같습니다.  이전 상태를 기억해 둔다는 방식은 이전 상태에 state 변수들을 내부에 따로 복사해서 저장해 둔다는 개념으로 이해되는데, 제가 예상하는 대로 Deep Copy를 통해 이전 값을 저장해 두는 건지 아니면 제가 놓친 부분이 있는지 궁금합니다.

<>{content}</> 로 쓰면 에러가 안나고{content} 로쓰면 에러가 나는 이유가 뭘까요 ??? 작성자 : {id} | 감정 : {emotion}<div className="content"> {isEdit ? ( <textarea value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div>여기서 강의 보면 id,emotion는 <></>을 안쓰는데 content를 쓰는 이유가 뭔지 모르겠습니다. 어차피 const DiaryItem = ({ onEdit, onDelete, author, content, emotion, create_date, id, }) => {전부 List로 부터 받아오는데 누군 <>{content}</>이고 누군 그냥 {id} {emotion}인 이유가 먼지 궁금해요그리고 data.filter((it)=>(it.id!==targetId)); 을 data.filter((it)=>{it.id!==targetId}); 로 바꾸면 왜 에러가 나는걸까요 ?? ?언제 괄호를 쓰고 언제 중괄호를 써야하는지 정확히 알수있을까요 ???   아래는 전체 코드입니다.import { useRef, useState } from "react"; const DiaryItem = ({ onEdit, onDelete, author, content, emotion, create_date, id, }) => { const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIsEdit(!isEdit); const [localContent, setLocalContent] = useState(content); const handleDelete = () => { console.log(id); if (window.confirm(`${id}번쨰 일기를 삭제하겠습니까?`)) { onDelete(id); } }; const handleQuiteEdit = () => { setIsEdit(false); setLocalContent(content); }; const handleEdit = () => { onEdit(id, localContent); }; return ( <div className="DiaryItem"> <div className="info"> <span className="author_info"> 작성자 : <>{id}</> | 감정 : <>{emotion}</> </span> <br /> <span className="date">날짜: {create_date}</span> </div> <div className="content"> {isEdit ? ( <textarea value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div> {isEdit ? ( <> <button onClick={handleQuiteEdit}>수정취소</button> <button onClick={handleEdit}>수정완료</button> </> ) : ( <> <button onClick={handleDelete}>삭제하기</button> <button onClick={toggleIsEdit}>수정하기</button> </> )} </div> ); }; export default DiaryItem;

안녕하세요 제로초님~ 백엔드 개발자 지망생이자 제로초님의 팬인 신유빈입니다.1개월 가량 하기 문제를 구글링 하며 여러 경우의 수를 찾아보았지만 이유를 찾지 못하여 질문드립니다.질문드리고자 하는 내용은 이렇습니다.socket.io 로 이벤트를 emit 할때, 같은 메서드를 사용함에도 객체에 따라 클라이언트에 전송될 때도 있고, 전송되지 않을 때도 있는데 그 원인을 찾지 못하고 있습니다.현재 저는 신규게시물 혹은 댓글이 작성되었을때 모든 사용자에게 알림을 emit 하고자 합니다.현재 3가지의 경우 중 A만 성공중인 상태입니다.A : 테스트를 위하여 handleConnection 메서드에서 소켓에 연결한 사용자의 정보 객체를 message 로 전송시 성공B : 게시물 작성 시 생성한 알림 메시지 객체를 message 로 전송시 실패C: 댓글 작성 시 생성한 알림 메시지 객체를 message 로 전송시 실패모든 케이스에서 클라이언트에게 메시지를 성공적으로 보내려면 어떻게 해야할지 도움을 주실 수 있을까요?// 실행 동영상 https://youtu.be/AgLmcV53EvM// 코드깃허브 저장소 전체 코드https://github.com/fog-of-war/dev-be/blob/zerocho/README.mdEventsGatewayhttps://github.com/fog-of-war/dev-be/blob/zerocho/src/events/events.gateway.ts#L55 // fow-be/src/events/events.gateway.ts /** 웹소켓 연결시 */ handleConnection(@ConnectedSocket() socket: Socket, client: any) { const interval = setInterval(() => { const userInfo = socket.userInfo; this.sendMessage(userInfo); }, 5000); socket.on("disconnect", () => { clearInterval(interval); }); } /** 메시지 전송 */ sendMessage(message?: any) { console.log(" \n 🌠 sendMessage \n", message); this.server.emit("message", message); return Promise.resolve("Message sent successfully"); } AlertServicehttps://github.com/fog-of-war/dev-be/blob/zerocho/src/alert/alert.service.ts#L12 // fow-be/src/alert/alert.service.ts // B: 게시물 작성시 실행되는 알림 서비스 코드 async createNotifyAlert(id: number) { const data = { alert_place_id: id, alert_type: "NOTIFY" as Type }; const alert = await this.prisma.alert.create({ data: data }); const result = await this.makePostAlertMessage(id); await this.eventsGateway .sendMessage(result) .then((response) => { // console.log("🌠 Notification sent successfully:", response); }) .catch((error) => { console.error("🌠 Error sending notification:", error); // 전송 실패 또는 오류가 발생한 경우에 실행할 로직을 여기에 추가 }); return result; }// fow-be/src/alert/alert.service.ts // C : 댓글 작성시 실행되는 알림 서비스 코드 async createActivityAlert(id: number) { const data = { alert_comment_id: id, alert_type: "ACTIVITY" as Type }; const alert = await this.prisma.alert.create({ data: data }); const result = await this.makeCommentAlertMessage(id); await this.eventsGateway .sendMessage(result) .then((response) => { // console.log("🌠 Notification sent successfully:", response); }) .catch((error) => { console.error("🌠 Error sending notification:", error); }); return result; }  // 출력결과# A : 클라이언트에 전송 성공 🌠 sendMessage { sub: 2, user_email: 'shin.yubin18@gmail.com', iat: 1695983169, exp: 1695986769 } # B : 클라이언트에 전송 실패 🌠 sendMessage { place_id: 1, place_name: '코엑스', region_name: '강남구', post_id: 65, post_created_at: 2023-09-29T10:27:28.371Z, post_image_url: 'https://fog-of-war.s3.ap-northeast-2.amazonaws.com/랜드마크/1코엑스.jpeg' } # C : 클라이언트에 전송 실패 🌠 sendMessage { user_nickname: '구글신유빈', user_image_url: 'https://fog-of-war.s3.ap-northeast-2.amazonaws.com/defaultProfile.png', comment_id: 15, comment_text: '우왕', comment_created_at: 2023-09-29T10:52:24.960Z }

저도 강의 따라가다가 세로로 갑자기 변환되어서 답변 내용대로 해봤지만 고쳐지지를 않아서 질의 드립니다 아래 코드는 html코드입니다<html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> <body> <div id="header"> <div id="header-area"> <img src="images/images/icons/logo.png"/> </div> </div> <div id="body"> <div id="banner"> <img src="images/images/banners/banner1.png"/> </div> <h1>판매되는 상품들</h1> <div id="product-list"> <div class="product-card"> <img class="product-img" src="images/images/products/basketball1.jpeg"/> <div class="product-contents"> <span class="product-name">농구공 1호</span> <span class="product-price">50000원</span> <div class="product-seller"> <img class="product-avatar" src="images/images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> </div> <div class="product-card"> <img class="product-img" src="images/images/products/keyboard1.jpg"/> <div class="product-contents"> <span class="product-name">키보드 1호</span> <span class="product-price">30000원</span> <div class="product-seller"> <img class="product-avatar" src="images/images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> <div class="product-card"></div> <div class="product-card"></div> </div> <div id="footer"></div> </body> </head> </html>아래는 css코드입니다 * { margin: 0; padding: 0; } #header{ height: 64px; display: flex; justify-content: center; border-bottom: 1px solid gray; } #body{ min-height: 100%; width: 1024px; margin: 0 auto; padding-bottom: 24px; } #footer{ height: 200px; background-color: red; } #banner{ height: 300px; background-color: yellow; } #header-area{ width: 1024px; height: 100%; display: flex; align-items: center; } #header-area > img{ width: 128px; height: 36px; } #body > h1{ margin-top: 16px; } #banner > img{ width: 100%; height: 300px; } #product-list{ display: flex; flex-wrap: wrap; margin-top: 12px; flex-direction: row; } .product-card{ width: 180px; height: 300px; margin-right: 12px; margin-bottom:12px; border: 1px solid rgb(230, 230, 230); border-radius: 12px; } .product-img{ width: 100%; height: 210px; } .product-contents{ display: flex; flex-direction: column; padding: 8px; } .product-name{ font-size: 14px; } .product-price{ font-size: 16px; font-weight: 200px; margin-top: 4px; } .product-seller{ display: flex; align-items: center; margin-top: 12px; } .product-avatar{ width: 24px; }바쁘시겠지만 답변 해주시면 감사하겠습니다!+해당 코드 진행 후 개발자 도구 이용해서 보면 flex에 의해 정해지지않은 보라색 칸이 있는데 해당 칸 처리가 힘들어 추가 질문 올립니다!

  <DiaryItem key={it.id} {...it} />스프레드 연산자는 이해가 가는데 key={it.id} 옆에 바로 붙혀서 state객체를 넣을수 있는건가요 ?? 이건 어떤 문법일까요 <DiaryItem key={it.id} {...it} /><DiaryItem key={it.id} diary={it} />...을 써서 넣는거랑 안쓰고 앞에 diary = {it}으로 명시하고 넣는거랑 어떤차이가 있을까요 ? 전 이렇게 바꿨는데 ..이해가 안되서import DiaryItem from "./DiaryItem"; const DiaryList = ({diaryList})=> { console.log(diaryList); return ( <div className="DiaryList"> <h2>일기리스트</h2> <h4>{diaryList.length}개의 일기가 있습니다</h4> <div> {diaryList.map((it) => ( <DiaryItem key={it.id} diary={it} /> ))} </div> </div> ); }; DiaryList.defaultProps = { diaryList : [], } export default DiaryList;

안녕하세요 강사님.현재 axios 이용해서 백엔드로 이미지 전송하기 강의 수강 중npm i axios로 Axios 모듈 설치 후다음과 같이 코드 작성, npm run start 후 제출 버튼 누를 때 계속하여 새로고침이 됩니다.. ㅠ 원래라면 preventDefault로 새로고침이 되지 않아야 할텐데계속해서 새로고침이 되는 문제입니다. 혹시 문제가 뭘까요? ㅠ

안녕하세요 강의 잘 듣고 있습니다.res.on('finish', cb); 이벤트를 걸어뒀다고 가정하고 만약 어떤 request에 의한 비즈니스 로직 수행 중적당한 예외처리가 되지 못해서 서버가 죽어버리는 로직을 거쳐 res를 쏘는 부분까지 도달하지 못했다면해당 cb함수는 실행되지 않을거라고 생각했는데 맞을까요?(이렇게 되면.. 어떤 요청에 의해 프로그램이 죽었는지 알기 어려울 것 같다는 생각이 문득 들어서 질문드립니다)

안녕하세요! 해당 강의를 통해 프론트엔드 기술을 학습 중인 취준생입니다. 본 학습 자료의 저작권은 코드캠프에 있어 무단 도용, 배포, 복제를 금지한다고 적혀있는데 그럼 혹시 개인 블로그에 내용을 공부한 내용을 정리하는 것이 문제가 되는 사항인지 여쭤봅니다!