묻고 답해요

spread 연산자 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

let origin = { name: "otter", age: 25, favoriteFood: { first: "sushi", second: "hamburger" } }; const copy = JSON.stringify(origin); const deepCopy = JSON.parse(copy); 강의에서 깊은 복사할 때 위 코드처럼 JSON.stringify(), JSON.parse()를 사용해서 복사를 해주셨는데 아래의 코드처럼 복사해주어도 문제가 없을까요? 물론 객체 안에 객체들이 많아진다면 JSON 명령어를 사용해서 복사해주는 것이 좋다고 생각합니다! 하지만 예시처럼 객체가 하나거나 적은 경우에 저는 개인적으로 아래처럼 해주는 게 편한 것 같아서 아래처럼 복사해줘도 괜찮은건지 질문드립니다! let origin = { name: "otter", age: 25, favoriteFood: { first: "sushi", second: "hamburger" } }; const myCopy = {...origin, favoriteFood: {...origin.favoriteFood}}

• react
• node.js
• seo
• graphql
• next.js

26-01 강의 : 아폴로 캐시 질문입니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

아폴로 캐시 데이터를 직접 수정하고 싶어서 질문 드립니다. 포인트 충전 시 변경된 포인트를 refetchQueries 사용하지 않고, 캐시를 수정해서 화면에 보여주려 하는데요. 두번째 사진에서 캐시에 저장된 fetchUserLoggedIn.userPoint.amount를 직접 수정하고 싶은데 어떻게 수정해야 할지 모르겠습니다. 강의에서 cache.modify를 이용해 배열에 아이템 목록을 추가하거나 삭제하는 예시만 알려주셔서요. 캐시 데이터를 직접 수정하는 방법이 있을지 여쭙고 싶습니다.

• react
• node.js
• seo
• graphql
• next.js

리액트 프로젝트 생성

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

리액트 npx create-react-app [이름]으로 해서 프로젝트 생성해서 보면 index.html과 app.js를 같이 작성하는지 아니면 app.js만 하는지. 알고 싶습니다 src에 컴포넌트 폴더를 생성하면 파일 종류가 어떻게 되어 있는지 알고 싶습니다

• react
• node.js
• seo
• graphql
• next.js

yarn 이 설치가 안되요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

yarn 설치가 안됩니다 npm 으로는 작동이 되는데 yarn 이면 아무것도 안되네요

• react
• node.js
• seo
• graphql
• next.js

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); //제대로 된 결과 // } 아랫부분의 주석 코드에서 함수 중복 선언 문제가 발생할 수 있으니 화살표 함수를 쓰라고 하셨는데요. 함수 중복 선언의 예제를 설명하시는건 이해가 됐는데 왜 저 코드가 함수 중복 선언인지 이해가 안가요. 위에 함수랑 주석된 함수 이름은 다른데 왜 중복선언인가요? 챗지피티한테 물어봤더니 자기도 모르겠대요ㅠ 그리고 여태 들었던 강의들보다 강사님 강의가 퀄리티가 너무 좋은 거 같아요

• react
• node.js
• seo
• graphql
• next.js

yarn install 했는데 node_modules가 설치 안됐어요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

이건 class 파일에서 작업한 내용이고 아래는 freeboard-frontend에서 작업한 내용입니다. 파일 지우고 똑같이 따라서 설치 했는데 안돼요.. 안에 내용도 다른 것 같아요 ㅠㅠ

• react
• node.js
• seo
• graphql
• next.js

설치과정에서 불필요한 부분을 삭제하는데 저장을 하지 못한다고 떠요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

저장을 눌렀는데 위 화면이 뜨길래 sudo로 다시 시도를 눌렀습니다. 그런데 저장하지 못함 화면이 뜨고 다시 시도를 눌러도 저장이 되지 않습니다.

• react
• node.js
• seo
• graphql
• next.js

logoutUser 질문입니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

이렇게 떠서 구글링, 유튜브를 보는데 안나와가지고 혹시 방법을 여쭤봐도 될까요 ㅠ

• react
• node.js
• seo
• graphql
• next.js

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챕터까지 복습해야할까요?

• react
• node.js
• seo
• graphql
• next.js

driver = webdriver.Chrome('chromedriver', options=chrome_options)

미해결

안녕하세요. 5강수업 실습 중 오류가 나와 문의 드립니다.

• python
• 웹크롤링

작업형2 모의문제1

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

train 데이터를 별도 분리안하고 범주형은 라벨 인코더로 스케일링하고나서 수치형데이터도 값이 큰건 minmaxscaler나 robustscaler로 적용하고 싶어서 개별 컬럼 선택해서 적용해보는데... 에러가 뜨는데 머가 문제인지 알수 있을까요? 수치형 범주형 개별로 스케일링 하고 싶으면 데이터를 분리했다가 다시 합쳐야 하는 걸까요? train['Total_Trans_Amt'] = scaler.fit_transform(train['Total_Trans_Amt']) test['Total_Trans_Amt']=scaler.transform(test['Total_Trans_Amt'])

• python
• 머신러닝
• 빅데이터
• pandas
• 빅데이터분석기사

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파트는 어렵습니다.ㅠㅠㅠ

• react
• node.js
• seo
• graphql
• next.js

섹션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값을 가져오는 건 잘못된 것인지 궁금합니다.

• react
• node.js
• seo
• graphql
• next.js

싸이월드 +

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

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; }

• react
• node.js
• seo
• graphql
• next.js

싸이월드 만들기 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 = "" } }

• react
• node.js
• seo
• graphql
• next.js

중고마켓 상세페이지

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 .. 중고마켓에서 너무 많이 해메고 있네요.. 중고마켓 상세페이지 부분에서 삭제하기, 찜카운트 부분은 로그인 한 사람만 버튼이 작동할까요? _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); } } }; 이렇게 데이터를 가져오고 있습니다. 어떤게 문제일가요 그리고 어떻게 해야 이 문제들을 해결 할 수 있을까요?

• react
• node.js
• seo
• graphql
• next.js

bash: pip: command not found가 출력

미해결

한국인이 좋아하는 속도로 때려넣는 파이썬

안녕하세요 강의 수강중 python을 설치하여 git bash에서 $ pip를 입력하는 과정에서 bash: pip: command not found가 출력될 경우에는 어떤 조치를 취할 수 있을까요? 완전 처음이라 문의 남깁니다.

• python

싸이월드 실습 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; }

• react
• node.js
• seo
• graphql
• next.js

섹션 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는 빈값인가요?

• react
• node.js
• seo
• graphql
• next.js

콘솔이 터미널에 찍힙니다.

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요 선생님 콘솔을 찍으면 자꾸 브라우저 개발자 도구 콘솔에서 안보이고 터미널에서만 보이는데 이유가 뭔지 알 수 있을까요? 해당 컴포넌트가 server client component라 그런걸까요? 'use client'; 라고 적은 컴포넌트에서는 콘솔이 잘 찍힙니다.

• seo
• next.js
• vercel
• csr
• ssg
• ssr