묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
자바스크립트 함수가 실행되지 않습니다.
인텔리제이에서 웹사이트를 개발 중인데html파일 버튼 태그에서 호출한 자바스크립트 함수가 실행되지 않는 것 같아서 onclick방식과 addEventListener 방식 모두 해봤는데 모두 실행되지 않았습니다.버튼 2개를 모두 눌러봐도 "성공"이라는 알림창이 안 뜹니다.<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html, charset=utf-8" /> <script defer src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"> function testFunc() { alert("성공!"); } document.getElementById('addListenerFunc').addEventListener('click', function(){ alert("성공"); }); document.getElementById('addListenerFunc').addEventListener('click', testFunc); </script> <title>Title</title> </head> <body> <button onclick="testFunc()">onclickFunction</button> <button id="addListenerFunc">addListenerFunc</button> </body> </html>아무리 검색해봐도 이유를 모르겠습니다.
-
미해결
리액트 장바구니 총 합계 금액 계산 함수 어떻게 해야할까요?
const Order = () => { const orders = useOrders(); const { books } = useBooks(); const { remove, removeAll, addToOrder } = useActions(); const [count,setCount] = useState(1); const totalPrice = useMemo(() => { return orders.map((order) => { const { isbn, quantity } = order; const book = books.find((b) => b.isbn === isbn); return book.sale_price * quantity ; }) .reduce((l, r) => l + r, 0); }, [orders, books]); 다른 컴포넌트와 hooks 에서 받아온 함수로 총액 계산을 하는데 (totalPrice) 해당 컴포넌트에서 아래처럼 권수를 변경할 수 있는 함수를 만들었습니다.return( {book.title} {order.quantity} 권 <button onClick={() => setCount(order.quantity ++)} >+</button> <button onClick={() => setCount(order.quantity --)} >-</button> </div>)여기서 변경된 권수의 금액으로 총액도 변경하게 하고 싶은데 어떻게 함수를 만들어야 할까요...?
-
미해결
js 겜블링 게임 클릭횟수, 재시작 질문
html css js 사용하여서 겜블링 게임 만드는 중입니다.click 버튼 눌렀을 때 밑에 횟수가 뜨는게 아니라 버튼 안에서click1, click2 .. 이런 식으로 증가시키고 싶은데 숫자가 자꾸 밑으로 내려갑니다 ㅠㅠ그리고 오류가 있는지 restart 버튼은 눌리지 않습니다..
-
미해결
자바스크립트가 적용이 안되요.
[HTML] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="https://use.typekit.net/frx5mqp.css"> <title>Weather</title> </head> <body class="sunny"> <section class="poster background sunny" style="background: linear-gradient(90deg, rgba(224, 224, 224, 0.72) -7.6%, #D9D9D9 27.12%, rgba(226, 226, 226, 0.96) 32.55%, rgba(255, 255, 255, 0.82) 49.92%, rgba(191, 191, 191, 0.62) 79.46%, rgba(223, 223, 223, 0.31) 104.34%, rgba(190, 190, 190, 0.00) 113.67%);"> <div class="sun-circle"> <div class="sunny-sun"> <svg width="528" height="519" viewBox="0 0 528 519" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M286.829 287.338L439.324 453.847M76.8288 55.338L229.324 221.847M301.967 256.151L527.749 254.527M48.4299 427.536L225.204 287.069M300.43 225.536L477.204 85.0692M256.485 292.987L260.015 518.747M1 253.527L226.784 254.864M254.485 1L256.879 226.775" stroke="#BE0505" stroke-width="5"/> </svg> </div> </div> </section> <section class="title"> <h1>맑음</h1> <h2>Sunny</h2> </section> <section class="contents"> <div> <p class="latitude">37°33'58.87"N</p> <p class="longitude">126°58'40.63"E</p> </div> <div class="calendar"> <div class="month">03</div> <div>月</div> <div class="day">10</div> <div>日</div> </div> <div> <p class="location">Gangnam-gu, Seoul</p> <p class="time">14:00 03/10/2023</p> </div> </section> <section class="poster forward"></section> <script src="./js/index.js"></script> </body> </html> document.querySelector(".sun-circle").onclick = function(){ document.querySelector(".sun-circle").style.background="FF0000"; }; 처음에 console.log("document.querySelector(".sun-circle")"); 했을때는 sun circle div요소가 나왔는데,위에 문법을 쓰니깐 적용이 안되고, document is not defined라고 에러 문구가 뜹니다. 찾아보니 node때문에 그렇다는데..무슨말인지 잘 이해가 안되고 왜 적용이 안되는지 모르겠습니다ㅜㅜ vscode써서 작업하는데 라이브 서버로 미리보기 해도 console.log 안에 넣어 실행할때는 되는데. onclick코드 쓰면 미리보기의 console칸에 아무것도 안나와요ㅜㅜ... node js에서 원래 실행이 안되는 거면, node를 지우고 vscode를 실행해야 하나요...? js코드 넣고 실행하면, vscode 에서 아래와 같이 에러메세지가 뜹니다. ReferenceError: document is not defined at Object.<anonymous> (/Users/Downloads/코딩 연습/Example02/js/index.js:1:1) at Module._compile (node:internal/modules/cjs/loader:1376:14) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12) at node:internal/main/run_main_module:28:49 Node.js v21.1.0 [Done] exited with code=1 in 0.369 seconds
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션1 : 시작은 프리캠프 final 과제 타이머 부분 JS 문의
프리캠프 final sign up 과제 중 타이머 부분 관련 문의드립니다.자바스크립트 이용하여 '인증번호 전송' 버튼을 누르면 타이머가 동작하는 부분까지는 구현하였습니다.이후 타이머 동작 중, 인증 완료 버튼을 누르면 "인증 완료" 팝업이 뜨고타이머가 종료되며 "인증 완료" 텍스트로 표시되도록 하고싶은데 팝업이 뜨고 텍스트는 변경되나 바로 다시 타이머가 동작합니다.(consle.log 를 찍어보면 인증완료 버튼 클릭 시 '인증완료' 로그가 찍히나, 타이머는 그대로 동작하고 00초가 되면 '시간 초과' 로그도 찍힙니다.)else 뒤에 넣는 것이 아니라 아예 따로 빼서 onclick 함수를 새로 만들어야 할까요? 답변 부탁드립니다! 아래는 제가 작성한 코드입니다.// 타이머 작동 & 인증버튼 활성화 // let isStarted = false; let auth = () => { if(isStarted === false) { // 버튼 클릭 시 인증번호 부여 및 타이머 작동 // isStarted = true document.getElementById("b2").disabled = false document.getElementById("b2").style.color = "white" document.getElementById("b2").style.border = "1px solid #0068ff" document.getElementById("b2").style.backgroundColor = "#0068ff" document.getElementById("b2").style.cursor = "pointer" const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0") document.getElementById("target").innerText = token let time = 10 let timer timer = setInterval(function() { if(time>=0) { let min = Math.floor( time / 60 ) let sec = String(time % 60).padStart(2, "0") document.getElementById("timer").innerText = min + ":" + sec time = time - 1 } else { document.getElementById("b2").disabled = true document.getElementById("b2").style.color = "#d2d2d2" document.getElementById("b2").style.border = "1px solid #d2d2d2" document.getElementById("b2").style.backgroundColor = "transparent" document.getElementById("b2").style.cursor = "default" document.getElementById("timer").innerText = "3" + ":" + "00" document.getElementById("target").innerText = "000000" console.log("시간 초과") isStarted = false clearInterval(timer) } },1000) } else { // 타이머가 작동중일 때 인증 확인 클릭하면 // alert("인증완료") document.getElementById("b2").disabled = true document.getElementById("b2").style.cursor = "default" document.getElementById("timer").innerText = "인증완료" isStarted = true clearInterval(timer) console.log("인증 완료") } }
-
미해결
스프링 ComponentScan 관련 질문
안녕하세요 초급개발자입니다.최근 전자정부표준프레임워크 기반으로 개발된 어떤 소스를 보면서 componentScan에 관해 궁금한것이있었습니다.우선, WEB-INF 아래의 dispatcher-servlet.xml에 명시되어있는 componentScan에는 Controller가 include 되어있고, service와 repository가 exclude 되어있습니다.<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/><context:exclude-filter type="annotation" expression="org.springframework.stereotype.Service"/><context:exclude-filter type="annotation" expression="org.springframework.stereotype.Repository"/>제가 알기로는 controller, service, repository 어노테이션에는 component 어노테이션이 포함되어있어서 component scan시 전부 bean으로 올리는 것으로 알고있는데 저렇게 exclude를 해놓으면 빈으로 등록이 안되는것 아닌가요 ?basepackage는 최상위 디렉터리가 맞습니다. 또한, web.xml에 명시되어있는 다른 설정 xml파일도 있는데(context-common.xml) 이 파일에도 componenScan이 있습니다.basepackage는 dispatcher-servlet에 명시되어있는 값과 같고, exclude filter로 컨트롤러는 빈 으로 올리지 않는다고 되어있습니다. 그리고 default filter는 따로 설정 해놓지 않아서 default 값인 true로 되어있기 때문에 기본 어노테이션(서비스, 레포지토리)는 빈으로 올린다고 알고 있습니다.<context:exclude-filter expression="org.springframework.stereotype.Controller" type="annotation"/> 결론으로는 두 개의 컴포넌트 스캔(dispatcher-servlet.xml, context-common.xml)의 스캔 조건이 상반되게 되어있는데, 왜 그런지 이유가 궁금합니다 ....
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
코드가 실행이 안 됩니다
첫 번째 사람인치 판단하기에서 코드를 따라 입력해보기도 하고 복붙도 해봤는데 오류가 뜹니다. 그래서 자바를 입력해도 브라우저나 화면에서 아무것도 안 뜹니다. 코드 오류를 해결할려면 어떻개 해야 될까요?
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
HTML 태스 선택하기 자손 자식 태그 질문드립니다.
안녕하세요 제로초님 강의를 보다가 궁금한게 있어서 질문드립니다. 왜 태그와 태그 사이에 >를 넣었음에도 자손 태그가 똑같이 하이라이트 될까요? 코드와 브라우저에서 나오는 것을 스크린샷으로 올립니다.
-
미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
해당 강의를 듣고 나면
안녕하세요. 요즘 리액트 컴포넌트를 만들 때 관심사 분리를 더욱 잘하기 위해 노력 중인 주니어 개발자입니다.컴포넌트 설계 시 도메인 종속적이지 않도록 유의하고 있으며 도메인 특화된 컴포넌트를 위해서 비종속적 컴포넌트에 합성해서 만들어 사용하려고 노력 중입니다.이 얘기를 왜 드렸나면 리액트에서 컴포넌트는 결국 함수이며 위에 언급된 고민들은 결국 함수를 합성하는 것과 다르지 않다고 생각이 들더군요. 그 와중에 이 강의가 눈에 들어왔습니다. 질문1. 해당 강의는 위의 고민과 같은 결의 문제를 해결하는데 도움이 되는 강의일까요?질문2. (위의 글과 상관없이) fxjs, fxts 라이브러리를 사용하지 않으면 해당 강의에서 다루는 내용을 실무에서 응용하는 게 힘들까요?(잠깐 수강해봤을 땐 문제를 정의하고 그 문제를 fxjs 속 특정 함수를 통해 어떻게 해결하는 지 보여주는 것의 반복이었던 거 같은데 그래서 여쭤봅니다)
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
document.querySelectorAll 질문드립니다
안녕하세요 제로초님document.querySelectAll(buttons)을 비주얼 스투디오 코드에 넣었을 떄, 유사 배열이 console에서 출력되지 않습니다 (제로초님)코드를 따라서 입력했는데도 불구하고 이렇게 사진처럼 나옵니다).
-
해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
별 찍기 질문입니다.
동영상에 나온 문제에서 크리스맛, 정련 문제처럼 답이 없었던 문제들도 있던데 어디에서 답들을 볼 수 있을까요?
-
해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
중첩 반복문 질문
안녕하세요 제로초님 강사님 코드를 똑같이 따라 쳣는데 j가 이미 선언되었다고 합니다. 새로고침을 했는데도 똑같은 에러가 뜨네요. 제 브라우저에 에러가 있나요?
-
해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
자바스크립트 반복문(for) 질문
안녕하세요 제로초님 자바스크립트 반복문(for) 강좌에서 for(;;)를 실행하면 무한 반복이 된다고 하셨습니다. 그런데 제 브라우저에 for(;;)를 넣은면 이렇게 실행됩니다. 이 자체로 실행됬나요?
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
자바스크립트 변수 선언하기(let) 질문
안녕하세요 제로초님, 제가 코드를 초기화 시켜도 변수 값이 강사님 화면과는 다르게 코드가 실행이 됩니다. 제 브라우저에 에러가가 있나요?
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
자바스크립트 문자열 질문
안녕하세요 왜 제 브라우저에서는 \슬래쉬 이스케이프 안하고 출력되나요? 강사님 화면 처럼 \한개만 출력 되지 않습니다. \n 줄바꿈 질문처럼 이것도 \가 이스케이프 한건가요?
-
미해결
플로터 앱 관련 질문
현재 플로터를 얼마 시작하지 않은 초보입니다현재 플로터에서 웹 뷰를 통해 로컬호스트에 있는 자바스크립트와 HTML을 불러와서 핸드폰 화면에 HTML을 올리려고 하는데 자바스크립트와HTML을 플로터에 어떻게 추가하고 호환을 해야되는지 모르겠습니다.assets파일에 자바스크립트 파일과 HTML 파일을 올리고 pubspec.yaml파일에 추가한후 pubget을 실행하니 오류가 떴습니다.
-
미해결
투두리스트 삭제기능 구현중 로컬 저장소 관련 질문
현재 혼자서 투두리스트를 만들어보고 있는데 삭제구현 기능 과정에서 서로의 아이디가 다른 배열만을 filter함수를 이용해 새로 배열을 만든후 기존 배열에 새로운 배열을 넣고 함수를 구현했는데 새로고침을 해도 삭제 한 데이터가 유지되지 않고 똑같은 상태로 반복 되는데 어디서 문제일까여?? 깃허브 아이디 : Jayjunyoung -> 사진으로 보기 힘드시다면 저의 second 브렌치에 자바스크립트파일에서 한번 검토해주시면 감사하겠습니다ㅜㅜ 혼자서 계속 해도 구현이 안되네요
-
미해결
자바스크립트 기본문법 질문드러요 :)
안녕하세요. 고수님들 기본적인것 같은데 헷갈려서 질문드립니다 ㅠㅠ 아래 코드에서 logUser_Google 이라는 함수를 만들었습니다. 그리고 signIn_GooglePopup 라는 함수를 임포트 해와서 변수에 할당했는데요. signIn_Google 함수는 firebase 라이브러리에서 구글로그인폼이 켜지는 함수 입니다. 여기서 궁금한게 있는데요. response라는 변수이름을 어디서 사용한적이 없는데도 실제 onclick=logUser_Google 이 동작하는 이유가 뭘까요? 지금까지 공부한대로라면 함수를 변수에 할당했을뿐이지 호출하지 않았다면.. 작동이 안되는걸로 받아들여지는데요. 혹시 변수에 할당하면 함수가 동작가능한 상태가 되는건가요..? 아니면 온클릭이라는게 누르는 순간 함수를 호출하는 그런걸까요..? 넘 궁금합니다 ㅠ-ㅠ
-
해결됨만들면서 배우는 리액트 : 기초
counter 변수도 초기값이 없으면 널이 되더라구요.
counter 변수도 초기값이 없으면 아마 null이 되는 것 같아요. 에러는 나지 않지만 최초에 "번째 고양이" 으로 나오길래 Try 1: const [counter, setCounter] = React.useState(jsonLocalStorage.getItem("counter") || 0); 했더니 0번째 고양이 가라사대라고 나오는군요. 물론 이것도 자연스럽지만 ㅎㅎ Try 2: const [counter, setCounter] = React.useState(jsonLocalStorage.getItem("counter") || 1); 요렇게 해 주니 조금 더 자연스럽게 되었습니다. || 값 처음 알았는데 유용한 기능 같아요 ^^.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
자바스크립트 오타 검사 질문
안녕하세요 vscode 설정 관련 질문입니다. 지금 막 vscode를 설치했는데 js파일에서 오타 검사가 안되는데 그 이유를 알 수 있을까요???
