묻고 답해요
138만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn 이 설치가 안되요
yarn 설치가 안됩니다 npm 으로는 작동이 되는데 yarn 이면 아무것도 안되네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
async 함수 중복선언 문제 관련
안녕하세요. 리액트 04-01-rest-get강의를 보다가 export default function RestGetPage() { function onClickAsync() { const result = axios.get("https://koreanjson.com/posts/1"); console.log(result); //Promise } // async function onClickSync() { // const result = await axios.get("https://koreanjson.com/posts/1"); => 함수 중복 선언 문제 // console.log(result); //제대로 된 결과 // }아랫부분의 주석 코드에서 함수 중복 선언 문제가 발생할 수 있으니 화살표 함수를 쓰라고 하셨는데요.함수 중복 선언의 예제를 설명하시는건 이해가 됐는데왜 저 코드가 함수 중복 선언인지 이해가 안가요.위에 함수랑 주석된 함수 이름은 다른데왜 중복선언인가요?챗지피티한테 물어봤더니 자기도 모르겠대요ㅠ그리고 여태 들었던 강의들보다 강사님 강의가 퀄리티가 너무 좋은 거 같아요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn install 했는데 node_modules가 설치 안됐어요
이건 class 파일에서 작업한 내용이고 아래는 freeboard-frontend에서 작업한 내용입니다. 파일 지우고 똑같이 따라서 설치 했는데 안돼요..안에 내용도 다른 것 같아요 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
설치과정에서 불필요한 부분을 삭제하는데 저장을 하지 못한다고 떠요
저장을 눌렀는데 위 화면이 뜨길래 sudo로 다시 시도를 눌렀습니다. 그런데 저장하지 못함 화면이 뜨고 다시 시도를 눌러도 저장이 되지 않습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
logoutUser 질문입니다
이렇게 떠서 구글링, 유튜브를 보는데 안나와가지고 혹시 방법을 여쭤봐도 될까요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
31 댓글 등록 삭제 포트폴리오 문제
안녕하세요 ! 포트폴리오 댓글,등록 삭제 과제 풀고있 었는데요 삭제 만드는중에 왜 포폴용 서버 문서에는 저렇게 리턴값을 명시해줘야한다고 돼있는데 코드는export const DELETE_BOARD_COMMENT = gql` mutation deleteBoardComment($password: String, $boardCommentId: ID!) { deleteBoardComment(password: $password, boardCommentId: $boardCommentId) } `; 왜 이렇게 작성해야하는건가요? 풀다보니 저렇게 해야 댓글삭제할때 오류가 나지않더라구요처음에는export const DELETE_BOARD_COMMENT = gql` mutation deleteBoardComment($password: String, $boardCommentId: ID!) { deleteBoardComment(password: $password, boardCommentId: $boardCommentId) { ID } } `;이렇게 작성했는데 오류가 떠서 혹시나 삭제해보니 오류가 나지 않아서 궁금합니다. 점점 복잡해지네요 ㅠㅠ일단 이해는 다 못하지만 댓글삭제, 등록 기능을 구현하긴했는데 다음챕터로 넘어가도될까요 ? 아니면 처음부터 다시 31챕터까지 복습해야할까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
javascript 내장함수 리뷰 파트 질문
let isStarted = false; let auth = () => { if(isStarted === false){ // 타이머가 작동중이 아닐때 타이머가 동작하게 함 isStarted = true document.getElementById("finish").disabled = false const token = String(Math.floor(Math.random() * 1000000)).padStart(6,"0") document.getElementById("target").innerText = token document.getElementById("target").style.color= "#" + token let time = 180 let timer timer = setInterval(function() { if(time >= 0 ){ let min = Math.floor( time / 60 ) let sec = String (time % 60).padStart(2,"0") // console.log(min + ":" + sec) document.getElementById("timer").innerText= min + ":" + sec time = time - 1 } else { document.getElementById("finish").disabled=true isStarted = false clearInterval(timer) } },1000) } else { // 타이머가 작동중일때 } } let isStarted를 False로 주고auth함수 안에 if문에서 isStarted가 False 일때1.isStarted에 아무것도 할당 안하면 else문으로 넘어가지않는다.2.처음에 isStarted에 true를 할당하고 마지막에 false를 할당한다if문 부분에 설명이모든게 낯선 제 머리로는 이 로직이 이해가 안되네요 ㅠㅠ왜 true를 줬는지 ture를 주면 어떤일이 일어나는지아무것도 안줬을때는 어떤일이 일어나는지 조금 더 자세한 설명 부탁드립니닷.확실히 javascript파트는 어렵습니다.ㅠㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션35 13-01 질문
export default function LibraryIconPage(): JSX.Element { const onClickDelete = (event: MouseEvent<HTMLDivElement>): void => { console.log(event.currentTarget.id) } return ( <div id="삭제게시글id" onClick={onClickDelete}> <MyIcon /> </div> ) }강사님께서 상위에 div를 만들고 event.currentTarget.id로 값을 받아오라고 설명해주셨는데,svg 상위 태그인 span에 id가 있으니까MyIcon에 id,onClick 넣고 event.currentTarget.id로span의 id값을 가져오는 건 잘못된 것인지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 +
home.html이나 game.html은 css가 정상적으로 적용되는데jukebox.html만 css가 적용되지않습니다 왜그런가욤.. jukebox.html:<!DOCTYPE html> <html lang="ko"> <head> <title>JUKEBOX</title> <link href="./styles/jukebox.css"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="wrapper__title"> <div class="title">추억의 BGM</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="wrpper__body"> <div class="wrapper__title"> <div class="title">추억의 BGM</div> <div class="subtitle">TODAY CHOICE</div> </div> </div> </div> </body> </html> jukebox.css:*{ box-sizing: border-box; margin: 0px; } html, body{ width: 100%; height: 100%; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 만들기 4탄 질문
id="myword"가 떡하니 있는데 왜저럴까요..let lastword = word[word.length-1] let firstword = myword[0]부분도 let 선언이 안되는것같습니다 ㅠ game.html:<!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> <script src="./game.js"></script> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span> </div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search" onclick="startWord()">입력</button> </div> <div class="word__result" id="result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle"> 버튼을 누르세요. </div> <div class="lotto__text"> <div class="number__box"> <span class="number1">3</span> <span class="number1">5</span> <span class="number1">10</span> <span class="number1">24</span> <span class="number1">30</span> <span class="number1">34</span> </div> <button class="lotto_button">추첨</button> </div> </div> </div> </body> </html> game.js:const startWord = () => { let myword = document.getElementById("").value let word = document.getElementById("word").innerText let lastword = word[word.length-1] let firstword = myword[0] if(lastword === firstword){ document.getElementById("result").innerText = "정답입니다" document.getElementById("word").innerText = myword docement.getElementById("myword").value = "" } else { document.getElementById("result").innerText="떙!" docement.getElementById("myword").value = "" } }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 상세페이지
안녕하세요 .. 중고마켓에서 너무 많이 해메고 있네요..중고마켓 상세페이지 부분에서 삭제하기, 찜카운트 부분은 로그인 한 사람만 버튼이 작동할까요? _id 오류가 뜨는 이유를 잘 모르겠어서요...(alert창)아니면 id값을 못가져오는건가요? toggleUseditemPick(픽카운터)(delete 부분도 비슷하게 가져오고있습니다.)const onClickPickCount = async () => { try { await toggleUseditemPick({ variables: { useditemId: String(router.query.marketId), }, refetchQueries: [ { query: FETCH_USEDITEM, variables: { useditemId: String(router.query.marketId), }, }, ], }); } catch (error) { if (error instanceof Error) { alert(error.message); } } };이렇게 데이터를 가져오고 있습니다. 어떤게 문제일가요 그리고 어떻게 해야 이 문제들을 해결 할 수 있을까요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 실습 4탄 질문이요 ㅠㅠ
싸이월드 실습 4탄 하는 중인데LOTTO 부분에 "특히 버튼과 숫자박스 부분"이 왜 세로로 다닥다닥 붙어있을까요..ㅠgame__container 부분에 flex-direction: column; align-items: center; justify-content: space-between; padding: 20px;가 들어있고lotto__text부분에도display: flex; flex-direction: column; align-items: center; justify-content: space-between;를 넣어봤으나 아무 변화가 없었습니다 ㅠgame.html:<!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span> </div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search">입력</button> </div> <div class="word__result" id="result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle"> 버튼을 누르세요. </div> <div class="lotto__text"> <div class="number__box"> <div class="number1">3</div> <div class="number1">5</div> <div class="number1">10</div> <div class="number1">24</div> <div class="number1">30</div> <div class="number1">34</div> </div> <button class="lotto_button">Button</button> </div> </div> </div> </body> </html>game.css:* { box-sizing: border-box; margin: 0px } html, body{ width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; /* 박스가 wrapper안에 game__container 두개 총 세개*/ align-items: center; justify-content: space-between; } .wrapper__header{ width: 100%; display: flex; flex-direction: column; } .header__title{ display: flex; flex-direction: row; align-items: center; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .game__container{ width: 222px; height: 168px; border: 1px solid gray; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; background-color: #f6f6f6; } .game__title { font-size: 15px; font-weight: 900; } .game__subtitle { font-size: 11px; } .word__result { font-size: 11px; font-weight: 700; } .word__text { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .textbox { width: 130px; height: 24px; border-radius: 5px; } .search { font-size: 11px; font-weight: 700; width: 38px; height: 24px; } .number__box{ width: 130px; height: 24px; border-radius: 5px; background-color: #FFE400 ; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .lotto__text { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .number1{ font-size: 10px; font-weight: 700px; margin: 5px; } .lotto_button { font-size: 11px; font-weight: 700; width: 62px; height: 24px; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 30 퀴즈
import styled from "@emotion/styled"; import { useState } from "react"; // 스타일 // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- const Container = styled.div` display: flex; justify-content: center; padding: 100px; `; const Wrapper = styled.table` width: 600px; `; const MyTr = styled.tr` text-align: center; `; const MyTd = styled.td` padding: 20px 0 20px 0; `; // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- export default function Quiz02() { // 리스트에 뿌려줄 목업 데이터 // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- const dataList = [ { id: 1, data: "9월달 시스템 점검 안내입니다.", date: "2020.09.19" }, { id: 2, data: "안녕하세요! 공지사항 전달드립니다.", date: "2020.09.17" }, { id: 3, data: "개인정보 처리방침 변경 사전 안내", date: "2020.09.12" }, { id: 4, data: "ios 10.0이하 지원 중단 안내", date: "2020.08.10" }, { id: 5, data: "이용약관 변경 사전 안내", date: "2020.08.01" }, { id: 6, data: "개인정보 처리방침 변경 사전 안내", date: "2020.07.19" }, ]; const [checkList, setCheckList] = useState([]); console.log("현재 체크리스트", checkList); const onClickCheckAll = () => { console.log("받아오는 데이터의 길이", dataList.length); console.log("현재 체크리스트에 들어있는 데이터의 길이", checkList.length); if (checkList.length !== dataList.length) { setCheckList(dataList); //체크 리스트 크기와 데이터 크기가 같지않으면 체크리스트에 데이터를 넣는다. } else { setCheckList([]); } }; const onCheckedItem = (list) => { console.log("내가 누른 체크리스트가 뭔가?", list); // 모든 checkList.id 중에 체크한 list.id값이 없으면 CheckList에 list 값을 넣는다. if (checkList.every((cur) => cur.id !== list.id)) { setCheckList([...checkList, list]); } else { // 체크된것만 제외하고 배열에 담는다. const result = checkList.filter((cur) => cur.id !== list.id); setCheckList(result); } }; const isChecked = (list) => { // 체크박스에 체크할지 안할지 return checkList.some((cur) => cur.id === list.id); //list.id 요소와 checkList.id 요소와 겹치는게 있다면 true를 반환한다. }; return ( <Container> <Wrapper> <tr> <th> <input type="checkbox" onChange={onClickCheckAll} checked={checkList.length === dataList.length} style={{ marginTop: "5px" }} ></input> </th> <th>번호</th> <th>제목</th> <th>작성일</th> </tr> {dataList.map((list, index) => ( // 데이터 배열의 요소와 인덱스 가져오기 <MyTr key={index}> {/* 정적 데이터기 때문에 key값을 인덱스로 설정 */} <MyTd> <input type="checkbox" onChange={() => onCheckedItem(list)} checked={isChecked(list)} style={{ marginTop: "5px" }} /> </MyTd> <MyTd>{list.id}</MyTd> <MyTd>{list.data}</MyTd> <MyTd>{list.date}</MyTd> </MyTr> ))} </Wrapper> </Container> ); }섹션 30 퀴즈 레퍼런스 코드에서 onChange={() => onCheckedItem(list)}이 부분 그냥 화살표 함수로 하는 이유가 있나요?else { // 체크된것만 제외하고 배열에 담는다. const result = checkList.filter((cur) => cur.id !== list.id); setCheckList(result); }이 코드에서 선택한것을 체크해제 했을때 아무것도 체크 되어 있지 않다면 result는 빈값인가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
콘솔이 터미널에 찍힙니다.
안녕하세요 선생님 콘솔을 찍으면 자꾸 브라우저 개발자 도구 콘솔에서 안보이고 터미널에서만 보이는데 이유가 뭔지 알 수 있을까요? 해당 컴포넌트가 server client component라 그런걸까요?'use client'; 라고 적은 컴포넌트에서는 콘솔이 잘 찍힙니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 29 state 원리
const onChangeContents = (event) => { setContents(event.target.value); if (writer && title && contents) { setIsActive(true); } };리렌더링은 함수에 바뀐값이 있다면 함수가 끝난후에 리렌더링이 되고 그래서 함수가 끝나기 전에 위 코드처럼 참/거짓 검증을 하려고 하면 undefined 값이라 거짓이라 setActive 값은 리렌더링이 되지않고const onChangeContents = (event) => { setContents(event.target.value); if (writer && title && event.target.value) { setIsActive(true); } };위처럼 event.target.value로 바꾸면 참이라서 바로 리렌더링이 되어서 노란색으로 버튼이 활성화 되는건가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
SSG 페이지 갯수에 관해 질문있습니다.
안녕하세요, 강의 잘 들었습니다.SSG 페이지 갯수에 관해서 궁금한 것이 있는데요.만약에 커뮤니티 사이트 같은 걸 만든다고 하면 엄청나게 많은 글이 생성 될텐데 SEO를 위해 이 페이지 모두 SSG를 적용하면 안될 것 같다고 생각하는데 맞을까요?그리고 그렇다면 SSR로 모든 페이지를 개발한다고 하면 사용자 경험이 안 좋을 것 같고, SSR은 prefetch도 안되는 것 같은데 속도를 개선하는 방법이 없을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 규칙 적용 관련 질문입니다.
사진처럼 eslint js 파일에 rules 설정을 마쳤는데도 npx eslint .을 하면 여전히 문제가 100개 이상 발생하고 있습니다. 하지만 강의 내용에는 저 5개의 규칙만 적용해도 발생하는 문제가 없다고 뜹니다. 뭐가 문제인가요?빠른 수정 방식으로 새로운 규칙을 지정하는 등의 문제 해결은 가능하나 현재 강의 내용과 보여지는 에러가 달라서 질문 남깁니다. 빨간 줄이 쳐저 있는 부분은 import하는 부분과 코드 내부에서는 router 기능을 사용하는 곳에 표시됩니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS 첫번째 피그마 과제 질문
제 한계네용... 1.텍스트입력칸을 어떻게 하면 밑줄만 가로로 쭉 나오게 할지 모르겠고2. 성별 선택하는 라디오"만" 중앙배치 시키고싶은데 아직 해결이 안되고3.모든 요소들사이에 공간을 만들어주는게 아닌 가입버튼과 이용약관, 성별 선택라디오이렇게 세가지 요소만 공간을 만들고 요소를 선택해서 배치를 자유자재로 하고싶은데어렵네요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
1강 Nodejs, npm, yarn 이해 - 프로젝트 설치 중 컴퓨터 튕김현상
학습자료를 보고 수업프로젝트 설치목록 class와 freeboard_frontend를 설치하고 있는데, 어떨때는 설치가 잘 되는데 어떨때는 설치도중에 컴퓨터 전원이 꺼져버리네요. 왜 어쩔때는 설치도중에 컴퓨터 전원이 꺼지는 건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 23 프로그램 세팅 관련 질의
안녕하세요? 프로그램 설치 관련 한번 더 질의 드립니다. 질의 답변 및 노션의 디렉션대로 진행하던 중 어떤 문제가 발생한 듯도 했지만 설치는 진행이 되었습니다. npx create-next-app을 설치한 한 class 폴더 내 다른 폴더들 확인한 결과, 아래와 같이 pages 폴더는 설치가 되지 않았고, node.modules에서는 노션에 나온 대로 버전 변경하려 했으나 이미 변경된 상태였습니다. 시간이 지나 업데이트 등의 이유로 설치 항목이 변경되어 위와 같은 것인지, 혹은 제가 무언가 실수를 한 것인지 궁금하여 질의 드립니다. 위와 같이 설치된 상태에서도 수업 진행에 차질이 없을지요?