묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
피그마 code가 강의내용과 다릅니다.
저는 피그마 코드가 강의랑 다릅니다.강의랑 똑같이는 안되나요?
-
해결됨처음 만난 리액트(React)
9장 Conditional Rendering 실습 질문있습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.[Toolbar.jsx][LandingPage.jsx][index.js][결과창]올려주신 영상과 동일하게 작업을 진행했다고 생각하는데 결과창에서 버튼을 선택해도 상태가 변경되지 않습니다.어떤 부분이 문제일까요??react 버전은 18입니다
-
해결됨만들면서 배우는 리액트 : 기초
깃 강의노트 어디서 볼 수 있나요?
ㅜㅠ강의노트를 어디서 찾아야 하는지 모르겠네용알려주세요~
-
해결됨만들면서 배우는 리액트 : 기초
이해가 안되는 부분이 있어요
안녕하세요 강의 내용 중 이해가 안되는 부분이 있어서 질문 드립니다.const [value, setValue] 선언 당시 const 뒤에 이름 없이 []를 사용하여 선언해도 문제없는 이유가 무엇인지 궁금합니다.보통 const 선언시 함수명 혹은 컴포넌트 명을 작성하는데 react 수업을 들으면서 처음 적었을 때부터 아직 이해가 되지가 않아서요ㅠㅠ
-
해결됨[코드캠프] 시작은 프리캠프
버튼이 안 눌려요
버튼이 눌리지가 않아요.그리고 game.js 코드부분에 Unknown word 맨 아래 선언 또는 문이 필요하다는 어떻게 해야하나요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
5:54 분에 에러 고치라는 숙제에 대해서
DeepPartial 이란 타입이 있던데 그걸 사용하는건가요?
-
미해결[코드캠프] 시작은 프리캠프
블록지정
이거 블록 지정 어떻게 하나요 자꾸 흰색만 또는 파란색만 떠서요 ㅠㅠㅠㅠㅠ 맥북입니다 ㅠㅠ...
-
해결됨만들면서 배우는 리액트 : 기초
api가 안불러와지네요...
콘솔창에서 아래와 같이 입력해서 확인해보면 데이타가 잘 들어옵니다.근데 강사님이 작성하신 utils.js 파일을 넣고 실행을 하면 데이타가 들어오지 않는거 같아서요혹시 뭐가 잘못된걸까? fetch('https://cataas.com/cat?json=true') .then((response) => response.json()) .then((data) => console.log(data));위의 소스로 확인해보면 데이타가 들어옵니다. //(1)utils.js에서 API함수 추가 const fetchCat = async (text) => { const OPEN_API_DOMAIN = "https://cataas.com"; const response = await fetch(`${OPEN_API_DOMAIN}/cat/says/${text}?json=true`); const responseJson = await response.json(); return `${OPEN_API_DOMAIN}/${responseJson.url}`; console.log(fetchCat); };//(2)수정 async function updateMainCat(value){ //수정 const newCat = await fetchCat(value); //추가 setMainCat(newCat); //수정 const nextCounter = counter +1; setCounter(nextCounter); jsonLocalStorage.setItem("counter", nextCounter); } function handleFormSubmit(e){ e.preventDefault(); setErrorMessage(""); if(value ===""){ setErrorMessage("빈 값으로 만들 수 없습니다."); return; } updateMainCat(value); //(3)수정 } 며칠동안 계속 안되길래 무료 API 라 연결이 안될수 있다고 해서 기다리다가 며칠이 지나도 계속 안되는 상태여서 확인해보니 연결이 안되는거 같지는 않아서요,실제고양이 api 데이터 받아오는 강의부분의 소스인데요, 생성버튼을 누르면 이미지에 엑박표시가 나면서 콘솔창에 보면 Failed to load resource 라고 뜹니다.
-
해결됨[코드캠프] 훈훈한 Javascript
객체 속성 접근시 브라켓 이용(vs. 닷 오퍼레이터)
<JS로 HTML, CSS 조작> 강의편에서 객체와 속성 코드 적으실 때 hours.textContent = remainingObj["remainingHours"]; 와 같이 브라켓을 이용해서 속성에 접근하셨는데, 객체 속성 접근할 때 닷 오퍼레이터말고 브라켓을 이용하신 이유가 있나요? 아니면 단순한 개인의 취향 문제인지요 ㅎㅎ 이번 강의에서 처음 알게된 내용이라 궁금해서 여쭤봅니다 :)
-
해결됨[코드캠프] 시작은 프리캠프
회원가입 과제 질문
* { justify-content: center; align-items: center; } .hr { width: 470px; height: 0.998px; flex-shrink: 0; background: #e6e6e6; } .bak { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #aacdff; background: #fff; box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25); } .h2 { width: 466px; color: #0068ff; font-family: Noto Sans CJK KR; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; } .email { width: 158px; height: 23.649px; flex-shrink: 0; color: #797979; font-family: Noto Sans CJK KR; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .name { width: 158px; height: 23.649px; } .pw { width: 158px; height: 23.649px; } .pw { border: 1px solid blue; } .button { border-radius: 10px; border: 1px solid #0068ff; background: #fff; width: 470px; height: 75px; flex-shrink: 0; } .check { color: #000; font-family: Noto Sans CJK KR; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel="stylesheet" /> </head> <body> <div class="bak"> <h2 class="h2">회원 가입을 위해<br>정보를 입력해주세요</h2> <input class="email" type="text" placeholder="이메일" /><br /><br /> <input class="name" type="text" placeholder="이름" /><br /><br /> <input class="pw" type="password" placeholder="비밀번호" /><br /><br /> <input class="pw" type="password" placeholder="비밀번호 확인" /><br /><br /> <select> <option disabled="true" selected="true">지역을 선택하세요</option> <option>서울</option> <option>경기</option> <option>인천</option> </select> <br /><br /> <input class="radio" type="radio" name="gender" />여성 <input class="radio" type="radio" name="gender" />남성 <br /><br /> <input class="check" type="checkbox" /> 이용약관 개인정보 수집 및 동의 <hr class="hr"> <br> <br> <button class="button">가입하기</button> <!-- <input type="button" value="가입하기" /> --> </body> </div> </html> 코드 작성한 게 저렇게 화면이 보여지는데 가운데 정렬을 하려면 어떻게 해야될까여..... flex랑 just로 시작하는 속성을 넣으면 이상하게 되더라구요 너무 어렵네요 ㅠㅠ
-
미해결Vue.js 시작하기 - Age of Vue.js
computed와 watch 관련 질문 드립니다.
watch까지만 들었을 때는 오히려 명확하게 다르다고 생각했었는데, computed와 watch을 비교하는 과정 속에서 살짝 혼동이 와서 질문드립니다.제가 이해하기로 사용법에 있어서도 그렇고, computed의 경우 특정 element 'a'의 상태 변화에 따라 영향받는 다른 element 'b'의 상태를 미리 계산해서 갖고 있기 위해 수행되는 부분이고watch의 경우 'a'의 상태 변화시 수행되어야 할 함수들(콜백함수처럼)을 정의하면 된다고 생각을 했었는데, 이렇게 이해하면 될까요??
-
해결됨애플 웹사이트 인터랙션 클론!
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
안녕하세요,유익하고 좋은 강좌 만들어주셔서 감사드립니다! 덕분에 브라우저 스크롤 애니메이션에 대한 개념이해를 갖게 됐습니다!. 이런 내용을 바탕으로 '미려한' 애니메이션을 만들고 싶은 욕심이 생겼는데요,해당 강좌를 시청하며 2가지 문의사항이 있습니다.감사합니다! #질문1. svg의 path의 생성하는 법, 만들어주신 강좌 중 svg 강의를 보면 아이디어를 얻을 수 있을까요?보너스로 추가해주신 아이패드 강좌 부분을 보면서, svg의 path를 커스텀으로 만들고 싶은 생각이 들었습니다. 아직 svg 로딩 강좌 섹션은 보지 못했는데, 혹시 인터렉티브 로드맵 중 svg강좌를 들으면, path를 만들 수 있는 힌트를 얻을 수 있을까요? 예를 들어 '안녕하세요 반갑습니다' 라는 svg를 브라우저 스크롤 하면서 하나씩 그려내고 싶습니다.#질문2. 3번째 섹션, 이미지프레임과 fixed된 텍스트들을 서로 싱크를 맞추려면, 어떻게 한땀한땀 해야할까요?강좌에서 공부한 스크립트와 마크업/스타일을 바탕으로, 새로운 애니메이션을 만들때, 이미지/비디오 프레임과 fixed된 텍스트를 서로 싱크 맞추는 요령? 방법?이 무엇이 있을까요? 혹시 이미지 애니메이션을 완성하고, 수작업으로 텍스트의 fixed위치를 변경하면서, 수치를 정하는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
복습개념으로 다시 들을려고 하는데요
html,css,javascript를 복습 개념으로 다시 들을려고 하는데 훈훈한 Javascript 부터 들으면 되나요?
-
해결됨[코드캠프] 시작은 프리캠프
복사붙여녛기가 끝인데
피그마 css에 나오는 부분을 복사붙여넣기 하면 끝인데 과제라는 의미가 있나요? 복붙만 하는 건데 도움이 되는 건가요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
todoItem.item이 왜 key가 될까요?
안녕하세요 강사님!어플리케이션 탭을 보면 엄연히 key, value가 있고 value 안에 completed, item이 있는 건데...todoItem.item이 어떻게 키값이 되는건지 궁금합니다.처음 설정할 때 key값과 todoItem.item을 같게(?) 해놓으면 todoItem.item을 key 값으로 접근할 수 있나요?만약 key(id값)으로 접근하려면 어떻게 해야 하나요?초보라 질문이 많습니다 ㅠㅠ 시간되실 때 답변해주시면 감사드리겠습니다 :)
-
미해결처음 만난 리액트(React)
여기서 백틱으로 감싸주는 이유가 궁금합니다.
const Wrapper = ~~~ 아래에 백틱으로 감싸주는 이유가 궁금합니다.그리고 왜 저는 강사님처럼 안나오고 전부 붉게 나올까요..?
-
미해결Vue.js 시작하기 - Age of Vue.js
router 로 페이지 이동 시 항상 새로고침
안녕하세요, 캡틴판교님.덕분에 Vue 강의 잘 듣고 있습니다.한가지 질문 사항이 있는데요.메인페이지와 서브페이지를 구현했는데,메인페이지에서 스크롤을 내리면 서브페이지로 가는 router-link를 클릭했는데,메인에서 스크롤 내린만큼 서브페이지도 스크롤이 내려가 있어서이것을 어떻게 해결해야될지 의문입니다.제가 메인페이지에 애니메이션도 준게 있어서router 이동시에 항상 페이지 새로고침 되게 하고 싶습니다.(+추가로 새로고침이 아닌 메인 이동시에 애니메이션이 재 사용되게 막게끔도 하고 싶습니다..)
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
섹션12 보너스 챕터에 관한 질문입니다!
섹션12에서 텍스트가 나타나고 사라지는 인터렉션에서 처음 텍스트를 스크롤 하지 않고 처음 텍스트만 보이다가 스크롤이 시작되고 나서 사라지고 다음텍스트가 보이게 하려면 어떻게 코드를 작성해야할까요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
빨간줄 에러 질문드립니다
노트북으로 할땐 빨간줄이 안떳는데 데스크탑으로 오니, 빨간줄이 많이 떠서 2가지 질문드립니다. 1. 엔터친 빈 공간에 저렇게 빨간줄이 뜨는데 어떻게 없앨 수 있을까요? 이것도 노트북에선 문제없이 강의듣고 넘어갔는데 데스크탑으로 켜니 이렇게 뜨네요. 어떻게해야할까요..?
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
결과 계산하기에서 콘솔이 다르게 찍힙니다.
다른 분들도 비슷한 오류가 있었는데 봐도 해결이 안되어서 질문드립니다.현재 결과 계산하기 파트에서 오류가 생겨 이후 강의는 작성하지 않은 상태입니다. 질문1goResult 함수에서 const select = [] 로 정의된 변수를 실행시키니 0번 인덱스가 비어있음으로 뜹니다. 어떻게 해야 첫번째 인덱스도 함께 나올수 있을까요?function goResult(){ qna.style.WebkitAnimation = "fadeOut 1s" qna.style.animation = "fadeOut 1s" setTimeout(() => { result.style.WebkitAnimation = "fadeIn 1s" result.style.animation = "fadeIn 1s" setTimeout(() => { qna.style.display = "none"; result.style.display = "block"; }, 450) }) console.log(select) calResult() }function goNext(qIdx){ if(qIdx === endPoint){ goResult() return } let q = document.querySelector(".qBox"); q.innerHTML = qnaList[qIdx].q; for (let i in qnaList[qIdx].a){ addAnswer(qnaList[qIdx].a[i].answer, qIdx, i); }; let status = document.querySelector(".statusBar") status.style.width = (100/endPoint) * (qIdx+1) + "%" } 질문 2calResult 함수에서 console.log(resultArray)를 찍으니 아무것도 나오지 않습니다.어디서부터 잘못된지 모르겠습니다..ㅠ function calResult() { let pointArray = [ { name: "mouse", value: 0, key: 0 }, { name: "cow", value: 0, key: 1 }, { name: "tiger", value: 0, key: 2 }, { name: "rabbit", value: 0, key: 3 }, { name: "dragon", value: 0, key: 4 }, { name: "snake", value: 0, key: 5 }, { name: "horse", value: 0, key: 6 }, { name: "sheep", value: 0, key: 7 }, { name: "monkey", value: 0, key: 8 }, { name: "chick", value: 0, key: 9 }, { name: "dog", value: 0, key: 10 }, { name: "pig", value: 0, key: 11 } ]; for (i = 0; i < endPoint; i++) { let target = qnaList[i].a[select[i]]; for (j = 0; j < target.type.length; j++) { for (k = 0; k < pointArray.length; k++) { if (target[j] === pointArray[k].name) { pointArray[k].value += 1; } } } } let resultArray = pointArray.sort(function (a, b) { if (a.value > b.value) { return -1; } if (a.value < b.value) { return 1; } return 0; }); console.log(resultArray); let resultword = resultArray[0].key; return resultword; } 소스 코드만 보내드리면 보시기 힘들어하시는것같아 깃 파일도 같이 첨부하였습니다!https://github.com/kihet77/psychologyTestWeb/tree/main/MyMBTI-main/start
