inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

섹션4 01-02-emotion 에러가 나는데 못찾겠습니다ㅜ

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

설치가 잘못된 걸까요.. yarn dev하니 오류가 납니다ㅜ

  • react
  • node.js
  • seo
  • graphql
  • next.js
leeyunje96 댓글 1 좋아요 1 조회수 218

이번 final 과제 피드백 부탁드립니다!

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요! 강의 잘 듣고 있습니다! 이번 과제 코드 피드백 부탁드립니다! 고맙습니다. <화면> <html> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>SignUp</title> <link rel="stylesheet" href="./final.css"> <script defer src="./final.js"></script> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <span id="header__title">코드캠프 회원가입</span> </div> <div class="wrapper__body"> <div class="wrapper__text"> <input type="text" id="email" placeholder="이메일을 입력해 주세요."> <span class="errorMsg email">이메일이 올바르지 않습니다.</span> <input type="text" id="name" placeholder="이름을 입력해 주세요."> <span class="errorMsg name">이름이 올바르지 않습니다.</span> <input type="text" id="pw1" placeholder="비밀번호를 입력해 주세요."> <span class="errorMsg pw1">비밀번호를 입력해주세요.</span> <input type="text" id="pw2" placeholder="비밀번호를 다시 입력해 주세요."> <span class="errorMsg pw2">비밀번호를 입력해주세요.</span> </div> <div class="wrapper__phone" oninput="phone()"> <input type="text" id="num1" maxlength="3"> - <input type="text" id="num2" maxlength="4"> - <input type="text" id="num3" maxlength="4"> </div> <div class="wrapper__certification"> <div class="cert__number"> <span id="certNum">000000</span> <button class="chkBtn" disabled="true">인증번호 전송</button> </div> <div class="cert__time"> <span id="certTimer">3:00</span> <button class="chkBtn" disabled="true">인증완료</button> </div> </div> <div class="wrapper__select"> <div class="select__locale"> <select id="locale"> <option selected disabled>지역을 선택하세요</option> <option value="서울">서울</option> <option value="경기">경기</option> <option value="인천">인천</option> </select> <span class="errorMsg locale">지역을 선택해주세요.</span> </div> <div class="select__gender"> <label for="woman"> <input type="radio" name="gender" id="woman"> 여성 </label> <label for="man"> <input type="radio" name="gender" id="man"> 남성 </label> </div> <span class="errorMsg gender">성별을 선택해주세요.</span> </div> </div> <div class="divideLine"></div> <div class="wrapper__check"> <!-- <button class="submit" disabled="true">가입하기</button> --> <button class="submit">가입하기</button> </div> </div> </body> </html> <css> *{ box-sizing: border-box; margin: 0; } html, body{ width: 540px; } .chkBtn{ width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; color: #0068FF; background-color: #FFF; cursor: pointer; } .chkBtn.active { width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; background-color: #0068FF; color: #FFF; cursor: pointer; } .errorMsg{ width: 100%; color: red; font-size: 10px; display: flex; flex-direction: column; align-items: center; visibility: hidden; } .wrapper{ width: 100%; height: 100%; padding: 60px 80px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25); } .wrapper__header{ width: 100%; font-size: 32px; font-weight: 700; color: #0068FF; padding-bottom: 60px; } .wrapper__body{ width: 100%; } .wrapper__text > input{ width: 100%; height: 60px; margin-top: 20px; font-size: 16px; font-weight: 400; border: 1px solid #D2D2D2; border-radius: 7px; padding: 18px; } .wrapper__phone{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .wrapper__phone > input{ width: 100px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; } .wrapper__certification { width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } #certNum, #certTimer{ color: #0068FF; font-size: 18px; padding-right: 20px; } .cert__time{ padding: 20px 0; } .wrapper__select{ width: 100%; display: flex; flex-direction: column; align-items: center; } .select__locale{ width: 100%; display: flex; flex-direction: column; justify-content: center; } #locale{ width: 100%; height: 60px; border: 1px solid #D2D2D2; border-radius: 7px; color: #797979; font-size: 16px; font-weight: 400; padding: 18px; } .select__gender{ width: 140px; display: flex; justify-content: space-between; padding-top: 30px; } .divideLine{ width: 100%; border: 1px solid #E6E6E6; margin: 20px 0; } .wrapper__check{ width: 100%; display: flex; justify-content: center; } .submit { width: 100%; height: 60px; font-size: 18px; font-weight: 400; color: #0068FF; background-color: #FFF; border: 1px solid #0068FF; border-radius: 7px; } <js> const submit = document.querySelector('.submit'); // 가입하기 const numberChk = document.querySelector('.cert__number .chkBtn'); // 인증번호 전송 const timeChk = document.querySelector('.cert__time .chkBtn'); // 인증완료 let time = 180; // 180초, 인증 시간 let isStarted = false; // email const emailChk = () => { let email = document.getElementById('email').value; if(email.includes('@') === true){ let isEmail = email.split('@')[1].includes('.'); if(isEmail === false){ document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.querySelector('.errorMsg.email').value = ''; return false; } else { document.querySelector('.errorMsg.email').style.visibility = 'hidden'; return true; } } else { document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.getElementById('email').value = ''; return false; } } // name const nameChk = () => { let name = document.getElementById('name').value; if(name.length === 0){ document.querySelector('.errorMsg.name').style.visibility = 'visible'; return false; } else { document.querySelector('.errorMsg.name').style.visibility = 'hidden'; return true; } } // pw const pwChk = () => { let pw1 = document.getElementById('pw1').value; let pw2 = document.getElementById('pw2').value; if(pw1 && pw2){ if(pw1 === pw2){ document.querySelector('.errorMsg.pw1').style.visibility = 'hidden'; document.querySelector('.errorMsg.pw2').style.visibility = 'hidden'; return true; } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; document.querySelector('.errorMsg.pw1').innerHTML = '비밀번호가 일치하지 않습니다.' document.querySelector('.errorMsg.pw2').innerHTML = '비밀번호가 일치하지 않습니다.' return false; } } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; return false; } } // phone const phone = () => { let num1 = document.getElementById('num1').value; let num2 = document.getElementById('num2').value; let num3 = document.getElementById('num3').value; if(num1.length === 3) { document.getElementById('num2').focus(); if(num2.length === 4) { document.getElementById('num3').focus(); } } if(num1.length === 3 && num2.length === 4 && num3.length === 4){ numberChk.classList.add('active'); certification(); } } const certification = () => { // 인증번호 numberChk.disabled = false; numberChk.addEventListener('click', e => { let randomNumber = String(Math.trunc(Math.random() * 1000000)).padStart(6, '0') document.getElementById('certNum').innerText = randomNumber; // 타이머 if(isStarted === false){ isStarted = true; timeChk.disabled = false; let timer = setInterval(() => { if(time >= 0){ let min = Math.trunc(time / 60); let sec = String(time % 60).padStart(2,'0'); document.getElementById('certTimer').innerText = `${min}:${sec}`; time--; } else { clearTime(timer); } }, 100) timeChk.addEventListener('click', e => { if(time >= 0){ alert('인증이 완료 되었습니다.'); clearTime(timer); submit.disabled = false; } }) } }) } const clearTime = (timer) => { timeChk.classList.remove('active'); numberChk.classList.remove('active'); document.getElementById('certNum').innerText = '000000'; document.getElementById('certTimer').innerText = '0:00'; timeChk.disabled = true; numberChk.disabled = true; isStarted = false; clearInterval(timer); } const checkValidation = () => { emailChk(); nameChk(); pwChk(); if(emailChk() && nameChk() && pwChk()) { return true; } else { return false; } } // 검증 submit.addEventListener('click', e => { checkValidation(); if(checkValidation()){ alert('코드캠프 가입을 축하합니다.'); } });

  • react
  • node.js
  • seo
  • graphql
  • next.js
개발하는 알파카 댓글 1 좋아요 0 조회수 222

함수에 대해 질문있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

자바스크립트 함수가 조금 어려운데 함수는 그냥 관련된 코드들을 작성할 때 사용하나요? 예를 들어 input으로 어떠한걸 한다면 input 함수를 만들어서 이 함수안에는 input과 관련된 코드들을 작성한다고 보면되는건가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 1 좋아요 0 조회수 178

섹션 7 GraphQL 관련 질문 드립니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 섹션 04-05-graphql-mutation-product 따라하고 있는데 도중에 저런 에러 메세지가 떴습니다. 디버깅 하려고 해도 Network 부분에 message 부분이 안 뜨네요ㅠ 검색해보니 쿠키 및 인터넷 기록 삭제해보라고 나오는데.. 삭제해도 해결이 안 되고요ㅠㅠ 어떻게 해야 해결될까요? 도움 부탁드립니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
edo020424 댓글 2 좋아요 0 조회수 289

회원가입 과제 완료용

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요!! 과제 완료해서 피드백 부탁드리고자 올렸습니다! 앞으로 잘 부탁 드립니당~ <html> <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html> <css> * { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }

  • react
  • node.js
  • seo
  • graphql
  • next.js
개발하는 알파카 댓글 2 좋아요 0 조회수 303

types.ts 파일이 안생깁니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

10-04-graphql-codegen-mutation/query 안녕하세요, 원두 강사님. 아래글에서 빠른 답글 감사합니다. 그러나 아직 해결이 되지 않은 문제가 있습니다. "yarn generate"를 하면 Done이라고 뜨긴 하는데 ts파일이 전혀 생성되지 않고 있습니다. 터미널 창 입니다. ts파일이 생기지 않은 모습입니다. codegen.yaml 파일입니다. (띄어쓰기는 두번 씩으로 들여쓰기가 한번 씩 되어 있습니다.) package.json 파일입니다. 제가 시도한 터미널 명령어는 rm -rf ./node_modules && npm install yarn add -D @graphql-codegen/cli yarn add -D @graphql-codegen/typescript yarn add ts-node 입니다. 좌측 메뉴탭 윗부분의 새로고침 버튼을 여러번 눌러봐도 마찬가지고 비쥬얼스튜디오코드 에디터를 껐다 다시 켜봐도 마찬가지 입니다ㅠㅜㅠㅜ AI 답변 받은 이후 차근차근 따라 해봤지만 해결이 안되고 있습니다. 노드모듈즈와 yarn.lock을 지우고 yarn install 이후 package.json 에서 코드젠 관련 된 코드줄 다 지우고 다시 처음부터 하나씩 해봐도 안됩니다.

  • react
  • next.js
  • graphql
  • codegen
energy 댓글 2 좋아요 0 조회수 616

ApolloError: request to http://mock.com/graphql failed, reason: response3.headers.all is not a function

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

33-05 강의에서 test에서 자꾸 이 오류가 뜹니다 apis.js import { graphql } from "msw"; const gql = graphql.link("http://mock.com/graphql") export const apis = [ gql.mutation("createBoard", (req, res, ctx) => { const { writer, title, contents } = req.variables.createBoardInput return res( ctx.data({ createBoard: { _id: "qqq", writer, title, contents, __typepname: "Board", }, }) ); }), // gql.query("fetchBoards", () => {}) ]; jest.setup.js import { server } from "./src/commons/mocks/index" beforeAll(() => server.listen()); afterAll(() => server.close()); index.test.tsx import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import StaticRoutingMovedPage from "../../pages/section33/33-05-jest-unit-test-mocking"; import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, } from "@apollo/client"; import fetch from "cross-fetch"; import mockRouter from "next-router-mock"; jest.mock("next/router", () => require("next-router-mock")); it("게시글이 잘 등록되는지 테스트 하자!", async () => { const client = new ApolloClient({ link: new HttpLink({ uri: "http://mock.com/graphql", fetch, }), cache: new InMemoryCache(), }); render( <ApolloProvider client={client}> <StaticRoutingMovedPage /> </ApolloProvider> ); fireEvent.change(screen.getByRole("input-writer"), { target: { value: "맹구" }, }); fireEvent.change(screen.getByRole("input-title"), { target: { value: "안녕하세요" }, }); fireEvent.change(screen.getByRole("input-contents"), { target: { value: "방가방가" }, }); fireEvent.click(screen.getByRole("submit-button")); await waitFor(() => { expect(mockRouter.asPath).toEqual("/boards/qqq"); }); }); 도와주십쇼 ㅠㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
김무연 댓글 4 좋아요 0 조회수 681

안녕하세요 리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 합니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 하는데 로그인api를 호출 후 fetchUser를 호출하면 Unauthorized에러가 납니다 헤더에 토큰이 저장되지 않아서 그런걸까요?

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
  • graphql
  • react
김선규 댓글 1 좋아요 0 조회수 324

섹션 31 댓글 기능 구현 과제 관련 질문

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 섹션 31 댓글 기능 구현 과제 중 궁금한 점이 있어 질문 남깁니다 댓글 리스트의 수정 아이콘 클릭 시 사진과 같은 화면이 나오도록 했고, 댓글 등록하기 presenter component를 재사용 했습니다 댓글 리스트 presenter 파일입니다 export default function CommentListUI(props) { return ( <S.Wrapper> {props.data?.fetchBoardComments.map((item) => ( <S.CommentListWrapper key={item._id}> {props.isEdit && props.commentId === item._id ? ( <CommentWriteUI></CommentWriteUI> ) : ( <S.Comment_Container> <S.profile_icon src="/02/profile_icon.png"></S.profile_icon> <S.Content_container> <S.Name_Star_container> <S.Text style={{ fontWeight: "600" }}>{item.writer}</S.Text> <S.ReviewStar_container style={{ marginLeft: "16px" }}> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> </S.ReviewStar_container> </S.Name_Star_container> <S.Text style={{ marginTop: "-15px", fontWeight: "500" }}> {item.contents} </S.Text> <S.Text style={{ fontSize: "12px", fontWeight: "400", color: "#BDBDBD", }} > {getDate(item.createdAt)} </S.Text> </S.Content_container> <S.Icon_container> <S.Icon style={{ backgroundImage: `url("/createComment.png")` }} onClick={() => props.onClickTEST(item._id)} ></S.Icon> <S.Icon style={{ backgroundImage: `url("/clear.png")` }} onClick={() => props.onClickDelete(item._id)} ></S.Icon> </S.Icon_container> </S.Comment_Container> )} </S.CommentListWrapper> ))} </S.Wrapper> ); } 삼항연산자를 사용해 나오는 화면을 다르게 했습니다 isEdit 변수는 수정하기 아이콘 클릭 시 true로 바뀌고, 삼항연산자 조건에 isEdit 변수만 사용하니 수정 아이콘을 클릭하지 않은 다른 댓글 리스트가 사라지면서 재사용한 댓글 등록 presenter 파일만 화면에 나와서 조건은 위와 같이 작성했습니다 여기서 문제는 수정 아이콘을 클릭해 나오는 댓글 등록 창은 container 파일에 작성한 함수가 작동하지 않는 것입니다 댓글 리스트 container 파일입니다 export default function CommentList() { const { data } = useQuery(FETCH_COMMENTS); const [deleteBoardComment] = useMutation(DELETE_COMMENTS); const onClickDelete = async (item) => { const pw = prompt("비밀번호를 입력해주세요."); try { await deleteBoardComment({ variables: { pw: pw, boardCommentId: item, }, refetchQueries: [{ query: FETCH_COMMENTS }], }); alert("삭제되었습니다."); } catch (error) { alert(error.message); } }; // 수정하기 아이콘 클릭 시 화면 변화 const [isEdit, setIsEdit] = useState(false); const [commentId, setCommentId] = useState(); const onClickTEST = (item) => { setIsEdit(true); setCommentId(item); }; // console.log(commentId); return ( <CommentListUI data={data} onClickDelete={onClickDelete} onClickTEST={onClickTEST} isEdit={isEdit} commentId={commentId} ></CommentListUI> ); } 댓글 등록 container 파일입니다 const [updateBoardComment] = useMutation(UPDATE_BOARD_COMMENT); const onClickUpdate = () => { // updateBoardComment({ // variables: { // updateBoardCommentInput: { // contents: contents, // rating: 0 // }, // password: pw, // boardCommentId: // } // }) console.log("Test"); }; return ( <> <CommentWriteUI onChangeWriter={onChangeWriter} onChangePw={onChangePw} onChangeContents={onChangeContents} onClickUpdate={onClickUpdate} ></CommentWriteUI> </> ); } onClickUpdate 함수는 댓글 작성 presenter 파일의 등록하기 버튼에 연결되어 있습니다 상세 페이지 로딩 시 나오는 댓글 등록창은 버튼 클릭 시 콘솔이 제대로 나오는데 댓글 리스트 수정 아이콘을 눌러 나오는 댓글 등록창에서는 버튼을 눌러도 콘솔 자체가 나오지 않습니다 댓글 과제 가이드를 확인해서 어떻게 수정하면 좋을지는 알았지만, 궁금한 점이 해소되지 않네요 궁금한 점은 삼항연산자, map 등 기능의 속성을 제대로 알지 못한 채 사용한 문제인지 코드 자체를 잘못 작성한 것인지 추가로 rating(별점) 데이터 활용법에 대한 힌트를 얻고 싶습니다 rating 값 1 = 별 1개 인가요? rating 숫자 데이터가 별과 어떻게 연결되는지 잘 모르겠습니다 부족한 점이 많아 질문이 너무 길어졌네요 항상 감사합니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
zero.1.0.one.xx 댓글 2 좋아요 0 조회수 614

Cannot find module 'msw/node' from 'src/commons/mocks/index.js'

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요. test를 하던 중 오류가 발생하여 문의드립니다. 지금 현재 코드를 import { setupServer } from "msw/node"; import { apis } from "./apis"; export const server = setupServer(...apis); 위에처럼 입력해 놓은 상태입니다. 하지만 테스트 실행 시 아래와 같이 발생합니다. Cannot find module 'msw/node' from 'src/commons/mocks/index.js' Require stack: src/commons/mocks/index.js jest.setup.js > 1 | import { setupServer } from "msw/node"; | ^ 2 | import { apis } from "./apis"; 추가적으로 지금 jest관련 페이지에서 Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\commons\mocks\index.js` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to include this file - Create a new TSConfig that includes this file and include it in your parserOptions.project See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run-- 위와 같은 오류가 발생합니다. 해결 부탁드립니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
dlwjdgus3217 댓글 2 좋아요 0 조회수 1280

fetchPointTransactionsOfBuying API에서 특정 정보만 불러와지지 않습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 강사님. 마이페이지 내 포인트 화면의 구매내역 조회기능을 구현 중에 있습니다. fetchPointTransactionsOfBuying API 로 구매내역을 조회하는데 판매자의 이름이 불러와지지 않습니다.. const FETCH_POINT_TRANSACTIONS_OF_BUYING = gql` query fetchPointTransactionsOfBuying($search: String, $page: Int) { fetchPointTransactionsOfBuying(search: $search, page: $page) { _id impUid amount balance status statusDetail useditem { _id name price seller { _id # name # email } buyer { _id name email } soldAt } createdAt } } `; useditem.seller._id 까지는 조회가 되는데 name 과 email 은 조회가 되지않습니다. 혹시나 해서 buyer 정보를 불러왔는데 buyer 도 _id 만 조회가 되고 name 과 email 는 조회가 되지 않습니다. 위와 같은 오류가 나오는데 제가 모르는 부분이 있는건지 데이터에 문제가 있는건지 잘 모르겠습니다.. !

  • react
  • node.js
  • seo
  • graphql
  • next.js
summery 댓글 2 좋아요 0 조회수 348

api 질문입니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

포토폴리오 마이페이지 - 내포인트 부분을 작업하는 도중 api 질문입니다. fetchPointTransactionsOfBuying 이 내포인트 -> 구매내역 api로 알고있습니다. 피그마를 보면 거기서 판매자 데이터를 가져오고있는데 오류가 뜨네요.ㅠ 판매자 데이터를 가져오고 싶은데 여기서 seller {name} 이부분을 넣으면 데이터가 안가져오네요.. 판매자데이터가 없어서 그런건지 왜 그런지와 어떻게 해야하는지 두가지 모두 알고싶습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
임프런 댓글 2 좋아요 0 조회수 381

vite-plugin-next-react-router

미해결

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

vite-plugin-next-react-router 다운받고 강의를 따라했는데요.. routes.tsx파일이 자동으로 생성이 되지않습니다. 그런데 이상하게 페이지가 작동이되요.. 이유가 뭘까요..? vite.config.ts 내용은 조금 다릅니다.reactRouterPlugin를 사용하면 오류가 생겨서 withReactRouter 으로 교체했습니다. 나머지 파일생성과 코드는 동일합니다.. import { defineConfig } from "vite"; import withReactRouter from "vite-plugin-next-react-router"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react(), withReactRouter()], });

  • react
  • firebase
  • graphql
Nuri Park 댓글 3 좋아요 0 조회수 1505

싸이월드 실습 4탄 질문이요 ㅠㅠ

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

싸이월드 실습 4탄 하는 중인데 LOTTO 부분에 "특히 버튼과 숫자박스 부분"이 왜 세로로 다닥다닥 붙어있을까요..ㅠ game__container 부분에 flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; 가 들어있고 lotto__text부분에도 display: flex; flex-direction: column; align-items: center; justify-content: space-between; 를 넣어봤으나 아무 변화가 없었습니다 ㅠ game.html: <!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span> </div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search">입력</button> </div> <div class="word__result" id="result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle"> 버튼을 누르세요. </div> <div class="lotto__text"> <div class="number__box"> <div class="number1">3</div> <div class="number1">5</div> <div class="number1">10</div> <div class="number1">24</div> <div class="number1">30</div> <div class="number1">34</div> </div> <button class="lotto_button">Button</button> </div> </div> </div> </body> </html> game.css: * { box-sizing: border-box; margin: 0px } html, body{ width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; /* 박스가 wrapper안에 game__container 두개 총 세개*/ align-items: center; justify-content: space-between; } .wrapper__header{ width: 100%; display: flex; flex-direction: column; } .header__title{ display: flex; flex-direction: row; align-items: center; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .game__container{ width: 222px; height: 168px; border: 1px solid gray; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; background-color: #f6f6f6; } .game__title { font-size: 15px; font-weight: 900; } .game__subtitle { font-size: 11px; } .word__result { font-size: 11px; font-weight: 700; } .word__text { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .textbox { width: 130px; height: 24px; border-radius: 5px; } .search { font-size: 11px; font-weight: 700; width: 38px; height: 24px; } .number__box{ width: 130px; height: 24px; border-radius: 5px; background-color: #FFE400 ; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .lotto__text { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .number1{ font-size: 10px; font-weight: 700px; margin: 5px; } .lotto_button { font-size: 11px; font-weight: 700; width: 62px; height: 24px; }

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 2 좋아요 0 조회수 471

로그인한 user의 비밀번호를 변경하는 API updateUserPwd 로직

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

quiz19 -2 에서 토큰기반인증(로그인)된 유저의 비밀번호 변경 로직을 구현하고 있는데요.. resolver와 service의 연결부분에서 에러가 발생하는데 혼자서 해결이 어려워 문의드립니다. 제가 생각한 updateUserPwd의 로직은 유저가 있는지의 여부 확인 비밀번호의 일치 여부 확인 bcrypt로 변경하고자하는 비밀번호의 암호화 암호화된 변경비밀번호를 해당하는 email의 DB에 저장 이렇게 하면 끝나는 로직이라고 생각하고 소스코드를 작성했습니다. 1차적으로 제가 생각한 로직에 빠진 부분이 있는지 궁금하고 지금의 소스코드로 어떤부분을 보완해야하는지 궁금합니다.(현재 코드블록으로 공유한 내용은 users.service.ts에서 return부분에 where에서 에러가 발생하는 상황입니다..) 추가로 필요한 정보나 내용, 소스코드가 있으면 추가적으로 공유하도록 하겠습니다. 도와주세요~~~ 나머지 import해온 class들은 수업을 통해서 그대로 가져온 내용들입니다. //users.resolver.ts @UseGuards(gqlAuthAccessToken) @Mutation(() => String) updateUserPwd( @Args('email') email: string, @Args('password') password: string, ): string { this.usersService.updateUserPwd({ email, password }); return '비밀번호 수정 성공'; } //users.service.ts async updateUserPwd({ email, password, }: IUserServiceUpdateUserPwd): Promise<UpdateResult> { const user = await this.findOneByEmail({ email }); if (!user) throw new UnprocessableEntityException('등록되지 않은 이메일 입니다.'); const isAuth = await bcrypt.compare(password, user.password); if (!isAuth) throw new UnprocessableEntityException('틀린 암호입니다.'); const hashedPassword = await bcrypt.hash( password, Number(process.env.SALT), ); return this.UsersRepository.update( { password: hashedPassword }, { where: { email: user.email }, }, ); }

  • nestjs
  • graphql
zeler1004 댓글 1 좋아요 0 조회수 1091

회원가입 API graphql 오류 문의(quiz18 1-2 관련 문의)

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

안녕하세요! 오류내용 관련해서 질문사항이 있습니다. 새로운 프로젝트로 nestjs를 생성해서 회원가입 create API를 생성하려할때 graphql연결 부문에 있어서 위 이미지와 같이 에러가 발생합니다. 위 에러가 GraphQLError: Query root type must be provided.내용에 회원정보를 create하는 root type '@Mutation()'이 있는데도 오류가 나는데 여기서 '@Query()' 를 임의로 만들어 코드를 만들어 놓으면 정상적으로 연결이 완료가 되더라구요.. 조회역할을 하는 Query가 있어야 정상적으로 연결이 되는걸까요? 원리를 알고 싶습니다! ⬇️ @Query() 가 비활성화 됐을때 이미지(graphql 에러발생) ⬇️ @Query()가 활성화 됐을때 이미지(연결 정상)

  • nestjs
  • graphql
zeler1004 댓글 1 좋아요 0 조회수 624

graphQL 에러 문제

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

안녕하세요. 그래프큐엘 관련 에러가 해결이 되지 않아 질문드립니다. 아래와 같은 Member, Dibs 엔티티가 있습니다. @Entity() @ObjectType() export class Dibs { @ManyToOne(() => Member, { primary: true }) @Field(() => Member) member: Member; @ManyToOne(() => Campground, { primary: true }) @Field(() => Campground) campground: Campground; @DeleteDateColumn() deletedAt: Date; } @Entity() @ObjectType() // @InputType() export class Member { @PrimaryColumn() @Field(() => String) memberId: string; @Column({ nullable: false }) @Field(() => String) password: string; @Column({ nullable: false }) @Field(() => String) nickname: string; @Column({ nullable: false }) @Field(() => String) email: string; @Column({ nullable: false }) @Field(() => String) name: string; @Column({ nullable: false }) @Field(() => String) phoneNumber: string; } 그런데 Member 클래스를 다른 엔티티 클래스에서 외래키로 지정해주면 오류가 발생합니다. 코드를 보시면 Dibs 엔티티에서 Member를 @Field(() => Member) 데코레이터로 지정하여 그래프큐엘 필드로 지정해주는데 아래의 오류가 발생합니다. Error: Cannot determine a GraphQL input type ("Member") for the "member". Make sure your class is decorated with an appropriate decorator. 인터넷에 찾아보니 Member 클래스에 InputType 데코레이터를 지정해주라고 돼있는데 강의 예제코드에선 특정 클래스를 다른 엔티티에서 외래키로 활용할 때 그 클래스에 ObjectType만 지정하고 InputType은 지정해주지 않아도 잘 작동하였습니다. Member클래스 뿐만 아니라 외래키로 활용되는 모든 클래스에서 오류가 발생하고 있습니다. 해당 클래스들에 InputType을 지정하면 오류가 사라지긴 하나 아래와 같은 다른 오류가 또 발생합니다. Error: Schema must contain uniquely named types but contains multiple types named "Member". 이틀 동안 여러가지 찾아보고 해결을 시도해봤지만 잘 안되네요. 도움 부탁드립니다.

  • node.js
  • nestjs
  • graphql
댓글 1 좋아요 0 조회수 575

Section Quiz7 에서 질문이 있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

퀴즈7에 있는 소주제 : 컴포넌트 재사용성과 수정 프로세스 에서 질문이 있습니다. updateProduct로 수정하는 부분인데요. 페이지 모두 만들었는데. 여기서 수정이 완료 됐다고 하는데 데이터가 null값으로 들어가네요.. 밑에는 container페이지와 queries페이지 입니다. 어느 부분이 잘못됏는지 모르겠어서 질문드립니다. http://practice.codebootcamp.co.kr/graphql 에서 create부분에선 seller를 바로 받아오는데 밑에서는 productId로 받아옵니다. 이렇게 된다면 수정페이지 에서는 seller 는 수정 못하게 되는건가요?

  • graphql
  • seo
  • nodejs
  • react
  • Next.js
임프런 댓글 2 좋아요 0 조회수 525

DISABLE_WEBSOCKETS=true meteor run 문제

해결됨

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

GraphQL 기본 수업에서 학습용 프로젝트를 런하려고 하는데... DISABLE_WEBSOCKETS=true meteor run 이 안됩니다. 'DISABLE_WEBSOCKETS'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 메시지가 뜹니다. README.md 보고 그대로 따라했습니다. 어떻게 해야하나요??

  • svelte
  • mongodb
  • apollo
  • graphql
ghlwns rla 댓글 2 좋아요 0 조회수 570

Use 'import type' 에러 및 eslintrc.json

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

1. 강의를 똑같이 따라했는데 위와같은 메시지가 뜹니다! import 말고 import type을 쓰라는데 멘토님과 다르게 왜 이런 에러가 일어나는건가요? 2. 저는 class파일에 eslintrc.json파일이 없어서 화면보고 그냥 따라 적기만 했는데 문제가 없을까요?

  • Next.js
  • graphql
  • seo
  • nodejs
  • react
ju han 댓글 3 좋아요 0 조회수 590

인기 태그

인프런 TOP Writers

주간 인기글