해당 화면 3번째 줄에서 randomColor() 말고 randomColor라고 쓰면 왜 안되는 건가요?

회원가입 과제는 따로 정답 코드가 없는건가요?

http://practice.codebootcamp.co.kr/graphql서버에 문제가 있나요? 어제는 잘 되었는데 안들어가지네요.

timer 때문에 Table 전체가 리렌더링되는 문제를 해결하기위해강의에서는 Table과 하위컴포넌트 Tr, Td 모두에 memo를 씌우셨고하위컴포넌트가 다 memo가 돼있어야지 상위컴포넌트도 memo를 적용할 수 있게 된다고 말씀하셨는데요제가 Tr Td에 memo를 없애고Table에만 적용해봤더니그래도 리렌더링되지 않길래이렇게 해도 되는지 궁금해서 질문드립니다 import React, { useReducer, createContext, useMemo, useEffect } from 'react'; import Table from './Table'; import Form from './Form'; // 중략 const MineSearch = () => { const [state, dispatch] = useReducer(reducer, initalState); const { tableData, halted, timer, result } = state; const value = useMemo(() => ({ tableData: tableData, halted: halted, dispatch }) , [tableData, halted]); useEffect(() => { if (!halted) { const timer = setInterval(() => { dispatch({ type: INCREMENT_TIMER }); }, 1000); return () => { clearInterval(timer); } } }, [halted]); return ( <TableContext.Provider value={value}> <Form /> <div>{timer}</div> <Table /> <div>{result}</div> </TableContext.Provider> ); }; export default MineSearch;import React, { useContext, memo } from 'react'; import Tr from './Tr'; import { TableContext } from './MineSearch'; const Table = memo(() => { const { tableData } = useContext(TableContext); return ( <table> {Array(tableData.length).fill().map((tr, i) => <Tr key={i} rowIndex={i} />)} </table> ); }); export default Table;import React, { useContext, memo } from 'react'; import Td from './Td'; import { TableContext } from './MineSearch'; const Tr = ({ rowIndex }) => { const { tableData } = useContext(TableContext); return ( <tr> {tableData[0] && Array(tableData[0].length).fill().map((v, i) => <Td key={i} rowIndex={rowIndex} cellIndex={i} />)} </tr> ); }; export default Tr; import React, { useContext, useCallback, memo, useMemo } from 'react'; import { TableContext, CODE, OPEN_CELL, CLICK_MINE, FLAG_CELL, QUESTION_CELL, NORMALIZE_CELL } from './MineSearch'; // 중략 const Td = ({ rowIndex, cellIndex }) => { const { tableData, dispatch, halted } = useContext(TableContext); const onClickTd = useCallback(() => { if (halted) { return; } switch (tableData[rowIndex][cellIndex]) { case CODE.OPENED: case CODE.FLAG: case CODE.QUESTION: case CODE.FLAG_MINE: case CODE.QUESTION_MINE: return; case CODE.NORMAL: dispatch({ type: OPEN_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.MINE: dispatch({ type: CLICK_MINE, row: rowIndex, cell: cellIndex }); return; default: return; } }, [tableData[rowIndex][cellIndex], halted]); const onRightClickTd = useCallback((e) => { e.preventDefault(); if (halted) { return; } switch (tableData[rowIndex][cellIndex]) { case CODE.NORMAL: case CODE.MINE: dispatch({ type: FLAG_CELL, row: rowIndex, cell: cellIndex }); return case CODE.FLAG: case CODE.FLAG_MINE: dispatch({ type: QUESTION_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.QUESTION: case CODE.QUESTION_MINE: dispatch({ type: NORMALIZE_CELL, row: rowIndex, cell: cellIndex }); return; default: return; } }, [tableData[rowIndex][cellIndex], halted]); return ( <RealTd onClickTd={onClickTd} onRightClickTd={onRightClickTd} data={tableData[rowIndex][cellIndex]} /> ) }; const RealTd = memo(({ onClickTd, onRightClickTd, data }) => { console.log('RealTd rendered'); return ( <td onClick={onClickTd} onContextMenu={onRightClickTd} style={getTdStyle(data)} > {getTdText(data)}</td> ); }); export default Td;

await을 두 번 쓰는 이유가 fetch의 리턴 값인 Response (Promise 객체 타입)가 언제 올지 기다리기 위함인가요?위 질문에서 Response 객체는 Promise 객체와 같다고 생각해도 되나요?

drf와 django버전이 안맞아서 그렇습니다parse_header()는 django 4.2에서는 없어졋는데drf 최신버전에서는 여전히 사용합니다.django 4.1 로 재설치하면 해결됩니다!

11번째 줄에서 res가 "hello Async"라는 건 알겠는데 갑자기 어디에서 튀어 나온 변수인지 모르겠습니다. 혹시 Promise의 executor resolve인가요? 맞다면 왜 그런 건가요?

resolve, reject, then, catch 모두 Promise 객체에 기본적으로 들어있는 메서드가 맞는 건가요?

강사님 안녕하세요. 파이널 과제를 하면서 궁금한 점이 있어 질문 드립니다..!질문이 많지만 피드백 주시면 감사하겠습니다! ( _ _ ) 화면이 100% 일때는 회원가입 폼의 높이가 잘리고, 80%로 줄여야 그때부터 폼이 화면 안에 다 들어간 상태로 확인할 수 있습니다. 이러한 현상은 브라우저 별 차이로 생각하면 되는 걸까요? 또 저는 화면이 100%일 때도 폼이 안잘렸으면 하는데, 혹시 이때 해결할 수 있는 방법이나 대안이 따로 있을까요?// 노션 파일에 있는 코드와 동일합니다. * { box-sizing: border-box; margin: 0px; } body { width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: center; align-items: center; } 성별 인풋에서 radio 동그라미 부분에 따로 스타일을 주고 싶어서 아래와 같이 작성했는데, 적용이 안됩니다. 제가 시도해본 방법은 label 내부에 input을 두고 id와 for을 묶어서 스타일을 적용해보았으나, 실패했습니다. 혹시 적용이 안되는 이유와 해결 방법을 알려주실 수 있을까요?<input type="radio" name="gender" class="gender-radio" />여성 .gender input[type="radio"] { background: #ebebeb; border: 1px solid #d2d2d2; } 하단 가입하기 버튼 바로 위에 있는 수평선을 <hr> 태그가 아닌, 버튼을 감싸는 div 박스에 border-top을 주어 스타일을 작성했는데요, 아래와 같이 footer와 버튼이 겹쳐버리는 현상이 발생했습니다.저는 이를 마진 겹침 현상으로 생각하고, 부모 요소에 padding, inline-block, overflow:hidden을 적용해 보았지만 결국 문제를 해결하지 못했습니다. 저는 html 코드를 줄이고자 버튼을 감싸는 박스로 가로선을 해결하고 싶었는데, 이러한 현상이 발생하는 이유와 이 경우 어떤 식으로 해결할 수 있는지 궁금합니다.<div class="footer"> <button id="signup-button">가입하기</button> </div> .footer { width: 380px; height: 1px; margin: 32px 0px 20px 0px; border-top: 1px solid red; } #signup-button { width: 380px; height: 75px; background: #ffffff; border: 1px solid #0068ff; border-radius: 10px; font-size: 18px; line-height: 27px; text-align: center; } 

export const FETCH_USEDITEMS = gql` query fetchUseditems($page: Int, $search: String, $isSoldout: Boolean) { fetchUseditems(page: $page, search: $search, isSoldout: $isSoldout) { _id name remarks contents images tags price pickedCount seller { _id email name } } } `;중고마켓에 fetchUseditems 대해 질문이 있습니다.isSoldout을 true와 false로 각각 가져와서 데이터를 화면에 띄우려고 하는데 어떤 식으로 가져와야 하나요?  const { data } = useQuery< Pick<IQuery, "fetchUseditems">, IQueryFetchUseditemsArgs >(FETCH_USEDITEMS);이부분에서 무엇을 더 추가해야하는지 아니면 presenter에서 가져와야하는지 갈피를 못잡겟네요. ㅠㅠ

중고 마켓의 백엔드 부분은 수업에서 제공돼는 기본적인 CRUD 로 가능한건가요??  

현재 중고마켓 리스트 부분을 하고 있습니다.이 부분에서 판매중상품 판매된상품 을 하고있는데fetchUseditems에 있는 isSoldout 부분을 어떤식으로 가져와야 할 지 모르겠네요.. refetch 를 사용해야 하는 건가요..?

middlewares까지 구현하고, 로그아웃 router에 isLoggedIn 필터링 해서 실행했는데 로그아웃을 누를때마다 '로그인이 필요합니다.' 라는 Message를 받습니다.로그인하는 과정이 문제라는 가설을 세워서 passport 세팅도 확인했고, login route도 확인했습니다. 하지만 로그아웃 했을때 같은 에러 메세지를 받았습니다.middlewares를 적용 안하고 terminal 확인을 했을때 이런 메시지를 받았습니다.req.logout에 콜백함수가 필요하다고 해서router.post('/logout', (req, res) => { req.logout((err)=>{ console.error(err) }); req.session.destroy(); res.send('ok'); });logout router를 이렇게 바꾸고 로그아웃 해봤는데, LOG_OUT_SUCCESS는 뜨는데, 서버가 crushed 됬다고 하고, 그 후 로그인이 안됩니다.음..혹시 이 부분 외에 어딜 더 체크해봐야 하는지 조언 해주실 수 있을까요?항상 좋은 강의에 감사합니다 :)

제일 마지막 줄의 원리를 제가 설명해 볼 테니까 틀린 부분이 있다면 말씀해주세요!mealType이 null이므로 meal[mealType] 역시 null이고 이 값은 falsy하기 때문에 결국 getMeal에서 최종적으로 리턴하는 값은 "굶기"인 거죠? 

쇼핑몰 프로젝트에서 db.json 파일을 API로 불러오는 코딩을 하였습니다. 그런데 전체 목록(ProductAll.js) 파일에서 부트스트랩으로 한 줄에 4개의 제품을 보여주고 있는데 한 줄에 4개의 제품이 안나오고 한줄에 하나씩만 나옵니다. 어디가 문제인지 모르겠습니다. 소스코드 같이 올려 드립니다.답변 좀 부탁 드립니다.  ProductCard.js 파일입니다. import React from 'react' const ProductCard = ({item}) => { return ( <div className="card"> <img width={200} src={item?.img} alt="제품이미지" /> <div>Concious Choice</div> <div>{item?.title}</div> <div>{item?.price}</div> <div>{item?.new === true ? "신제품" : ""}</div> </div> ); }; export default ProductCard App.css 파일입니다. - css는 제가 임의로 작성을 했습니다. .login-button { display: flex; justify-content: flex-end; margin: 20px; } .login-margin { margin-left: 7px; } .image_size { width: 60px; } .nav-section { width: 100; display: flex; justify-content: center; } .menu-list { display: flex; list-style-type: none; } .menu-list li { padding: 10px; } .menu-area { display: flex; justify-content: center; } .search-box { border-bottom: 1px solid black; position: absolute; right: 20px; padding: 5px; } .search-box input { border: none; margin-left: 5px; } .search-box input:focus { outline: none; } .card { border: none !important; margin-bottom: 10px; }ProductAll.js 파일입니다. import React, { useEffect, useState } from 'react' import ProductCard from '../component/ProductCard'; import { Container, Row, Col } from 'react-bootstrap'; const ProductAll = () => { const [productList, setProductList] = useState([]); const getProducts = async () => { let url = "http://localhost:5000/products"; // url에 있는 데이터(json)를 받는 함수. let response = await fetch(url); // JSON 데이터를 javascript 객체로 변환해 주는 함수. let data = await response.json(); setProductList(data); } useEffect(() => { getProducts(); }, []); return ( <div> <Container> <Row> {productList.map((menu) => ( <Col md={3}> <ProductCard item={menu} /> </Col> ))} </Row> </Container> </div> ) } export default ProductAll

리엑트를 새로고침하여 시작할 때 처음 시작할때 랜더링이 두번 되는 것 같습니다찾아보니다 StrictMode를 사용하면 두번 랜더링이 되는것 같은데 저는 StricMode를 사용하고 있지 않습니다import React from "react"; import ReactDOM from "react-dom/client"; import Lotto from "./Lotto"; const root = ReactDOM.createRoot(document.querySelector("#root")); root.render(<Lotto />);이게 저희 client.jsx코드인데 렌더링이 2번 일어나니 이 쪽 파일 문제인 것 같습니다제가 사용하는 리엑트버전은 "react": "^18.2.0", "react-dom": "^18.2.0"입니다 혹시 이 버전들은 자동으로 strictMode가 적용되는 건가요?

어디가 잘못 돼서 사진이 안 나오는 건지 모르겠습니다

Uncaught at new InvariantError (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\ts-invariant\lib\invariant.cjs:16:28) at Object.invariant (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\ts-invariant\lib\invariant.cjs:28:15) at parser (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\@apollo\client\react\parser\parser.cjs:34:23) at Object.verifyDocumentType (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\@apollo\client\react\parser\parser.cjs:93:21) at useMutation (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\@apollo\client\react\hooks\hooks.cjs:431:12) at BoardWrite (webpack-internal:///./pages/src/components/units/board/write/BoardWrite.container.js:34:86) at processChild (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14) at resolve (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29) 콘솔창에는 이렇게 찍히고콘테이너 코드입니다import { useMutation } from "@apollo/client"; import { useRouter } from "next/router"; import { useState } from "react"; import CREATE_BOARD from "./BoardWrite.queries"; import BoardWriteUI from "./BoardWrite.presenter"; export default function BoardWrite() { const router = useRouter(); //입력값 받는 훅 const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); //오류코드 받는 훅 const [writerError, setWriterError] = useState(""); const [passwordError, setPasswordError] = useState(""); const [titleError, setTitleError] = useState(""); const [contentsError, setContentsError] = useState(""); //입력값 저장하는 훅 const [createBoard] = useMutation(CREATE_BOARD); //입력값(작성자) 받는곳 & 오류창 없애는곳 function onChangeWriter(event) { setWriter(event.target.value); if (event.target.value !== "") { setWriterError(""); } } function onChangePassword(event) { setPassword(event.target.value); if (event.target.value !== "") { setPasswordError(""); } } function onChangeTitle(event) { setTitle(event.target.value); if (event.target.value !== "") { setTitleError(""); } } function onChangeContents(event) { setContents(event.target.value); if (event.target.value !== "") { setContentsError(""); } } //등록 함수 const onClickInformation = async () => { if (!writer) { setWriterError("작성자를 입력해주세요"); } if (!password) { setPasswordError("비밀번호를 입력해주세요"); } if (!title) { setTitleError("제목을 입력해주세요"); } if (!contents) { setContentsError("내용을 입력해주세요"); } if (writer && password && title && contents) { try { const result = await createBoard({ variables: { createBoardInput: { writer, password, title, contents, }, }, }); console.log(result.data.createBoard._id); router.push(`/portfolio/boards/${result.data.createBoard._id}`); } catch (error) { alert(error.message); } } }; return ( <div> <BoardWriteUI aaa={onChangeWriter} bbb={onChangePassword} ccc={onChangeTitle} ddd={onChangeContents} eee={onClickInformation} aaaa={writerError} bbbb={passwordError} cccc={titleError} dddd={contentsError} /> </div> ); } 유아이 코드입니다import { Container, MainTitle, InformationBox, WriterBox, WriterInput, Title, TitleContents, TitleBox, Input, ContentsContent, AddressNumber, AddressBox, ButtonOne, AddressBtnBox, PicContentsBox, CheckBoxes, CheckBoxesContainer, CheckBoxSpan, OkBtn, UploadBtn, Address, ErrorText, } from "./BoardWrite.styles"; export default function BoardWriteUI(props) { return ( //html 자리 <Container> <MainTitle>게시물 등록</MainTitle> <InformationBox> <WriterBox> <Title>작성자</Title> <WriterInput type="text" placeholder="이름을 적어주세요." onChange={props.aaa} ></WriterInput> <ErrorText>{props.aaaa}</ErrorText> </WriterBox> <WriterBox> <Title>비밀번호</Title> <WriterInput type="password" placeholder="비밀번호를 적어주세요." onChange={props.bbb} ></WriterInput> <ErrorText>{props.bbbb}</ErrorText> </WriterBox> </InformationBox> <TitleBox> <Title>제목</Title> <TitleContents type="text" placeholder="제목을 작성해주세요." onChange={props.ccc} ></TitleContents> <ErrorText>{props.cccc}</ErrorText> </TitleBox> <TitleBox> <Title>내용</Title> <ContentsContent type="text" placeholder="내용을 작성해주세요." onChange={props.ddd} ></ContentsContent> <ErrorText>{props.dddd}</ErrorText> </TitleBox> <AddressBox> <Title>주소</Title> <AddressBtnBox> <AddressNumber type="text" placeholder="07250"></AddressNumber> <ButtonOne>우편번호 검색</ButtonOne> </AddressBtnBox> <Address type="text"></Address> <Address type="text"></Address> </AddressBox> <TitleBox> <Title>유튜브</Title> <Input type="text" placeholder="링크를 복사해주세요."></Input> </TitleBox> <TitleBox> <Title>사진 첨부</Title> <PicContentsBox> <UploadBtn>+</UploadBtn> <UploadBtn>+</UploadBtn> <UploadBtn>+</UploadBtn> </PicContentsBox> </TitleBox> <TitleBox> <Title>메인 설정</Title> <CheckBoxesContainer> <CheckBoxes type="checkbox"></CheckBoxes> <CheckBoxSpan className="youtube">유튜브</CheckBoxSpan> <CheckBoxes type="checkbox"></CheckBoxes> <CheckBoxSpan className="youtube">사진</CheckBoxSpan> </CheckBoxesContainer> </TitleBox> <OkBtn onClick={props.eee}>등록하기</OkBtn> </Container> ); } 쿼리 코드입니다import { gql } from "@apollo/client"; export const CREATE_BOARD = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput: $createBoardInput) { _id } } `; 마지막으로 인덱스 코드입니다,import BoardWrite from "../../../src/components/units/board/write/BoardWrite.container"; export default function board() { //자바스크립트 자리 return ( //html 자리 <div> <BoardWrite /> </div> ); } 화면에는Server ErrorInvariant Violation: Argument of undefined passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a document요렇게 적혀있는데 어떤 에러일까요?

버전이 달라서 그런지 모르겠는데다른분들은 딱히 그런 문의가 없어서 왜인지 모르겠지만 저는 page 폴더도 없고 app.js 도 없고 style폴더도 없어서 그냥 제가 따라서 만들었는데 API수업에서 app.js가 없다보니 기본컴포넌트를 사용할수 없네요..있는거라곤 app폴더안에 layout.js와page.js는 있는데 page.js이 시작파일인것 같은데 여길 수정해도 달라지는건 없더라구요..

혹시나 모르실분들이 있을거 같아서 남깁니다.영상에 보이는 구조로 받으시려면npx create-next-app@12.1.0 --typescript ./ 로 하면됩니다. 꽤나 당황했네요 ㅎㅎ