안녕하세요 강사님!강의를 따라가는 도중 제가 onEdit 함수에 setData를 하지 않았다는 사실을 알게 되었습니다.하지만 setData를 해주지 않고 data에 map 함수로 변경 해주는 동작만 해도 정상적으로 수행되는데 왜 그런지 알 수 있을까요?useCallback 해주기 전에도 정상 동작한 이유도 궁금하고 강사님께서 알려주신 대로 data에는 컴포넌트가 마운트 됐을때 data 상태인 빈 배열이 들어가 있어야 하는 것이 아닌가요?아래는 제가 짠 onEdit 함수 입니다const editDiary = useCallback((targetId, editedContent) => { data.map((e) => e.id === targetId ? {...e, content: editedContent} : e ) }, [])

안녕하세요 강사님강의를 듣고 저는 React.memo로 DiaryEditor를 고차 컴포넌트를 만들어 동일한 prop을 받았을 때 리렌더링 되지 않도록 해주고 onCreate 함수를 useCallback을 통해 메모리제이션 하여 같은 함수를 DiaryEditor에 prop으로 전달한다고 이해했습니다그래서 제가 생각했을 땐 일기를 새로 저장하거나, 삭제, 수정하는 작업 중에는 DiaryEditor가 아예 리렌더링이 되지 않아야 된다고 생각했는데 강의 14분 17초에서도 그렇고 제가 직접 짠 코드에서도 일기를 새로 저장할 때 리렌더링이 되는데 제가 이해한게 잘못 된건가 싶어 질문 드립니다!

 구글 앱 비밀번호 설정 떄문에 막힙니다 2단계 인증했고 앱 비밀번호 생성해서 그걸 구글 비밀번호로 바꾸고 선생님 코드를 잘 따라해서 적었는데 Error: Invalid login: 535-5.7.8 Username and Password not accepted.라고 에러 납니다혹시 방법 없을까요?

질문입니다type Mutation {createBoard(createBoardInput: CreateBoardInput!):String } 에서맨 마지막에 왜 createBoard는 String이 붙고type Query{fetchBoards: [MyResult]}에서 fetchBoards는 맨 마지막에 String이 안 붙나요?fetchBoards: [MyResult]:String 이렇게 될수도 있지 않나요 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ const typeDefs = `#graphqltype Query{fetchBoards: [MyResult]}type Mutation {createBoard(createBoardInput: CreateBoardInput!):String } `;const resolvers = {Query: {fetchBoards: (parent, args, context, info) => {const result = [ { number: 1, writer: "철수", title: "제목입니다", contents: "내용이에요", },{number: 2,writer: "영희", title: "제목입니다",contents: "영희이에요",},{ number: 3, writer: "훈이", title: "제목입니다",contents: "훈이이에요", },];return result;} },Mutation: { createBoard: (_, args) => { console.log(args); onsole.log("========================="); console.log(args.createBoardInput.writer);console.log(args.createBoardInput.title);console.log(args.createBoardInput.contents);return "게시물 등록에 성공하였습니다"; }, }, };   

혹시 강의 중에 git clone 말씀하시는데, git 주소를 좀 알수 있을까요?

안녕하세요!! 수업 잘듣고있습니다.jsx내에서 div태그 속에 여러 css-in-js 변수들을 입력하려면 어떻게 해야하나요??아래와 같이 className 방식을 사용했는데 기존 css 방식이어서 안먹히는건가요...?<ProfileLink> <div className={clsx[styles.Click, styles.LinkLight].join(" ")}> <img src="/ic_link.png" /> </div> <Click> <img src="/ic_location.png" /> </Click> </ProfileLink>

제가 코드를 한 번에 입력하지 않고 나눠서 강의를 봐서 놓친 것일 수도 있는데..@Entity("votes")를 입력하면 제일 위쪽에 자동으로 import {Entity} from "typeorm" 등의 코드가 강의에서는 생기던데 혹시 import 코드가 자동으로 생성되지 않는 이유는 무엇일까요? 

선생님이 설명하신 것처럼 따라서 했는데 저장할 시 저절로 2칸 tab되는 기능이 안되는데 어디서 잘못된 지 알려주시면 감사하겠습니다.

안녕하세요 선생님 ! 강의 정말 잘 보고 있습니다 ! 다름이 아니라 현재 Node Js 교과서를 참고해서 웹 프로젝트를 진행 중입니다. AWS를 이용해 lightsail과 도메인을 구입해 실제 배포를 하려 하는데요. 큰 프로젝트가 아니라 사용자가 100~200명쯤 되는 블라인드 매칭 서비스입니다. 무료로 진행하는 프로그램이라 큰 걱정은 없지만, 실제 서버 배포를 함에 있어 15장에 나오는 서비스 운영을 위한 패키지 만으로 보안이 가능할까 걱정이 돼서 글을 작성합니다. 추가 적으로 추천하시는 패키지들이 있으시면 추천 받고 싶습니다 !

인강 40분짜리 3개 듣고 복습해서 총 5시간을 소비했는데 잘 하고 있는 건지 궁금해요

console.log로 action과 post를 찍어봤는데 post의 값이 이상합니다redux dev tools도 확인해보면 제가 지금 넣은 데이터의 형식이 content만 들어가 있습니다 어떻게 해야하나요?

playgroud 에서 회원을 생성 이후 login 페이지에서 로그인을 성공적으로 하였으나 login success 페이지에서 fetchuserloggedin 이 성공적으로 이루어 지지 않는거 같습니다. 회원가입을 여러번 해서 다른 계정으로 시도해도 name 부분이 표시가 되지 않네요. 혹시 뭐가 문제일까요?  import { useState } from "react"; import { gql, useMutation } from "@apollo/client"; import { IMutation, IMutationLoginUserArgs, } from "../../../src/commons/types/generated/types"; import { accessTokenState } from "../../../src/commons/stores"; import { useRecoilState } from "recoil"; import { useRouter } from "next/router"; const LOGIN_USER = gql` mutation loginUser($email: String!, $password: String!) { loginUser(email: $email, password: $password) { accessToken } } `; export default function LoginPage() { const router = useRouter(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loginUser] = useMutation< Pick<IMutation, "loginUser">, IMutationLoginUserArgs >(LOGIN_USER); const [, setAccessToken] = useRecoilState(accessTokenState); const onChangneEmail = (event) => { setEmail(event.currentTarget.value); }; const onChangnePassword = (event) => { setPassword(event.currentTarget.value); }; const onClickLogin = async () => { try { //1.로그인 뮤테이션 날려서 accessToken 받아오기 const result = await loginUser({ variables: { email, password, }, }); const accessToken = result.data?.loginUser.accessToken; console.log(accessToken); //받아온 accessToken 을 글로벌 스테이트에 저장해야지 모든 애들이 쓸수 있음 if (accessToken === undefined) { alert("로그인에 실패했습니다: 다시 시도해주세요"); return; } setAccessToken(accessToken); // 3. 로그인 성공 페지이로 이동하기 void router.push("/section23/23-01-login-success"); } catch (error) { if (error instanceof Error) alert(error.message); } }; return ( <> 이메일:{" "} <input onClick={onChangneEmail} type="text" placeholder="이메일 입력" /> 비밀번호:{" "} <input onClick={onChangnePassword} type="password" placeholder="비밀번호 입력" /> <button onClick={onClickLogin}>로그인</button> </> ); } import { useQuery, gql } from "@apollo/client"; import type { IQuery } from "../../../src/commons/types/generated/types"; const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } `; export default function LoginPage() { const { data } = useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN); return <>{data?.fetchUserLoggedIn.name}님 환영합니다!</>; }

프로필 탭 들어갈 시  Button is not defined 이라는 오류가 뜹니다 제 코드는 import React from "react"; import PropTypes from "prop-types"; import { List } from "antd"; import Item from "antd/lib/list/Item"; import { StopOutlined } from "@ant-design/icons"; import { isStyledComponent, keyframes } from "styled-components"; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: 20 }} grid={{ gutter: 4, xs: 2, md: 3 }} size="small" header={<div>{header}</div>} loadMore={ <div style={{ textAlign: "center", margin: "10px 0" }}> <Button>더 보기</Button> </div> } bordered dataSource={data} renderItem={(Item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutlined key="stop" />]}> <Card.Meta description={Item.Nickname} /> </Card> </List.Item> )} /> ); }; FollowList.propTypes = { header: PropTypes.string.isRequired, data: PropTypes.array.isRequired, }; export default FollowList; 입니다 무엇이 문제 일까요?

강의 하나 들을 때마다 에러가 너무 많이 떠서 진도가 안나가서 미칠 지경이네요 ㅠㅠdocker-compose.yaml 파일을 아래와 같이 설정하고 docker-compose build를 하니 services.mydb.environment.0 must be a string 라는 에러가 떠서 구글링을 하니 environment: - MYSQL_DATABASE: 'dockerProject' - MYSQL_ROOT_PASSWORD: 'root'여기서 띄어쓰기를 없애보라고 하길래 아래와 같이 띄어쓰기를 없앤채로 .yaml파일을 변경하였습니다. version: '3.7' services: mybackend: build: context: . dockerfile: Dockerfile volumes: - ./src:/myfolder/src ports: - 3000:3000 env_file: - ./.env.docker mydb: # platform: linux/86_64 image: mysql:8.0.34 environment: - MYSQL_DATABASE:'dockerProject' - MYSQL_ROOT_PASSWORD:'root' ports: - 3306:3306그리고는 docker-compose build 이후 up을 실행했으나 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...에러가 계속 발생합니다.(docker 말고 내 로컬컴퓨터에서는 mysql 연결 잘 되었음) 다른 질문자 분들 내용을 참조하여 package.json 파일의 mysql2와 typeorm의 버전을 아래와 같이 바꾸었고, .yaml 파일에서도 mysql 버전을 latest에서 8.0.34로 지정해주었습니다.  { "name": "graghql", "version": "0.0.1", "description": "", "author": "", "private": true, "license": "UNLICENSED", "scripts": { "build": "nest build", "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"", "start": "nest start", "start:dev": "nest start --watch", "start:debug": "nest start --debug --watch", "start:prod": "node dist/main", "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix", "test": "jest", "test:watch": "jest --watch", "test:cov": "jest --coverage", "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand", "test:e2e": "jest --config ./test/jest-e2e.json" }, "dependencies": { "@apollo/server": "^4.9.0", "@nestjs/apollo": "^12.0.7", "@nestjs/common": "^10.0.0", "@nestjs/config": "^3.0.0", "@nestjs/core": "^10.0.0", "@nestjs/graphql": "^12.0.8", "@nestjs/platform-express": "^10.0.0", "@nestjs/typeorm": "^10.0.0", "graphql": "^16.7.1", "mysql2": "3.2.0", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.1", "typeorm": "^0.3.12" }, "devDependencies": { "@nestjs/cli": "^10.0.0", "@nestjs/schematics": "^10.0.0", "@nestjs/testing": "^10.0.0", "@types/express": "^4.17.17", "@types/jest": "^29.5.2", "@types/node": "^20.3.1", "@types/supertest": "^2.0.12", "@typescript-eslint/eslint-plugin": "^5.59.11", "@typescript-eslint/parser": "^5.59.11", "eslint": "^8.42.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-prettier": "^4.2.1", "jest": "^29.5.0", "prettier": "^2.8.8", "source-map-support": "^0.5.21", "supertest": "^6.3.3", "ts-jest": "^29.1.0", "ts-loader": "^9.4.3", "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "^5.1.3" }, "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "rootDir": "src", "testRegex": ".*\\.spec\\.ts$", "transform": { "^.+\\.(t|j)s$": "ts-jest" }, "collectCoverageFrom": [ "**/*.(t|j)s" ], "coverageDirectory": "../coverage", "testEnvironment": "node" } }그런데도 똑같이 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...에러가 발생하여 node_modules 파일 및 dist 파일을 삭제 후 다시 yarn install을 했는데,이제는 import도 되지 않습니다....에러 때문에 진도가 나가질 않아, 중간중간에 강의를 멈춰가며 강의와 똑같이 따라가고 있는데 왜 이런 에러가 계속 발생할까요 ㅠㅠ

 객체로 나타낼 떄 따옴표 쓰는 거 하고 쌍따옴표 쓰는 거 하고 뭔 차이인가요? 그리고 따옴표 쓰면 계속 따옴표 쓰고, 쌍따옴표 쓰면 계속 쌍따옴표로 써야하나요?

router.get("/", async (req, res, next) => { try { if (req.user) { // findOne에서 에러가 생기는 거는 try catch문으로 처리가 안된 const user = await User.findOne({ where: { id: req.user.id }, }); res.status(200).json(user); } else { res.status(200).json(null); } } catch (error) { console.error(error); next(error); } });이부분에서 아직 로그인을 하지 않아서 유저 정보가 없을때 User.findOne에서 에러가 나기 때문에 if문으로 감싸서 아직 유저정보가 없을 때를 예외 처리 해주셨는데 어차피 User.findOne에서 에러가 나면 catch문으로 이동해서 에러가 처리가 되는데 굳이 if else로 예외 처리 하신 이유가 있나요?

 선생님께서는type Mutation { createBoard(createBoardInput: CreateBoardInput!):String }밸류 CretaBoardInput !을 그룹으로 묶어서input CreateBoardInput{ writer:String title:String contents: String }이렇게 나타내셨는데 ,그런데 키 createBoardInput은 뭘 나타내는 건가요?혹시, 객체를 그룹으로 묶으면 키,밸류를 똑같은 이름으로 지어야 하나요>?

nestjs + mongoose 조합이지만, https://velog.io/@modolee/mongodb-document-to-javascript-object와 같이 find()가 리턴하는 인스턴스 내부가 `_doc` 처럼 되어 있었습니다.저는 user.age 이렇게 사용하고 싶은데, user 밑에 age 라는 변수도 없고, 꼭 .toObject()를 해야 하나요?아직 이 부분에 수수께끼가 풀리지 않았습니다.설명해 주실 수 있나요?

검색 해보니까 input태그에 자식을 넣어서 발생하는 에러라고 하는데 코드에는input태그에 props를 넣은것 빼곤 그럴만한 에러사항이 없습니다. 무엇이 문제인가요..?ㅠ    index.jsimport BoardWrite from "../../../src/components/units/board/write/BoardWrite.container"; export default function GraphqlMutationPage() { // 한 줄일 땐 괄호() 필요 없음 return ( <div> <div>########## 여기는 페이지입니다.####### </div> <BoardWrite />;<div>########## 여기는 페이지입니다.####### </div> </div> ); }  BroadWrite.container.js:import { useMutation } from "@apollo/client"; import { useState } from "react"; import BoardWriteUI from "./BoardWrite.presenter"; import { 나의그래프큐엘셋팅 } from "./BoardWrite.queries"; export default function BoardWrite(props) { const [writer, setWriter] = useState(); const [title, setTitle] = useState(); const [contents, setContents] = useState(); const [나의함수] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { const result = await 나의함수({ variables: { // variables 이게 $ 역할을 함 writer: writer, title: title, contents: contents, }, }); console.log(result); }; const onChangeWriter = (event) => { setWriter(event.target.value); }; const onChangeTitle = (event) => { setTitle(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; return ( <div> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> <BoardWriteUI aaa={onClickSubmit} bbb={onChangeWriter} ccc={onChangeTitle} ddd={onChangeContents} /> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> </div> ); }  BroadWrite.presenter.jsimport { RedInput, BlueButton } from "./BoardWrite.styles"; export default function BoardWriteUI(props) { return ( <div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> <div> 작성자: <RedInput type="text" onChange={props.bbb} /> 제목: <input type="text" onChange={props.ccc} /> 내용: <input type="text" onChange={props.ddd} /> <BlueButton onClick={props.aaa}>GRAPHQL-API 요청하기</BlueButton>; </div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> </div> ); } BroadWrite.styles.jsimport styled from "@emotion/styled"; export const RedInput = styled.input` border-color: red; `; export const BlueButton = styled.input` background-color: blue; `;

 안녕하세요.섹션 27의 8-5 CURD API 강의를 듣다가 문득 궁금한 점이 생겨 질문드립니다.해당 강의에서는 boards.resolver.ts 파일에 fetchBoards함수와 createBoards 함수를 정의하기 위해board.entity.ts 파일, create-board.input.ts 파일, boards-service.interface.ts 파일을 아래와 같이 만드셨습니다. 아래 세 파일은 구조가 거의 동일한데, 왜 이렇게 같은 구조의 파일을 세개나 만들어서 타입스크립트 타입 정의에 사용하는 것인지 이해가 가질 않습니다.그리고 어떤 것은 class로 정의하여 타입스크릡트에 사용하고, 어떤 것은 interface로 정의하여 타입스크립트로 사용하는데 어떤 차이인지 질문 드립니다.// board.entity.ts 파일 import { Field, Int, ObjectType } from '@nestjs/graphql'; import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm'; @Entity() @ObjectType() export class Board { @PrimaryGeneratedColumn('increment') @Field(() => Int) num: number; @Column() @Field(() => String) title: string; @Column() @Field(() => String) contents: string; @Column() @Field(() => String) writer: string; }// create-board.input.ts 파일 import { Field, InputType } from '@nestjs/graphql'; @InputType() export class CreateBoardInput { @Field(() => String) writer: string; @Field(() => String) title: string; @Field(() => String) contents: string; } // boards-service.interface.ts 파일 import { CreateBoardInput } from '../dto/create-board.input'; export interface IBoardsServiceCreate { createBoardInput: CreateBoardInput; }