묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 5 퀴즈 질문
질문1:빨간색 부분에 width랑 background가 하얀글씨로 되어있는데적용이 된건가요? 그리고강의 중 이 부분에 예시가 없어서 레퍼런스 코드를 참고해버렸는데요질문2:transition:제일 앞에 선언할수 있는 속성이 무엇이 있는지질문3:transition-property:는 어떤식으로 사용하는지 궁금합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS 섹션3 퀴즈 질문
박스사이즈를 구하라는 문제에서 저는 div의 크기를 생각하고24*3(폰트사이즈*3em) + 20(가로세로 padding 10+10)=92 생각했는데 93이라는 약간의 오차도 있고정답은 폰트사이즈인 72네요 ㅠ 1.제가 문제를 잘못이해했는지2.div크기 구하는데 오차가 발생하는 이유위 두가지가 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
브라우저 재 접속 시 로그인 상태 유지
안녕하세요.브라우저 재 접속 시 로그인 상태 유지를 하고 싶습니다.로그인 후 어플리케이션의 쿠키에 refreshToken이 담긴 것을 확인하였습니다.브라우저를 재접속하면 refreshToken이 사라져있는데 이것은 브라우저를 종료하면 쿠키가 휘발되는 성질로 인해 사라지는 것이 맞나요? 그렇다면 브라우저 재접속 시 로그인 상태 유지는 어떻게 구현할 수 있는지 궁금합니다.감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS파트 claerfix질문
강의중 clearfix div를 넣어주는데제가 그게 왜들어가는지 들어가서 무슨작용을 하는지원리가 무엇인지 아직 이해가 덜되서요.. 조금만 더 자세하게 설명해주실수 있나요?못난 제자라 죄송합니당 ㅜㅜ html:<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-02-clear</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="box1 box"> 첫번째 박스입니다.<br> float:left가 적용되어 있습니다. </div> <div class="box2 box"> 두번째 박스입니다.<br> float:right가 적용되어 있습니다. </div> <div class="clearfix"></div> <div class="box3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus sapien, facilisis vitae feugiat ut, semper at ligula. Vivamus cursus lectus tincidunt tellus tincidunt pharetra. Donec pharetra dictum malesuada. Fusce non sapien egestas, maximus urna vel, pulvinar magna. Aenean ut dapibus lacus, in blandit ligula. Vestibulum sit amet efficitur tortor. Phasellus id viverra felis. Mauris magna est, luctus sit amet neque et, sagittis ultrices elit. Morbi odio eros, finibus non justo eget, sollicitudin dapibus ante. Nunc maximus eu nunc et finibus. Vivamus viverra feugiat pretium. Sed at tempus enim, et dignissim ante. Mauris vel nisi leo. Nullam vel nibh suscipit, lobortis ex eu, mollis nunc. Fusce in eros blandit, vehicula libero et, euismod enim. </div> </body> </html>css:*{ box-sizing: border-box; margin: 0; padding: 0; } .container { background-color: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px 0px; } .wrapper { width: 620px; padding: 40px 30px; background-color: white; border: 1px solid gray; border-radius: 10px; } .wrapper__head { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed gray; } .wrapper__head__title { font-size: 32px; background-color: orange; color: white; text-align: center; padding: 5px; margin-bottom: 10px; } .wrapper__head__sub-title{ font-size: 18px; padding: 10px 0; } #point { color: orange; font-size: 22px; font-weight: bold; text-decoration: underline; display: block; margin-top: 15px; } .wrapper__body { border: 1px solid #dddddd; padding: 20px 30px; } .diary-title { font-size: 18px; font-weight: 600; background-color: #f4f4f4; margin-bottom: 20px; } .kimchi { color: red; font-weight: 600; } .egg { color: orange; font-weight: 600; } .highlight { font-size: 22px; color: blue; font-weight: 700; font-style: italic; } .diary-date { color: #919191; font-size: 14px; text-align: right; } .header { height: 80px; display: flex; justify-content: center; align-items: center; border: 1px solid gray; } .header-inner { width: 900px; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .logo { width: 100px; } .logo h1 a{ text-decoration: none; color: orange; } .menu__ul { display: flex; flex-direction: row; } .menu__ul li { list-style: none; } .menu__ul li a{ display: block; /* a 태그는 inline태그여서 상하적용이 안되기 떄문에 block요소를 적용시킴*/ padding: 10px 20px; /*상하에 굳이 시각적 차이 없는 10px을 주는 이유는 마우스 커서클릭 영역이 글자만 되는것 보다 영역을 늘려서 여유를 주기위해서*/ text-decoration: none; color: black; } .menu__ul li a:hover{ color: orange; } .user { width: 100px; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
git push origin master 입력시 오류가 발생합니다
다음과 같이 not found라 나옵니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
refreshToken 질문입니다.
강사님 refreshToken 이해가 되지않아서 인데요.제가 52강의 까지 보고 했는데요,이사진은 기존토큰이 없을때 뜨는 restore try~ catch문에서 나오는 Error 입니다. 저는 refreshToken을 localStorage에 값이 있을때로 했거든여, 제가 구현하고 싶은거는사용자가 해당 시간때가 끝나면 알아서 자동으로 해주는걸로 했는데 이렇게 해도 되는지여쭤봅니다... 강의에서 볼때는 버튼을 누르고 새롭게 갱신하는걸로 해가지고요뭔가 로그인, 로그아웃 새로고침 여기서 막히네여 ㅠ,
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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}}
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
26-01 강의 : 아폴로 캐시 질문입니다.
아폴로 캐시 데이터를 직접 수정하고 싶어서 질문 드립니다. 포인트 충전 시 변경된 포인트를 refetchQueries 사용하지 않고, 캐시를 수정해서 화면에 보여주려 하는데요.두번째 사진에서 캐시에 저장된 fetchUserLoggedIn.userPoint.amount를 직접 수정하고 싶은데 어떻게 수정해야 할지 모르겠습니다.강의에서 cache.modify를 이용해 배열에 아이템 목록을 추가하거나 삭제하는 예시만 알려주셔서요.캐시 데이터를 직접 수정하는 방법이 있을지 여쭙고 싶습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리액트 프로젝트 생성
리액트 npx create-react-app [이름]으로 해서 프로젝트 생성해서 보면 index.html과 app.js를 같이 작성하는지 아니면 app.js만 하는지. 알고 싶습니다 src에 컴포넌트 폴더를 생성하면 파일 종류가 어떻게 되어 있는지 알고 싶습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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); } } };이렇게 데이터를 가져오고 있습니다. 어떤게 문제일가요 그리고 어떻게 해야 이 문제들을 해결 할 수 있을까요?
