월 79,200원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
시작은 프리캠프 final 과제 질문
안녕하세요 과제 중 해결되지 않는 문제가 있어 문의 드립니다. 인증 확인 버튼을 누를 때'인증이 완료되었습니다' 안내창 띄우기안내창 확인을 누르면, 인증 확인 버튼 텍스트 인증 완료로 변경인증 확인 버튼 비활성화가입하기 버튼 활성화과정을 하고 있습니다.const timer__button = () => { alert("인증이 완료되었습니다.") document.getElementById("timer__button").innerText = "인증 완료" document.getElementById("timer__button").disabled = true document.getElementById("submit").disabled = false }인증 확인 버튼을 누르면,'인증이 완료되었습니다.' 안내창이 뜨고, 인증 확인에서 인증 완료로 텍스트가 변경됩니다.하지만 버튼의 활성화와 비활성화가 되지 않습니다. 타이머가 작동되고 있는 동안 타이머가 활성화되도록 한 코드 때문에 씹히는 걸까요? 혹시 몰라 타이머 부분 코드도 첨부합니다.const randomNumber__button = () => { document.getElementById("randomNumber__button").disabled = true let randomNumber = String(Math.floor( Math.random() * 1000000 )).padStart(6,"0") document.getElementById("randomNumber__number").innerText = randomNumber let time = 7 let timer = true timer = setInterval(function(){ if(time >= 0){ let min = Math.floor(time/60) let sec = String(time%60).padStart(2,"0") document.getElementById("timer__number").innerText = min + ":" + sec time = time - 1 document.getElementById("timer__button").disabled = false } else { document.getElementById("timer__button").disabled = true document.getElementById("randomNumber__number").innerText = "000000" document.getElementById("timer__number").innerText = "3:00" clearInterval(timer) } },1000) } 혹시 이 코드에 영향을 받아 버튼 비활성화가 안 되는 거라면 타이머 숫자를 3:00(기본 세팅 값)으로 바꾸면 될까 했지만 역시 안 됐습니다.const timer__button = () => { document.getElementById("timer__button").innerText = "인증 완료" alert("인증이 완료되었습니다.") document.getElementById("timer__number").innerText = "3:00" // document.getElementById("timer__button").disabled = true // document.getElementById("submit").disabled = false } 여기저기 찾아본 결과 alert 기능은 안내창이 떠 있는 동안 동작을 일시정지 시키고, alert 다음으로 이어지는 동작을 적어줄 땐 첨부 코드와 같이 단순 나열로 가능하다고 합니다. 다른 코드들 찾아봤을 때도 제가 쓴 코드와 유사했고요. 어느 부분이 문제인 건지, 만약 앞서 작성한 타이머 코드 때문에 씹히는 거라면 어떻게 해결해야 좋을지 힌트를 좀 받고 싶습니다.alert button disabled 이 키워드로 해결책을 검색하며 찾아봤는데요, 혹시 더 적절한 검색 키워드가 있다면 그것도 추천 부탁합니다. 검색도 기술인 것 같은데 요령이 없네요.
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
파일 이동을 윈도우에서 사용법도 알고 싶습니다
우분투와 맥북 기준 말고윈도우에서는Alt -alt shift -이 두가지를 어떻게 사용 하나요?
- 미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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는 조회가 되지 않습니다.위와 같은 오류가 나오는데 제가 모르는 부분이 있는건지 데이터에 문제가 있는건지 잘 모르겠습니다.. !
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션1 : 시작은 프리캠프 final 과제 타이머 부분 JS 문의
프리캠프 final sign up 과제 중 타이머 부분 관련 문의드립니다.자바스크립트 이용하여 '인증번호 전송' 버튼을 누르면 타이머가 동작하는 부분까지는 구현하였습니다.이후 타이머 동작 중, 인증 완료 버튼을 누르면 "인증 완료" 팝업이 뜨고타이머가 종료되며 "인증 완료" 텍스트로 표시되도록 하고싶은데 팝업이 뜨고 텍스트는 변경되나 바로 다시 타이머가 동작합니다.(consle.log 를 찍어보면 인증완료 버튼 클릭 시 '인증완료' 로그가 찍히나, 타이머는 그대로 동작하고 00초가 되면 '시간 초과' 로그도 찍힙니다.)else 뒤에 넣는 것이 아니라 아예 따로 빼서 onclick 함수를 새로 만들어야 할까요? 답변 부탁드립니다! 아래는 제가 작성한 코드입니다.// 타이머 작동 & 인증버튼 활성화 // let isStarted = false; let auth = () => { if(isStarted === false) { // 버튼 클릭 시 인증번호 부여 및 타이머 작동 // isStarted = true document.getElementById("b2").disabled = false document.getElementById("b2").style.color = "white" document.getElementById("b2").style.border = "1px solid #0068ff" document.getElementById("b2").style.backgroundColor = "#0068ff" document.getElementById("b2").style.cursor = "pointer" const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0") document.getElementById("target").innerText = token let time = 10 let timer timer = setInterval(function() { if(time>=0) { let min = Math.floor( time / 60 ) let sec = String(time % 60).padStart(2, "0") document.getElementById("timer").innerText = min + ":" + sec time = time - 1 } else { document.getElementById("b2").disabled = true document.getElementById("b2").style.color = "#d2d2d2" document.getElementById("b2").style.border = "1px solid #d2d2d2" document.getElementById("b2").style.backgroundColor = "transparent" document.getElementById("b2").style.cursor = "default" document.getElementById("timer").innerText = "3" + ":" + "00" document.getElementById("target").innerText = "000000" console.log("시간 초과") isStarted = false clearInterval(timer) } },1000) } else { // 타이머가 작동중일 때 인증 확인 클릭하면 // alert("인증완료") document.getElementById("b2").disabled = true document.getElementById("b2").style.cursor = "default" document.getElementById("timer").innerText = "인증완료" isStarted = true clearInterval(timer) console.log("인증 완료") } }
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제
infor_box를 css에서 인식?을 못하는데 html 어디에 문제가 있는걸까요?ㅠㅠㅠ
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
husky 설치과정을 잘 모르겠습니다
영상에 나오는 것 처럼 따라하게 되면 npx husky install 부분에서 다음과 같은 오류가 나오게 되고 자료 집에 주신것처럼 husky ver4로 할 때 package.json 설정한 후에 어떻게 해야 될지 잘 모르겠습니다
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
git push origin master 입력시 오류가 발생해요!
git push origin master 입력시 위와 같은 오류가 나옵니다..! 확인부탁드립니다ㅠㅠ
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
코드자료 어디있나요? 매번 없네요.
이 강의에 불만이 한두개가 아닌 사람입니다.훈훈한 javaScript 타이머 만드는 부분 듣고있는데 제가 코드를 잘못 썼는지 작동이 안되는데요.코드를 비교해 보고싶어도 코드만 따로 올린게 없는 건지, 제가 못찾는건지 모르곘네요.만약 코드만 따로 올려놓은게 없다면 인강 처음부터 돌려보면서 하나하나 비교해야 하는건가요?심지어 html 코드자료 올려놓은거 복사해서 붙여넣었더니 class 이름이 강의랑 달라서 어이가 없었네요.자료좀 똑바로 올려주세요.
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
HTML 예치금 충전표
안녕하세요! 열심히 강의 듣고 있는데 HTML 수업에서 예치금 충전표 관련해서 따로 내용이 없는데 노션에는 나오더라구여! 예치금 충전표 관련 강의는 어디있는건가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
swagger 사용
강의에서 제공해주시는 swagger를 사용하여 axios, rest-api로 게시글 post를 테스트 하고 싶습니다. 어떠한 url로 axios.post() 안에 작성해야할 지 모르겠습니다..!
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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 위의 글 답변에서는 크롬 확장프로그램 문제일 가능성이 있다고 나오는데, 딱히 문제가 될 것 같은 확장프로그램도 없어서요.. 답변 부탁드립니다! 감사합니다!
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS정렬 - 회원가입 폼 만들기 과제 질문
안녕하세요. CSS정렬까지 들은 입문자입니다.처음으로 과제를 받고 걱정 반 설렘 반으로 시작해 완성한 과제입니다.<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./signup.css" rel="stylesheet"> </head> <body> <div class="total"> <h1>회원 가입을 위해<br>정보를 입력해주세요.</h1> <div class="memberinfo_box"> <div> <input type="text" placeholder="*이메일"> <br><br> </div> <div> <input type="text" placeholder="*이름"> <br><br> </div> <div> <input type="password" placeholder="*비밀번호"> <br><br> </div> <div> <input type="password" placeholder="*비밀번호 확인"> <br><br> </div> </div> <div class="memberinfo_raiod"> <div> <input type="radio" name="gender">여성 </div> <div> <input type="radio" name="gender">남성 </div> </div> <div class="agree_checkbox"> <div> <input type="checkbox">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. <br><br><hr> </div> </div> <div class="button"> <div> <button>가입하기</button> </div> </div> </div> </body> </html>*{ box-sizing: border-box; } .total{ width: 670px; height: 960px; border: solid 1px #0068FF; border-radius: 20px; top: 60px; left: 625px; box-shadow: 7px 7px 39px 0px #0068FF40; display: flex; flex-direction: column; align-items: center; margin-left: 800px; margin-top: 50px; } h1{ display: flex; width: 600px; padding: 50px; /* border: solid 1px none; color: #0068FF; */ border: none; color: #0068FF; } .memberinfo_box{ display: flex; flex-direction: column; /* align-items: center; */ padding: 50px; justify-content: space-around; width: 600px; height: 400px; border: none } .memberinfo_box input{ border: none; border-bottom:solid 1px #CFCFCF; width: 500px; height: 100px; } .memberinfo_raiod{ width: 400px; height: 100px; padding: 50px; /* border: solid 1px none; */ border: none; display: flex; justify-content: center; justify-content: space-evenly; } .agree_checkbox{ width: 640px; border: none; padding: 30px; display: flex; justify-content: center; } .button{ width: 200px; border: none; display: flex; justify-content: center; } .button button{ width: 500px; height: 50px; border: solid 1px #0068FF; background-color: white; color: #0068FF; border-radius: 10px; }처음이니 엉성한 것은 어쩔 수 없겠지만 몇 가지 피드백을 받고 싶어 문의 남깁니다.코드가 너무 긴 것 같아 불필요한 부분이 있거나 단순화 할 수 있는 부분을 알고 싶습니다.피그마에 있는 회원가입 폼을 보며 만들었지만 거기에 있는 수치를 거의 활용하지 않고 만들었어요. 문서로 된 수치를 적용하는 게 쉽지 않았는데 이에 대한 팁이 있을까요?이번 과제를 하면서 느낀 건 다른 코드를 많이 보는 게 큰 도움이 된다는 거였어요. 다양한 코드를 볼 수 있는 사이트다 커뮤니티가 있다면 알려주실 수 있나요? 이쪽 업계에 대한 인연이 아예 없어 정보가 너무 없네요.
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
커리큘럼 질문
안녕하세요 수강생입니다.버전이 리뉴얼됐다고 하는데,새로 들어온 수강생은 23부터 그냥 쭉 들으면 되나요? 23부터 시작을 했는데 중간에서 시작하는 느낌이라 어디서부터 다 들어야할지 모르겠습니다 ..아니면 0을 듣고 23부터 시작해야하나요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
<코멘트달기 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에 값이 없는 것 같은데, 코드를 아무리 봐도 문제점을 모르겠네요.. 문제가 뭘까요 ???