176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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에서 가져와야하는지 갈피를 못잡겟네요. ㅠㅠ
react node.js seo graphql next.js
임프런
2023-05-25T07:53:05.635Z
댓글 1
좋아요 0
조회수 408
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고 마켓의 백엔드 부분은 수업에서 제공돼는 기본적인 CRUD 로 가능한건가요??
react node.js seo graphql next.js
togussla16
2023-05-25T07:43:06.739Z
댓글 1
좋아요 0
조회수 369
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재 중고마켓 리스트 부분을 하고 있습니다. 이 부분에서 판매중상품 판매된상품 을 하고있는데 fetchUseditems에 있는 isSoldout 부분을 어떤식으로 가져와야 할 지 모르겠네요.. refetch 를 사용해야 하는 건가요..?
react node.js seo graphql next.js
임프런
2023-05-25T07:15:49.744Z
댓글 1
좋아요 0
조회수 375
미해결
[리뉴얼] React로 NodeBird SNS 만들기
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 됬다고 하고, 그 후 로그인이 안됩니다. 음..혹시 이 부분 외에 어딜 더 체크해봐야 하는지 조언 해주실 수 있을까요? 항상 좋은 강의에 감사합니다 :)
react redux node.js express next.js
Spencer Kwon
2023-05-25T06:24:40.266Z
댓글 1
좋아요 0
조회수 407
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
강의에 나온 https://www.npmjs.com/package/next-sitemap 라이브러리를 받고 문서 따라서 server side sitemap (getServerSideSitemap) 을 보고 문서대로 경로 만들고 라우터 만들어서 getServerSideSitemap() 로 리턴하여 사이트맵을 생성하였습니다. .next 에 server-sitemap.xml.body이 잘 만들어졌습니다 문제는 한 파일에 15만개가 넘게 작성이 된 것입니다. 구글 검색엔진에서 사이트맵의 URL 50,000개로 제한두고 있습니다. 문서따라서 config 에 sitemapSize: 10000, 설정을 적용하여도 스플릿팅 되지 않습니다. 어떻게 해결해야 하나요? node: 18.15.0 "next-sitemap": "4.0.9" "next": "^13.4.2",
seo next.js vercel csr ssg ssr
콩팥팥죽
2023-05-24T14:21:30.362Z
댓글 1
좋아요 1
조회수 469
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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 Error Invariant 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 요렇게 적혀있는데 어떤 에러일까요?
react node.js seo graphql next.js
지우혁
2023-05-24T04:56:45.680Z
댓글 1
좋아요 0
조회수 553
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
버전이 달라서 그런지 모르겠는데 다른분들은 딱히 그런 문의가 없어서 왜인지 모르겠지만 저는 page 폴더도 없고 app.js 도 없고 style폴더도 없어서 그냥 제가 따라서 만들었는데 API수업에서 app.js가 없다보니 기본컴포넌트를 사용할수 없네요..있는거라곤 app폴더안에 layout.js와page.js는 있는데 page.js이 시작파일인것 같은데 여길 수정해도 달라지는건 없더라구요..
react node.js seo graphql next.js
inah1001
2023-05-24T02:58:17.486Z
댓글 1
좋아요 0
조회수 2042
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
혹시나 모르실분들이 있을거 같아서 남깁니다. 영상에 보이는 구조로 받으시려면 npx create-next-app@12.1.0 --typescript ./ 로 하면됩니다. 꽤나 당황했네요 ㅎㅎ
react redux tdd typescript next.js 소프트웨어-테스트
22gas
2023-05-23T23:52:08.652Z
댓글 1
좋아요 4
조회수 3329
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! '학습자료 ver2 노션이 업데이트 되긴 했으나 여전히 포트폴리오 링크만 볼 수 있고, 포트폴리오 리뷰 강의 수강 전 무엇을 구현해야하는지에 대한 설명은 확인 할 수 없어서 다시 한 번 질문드립니다' 라는 글에 업데이트 되었다는 댓글은 봤지만, 저는 노션에 깃허브 링크만 보여서요ㅜㅜ 업데이트가 될까요?
react node.js seo graphql next.js
조충범
2023-05-23T12:52:08.894Z
댓글 2
좋아요 0
조회수 405
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
왜 이렇게 라디오 버튼을 생성했을 때 여성 남성 글자가 라디오 옆에 안오고 밑으로 올까요...?
react node.js seo graphql next.js
sirlyun23
2023-05-23T12:02:14.634Z
댓글 1
좋아요 0
조회수 457
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
포트포워딩으로 외부에서 db에 접속가능하게끔 포트 뚫어주고 테스트 해봤습니다. build한뒤 start 했을때 해당 local db에 데이터 삽입 되는거 까지 확인했고 폰으로 와이파이 연결끊고 접속도 해서 적용되는것 또한 테스트 해봤습니다. 하지만 vercel에서 배포를 하게되면 요청은 처리 되지만 Application error: a client-side exception has occurred (see the browser console for more information). 해당 오류가 발생하게 되네요. prisma + mysql db 사용중입니다. env 설정, axios url까지 다 맞는데 왜 안되는걸까요...? vercel postgre beta 버전으로 연동하면은 되기는 하지만 저는 local db에 연결해서 배포를 하고 싶습니다. 하지만 찾아봐도 vercel이랑 db 연동하는 방법은 잘 나오지않네요.
seo next.js vercel csr ssg ssr
2023-05-23T01:59:08.593Z
댓글 1
좋아요 0
조회수 1655
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 처음 시작부터 에러가 떠서 구글링을 해봐도 해결이 안되어 질문글 올립니다ㅜ 섹션 23 오티 부분 듣고 있구요. 처음 보일러 플레이팅에서 yarn dev를 하면 자꾸 Module not found: Can't resolve '@/styles/globals.css' 라는 에러 문구가 뜹니다. 지웠다 다시 깔아도 마찬가지 입니다ㅜㅜ..
react node.js seo graphql next.js
energy
2023-05-22T13:00:23.054Z
댓글 1
좋아요 0
조회수 2620
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 내용과 다른 화면이 나오는데 어디로 들어가야 하나요.?
react node.js seo graphql next.js
박수민
2023-05-22T08:31:20.855Z
댓글 1
좋아요 0
조회수 493
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 수업 따라가면서 개인공부하다가 질문이 있어 남깁니다! next js가 Client-Side Rendering 방식이라서 그런건지 Link 또는 useRouter를 이용해서 페이지를 이동할 때 이전페이지의 css와 중복되어서 겹쳐보입니다 ㅠㅠ 어떻게 해야할까용??
react node.js seo graphql next.js
김무연
2023-05-22T02:16:05.145Z
댓글 1
좋아요 0
조회수 424
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
제가 놓쳤을수도 있습니다. Math학습 부분에서 뭔가 비어 있는 듯한 느낌이 있었는데 오늘 보니 Token에 관해 수업을 하셨다했는데, 어느 강의부분인가요? 함수 작성 방법 수업을 듣는데 hex에 관해서도 설명하셨다는데 어디있는지 모르겠습니다.
react node.js seo graphql next.js
dlwjdgus3217
2023-05-21T14:52:35.775Z
댓글 2
좋아요 0
조회수 396
미해결
[리뉴얼] React로 NodeBird SNS 만들기
back과 front 둘다 우분투 서버 연결 해놓고, node -v / npm -v 해서 버전 확인도 했습니다. 기본 node는 버전이 19이고 우분투에 설치한건 14버전입니다. front에서 빌드 하려는데 npm ERR! missing script: build npm ERR! A complete log of this run can be found in: npm ERR!/home/ubuntu/.pm/_logs/2023-05-19714_54_17_6527-debug. log 이런 오류의 원인은 뭘까요.. ㅠㅠ 몇시간동안 방법을 찾지못해서 글남깁니다 ㅠㅠ 제 깃허브 주소도 남깁니다.. +레파지토리는 미리 생성해둔거라서 그냥 여기있는 git init을 하지 않고, 주소를 그대로 사용하여 clone 했는데도 이것도 문제가 될까요? https://github.com/nuring9/next.js-redux-saga-SSR-nodebird.git
react redux node.js express next.js
hyuri
2023-05-19T15:46:23.817Z
댓글 1
좋아요 0
조회수 562
미해결
[리뉴얼] React로 NodeBird SNS 만들기
회원가입을 끝내고 똑같이 이메일과 비밀번호 입력하고 로그인을 하면 401에러가 뜹니다. 그래서 routes/user.js에서 info값을 콘솔로 보니 이렇게 info값이 들어오더라구요 제 코드는 이렇습니다. < local.js > <routes/user.js> <passport/index.js> 에러를 인터넷에 서칭해보니까 local.js 안에 new LocalStrategy 안에 usernameField와 passwordField를 제대로 값이 바인딩 됐는지 여부를 보라고 되어있는데 틀린게 없어보입니다... 어떤걸 잘못한걸까요 ㅠㅠ
react redux node.js express next.js
김준용
2023-05-19T08:31:07.698Z
댓글 1
좋아요 0
조회수 434
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
styled-components version 6 이후로 강의에 나오는 npm install styled-components --save 명령어로 설치하면 에러가 발생해요 npm install styled-components@5.3.10 으로 5버전대로 설치했습니다 //Use V5, npm install styled-components@5.3.10 //Use yarn yarn install styled-components //To use the beta version npm install styled-components@latest
react redux tdd typescript next.js 소프트웨어-테스트
info
2023-05-19T05:20:43.755Z
댓글 1
좋아요 1
조회수 1088
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 혼자 실습중에 궁금한 점이 생겨서 질문드립니다. 수업시간에 싸이월드 1탄 했던 것을 복습하는 중인데요. 의문이 생긴 점이 있습니다. 수업의 약 18분 30초 경에 .wrapper__left 의 height 값에 대해서 472px이라고 언급하셔서 수업들을 때는 그냥 그런가보다 하고 따라했었습니다. 그런데 복습하기 위해서 피그마로 보면서 하고 있는데 아무리 생각해도 이게 왜 472px이 나오는지 의문이 들더라구요. wrapper__left 값을 봐도 484내지는 496이 아닌가 싶은데.. 지엽적인 질문을 드려서 죄송합니다만 어떠한 원리로 이게 472px인지 알 수 있을까요? 아무리 피그마 내에서 확인을 해도 472px이 나오는 이유를 모르겠습니다.. 읽어주셔서 감사합니다.
react node.js seo graphql next.js
jimyjeon
2023-05-18T02:48:06.977Z
댓글 1
좋아요 0
조회수 438
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
백틱안에 css속성적용할때 자동완성하는 방법 뭔가요?? 저는 이렇게 주황색으로만 뜨네요
react node.js seo graphql next.js
dydtjq324
2023-05-17T17:20:04.711Z
댓글 1
좋아요 0
조회수 492
