묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
infinite-scroller 무한 스크롤
선생님 안녕하세요... 정말 열심히 하였지만 무한 스크롤 때문에 정말 머리가 터질것같습니다.. 댓글 한번만 작성 했는데... 사진처럼 여러개가 나옵니다 해결 방법이 있을까요ㅠㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Prettier 적용 오류
다른 때에는 prettier가 잘 동작하는데useQuery, useMutation Hook에 type을 지정하면 prettier가 잘 작동하지 않습니다.useQuery에 타입을 지정하지 않거나, 코드를 주석처리하면 prettier가 잘 작동합니다.const { data, refetch } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardsArgs>(FETCH_BOARDS);
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 폼 과제 정답
안녕하세요, 혹시 강의에 나와 있는 회원가입 폼 피그마로 되어 있는 부분 정답지는 따로 알 수 없는걸까요 선생님?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
apollo-upload-client 설정 시 uploadLink 부분 질문이 있습니다.
강의 명: 이미지 업로드 프로세스 이해 및 실습 시간대: 1시간 1분 35초쯤 해당 부분에서 uploadLink를 넣으실 때 에러가 안뜨시던데저는 위와 같은 타입 에러가 뜹니다. (모든 에러 구문은 마지막 부분에 있습니다)물론 타입스크립트 apollo-client-upload의 타입스크립트 부분도 다운로드 받았습니다.TS 에러라 실제 업로드 기능 테스트에는 문제가 없었지만 저만 에러가 뜨는 것 같아서 찝찝한 마음에 질문을 올려봅니다.버전 차이일까요? (일단 uploadLink 변수 뒤에 any를 붙여주면 컴파일 에러가 사라지긴 했습니다.) 사용 중인 버전{ "name": "class", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "generate": "graphql-codegen" }, "dependencies": { "@ant-design/icons": "^5.0.1", "@apollo/client": "^3.6.9", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@material-ui/core": "^4.12.4", "@next/font": "13.1.2", "antd": "^4.22.8", "apollo-upload-client": "^17.0.0", "axios": "^0.27.2", "graphql": "^16.6.0", "next": "12.1.0", "react": "17.0.2", "react-daum-postcode": "^3.1.1", "react-dom": "17.0.2", "react-infinite-scroller": "^1.2.6" }, "devDependencies": { "@graphql-codegen/cli": "^3.0.0", "@graphql-codegen/typescript": "^3.0.0", "@types/apollo-upload-client": "^17.0.2", "@types/node": "17.0.2", "@types/react": "17.0.2", "@types/react-infinite-scroller": "^1.2.3", "@typescript-eslint/eslint-plugin": "^5.0.0", "eslint": "^8.0.1", "eslint-config-prettier": "^8.6.0", "eslint-config-standard-with-typescript": "^34.0.0", "eslint-plugin-import": "^2.25.2", "eslint-plugin-n": "^15.0.0", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-react": "^7.32.2", "prettier": "2.8.4", "typescript": "*" }, "resolutions": { "@types/react": "17.0.2" } } 설정 코드에러 내용 전문const uploadLink: ApolloLink'ApolloLink' 형식은 'ApolloLink | RequestHandler' 형식에 할당할 수 없습니다.'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' 형식은 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' 형식에 할당할 수 없습니다.'split' 속성의 형식이 호환되지 않습니다.'(test: (op: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/cor...' 형식은 '(test: (op: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/clas...' 형식에 할당할 수 없습니다.'left' 및 'left' 매개 변수의 형식이 호환되지 않습니다.'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/types").RequestHandler' 형식은 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").RequestHandler' 형식에 할당할 수 없습니다.'ApolloLink' 형식은 'ApolloLink | RequestHandler' 형식에 할당할 수 없습니다.'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' 형식은 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' 형식에 할당할 수 없습니다.'split' 속성의 형식이 호환되지 않습니다.'(test: (op: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/clas...' 형식은 '(test: (op: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/cor...' 형식에 할당할 수 없습니다.'right' 및 'right' 매개 변수의 형식이 호환되지 않습니다.'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").RequestHandle...' 형식은 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/types").RequestHandler | undefined' 형식에 할당할 수 없습니다.'ApolloLink' 형식은 'ApolloLink | RequestHandler | undefined' 형식에 할당할 수 없습니다.ts(2322) 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
try/catch 내 error 관련 질문이 있습니다.
안녕하세요 멘토님, 항상 양질의 강의 잘 듣고 있습니다. 저번에 질문 올리려다 까먹고 못 올렸다가 다시 기억나서 올리는 질문입니다.try/catch 구문에서 error.message는 graphql 에서 예외처리 될 때 보내지는 에러 메시지인지아니면 graphql이 아닌 백단 부분(node 코드) 같은 곳에서 예외처리 되어 보내지는 에러 메시지인지 궁금합니다.수업 때 들은 기억으로는 error 객체가 백엔드에서 보내주는 에러에 대한 정보라고만 들었던 것 같은데, 궁금하여 질문 올립니다. 감사합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
votes기능 부분
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.1.위 이미지처럼 comments.votes를 했는데 저렇게 Array만 뜨는데 값을 가져올 수 있는 건가요?? 위 이미지 처럼 postId와 commentID를 넣은게 아닌 comment 객체와 Post 객체를 넣었는데 어떻게 DB에는 postID와 CommentId가 들어간건지 알 수 있을까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
GraphQL $boardId: ID! 오류
안녕하세요! 강의듣는데 혼자서는 오류를 해결하지 못 할것 같아서 질문드립니다!오류뜨는 부분은 freeboard_frontend > boards > [_id] > index.js (상세페이지) 입니다. 글 작성 -> 상세페이지로 이동 -> 상세페이지에서 수정 버튼 누르면 수정페이지로 이동 -> 수정페이지에서 수정하고 수정버튼 누르면 다시 상세페이지로 이동 > 상세페이지에서 삭제버튼 클릭하면 삭제후 리스트로 이동제가 의도한 기능들은 모두 정상작동은 하는데 상세페이지에만 접속하면 해당 오류가 발생합니다..! (상세페이지 query 코드입니다) -> $boardID: ID! 이부분에서 오류가 나는것 같은데 강의 자료실에 올라온 코드와 비교해봤지만 같게 작성된걸 확인했습니다! (상세페이지 접속했을때만 NetWork에 이렇게 뜹니다ㅠㅠ) 한가지 더 궁금한 점이 있습니다!타입 지정해줄때 Docs 보고 그대로 적으면 된다고 하셨는데 ($boardId: [ID!]!) 이렇게 적으니까 오류가 나서 ($boardId: ID!) 이렇게 적으니까 작동이되더라구요.. 제가 강의 들으면서 빼먹은 부분이 있는걸까요ㅠㅠ?이럴땐 어떻게 적어야 할까요ㅠ??export const DELETE_BOARD = gql` mutation deleteBoard($boardId: ID!){ deleteBoard (boardId: $boardId) } `;
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
GET http://localhost:4000/images/null 404 (Not Found)
안녕하세요.이미지 업로드 부분을 다 작성하고 이미지까지 잘 올라가지는데console을 보니null:1 GET http://localhost:4000/images/null 404 (Not Found)이런 오류가 뜨는데 무시해도 상관 없는건가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
댓글 리스트 불러오는 핸들러에서
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이 부분에서 Comment DB에 postID가 언제 저장된 것일까요??댓글 생성 부분에서는 Post 정보만 저장하지 않았나요?? Post정보를 저장하면 postId가 자동저장되는건가요??댓글을 생성하면 해당 댓글의 postId는 Null값이 아닌가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
express redirect
client 주소: http://localhost:3000server 주소: http://localhost:5000현재 저는 쿠키 공유 잘 되며 글 작성도 잘 됩니다. 그런데 client에서 server로 요청을 보내고 요건에 부합하지 않으면 client측 화면을 redirect 시키려는데 cors 오류가 발생합니다. 어떤부분을 보면 좋을까요?server에서 redirect 주소는 http://localhost:3000/login 이런식으로 client 주소 작성했습니다.추가적으로 client 측에서 router.push로 서버 주소로 요청보내고 로직 수행 후 응답 결과로 res.redirect는 cors 오류 없이 잘 동작합니다. 이건 또 왜 잘 되는걸까요.?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
폴더 속 폴더에 있는 소스 배포
강사님 제가 넷플릭스 소스를 [git아이디/Repositories폴더/하위a폴더/하위b폴더]b폴더에 저장을 했다면homepage경로와 base경로를 어떻게 설정해야하나요?혹시 배포를 할땐 Repositories 폴더에 있는 소스들만 배포가 가능한건가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
오류 질문이요!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 터미널과콘솔에 이렇게 오류가 뜨는데 원인을 모르겠습니다ㅜㅜ
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
네트워크창에서 API Key를 감추고 싶습니다.
안녕하세요 튜터님,일전에 마커 클러스터링에 관해 질문했던 수강생입니다.먼저 튜터님의 강의로 제 사이드 프로젝트가 잘 마무리 됬다는 것을 알려드리고 싶어 아래 도메인도 공유 드리고 싶습니다.https://www.by-zip.com/튜터님이 가르쳐 주신 내용을 적극 활용했으니 피드백도 주시면 더욱 감사드리겠습니다 !https://forms.gle/rKAjAws43XLUAJsA9(사실 8,9,10 까지 피드백 주시면 스타벅스 기프티콘도 1장씩 드리고 있습니다ㅋㅋ) 아무튼... 본론으로 들어가서 .. 현재 저의 문제 상황은네트워크 창에서 아래 이미지와 같이 키값이 노출된다는 문제 입니다.저희는 실제 서비스를 목표로 하고 있어서키값이 노출되는건 반갑지 않은 상황이라서요 ..그래서 제가 시도했던 방법은next.config.js 에서 rewrite() 를 적용해보는 것이였습니다.위 그림과 같이 시도해보았으나. API 인증에 실패했습니다. encode url component 로 시도해 보았지만 결과는 실패였습니다.. 어떻게하면 좋을지 답을 찾기가 힘들어 문의드립니다.. 좋은 강의 만들어주시어 감사드립니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
passport로 로그인하기에서 passport로그인 이라는게 무슨 말인가요??
router.post('/login', (req, res, next) => { passport.authenticate('local', (err, user, info) => { // done에서 넣은값들이 순서대로 전달되는곳 if (err) { console.error(err); next(err); } if (info) { return res.status(401).send(info.reason); } })(req, res, next); // middleware 확장하는 express의 기법 // (req, res, next)를 붙히면 그냥 함수를 전달하는것과 똑같은 기능을 하게 된다. return req.login(user, async (loginErr) => { // 서비스 로그인이 다 끝나면 passport 로그인을 한번 더 하는데 에러발생시 핸들 if (loginErr) { console.error(loginErr); return next(loginErr); } return res.json(); }); });return req.login(user, async (loginErr) => {여기서 우리 서비스 로그인이 다 끝나면 passport 로그인을 한번 더 한다고 하셧는데 이게 무슨 의미 인가요?? 우리 서비스에서 로그인을 하면 끝 아닌가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Graphql fetBoard 재질문
import {Bigframe, ResultWrapper, UserBox, UserInfo, Boundary } from "@/styles/emotion"; import { gql,useQuery } from "@apollo/client" import { useRouter } from "next/router" import{useState} from 'react' const FETCH_PRODUCT = gql` query fetchBoard($boardId: ID!){ fetchBoard(boardId:$boardId){ writer title contents createdAt } } ` export default function BulletinBoardFetch() { const router = useRouter() const[writer,setWriter]=useState("") const[creatDt,setCreatDt]=useState("") const{data}=useQuery(FETCH_PRODUCT,{ variables:{ boardId: router.query.qqq } }) console.log(data?.fetchBoard?.createdAt) setCreatDt(data?.fetchBoard?.createdAt) setWriter(data?.fetchBoard?.writer) return( <div> <Bigframe> <div> banner1 </div> <div> banner2 </div> <ResultWrapper> <UserBox> <img src="../../../public/userpic.png" alt=""/> <UserInfo> {/* <Writer>{writer}</Writer> <CreateDate>{createDt}</CreateDate> */} </UserInfo> <img src="../../../public/clip.png" alt=""/> <img src="../../../public/location.png" alt=""/> <Boundary></Boundary> </UserBox> </ResultWrapper> </Bigframe> </div> ) }너무 많이 루프했다고 뜹니다 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql query가 안돼요
import {Bigframe, ResultWrapper, UserBox, UserInfo, Boundary } from "@/styles/emotion"; import { gql,useQuery } from "@apollo/client" import { useRouter } from "next/router" import{useState} from 'react' const FETCH_PRODUCT = gql` query fetchBoard($boardId: ID!){ fetchBoard(boardId:$boardId){ writer title contents createdAt } } ` export default function BulletinBoardFetch() { const router = useRouter() const[writer,setWriter]=useState("") const[creatDt,setCreatDt]=useState("") console.log(router.query.qqq) const{data}=useQuery(FETCH_PRODUCT,{ variables:{ boardId: `${router.query.qqq}` } }) console.log(data) setCreatDt(data.fetchBoard.createdAt) setWriter(data.fetchBoard.writer) return( <div> <Bigframe> <div> banner1 </div> <div> banner2 </div> <ResultWrapper> <UserBox> <img src="../../../public/userpic.png" alt=""/> <UserInfo> <Writer>{writer}</Writer> <CreateDate>{createDt}</CreateDate> </UserInfo> <img src="../../../public/clip.png" alt=""/> <img src="../../../public/location.png" alt=""/> <Boundary></Boundary> </UserBox> </ResultWrapper> </Bigframe> </div> ) }뭐가 문제인걸까요...ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
노션페이지에 예전에 있었던 section 1,2,3이 없네요
일부러 삭제하신 건가요?오랜만에 복습하러 왔는데 안보이네요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
타입에러 해결에 도움이 필요합니다.
필요한 정보를 넣어주고 회원가입 버튼을 누르면 saga 의 user.js 에서 signUp 에서 에러가 발생하는데 이유를 모르겠습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
조언 부탁드립니다.
안녕하세요. 혼자서는 결론을 내리지 못해 더 많은 경험과 고민을 한 제로초님께 조언을 구하고 싶습니다.제가 기존 코드에 Menu가 있었습니다. 그리고 이번에 타입스크립트로 마이그레이션 했는데 네이밍 컨벤션에 고민이 있습니다. 이 이름을 쓰는 곳은 총 4곳 입니다.menu - 데이터로 불러오는 menuMenu - 타입으로서 MenuMenu - 페이지(메뉴 상세 페이지)Menu - 메뉴 아이템(메뉴 리스트 안에 각각 뿌려지는 메뉴 아이템)사실 타입이 없을 때는 아래 2개의 파스칼 케이스의 Menu가 이름으로 겹칠 일이 없었습니다. 그러다가 타입을 도입 했는데, 타입인 Menu 같은 경우 제로초님이 요즘은 앞에 헝가리안 표기법으로 타입인지 인터페이스인지를 표기 안하는 추세라고 하시기도 했고, 프로그래밍에서 가장 중요한게 데이터라 생각해서 그 데이터의 타입은 그대로 쓰는게 좋다고 생각했습니다. 페이지 같은 경우에는 파일 명과 반드시 같은 필요가 없다 해서 라우팅할때 menu.tsx를 쓰더라도 파일 내부에서는 MenuPage로 명명했습니다.그리고 남은 컴포넌트가 문제인데 다른 강의를 봐도 MenuComponent 같은 이름 보단 다른 강의에서 List를 붙이시는거 보고 MenuItem으로 컴포넌트 명을 지으려고 하는데 괜찮을까요??감사합니다!!
-
미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
수강기간 관련하여 질문 드립니다.
안녕하세요 강사님! 수강을 완료하고 개인적으로 플젝을 진행하며 복습을 하고있습니다.많은 도움이 되었고, 강의 내에 코드 짤 때의 깨알 꿀팁도 많아서코드 짜는 실력이 많이 늘었습니다. 다시 한 번 감사합니다. 지금 강의를 다시 들으며 머릿속을 정리하고 싶은데기간이 3주도 채 안남아있어서 혹시 연장이 가능할지 여쭤봅니다😥😥 감사합니다.