묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌
App.js에서 handleCreate 함수 생성 시 오류
영상 속 App.js에서는 클래스로 정의되어있는데요요새는 React app create하면,디폴트로 function App()으로 만들어놓더라구요 클래스에서는 handleCreate=() =>{ }정의가 되지만,function으로 정의된 App.js에서는...오류가 뜹니다.const를 앞에다 붙여도 안되고;;왜그럴까요?클래스 컴포넌트가 아닌 function으로 정의된 App.js에서는 어떻게 내부 함수를 생성해야하는지 알려주세요.ㅠㅠㅠ
-
해결됨[코드캠프] 시작은 프리캠프
회원가입 폼 기능 추가
안녕하세요 이제 마지막 파이널 과제를 하고 있고, 기능 추가를 위하여 고민하는데 어떻게 event 값을 반환해야 할 지 감이 안 와서 여쭤봅니다.제가 추가하고자 하는 기능의 흐름은// 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. // 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기. // 3. 전송 누르면 인증 번호가 화면에 표시되고, 3분 카운트가 시작된다. 그리고 인증 완료 버튼이 활성화된다. // 4. 3분이 지나면 인증 완료 버튼이 비활성화된다.이 과정을 통하고 싶어서 2개의 비밀번호 칸에 각각 함수를 생성하여 비밀번호 값을 받아오게 한 뒤에 sendNum 함수에서 2개의 비밀번호 값을 비교하여 동일한 경우에만 인증번호 전송을 가능하게 하고 싶습니다. 그리고 다른 경우에는 alert를 이용하여 비밀번호를 확인하라는 창을 띄우려고 하는데, 비밀번호 값을 얻어내는 함수 pw1 값 꺼내서 어떻게 sendNum 함수에 넣어야 할 지 잘 모르겠습니다... ㅠㅠ 코드 올리겠습니다. 감사합니당..! <!DOCTYPE html> <html lang="ko"> <head> <title>코드캠프 회원가입</title> <link rel="stylesheet" href="./signup.css" /> <script src="./signup.js" defer></script> </head> <body> <div class="container"> <div class="wrapper"> <div class="wrapper__header">코드캠프 회원가입</div> <div class="wrapper__body"> <div class="body__info"> <input type="email" placeholder="이메일을 입력해 주세요." /> <input type="text" placeholder="이름을 입력해 주세요." /> <input type="password" placeholder="비밀번호를 입력해 주세요." id="pw1" onchange="changeValue(event)" /> <input type="password" placeholder="비밀번호를 다시 입력해 주세요." id="pw2" /> <div class="phone"> <input type="text" class="phone__first" maxlength="3" id="p1" oninput="moveCursorFirst()" /> - <input type="text" class="phone__mid" maxlength="4" id="p2" oninput="moveCursorSec()" /> - <input type="text" class="phone__last" maxlength="4" id="p3" /> </div> </div> <div class="body__certificate"> <div class="certificate__send"> <div class="certificate__num" id="certificate__num">000000</div> <button class="send__num" onclick="sendNum()" id="send__num"> 인증번호 전송 </button> </div> <div class="certificate__complete"> <div class="remaining"> <span id="remaining__min">3</span>: <span id="remaining__sec">00</span> </div> <button class="complete__btn" id="complete__btn" disabled> 인증 완료 </button> </div> </div> <div class="body__addition"> <select name="region"> <!-- selected + disabled 같이 이용하면 된다. --> <option value="" selected disabled>지역을 선택하세요.</option> <option value="gg">경기도</option> <option value="seoul">서울</option> <option value="ic">인천</option> </select> <div class="sex"> <div class="women"> <input type="radio" id="women" name="sex" /> <label for="women">여성</label> </div> <div class="men"> <input type="radio" id="men" name="sex" /> <label for="men">남성</label> </div> </div> </div> </div> <div class="divideLine"></div> <div class="wrapper__footer"> <button class="submit">가입하기</button> </div> </div> </div> </body> </html> // 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. // 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기. // 3. 전송 누르면 인증 번호가 화면에 표시되고, 3분 카운트가 시작된다. 그리고 인증 완료 버튼이 활성화된다. // 4. 3분이 지나면 인증 완료 버튼이 비활성화된다. // 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. const moveCursorFirst = () => { const p1 = document.getElementById("p1"); if (p1.value.length === 3) { document.getElementById("p2").focus(); } }; const moveCursorSec = () => { const p2 = document.getElementById("p2"); if (p2.value.length === 4) { document.getElementById("p3").focus(); } }; // 아직 해결하지 못 함. 비밀번호 가지고 나와야 된다. const changeValue = (event) => { let pw1 = event.target.value; return pw1; }; // 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기. let isStarted = false; const sendNum = () => { // 2. 타이머 실행시키기. let time = 5; let isDisabled = document.getElementById("complete__btn"); if (isStarted === false) { isStarted = true; isDisabled.removeAttribute("disabled"); // 비활성화 끄기. // 1. 6자리 수의 인증 번호 생성하고 화면에 보여주기. let certificateNum = document.getElementById("certificate__num"); let number = String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); certificateNum.innerText = number; let timer = setInterval(function () { // 타이머가 실행되는 경우 if (time >= 0) { const remainingMin = Math.floor(time / 60); const remainingSec = String(time % 60).padStart(2, "0"); // console.log(`${remainingMin}분 ${remainingSec}초`); const min = document.getElementById("remaining__min"); const sec = document.getElementById("remaining__sec"); min.innerText = remainingMin; sec.innerText = remainingSec; time = time - 1; } else { // console.log("타이머가 종료되었습니다."); // 타이머를 종료시키는 경우 isDisabled.setAttribute("disabled", ""); // 비활성화 켜기. clearInterval(timer); isStarted = false; } }, 1000); } else { } };
-
미해결함수형 프로그래밍과 JavaScript ES6+
로직 질문
6분20초 쯤에if (a == l) return; 을 지우셨는데이걸 안지워도 결과가 똑같던데 무슨 차인가요??그리고 infinity(i = 0) 이렇게 되어있으면 36번째 라인에 infinity(1)은 의미가 없지 않나요?
-
미해결자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1
상단에 일시정지 새로고침하는 것은 어떻게 나오게 하나요??
html에 상단에 일시정지 새로고침 아이콘들 나오게 하는것은 어떻게 하나요??
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
깃헙 권한 요청드립니다.
인프런 아이디 : nasangw@wemade.com인프런 이메일 : nasangw@wemade.com깃헙 아이디 : ggp07190@gmail.com깃헙 Username : qortmdrn 입니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포하고 난 후에 일기저장
안녕하세요 !배포를 완료하고 일기를 작성은 잘 되는데, 제가 쓴 일기는 제 노트북에서 배포주소로 잘 보입니다.배포한것을 다른사람들에게 전달했을 시, 다른사람들이 쓴 일기는 제가 배포한 주소로 제 노트북에서 볼 수 없나요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
섹션 6 ( 1.올바른 괄호 <스택> ) 질문입니다!
아래는 올바른 괄호(스택) 문제 답안 코드입니다.Q. 만약 주어진 let = a가 "(" 이게 아닌 ")" 이걸로 시작하면 답안 같은 경우는 무조건 NO가 나와버리는데문제가 "(" 이걸로 시작해서 문제를 감안해서 ")" 이걸로 시작하는 경우는 배제하고 답안을 도출하신 걸까요?다른 이유나, 제가 이해 못 한 부분이 있는 건가 싶어서 여쭤봅니다 ! function solution(s){ let answer="YES"; stack=[]; for(let x of s){ if(x==='(') stack.push(x); else{ if(stack.length===0) return "NO"; stack.pop(); } } if(stack.length>0) return "NO"; return answer; } let a="(()(()))(()"; console.log(solution(a));
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
github 권한 요청드립니다.
인프런 아이디 : @dlehdgus6251 인프런 이메일 : qorgus1223@naver.com 깃헙 아이디 : dlehgus6251@naver.com 깃헙 Username : dong-hyeon
-
미해결타입스크립트 입문 - 기초부터 실전까지
첫 번째 프로젝트 중 노란색 선
안녕하세요 선생님! 선생님의 강의에서는 함수들마다 노란선들이 있는데 저는 eslint를 설치했는데도 노란선이 없어서 왜그런지 여쭤봅니다! 함수에 커서를 가져다대었을 때 따로 :void를 주지않아도 이미 기본값으로 들어가있는것 때문일까요??그리고 오히려 todos에 파란선이 나옵니다ㅠㅠ
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
강의자료 요청
안녕하세요 선생님. 강의자료 제공 가능할까요?
-
미해결만들면서 배우는 리액트 : 기초
고양이사진
고양이 사진 언제 다시 뜰까요?ㅠㅠ 사진이 안나와서 잘 되는지 확인이 조금 어렵네요,,
-
미해결누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌
PhoneForem.js 파일에서 [e.target.phone] : e.target.value 해줘야하지 않나요?
PhoneForem.js 파일에서 [e.target.phone] : e.target.value 해줘야하지 않나요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
github 권한 부탁드립니다!!
인프런 아이디 : clcc001@naver.com인프런 이메일 : clcc001@naver.com깃헙 아이디 : westofsky159@gmail.com깃헙 Username : westofsky
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
깃헙 권한요청드립니다.
인프런 아이디 : nttott89@gmail.com인프런 이메일 : nttott89@gmail.com깃헙 아이디 : nttott@gmail.com깃헙 Username : eugene0318가이드를 못찾겠어요
-
미해결인터랙티브 웹 개발 제대로 시작하기
아톰 홈페이지가 안나와요.. 서비스 종료됐다는데
오늘 강의 처음듣는데 아톰홈페이지가 안뜹니다 ㅠ 30일 무료 라고 해도 깃허브같은것만뜨는데찾아보니 서비스가 종료됐대요 얼마전에,,vs code로 해도 상관없는건가요?ㄷㄷ ㅠ - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨[코드캠프] 시작은 프리캠프
안녕하세요 회원 가입 과제 수행 중 어려운 부분이 있어서 질문 드립니다
과제 진행 상태는 이러합니다.이번에 강의를 보며 처음 입문하게 되어, 부족한 부분이 너무 많다보니 어떤 부분을 수정하면 좋을지 혼자서는 감이 안잡히더라고요.제가 보았을 땐 라디오 박스와 체크박스는 너무 미숙해 보이고 폰트 사이즈 수정도 잘 안되더라고요, 다른 부분도 완성도가 좋진 않은 것 같아서 피드백을 여쭙고 싶어요. 좋은 강의 알게되어 잘 배우고 있습니다 감사합니다. <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입과제</title> <link rel="stylesheet" href="./03-homework.css"> </head> <body> <div class="pb1"> <p></p><p></p> <div class="A1"><h2>회원 가입을 위해 <br>정보를 입력해주세요</h2></div><p></p> <input class="B1" style="border-color: #AACDFF;" type="text" placeholder="* 이메일"><br> <input class="B1" type="text" placeholder="* 이름"><br> <input class="B1" type="password" placeholder="* 비밀번호"><br> <input class="B1" type="password" placeholder="* 비밀번호 확인"><br> <div><p></p> <input class="C1" type="radio" name="gender">여성 <input class="C1" type="radio" name="gender">남성 </div><p></p> <input class="D1" type="checkbox">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. <p><br></p> <div class="E0"> <button class="E1">가입하기</button> </div> </div> </body> </html>CSS 파일 * { box-sizing: border-box; } body { display: flex; justify-content: center; } .pb1 { width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); display: flex; flex-direction: column; align-items: center; } .A1 { width: 466px; height: 94px; color: #0068FF; } .B1 { width: 466px; height: 80px; padding-bottom: 40px; border: 0px; border-bottom: 1px solid #CFCFCF; } .C1{ width: 20px; height: 19.95px; border: 1px solid #D2D2D2; } .D1 { width: 419px; height: 20px; padding-bottom: 40px; border: 0px; border-bottom:1px solid #CFCFCF; } .E0 { width: 470px; height: 70px; padding-top: 30px; border: 0px; border-top:1px solid #CFCFCF; } .E1 { width: 470px; height: 75px; border: 2px solid #AACDFF; border-radius: 10px; background-color: white; font-size: large; font-weight: 500; color: rgb(27, 106, 252); }
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
페이징.페이지고정2 질문드립니다.
안녕하세요 선생님강의 리소스에는 li가 html에 작성되어있지만저는 자바스크립트를 이용하여 section 갯수에 맞춰서 li도그 갯수에 맞춰서 생성해주고 싶어서 반복문 코드를 짜봤습니다.ex) section 갯수가 8개면 li 갯수도 8개로 자동생성 생성은 되었습니다. 그러나 아직 li의 인덱스를 받아오는 코드를 작성하진 않았어요스크롤을 하였을 시 pageNum 의 i 값이 pageChangeFunc의 함수안에서 remove 혹은 add 가 작동되지 않습니다.(오류가 스크롤 했을 시 뜹니다.)<--- F12에서는 이렇게 뜹니다. --->Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at pageChangeFunc (4.html:120:33) at 4.html:114:17 저는 section 갯수에 맞춰서 li갯수를 생성하려고 appendChild를 사용하였습니다.저의 부족한 지식으로 유추해본 생각이지만 li를 생성하고 난 뒤여서 스크롤이벤트가 안먹혀서 그런건지...아니면 classList 가 작동이 안될까? 라는 생각이 드는데 잘 모르겠네요... 답을 원하지 않습니다만 힌트라도 주시면 감사하겠습니다.<--- 제가 작성한 코드는 이렇습니다. --->var section = document.getElementsByTagName('section'); var pointWrap = document.querySelector('.pointWrap'); var pointBtn = document.querySelectorAll('.pointWrap li'); var pageNum = 0; var totalNum = section.length; for(var s = 0; s < totalNum; s++){ var newli = document.createElement('li') pointWrap.appendChild(newli); } window.addEventListener('scroll', function(event){ var scroll = this.scrollY; for(var i = 0; i < totalNum; i++){ // if(scroll > section[i].offsetTop && // scroll < section[i].offsetTop + section[i].offsetHeight){ if(scroll > section[i].offsetTop - window.outerHeight/3 && scroll < section[i].offsetTop - window.outerHeight/3 + section[i].offsetHeight){ pageNum = i; break; } } pageChangeFunc() }); function pageChangeFunc(){ for(var z = 0; z < totalNum; z++){ section[z].classList.remove("active"); pointBtn[z].classList.remove("active"); } section[pageNum].classList.add("active"); pointBtn[pageNum].classList.add("active"); }
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요
../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요?제가 앞에 ../을 붙이지 않았을 경우에는 그림이 제대로 불러와지지 않습니다<img src="../images/icons/logo.png />를 해야만 정상적으로 사진이 불러와 집니다
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
조건문
function solution(c, arr) { let answer = 0; let n = arr.length; function DFS(L, sum) { //if (sum > c) return; if (L === n) { console.log(sum); if (sum <= c) { answer = Math.max(answer, sum); } } else { DFS(L + 1, sum + arr[L]); DFS(L + 1, sum); } } DFS(0, 0); return answer; } let arr = [81, 58, 42, 33, 61]; console.log(solution(259, arr));강사님, 저는 동영상 보지 않고 혼자 풀었을 때, if(sum > c) return 대신에,if(L === n) 만에 if(sum <= c) 조건을 넣어서 풀었는데, 그래도 답은 나오더라구요. 이렇게 하면 sum이 c보다 큰 수의 경우도 포함되어서 확인하기는 하는데, 이렇게 풀어도 크게 차이는 없나요??
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
결과 페이지 만들기 -js편 execCommand를 더이상 지원하지 않습니다.
프론트엔드 마지막편을 보고 있는데 더이상 execCommand 명령어를 지원하지 않는다고 하여 다른 명령어를 찾아봤는데 옳은 코드 인가요?현재 url을 복사하는 함수를 작성한 것입니다.function copyUrl(){ let url = window.location.href; navigator.clipboard.writeText(url) .then(()=>{ alert('URL을 클립보드에 복사했습니다.'); }); }
