graphql의 장점이 딱 원하는 데이터만 가져온다는 것은 이해가 되는데, REST API도 딱 원하는 DB 컬럼만 요청해서 가져오거나 할 수도 있지 않나요? 이게 어떠한 차이가 있나 궁금합니다. ㅎㅎ

안녕하세요, 강의랑 조금 동떨어지는 질문일수 있어 조심스럽습니다..보통 submit같은 경우 onSubmit 로 이름을 지로 짓고는하는데요근데 다른 분들의 코드를 보면 submit말고 다른 함수 이름을 지을때handle 랑, on 이랑 섞어서 사용하시더라구요강사님은 이 강의에서 on 이름을 사용하셨지만..이거랑 별개로 강사님은 어떤 기준으로 이름을 짓고 사용하시는지 궁금합니다.

itemForm파일에서<Modal bind:modalActive={$modalActiveItem}> 이렇게 되어있는데요Modal코드를가보면<script> export let modalActive = false const closeModal = () => { modalActive = false } </script> {#if modalActive} <div class="modal-bg" class:show={modalActive === true}> <div class="custom-modal" class:show={modalActive === true}> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <slot name="modal-title"></slot> <button type="button" class="btn-close" on:click={closeModal} ></button> </div> <slot name="modal-body"></slot> <slot name="modal-footer"></slot> </div> </div> </div> </div> {/if} 이런식으로 modalActive가 boolean으로 되어있습니다.하지만 itemForm에서<Modal bind:modalActive={$modalActiveItem}> 여기 코드에서 $modalActiveItem는 store에서 function setModalActiveItem() { const { subscribe, set } = writable(false) const openModal = () => set(true) const closeModal = () => set(false) return { subscribe, set, openModal, closeModal, } } export const modalActiveItem = setModalActiveItem()이런형태의 함수이고, 객체형태로 리턴을해주고있는데블리언 형태로 넣을수가 있는지 궁금합니다.스벨트에서 블리언 타입이란, 바인드로 존재하는 객체를 넣었을때, 그 객체가 존재하면 그게 true가되는걸까요?이것도 저것도 아니라면..함수에 감싸고있지만 const { subscribe, set } = writable(false) 이것때문에 초기값이 false로 리턴이된다는건가요?어떻게 이게 가능한거지 너무어렵습니다..

선생님 안녕하세요부트스트랩 파일은 말그대로 부트스트랩 코드를 파일로 가져오신거같은데boxicon폴더는 선생님이 따로 만들어두신 폴더를 이번 강의에 사용하고계신걸까요? 넘 유용한거같은데 혹시 스토리북으로 설정해두신게 있으실까요?고수들은 따로 css 스타일폴더를 관리한다고하던데 선생님도 혹시 이런식으로 관리하시나용?

선생님 안녕하세요,섹션7 디자인요소배치 코드를 따라쳤으나흰색 화면이 떠서 문의드렸습니다.https://github.com/jungsikjeong/smart-menu-study제가 여태까지 작성한 코드인데요.. 혹시 실수한 부분이있을까요?..선생님 강의 영상 코드랑 계속 대조해보기도하고,선생님 깃허브 코드랑 비교도해보고있는데..쉽지않네요..

토큰이 만료되면 리프레시토큰을 확인하고,리프레시토큰 기간이 남아있다면 access토큰을 재발급해주고,리프레시토큰도 유효기간이 끝났다면 로그아웃을 시켜주는 기능은어떤식으로 개발할 수 있을까요?..프론트쪽에서 서버에게 통신하는 방법이 궁금합니다..커리큘럼에 로그인 인증관련 제목이있어서 이런방법이있을줄알고 구매후 다섯시간가량 듣고있는데 없는거 같아서 절망스럽습니다ㅠ_ㅠ

위의 내용은 강의 캡쳐본입니다. 이렇게 코드짜면 기존 값에서 변경된 부분은 수정이 반영이 되겠지만 기존값 삭제에 대해서는 반영이 안됩니다. if(writer) ~ 이런식으로 코드를 작성하셨는데 writer의 값이 존재해야만 myvariables의 writer에 값이 들어가고 해당 배열이 updateBoard로 들어가서 업데이트 뮤테이션이 실행되는 구조입니다. 수정 기능이라면 빈값 수정도 가능해야하는데 이런식으로 코드를 짜지는 않겠죠.인프런에서도 가격대가 있는 강의 인데 내용이 너무나 부실합니다.차라리 디폴트값을 undefined로 셋팅하고이런식으로 조건문 작성하는게 맞지 않나 싶습니다. 빈값에 대해서도 반영이 되는 더 좋은 방식이 있다면 알려주셨으면 좋겠습니다.(추가로 onChange는 드래그 삭제에 대해서는 아예 감지가 안되는 부분이라 onInput을 이용하였습니다.)위의 내용 관련해서 노원두 강사님의 입장이 궁금합니다. 강의가 부실한건지 뭔지 모르겠네요.추가로 https://www.inflearn.com/questions/1324853/section11-%ED%8F%AC%ED%8F%B4%EB%A6%AC%EB%B7%B0-%EB%82%B4%EC%9A%A9-%EB%B6%80%EC%8B%A4%ED%95%9C%EB%93%AF-%ED%95%A9%EB%8B%88%EB%8B%A4-github%EC%97%90-%EC%82%AD%EC%A0%9C%EC%BF%BC%EB%A6%AC-%EC%A1%B0%EC%B0%A8-%EC%97%86%EC%9D%8C해당 글의 답변은 회피하시고 다른 질문에 대해서만 답변하시던데 어디로 연락드려야 소통이 가능할까요?

안녕하세요! 강사님! 우선 훌륭한 강의, 진짜 감사드립니다! 완강 후 필요한 부분은 다시 찾아보고 있는데, 처음 봤을 때도, 다시 볼 때도 이해가 쉽게 될 수 있도록 알려주시려는 게 느껴져요. 그래서 도움이 많이 되었습니다! 강사님 덕분에 자신감이 엄청 생겨서, 개발에 더 큰 흥미가 생겼어요! 늘 감사합니다.  제가 이번에 복습 겸 학습에 활용되었던 프로젝트를 다시 만들어보려고 하는데, next버전 관련하여 질문이 있습니다.  강의에는 next 12버전으로 실습했는데, 실무에서 12버전이 많이 쓰이나요?  버전 12에서 더 공부를 해야 할지, (강의를 듣는 동안 못 따라간 부분은 거의 없으나, 익숙하진 않은 것 같아서 학습이 더 필요한 것 같아요! )아니면 현재 강사님께 배운 것을 토대로 앞으로 진행하는 프로젝트는 버전을 높여야 할지 고민이 됩니다.

포트폴리오 만든 게시판 정보 입력후 등록하기 버튼을 누르면 아래와 같이 오류가 뜹니다.new:1 Access to fetch at 'http://backend-practice.codebootcamp.co.kr/graphql' from origin 'http://localhost:3004' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.코드상에는 문제가 없는 거같은데.. 주소 확인 부탁드립니다.. ㅠimport { gql, useMutation } from "@apollo/client"; import { useRouter } from "next/router"; import React, { useState } from "react"; import { Address, ButtonWrapper, Contents, ImageWrapper, InputWrapper, Label, OptionWrapper, Password, RadioButton, RadioLabel, SearchButton, Subject, SubmitButton, Title, UploadButton, Wrapper, Writer, WriterWrapper, Youtube, Zipcode, ZipcodeWrapper, } from "../../../styles/boardsNew"; const CREATE_BOARD = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput: $createBoardInput) { _id } } `; export default function BoardsNewPage() { 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); const onChangeWriter = (event) => { setWriter(event.target.value); if (event.target.value !== "") { setWriterError(""); } }; const onChangePassword = (event) => { setPassword(event.target.value); if (event.target.value !== "") { setPasswordError(""); } }; const onChangeTitle = (event) => { setTitle(event.target.value); if (event.target.value !== "") { setTitleError(""); } }; const onChangeContents = (event) => { setContents(event.target.value); if (event.target.value !== "") { setContentsError(""); } }; const onClickSubmit = 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(`/boards/${result.data.createBoard._id}`); } catch (error) { alert(error.message); } } }; return ( <Wrapper> <Title>게시글 등록</Title> <WriterWrapper> <InputWrapper> <Label>작성자</Label> <Writer type="text" placeholder="이름을 적어주세요." onChange={onChangeWriter} /> <div style={{ color: "red" }}>{writerError}</div> </InputWrapper> <InputWrapper> <Label>비밀번호</Label> <Password type="password" placeholder="비밀번호를 작성해주세요." onChange={onChangePassword} /> <div style={{ color: "red" }}>{passwordError}</div> </InputWrapper> </WriterWrapper> <InputWrapper> <Label>제목</Label> <Subject type="text" placeholder="제목을 작성해주세요." onChange={onChangeTitle} /> <div style={{ color: "red" }}>{titleError}</div> </InputWrapper> <InputWrapper> <Label>내용</Label> <Contents placeholder="내용을 작성해주세요." onChange={onChangeContents} /> <div style={{ color: "red" }}>{contentsError}</div> </InputWrapper> <InputWrapper> <Label>주소</Label> <ZipcodeWrapper> <Zipcode placeholder="07250" /> <SearchButton>우편번호 검색</SearchButton> </ZipcodeWrapper> <Address /> <Address /> </InputWrapper> <InputWrapper> <Label>유튜브</Label> <Youtube placeholder="링크를 복사해주세요." /> </InputWrapper> <ImageWrapper> <Label>사진첨부</Label> <UploadButton>+</UploadButton> <UploadButton>+</UploadButton> <UploadButton>+</UploadButton> </ImageWrapper> <OptionWrapper> <Label>메인설정</Label> <RadioButton type="radio" id="youtube" name="radio-button" /> <RadioLabel htmlFor="youtube">유튜브</RadioLabel> <RadioButton type="radio" id="image" name="radio-button" /> <RadioLabel htmlFor="image">사진</RadioLabel> </OptionWrapper> <ButtonWrapper> <SubmitButton onClick={onClickSubmit}>등록하기</SubmitButton> </ButtonWrapper> </Wrapper> ); }import { gql, useQuery } from "@apollo/client"; import { useRouter } from "next/router"; import { Avatar, AvatarWrapper, Body, BottomWrapper, Button, CardWrapper, Contents, CreatedAt, Header, Info, Title, Wrapper, Writer, } from "../../../styles/boardsDetail"; export const FETCH_BOARD = gql` query fetchBoard($boardId: ID!) { fetchBoard(boardId: $boardId) { _id writer title contents createdAt } } `; export default function BoardDetailPage() { const router = useRouter(); const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.boardId }, }); return ( <Wrapper> <CardWrapper> <Header> <AvatarWrapper> <Avatar src="/images/avatar.png" /> <Info> <Writer>{data?.fetchBoard?.writer}</Writer> <CreatedAt> {new Date(data?.fetchBoard?.createdAt).toLocaleDateString()} </CreatedAt> </Info> </AvatarWrapper> </Header> <Body> <Title>{data?.fetchBoard?.title}</Title> <Contents>{data?.fetchBoard?.contents}</Contents> </Body> </CardWrapper> <BottomWrapper> <Button>목록으로</Button> <Button>수정하기</Button> <Button>삭제하기</Button> </BottomWrapper> </Wrapper> ); }import "../styles/globals.css"; import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client"; export default function App({ Component, pageProps }) { const client = new ApolloClient({ uri: "http://backend-practice.codebootcamp.co.kr/graphql", cache: new InMemoryCache(), }); return ( <ApolloProvider client={client}> <Component {...pageProps} /> </ApolloProvider> ); }

import { UpCircleOutlined } from "@ant-design/icons"; export default function LibraryIconPage() { return ( <> <UpCircleOutlined /> </> ); }ant-design/icons 5.0.1 버전 다운로드 받고 실행하니까이런 에러가 뜨는데 어떤 문제일까요..?

포트폴리오 리뷰 강의는 먼저 혼자 포트폴리오를 만들고 보는게 좋나요? 아니면 git clone으로 다운받고 어떻게 만들었는지 보고 그냥 넘어가도 되나요?? 리뷰 강의에서 clone으로 설명하는 이유가 궁금해서 여쭤봅니다!

이 부분에서 wrapper__left__body가 튀어나온 이유가, wrapper__left가 정렬되지 않아서라고 하셨고, 그래서 자동으로 div가 block단위이고 한 줄 띄어진 것처럼 된 거다 라고 하셨습니다.근데 div가 block단위이고 한 줄 띄어진 것처럼 되는 게 이해되지 않습니다.. 한 줄 띄어진거면 바로 밑으로 붙여져서 안 튀어나가야하지 않나요? wrapper__left__body크기가 어차피 부모 height에서 wrapper__left__header부분을 뺀 크기의 100%라면요! 아니면 혹시 정렬을 해야지만 부모 height에서 wrapper__left__header부분을 뺀 크기의 100%라고 이해할 수 있는 걸까요? 정렬을 따로 설정하지 않으면 그냥 부모 height의 100%를 가져와서 튀어나가는 걸까요?

[싸이월드만들기1탄]에서 wrapper 사이즈가 어떻게 된 건지 궁금합니다.부모-속성을 보면background -> outerbox -> wrapper -> wrapper__left, wrapper__right입니다!이때, background와 outerbox는 따로 크기를 지정해주었는데, wrapper는 따로 크기를 지정하지 않았더라고요!그러면 wrapper크기는 자동으로 지정되나요? 부모클래스인 outerbox의 width와는 동일한데 height는 달라서요! 혹시 어떻게 지정되는 건지 알 수 있을까요?

게시글 등록 화면에서 작성자, 비밀번호, 제목, 내용 값이 입력되면 등록하기 버튼의 색을 변경해주시고 반대로 값이 입력되지 않았다면 다시 원래 색인 회식으로 되돌리기freeboard_frontend 게시글 목록 화면을 구현해주세요.게시글 상세 화면에서 삭제하기 기능을 구현해주세요.이게 포폴과제인데, section11의 포폴리뷰 영상에는 오직 2번에 대한 내용만 있는듯하고 1,3번에 대한 내용은 아예 빠져있네요. github에 삭제쿼리 한줄조차 없네요. 너무 부실한거 아닌가 싶습니다.

freeboard_frontend 이미지 업로드 부분 진행중인데 upload 버튼 클릭해서 이미지를 선택하면 Cannot destructure property 'url' of 'undefined' as it is undefined.이라는 안내창이 뜨면서 정상적으로 실행이 되지 않습니다.. 원인을 알 수 있을까요?다른 분 문의 글을 보고 혹시 apollo셋팅 문제인가 싶어 yarn add apollo-upload-client 와 yarn add -D @types/apollo-upload-client 를 추가로 설치 해봤는데도 문제 해결이 안됩니다..

위 사진과 같이 search에 'Terra'를 검색했는데 "usedItem":null 인 정보까지 받아와지는데 왜 이런가요?

브라우저에 내용은 모두 잘 입력이 되고 console창에서도 _id가 잘 나왔는데 graphql로 넘어가서 등록된 부분을 확인하려 하니 등록된 게시물이 없다고 나옵니다. 어떤 부분이 문제인걸까요?

필요한 요소들 다 설치 되어있고, 오타없이 작성했는데도Unable to find template plugin matching '-typescript' 오류와 함께 types.ts가 생성이 안됩니다. 혹시나해서 >yarn add -D @graphql-codegen/typescript 다시 설치했지만 같은 오류가 뜹니다. >@graphql-codegen/typescript-plugin 도 설치해봤는데 아래와 같은 오류로 설치가 안되네요

background-image에 적용하는데 있어서 문의가 있습니다.outerbox.png 이미지 키기는 807px 544px 로 나옵니다.현재 outerbox css class에서 width 888px로 주면서 대략 81px 정도가 이미지가 반복되어서 표시됩니다. 이미지 반복을 없애기 위해서 아래와 같은 css를 추가했는데 이번에는 이미지가 잘려서 보입니다.background-repeat: no-repeat background-size: cover강사님 처럼 888px 544px div에 다른 이미지를 일치시켜서 표기하려면 어떻게 해야하나요 ?

강의 듣고 복습하면서 과제도 푸는 중에 갑자기 인터넷 페이지로 보기 위해 실행을 하니, 500번 오류가 수업(example)랑 과제(practice) 둘다 뜨면서 아무것도 뜨지 않습니다.. import 해오는 부분은 아무 이상이 없고, 과제 같은 경우도 이전에 문제 없었던 페이지에서도 같은 500번 오류가 뜹니다 ㅠ