묻고 답해요
138만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
파이어베이스에서 업데이트 및 삭제
파이어베이스에서 업데이트나 삭제를 할때 그 문서의 id?(위의 사진의 글자)를 가져와서 변경을 해줘야하잖아요그런데 저 id를 어떻게 데이터와 함께 가져오는거죠..? const [boardsData, setBoardsData] = useState<DocumentData[]>([]); const [boardId, setBoardId] = useState<string[]>([]); const onClickShowBoards = async () => { const myBoard = collection(getFirestore(firebaseApp), "MyBoard"); const result = await getDocs(myBoard); const data = result.docs.map((el) => el.data()); setBoardsData(data); const dataId = result.docs.map((el) => el.id); setBoardId(dataId); }; 위와같이 배열을 생성해서 각각의 아이디를 불러오긴했는데 어떻게 연결시킬지 모르겠네요ㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
debugger 오류
typesciprt 였나 antd 였나 설치하고 부터 자주 밑에 그림처럼 뜨네요. 구글링으로 ctrl + f8로 일시적으로 문제를 해결할 수 있었으나 계속 오류가 반복되어 질문드립니다.혹시 어떤 부분에서 잘못 되었을지 ... 알수있을까요밑에 부분은 소스에서 빨간줄 뜨는 부분입니다.추가로 이런 오류도 자주 뜹니다 ...
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
스프라이트 이미지 사용 이유가 궁금합니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 강의 잘 보고 있습니다.여러 아이콘을 저장해놨다가 사용하는 방법도 있는데스프라이트 이미지를 사용하시는 이유가 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
props.함수 실행이 안돼요
import { useQuery } from "@apollo/client" import {useState} from 'react' import {useRouter} from "next/router" import {Fetch_List} from './BoardList.query' import BulletinBoardListUI from './BoardList.presenter' export default function BulletinBoardListFetch(){ const [page,setPage]=useState(1) const router = useRouter() const{data}=useQuery(Fetch_List,{ variables:{ page } }) function MoveIndex(){ console.log("dfgd") return true } return( <BulletinBoardListUI MoveIndex={MoveIndex}/> ) } import * as S from './BoardList.style' export default function BulletinBoardListUI(props){ console.log(props) return( <S.TableWraper> <S.TableTop> <S.ColumnHeaderBasic>번호</S.ColumnHeaderBasic> <S.ColumnHeaderTitle>제목</S.ColumnHeaderTitle> <S.ColumnHeaderWriter>작성자</S.ColumnHeaderWriter> <S.ColumnHeaderDate>날짜</S.ColumnHeaderDate> </S.TableTop> {props.data?.fetchBoards?.map( (el,i)=>{ i++ return(<S.Column key={el._id}> <S.RowNum>{i}</S.RowNum> <S.RowTitle onClick={props.MoveIndex}>{el.title}</S.RowTitle> <S.RowWriter>{el.writer}</S.RowWriter> <S.RowDate>{el.createdAt.substring(0,10)}</S.RowDate> </S.Column> )})} </S.TableWraper> ) } props.MoveIndex가 실행이 안돼요...
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요.
일단 강의 잘 보고 있습니다.제 학습 수준이 아직 낮아서, 더이상 진도는 안나가고 있고 다시 리액트를 좀 복습중입니다.ㅎㅎ저도 언능 수준이 올라가서, 박용주님처럼 이것저것 만들어보고 싶네요. 최종 목표는 웹게임을 만들어보는겁니다.ㅎㅎ아무튼. 질문이 하나 있는데요~혹시 next.js로 개발을 할 때 Redux는 잘 사용 안하나요?리액트 배우면서 redux를 아주 중요하게 다루는것 같은데, next.js강의는 여러곳을 돌아다녀 봐도redux에 대해서는 안가르치는것같더라구요. 리액트에서 당연히 배워왔을 소양이라서 커리큘럼에 없는건지, 아니면 next.js에서는 redux는 잘 사용 안하는건지 궁금합니다!
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
깃헙주소 어디서 확인할 수 있나요?
안녕하세요 강의시작마다 브랜치가 나오는데, 깃헙주소 알 수 있을까요?감사합니다.1-2 브랜치 1-4 브랜치가 어디에 있는지 알 수 있을까요?강의 중간중간 보시면 git checkout 하시는 것으로 보아 github주소가 있는 것 같습니다. github 주소 공유해부탁드립니다. 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 댓글 무한 스크롤
포트폴리오 과제에서 주셨던 무한 스크롤 리뷰가 오늘 강의에선 없네요! 혹시 이유가 있는걸까요?!그리고 백앤드에 하나의 게시판에 달려있는 댓글 갯수를 가져오는 api가 따로 없던데 퀴즈처럼 무한스크롤을 직접구현하는 건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
.eslintignore 관련 문의
안녕하세요.eslint와 prettier 설정 및 UI 프레임워크 강의 상에서는.eslintignore가 적용되지 않는데 혹시 추후 강의에 이 부분이 다시 언급되는지가 궁금해서 문의 남깁니다. 혹시 언급되지 않는다면 어떻게 처리하면 될까요?그리고 추가로 .eslintrc.js 파일 내용이 이전 강의랑 다른데 이건 왜 달라졌는지 알 수 있을까요?(이전 강의에서는 .eslintrc.js에 parser: @typescript-eslint/parser도 있었고, plugins에도 적용을 해주었던거 같은데 이번 강의에서는 다 빠져있어서 문의드립니다.)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
GraphQL 목록 삭제가 실시간으로 반영되지 않아요
import { gql,useMutation,useQuery } from "@apollo/client" import styled from "@emotion/styled" const FETCH_PRODUCT = gql` query fetchBoards($page:Int){ fetchBoards(page:$page){ writer title contents number } } ` const FETCH_DELETE = gql` mutation deleteBoard($number:Int){ deleteBoard(number:$number){ message } } ` const Row = styled.div` display:flex; ` const Column = styled.div` width: 25%; ` export default function StaticRoutedPage(){ const{data}=useQuery(FETCH_PRODUCT, {variables:{ page:2 }}) const[deleteBoard]= useMutation(FETCH_DELETE) console.log(data?.fetchBoards) const onClickDelete= async (event)=>{ await deleteBoard({ variables:{ number: Number(event.target.id) }, refetchQueries:[{query: FETCH_PRODUCT}] }) } return ( <> {data?.fetchBoards?.map((el)=>( <Row> <Column><input type="checkbox"/></Column> <Column>{el.number}</Column> <Column>{el.title}</Column> <Column>{el.contents}</Column> <Column> <button id={el.number} onClick={onClickDelete}>삭제</button> </Column> </Row>))} </> ) }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그인 섹션 이후 리뷰 및 완성코드
안녕하세요,중고마켓을 진행하게 되는 로그인 섹션부터는포트폴리오 리뷰가 진행되지 않는다고 하셨는데,완성코드도 제공이 되지 않는걸까요?제공이 되지 않는다면 모르는 부분에 대해선코드수정과 리뷰는 어떻게 알 수 있을까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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 객체가 백엔드에서 보내주는 에러에 대한 정보라고만 들었던 것 같은데, 궁금하여 질문 올립니다. 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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) } `;
-
해결됨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 로 시도해 보았지만 결과는 실패였습니다.. 어떻게하면 좋을지 답을 찾기가 힘들어 문의드립니다.. 좋은 강의 만들어주시어 감사드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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이 없네요
일부러 삭제하신 건가요?오랜만에 복습하러 왔는데 안보이네요