묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
git push origin master 입력시 오류가 발생해요!
git push origin master 입력시 위와 같은 오류가 나옵니다..! 확인부탁드립니다ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
코드자료 어디있나요? 매번 없네요.
이 강의에 불만이 한두개가 아닌 사람입니다.훈훈한 javaScript 타이머 만드는 부분 듣고있는데 제가 코드를 잘못 썼는지 작동이 안되는데요.코드를 비교해 보고싶어도 코드만 따로 올린게 없는 건지, 제가 못찾는건지 모르곘네요.만약 코드만 따로 올려놓은게 없다면 인강 처음부터 돌려보면서 하나하나 비교해야 하는건가요?심지어 html 코드자료 올려놓은거 복사해서 붙여넣었더니 class 이름이 강의랑 달라서 어이가 없었네요.자료좀 똑바로 올려주세요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
HTML 예치금 충전표
안녕하세요! 열심히 강의 듣고 있는데 HTML 수업에서 예치금 충전표 관련해서 따로 내용이 없는데 노션에는 나오더라구여! 예치금 충전표 관련 강의는 어디있는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
04-02-graphql-mutation
안녕하세요 강의 잘 듣고있습니다.04-02-graphql-mutaion/index.js부분에서 이부분 이유에 대해서 잘 모르겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 24 유효성 검사
섹션 24 에서 빈값 처리를 구현하는것을 보여주셨는데요.html5 에서 제공하는 유효성 검사 <input type="text" required />위와같이 사용하는것과의 차이점이 뭘까요 ??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 댓글불러오기 쿼리 오류
안녕하세요 강사님 중고마켓 댓글을 불러오는 쿼리훅을 작성했는데 아래와 같은 에러 메세지로 계속 상태코드 400이 나옵니다 ㅠㅠ "Variable \"$useditemId\" is not defined by operation \"fetchUseditemQuestions\"."훅 안에서 useditemId을 콘솔로 찍어봐도 정상적으로 나오고 같은 변수를 사용하는 fetchUseditem를 참고해서 다시 작성도 해봤는데 계속 같은 오류가 나옵니다.. 그래프큐엘 플레이그라운드에서는 똑같이 작성해서 query variables에 useditemId를 넣어서 요청해보면 문제없이 잘 작동하는데 프로젝트 안에서는 계속 오류가 나네요 ㅠㅠ 제가 어느 부분을 놓친걸까요..? import { gql, useQuery } from "@apollo/client"; import type { IQuery, IQueryFetchUseditemQuestionsArgs, } from "../../../../commons/types/generated/types"; const FETCH_USEDITEM_QUESTIONS = gql` query fetchUseditemQuestions($page: Int, $useditemID: ID!) { fetchUseditemQuestions(page: $page, useditemId: $useditemId) { _id } } `; export const useQueryFetchUseditemQuestions = ( variables: IQueryFetchUseditemQuestionsArgs, ) => { const query = useQuery< Pick<IQuery, "fetchUseditemQuestions">, IQueryFetchUseditemQuestionsArgs >(FETCH_USEDITEM_QUESTIONS, { variables: { useditemId: variables.useditemId, }, }); return query; };
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
value에 관해서 궁금합니다.
안녕하세요 선생님. :-) 코멘트 복습하며 궁금증이 생겨서 질문 드립니다.리팩토링 하면서 느낀건데 , 이 이미지의 밑줄이 그어진 태그들 없이 이벤트핸들러만 있어도 기능구현에 무리가 없던데 이 태그들이 꼭 있어야 하는건가요 ?? 있어야 한다면 이유를 알고 싶습니다. 두 번째는 antd에서 rate를 가져올 때 궁금증입니다.여기서 제가 궁금한것은 value={el.rating}이 부분인데, value값에 el.rating을 주지 않으면 색칠이 없는 별만 뜨더라구요. 그래서 이모션을 없애고 <div>{el.rating}<div>로 찍으니 숫자가 나오는 걸 알 수 있었습니다. 그럼 결국 댓글 작성할 때 클릭한 별은 숫자로 뮤테이션이 날라가고 조회할 때 그 숫자를 value에 넣어줘야 별 모양이 제대로 뜬다는 것을 확인했습니다. 그렇다면 이건 antd 개발자들이 독자적으로 설정을 이렇게 한건가요 ?? 아니면 일반적으로 이런 모양들은 value에 값을 넣어줘야 정상적으로 뜨는건가요 ??? 미리 답변 감사합니다 선생님 !!! ^_^
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslintrc.js에서 project를 폴더 안에있는 tsconfig.json으로 설정하는 방법이 있을까요.?
저 같은 경우 codecamp 폴더 안에 class, freeboard, quiz폴더들을 넣고 진행하고 있었는데요... (class와 freeboard에 tsconfig.ts파일을 설정해두었습니다.)class 폴더 안에서 설정해주시는대로 똑같이 lint설정하다가 project부분에서 '**/tsconfig.json'을 하는 순간 rootdir을 못찼겠다는 error가 뜨더라구요. 그래서 여기저기 검색해서 보니까 tsconfig를 못찼는것같아 경로를 '*/class/tsconfig.json'으로 변경하니 뭔가 되는것 같았는데, 이번엔 parsingError가 뜨면서 yarn lint를 하였을때 , 'The Next.js plugin was not detected in your ESLint configuration. ....' 란 경고가 뜨며 lint했을때 틀린 부분들이 나오지 않더라구요.. ㅠㅠ그래서 어쩔수 없이 freeboard폴더 자체를 따로 분리해서 class폴더를 다시 설정하니 잘되는 것을 확인했습니다. 저 같은 경우 다시 freeboard폴더를 codecamp 폴더 안에 넣고 수업을 진행하고 싶은데, class 폴더안의 eslintrc.json파일의 project 경로를 어떻게 설정해주어야 할까요? tsconfig.json파일이 2개가 있는것 자체가 lint에서 문제가 되는 것인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
$를 사용하면 정상적으로 작동하지 않습니다
import { useMutation, gql } from "@apollo/client"; const 나의그래프큐엘셋팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; export default function GraphqlMutation() { const [나의함수] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { const result = await 나의함수({ $: { //$ == variables 로 바꿔도 된다 같은 writer: "훈이", title: "contents", contents: "반갑", }, }); console.log(result); }; return <button onClick={onClickSubmit}>Graphql-API 요청하기</button>; }await 나의함수({ $: ...}) 에서 $를 사용하면 ApolloError: null value in column "writer" of relation "board" violates not-null constraint다음과 같은 에러가 발생하고 variables 로 바꾸면 정상적으로 작동합니다. 어느 부분이 틀렸을까요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
크롬에서 카카오맵이 정상적으로 그려지지 않습니다.
안녕하세요 강사님! 강의 정말 잘 보고 있습니다. 카카오맵 지도를 띄우는 코드를 작성하는 실습을 하면서 크롬으로 확인을 했는데요,처음에는 아래의 오류가 떠서 구글링 후에 useEffect(() => { window.kakao.maps.load(() => { const container = document.getElementById("map"); // 지도를 담을 영역의 DOM 레퍼런스 const options = { // 지도를 생성할 때 필요한 기본 옵션 center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표. level: 3, // 지도의 레벨(확대, 축소 정도) }; const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴 }); }, []);위의 코드처럼 kakao의 map 객체가 로드되면 실행되게끔 수정을 했습니다. 그 후부터는 위의 오류가 뜨지는 않았지만 한참동안 브라우저 상단 탭에 로딩되는 상태가 보이다가 지도는 결국 보이지 않더라고요. 개발자도구의 네트워크 탭을 보면 아래와 같이 kakao.js를 불러오지 못했다고 오류가 나오는데, 로딩 중에 크롬 콘솔에 window.kakao를 쳐보면 정상적으로 찍힙니다.크롬에서 브라우저 캐시를 삭제하는 방법, 시크릿창에서 해보는 방법, 새 api 키를 발급하는 방법 등등 해보았지만 모두 안됐는데 사파리에서 실행해보니 곧잘 되는걸 확인했습니다... 코드 상의 문제는 아닌 것 같은데 왜 크롬에서만 안되는 건지 혹시 알 수 있을까요..? 구글링하다가 저와 같은 이슈를 겪은 분의 글을 발견했는데, 이슈가 해결은 안됐지만 일단 첨부합니다. https://devtalk.kakao.com/t/kakao-maps-load-net-err-internet-disconnected/125422/4 위의 글 답변에서는 크롬 확장프로그램 문제일 가능성이 있다고 나오는데, 딱히 문제가 될 것 같은 확장프로그램도 없어서요.. 답변 부탁드립니다! 감사합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
<코멘트달기 section> boardId 오류
import { useState } from "react"; import CommentPageUi from "./BoardCommentWrite.presenter"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT } from "./BoardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/BoardCommentList.queries"; export default function CommentPage () { const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [contents, setContents] = useState(""); const [createBoardComment] = useMutation(CREATE_BOARD_COMMENT) const router = useRouter; const onChangeWriter = (event) => { setWriter(event.target.value) } const onChangePassword = (event) => { setPassword(event.target.value) } const onChangeContents = (event) => { setContents(event.target.value) } const onClickSubmit =async() => { try { await createBoardComment ({ variables : { createBoardCommentInput: { writer : writer, password : password, contents : contents, rating: 0, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId : router.query.boardId}, }, ], }); } catch (error) { alert(error.message); } alert("정상적으로 댓글이 달렸습니다.") } return ( <CommentPageUi onChangeWriter = {onChangeWriter} onChangePassword ={onChangePassword} onChangeContents ={onChangeContents} onClickSubmit = {onClickSubmit} contents={contents} > </CommentPageUi> ) }comment write import { gql } from "@apollo/client"; export const CREATE_BOARD_COMMENT = gql` mutation createBoardComment( $createBoardCommentInput: CreateBoardCommentInput! $boardId: ID! ) { createBoardComment( createBoardCommentInput: $createBoardCommentInput boardId: $boardId ) { _id } } `;comment write queryimport { gql } from "@apollo/client"; export const FETCH_BOARD_COMMENTS = gql` query fetchBoardComments($boardId: ID!) { fetchBoardComments(boardId: $boardId) { _id writer contents createdAt rating } } `;comment list queryimport { useQuery } from "@apollo/client" import { FETCH_BOARD_COMMENTS } from "./BoardCommentList.queries" import { useRouter } from "next/router" import BoardCommentListUI from "./BoardCommentList.presenter" export default function BoardCommentList() { const router = useRouter() const {data} = useQuery(FETCH_BOARD_COMMENTS, { variables: {boardId : router.query.boardId} }) return ( <BoardCommentListUI data={data} /> ) }comment list폴더명 에러1에러2둘 다 boardId와 관련있고, 내용으로 봐서는 boardId에 값이 없는 것 같은데, 코드를 아무리 봐도 문제점을 모르겠네요.. 문제가 뭘까요 ???
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수정하기 뮤테이션
안녕하세요 선생님 !하나 궁금한 점이 있어서 질문 드려요.게시물 수정할 때, 기존에 입력한 값이 사라지고 수정한 내용만 남는 문제가 발생해, 수정하기 버튼을 눌렀을 때 기존 값도 남아있고, 수정한 내용도 체인지 돼서 나오게끔 하는 부분을 공부중입니다.(이미지는 강의내용 캡쳐입니다)궁금한 게, 이렇게 코드를 적용하고 게시물을 수정하면 바뀐 내용들만 뮤테이션이 날라간다는 건 이해 하겠는데 기존에 입력한 값들이 안 사라지고 출력되는 건 이해가 쉽지 않네요.. !! 어차피 writer,title,contents 스테이트는 수정된 게 없으니 빈 값 아닌가요 ? 빈 값인데 초기값이 나온다는 게 ..ㅠㅠ 미리 답변 감사합니다 선생님.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
과제부분에 조건2에 대한 질문이요
freeboard_frontend 랜딩페이지를 만들어보세요 ( 접속 시 첫 화면 )라고 나와있는데 이 조건이 무엇을 의미하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 깃 클론 주소를 못찾겠습니다.
피그마 주소밖에 확인이 안되는데,어디에 나와있는건가요..??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 카카오맵 질문
중고마켓 구현 중에 계속 구글링해도 해결이 안돼서 질문드립니다ㅠHeader에 판매하기 Link가 있고, 클릭하면 /product/new 로 이동하게 했습니다주소창에 직접 주소를 입력해서 들어가면 에러가 안뜨는데, 버튼을 클릭해서 들어가면TypeError: window.kakao.maps.LatLng is not a constructor 에러가 발생하는데원인이 뭘까요 ....??Header <Link href="/product/new"> <a> <S.HeaderIcon> 판매하기 </S.HeaderIcon> </a> </Link>BoardWritedeclare const window: typeof globalThis & { kakao: any } export default function BoardWrite(props: IBoardWriteProps): JSX.Element { const router = useRouter() const { setValue, trigger } = useForm({ mode: "onChange", }) useEffect(() => { const script = document.createElement("script") script.src = "https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=앱키" document.head.appendChild(script) script.onload = () => { window.kakao.maps.load(function () { const container = document.getElementById("map") // 지도를 담을 영역의 DOM 레퍼런스 const options = { // 지도를 생성할 때 필요한 기본 옵션 center: new window.kakao.maps.LatLng(37.462381, 126.813369), // 지도의 중심좌표. level: 3, // 지도의 레벨(확대, 축소 정도) } const map = new window.kakao.maps.Map(container, options) // 지도 생성 및 객체 리턴 }) } }, [])
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 ver1, ver2 뭘듣고 있는지 어떻게 알수있나요?
강의 ver1, ver2 뭘듣고 있는지 어떻게 알수있나요? ver1, ver2 표시가 안되어있어서요!html, css, javascript 는 노션 링크 따로있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
깃주소
깃주소 알려주세요, 뭐 다 들어야 깃 주소를 아는건지 왜 찾을수가 없나요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 게시물 Pick
혹시 중고마켓에서 게시글들어갈때 해당 게시글을 찜했는지 알 수 있는 API가 있을까여?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이미지 못찾겠네요
강력한 css 섹션 5 단위심화 강의에서 고슴도치 이미지 파일을 자료에 올려놨다고 하는데 못찾겠어요 ㅡㅡ...뭔 자료를 이렇게 찾기 힘들게 올려논건지?장난하나.. 이미지 찾다가 시간 다갔네
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
노션 강의자료
노션에 있는 자료들이랑 실제 강의에서 쓰이는 자료들이랑 차이가 좀 있네요. 강의에 들어있는 내용이 다 들어있는 것도 아니고요... 혹시 추후에 보강되거나 강의에 나오는 자료가 제공되진 않을까요?