묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
useState 오류
GPT API 호출, 프롬프트 연동 강의 0:24 계속해서 useState에 다음과 같은 오류가 뜹니다. import { useState } from "react";오류 사유는'useState' is declared but its value is never read. 대체 왜 해결이 안되는 것일까요..?ㅜ.ㅜ
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
워크벤치 연결 관련 질문드립니다.
어찌저찌해서....연결하다보니워크벤치설치-> aws 인바운드규칙 수정 하고mysql워크벤치에서테스트 커넥션까지해서 연결되었다고 하는데ok버튼을 누르니 Improper name이라더군요.이름이 root면 안되는건가요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
mysql이 8.0버전인데 이렇게 하는 거 맞나요?
GRANT ALL PRIVILEGES ON . TO '아이디'@''%'; 이렇게 하라고 하셨는데 아이디에 root를 넣고 %에aws로 받은 ip주로를 넣어도안되네요. 엔터를 눌러도 뭐 작동도 안하고..어찌 해야할까요?참고로you are not allowed to create a user with GRANT라는 에러도 떠서 구글링 해봤는데 어찌 할지 모르겠네요... 까지가 질문이었는데https://1mini2.tistory.com/87를 참고해보니mysql> CREATE USER 'root'@'%' identified by 'Xptmxm1212!@'; 이런식으로 사용자먼저 생성mysql> GRANT ALL PRIVILEGES ON . to 'root'@'%';권한할당mysql> flush privileges;mysql> SELECT Host,User,plugin,authentication_string FROM mysql.user; (확인조회) 이런식으로 하라고 하더라구요. 그래서 보니 이렇게 새로운 호스트와 유저가 생겼습니다. 그 이후, 설명해 주신대로 mysql워크벤치 설치 ->aws규칙수정 -> 워크벤치에서 연결이렇게 했는데 맞는걸까요?한번 틀리면 나중에 다 수정해야하는데 그게 너무 버거워서 확인차 질문 남겨봅니다.
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
노드js 14버젼 설치 안되시는 분 참조하세요
node.js 14.x is no longer actively supported이하 뭐시기 떠서 개열받았는데https://corona-world.tistory.com/83 여기 보시는 방법대로 하시면 잘 됩니다.
-
미해결자바스크립트 : 기초부터 실전까지 올인원
강의가 재생이 안됩니다.
해당 강의(자바스크립트에서 API를 불러보자) 재생 버튼 누르면 동작하지 않고 그 전 강의에서 다음강의 수강하러가기로 이동해도 건너띄어지는데 확인좀부탁드립니다
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
뉴 파일 생성 안됨
안녕하세요, 부트캠프부터 뉴파일이 생성이 안돼서 시작을 못하고 있습니다ㅜ 이럴 땐 어떻게 해야할까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
.left는 quickTo를 쓰지 않는 이유
.left도 지속적으로 x를 호출하니 quickTo를 쓰면 더 좋지않을까 라고 생각했는데 .left는 to로 컨트롤하시는 이유가 있을까요?quickTo의 기본값이 픽셀이라 퍼센트 넣으면 동작이 이상해지던데 혹시 이런 이유일까요?!
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
snipaste 추천드려요
snipaste 앱을 사용하시면 캡처 이미지를 화면 최상단에 고정할 수 있어요sql쓸때 자주 사용하는데드래그도 되고 중복으로도 가능하고 무료입니다 ㅎㅎ품격개발자님 화이팅
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
const handleEnter 문에 궁금한게 있습니다.
setUserInput("")을 하면 userInput 값이 ""로 바뀌고그다움 num 선언문에 ""의 숫자변환값이 들어가는게 아닌가 궁금합니다.
-
미해결2022 30분 요약 강좌 시즌 1 : HTML, CSS, Linux, Bootstrap, Python, JS, jQuery&Ajax
codesandbox 문서 버튼이 안보여요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. codesandbox 문서 버튼이 안보여요코딩실습을 해야하는데 문서 버튼이 아예 없어서 어딜 눌러서 코딩을 해야할지...
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
CSS 적용 안됨
안녕하세요, 맨 첫 강의인 <header영역 레이아웃> 수업을 듣고 있는데, 강의 내용과 똑같이 진행하였으나 Css가 적용되지 않아 질문 드립니다. Google에 검색을 통해 쿠키 삭제, link대신 @import 사용 등을 실행했으나 결과는 똑같았고, F12 눌러 개발자용 모드로 확인 해보았는데 css가 작동되지 않는다는 알림만 뜰 뿐 해결책을 찾지는 못했습니다. 이러한 경우에 어떻게 해결할 수 있을까요? 미리 답변 감사드립니다.
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
함수가 정의되기 전에 함수 호출
2-1[코드설명]기초다지기! 강의에서 질문1. 코드에서 render함수가 정의되기 전에 getPercent함수에서 render를 호출(실행)하는게 이해가 안되요.. ㅜ_ㅜ함수가 값도 되기 때문에 값을 전달하면서 동시에 호출도 하는것이 가능 한건가요? 질문2. function init(){ getPercent();};이렇게 초기화 하는건 기본으로 꼭 해야하는 동작인가요 질문3.javascript 기초를 듣고 왔는데 익숙해질때까지 강의를 반복수강하는것 말고 익숙해지는 방법이 또 있을까요? 기초를 복습할 수 있는 아주 쉬운 예제가 있는 사이트들이 있다면 추천 부탁드립니다.
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
버튼 누를시 인포윈도우 닫는 방식 설명좀 다시 부탁드려도 될까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 빈 배열 객체 생성 let infowindow = []; 거기에 for문 돌면서 infowindow 집어넣기infowindowArray.push(infowindow);1,2번 까지는 말 그대로 빈 배열객체를 생성후기존의 infowindow를 집어넣어 기존의 자료가 들어간infowindowArray를 만든것까진 알겠는데그 이후에 3. function closeInfoWindow(){ for (let infowindow of infowindowArray){ infowindow.close(); } };이게 무슨 말 일까요? 사실 모든 원리가 잘 이해가 되질 않습니다..ㅜㅜ기존에는 그냥 인포윈도우 클릭하면 해당정보가 나타나고 그것을 다른 것을 누르면 끄려 그러는데 왜 빈 배열객체를 만드는지 부터 잘 이해가 안되네요..
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
result 에서 결과가 안 나와요.
result 페이지에서 결과가 안 나와요resultname, resultdesc가 안 뜨는데이미지는 선택된 결과 제대로 뜨는 걸로 봐선 알고리즘엔 문제가 없는데 어디서 잘못된 걸까요? 제 코드는 이렇습니다. const main = document.querySelector("#main"); const qna = document.querySelector("#qna"); const result = document.querySelector("#result"); const endpoint = 6; const select = [0, 0, 0, 0, 0, 0]; function claResult() { console.log(select); var result = select.indexOf(Math.max(...select)); return result; } function setResult() { console.log(name); let point = claResult(); const resultname = document.querySelector('.resultname'); resultname.innerHTML = infoList[point].name; var resultImg = document.createElement('img'); const imgDiv = document.querySelector('#resultImg'); var imgURL = '../image/image-' + point + '.png'; resultImg.src = imgURL; resultImg.alt = point; resultImg.classList.add('img-fluid'); imgDiv.appendChild(resultImg); const resultDesc = document.querySelector('.resultDese'); resultDesc.innerHTML = infoList[point].desc; } 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) }) setResult(); } function addAnswer(answerText, qIdx, idx) { var a = document.querySelector('.answerBox'); var answer = document.createElement('button'); answer.classList.add('answerList'); answer.classList.add('mx-8'); answer.classList.add('py-3'); answer.classList.add('mx-auto'); answer.classList.add('fadeIn'); a.appendChild(answer); answer.innerHTML = answerText; answer.addEventListener("click", function () { var children = document.querySelectorAll('.answerList'); for (let i = 0; i < children.length; i++) { children[i].disabled = true; children[i].style.WebkitAnimation = "fadeOut 0.5s"; children[i].style.animation = "fadeOut 0.5s"; } setTimeout(() => { var target = qnaList[qIdx].a[idx].type; for (let i = 0; i < target.length; i++) { select[target[i]] += 1; } for (let i = 0; i < children.length; i++) { children[i].style.display = 'none'; } goNext(++qIdx); }, 450) }, false); } function goNext(qIdx) { if (qIdx === endpoint) { goResult(); return; } var q = document.querySelector('.qBox'); q.innerHTML = qnaList[qIdx].q; for (let i in qnaList[qIdx].a) { addAnswer(qnaList[qIdx].a[i].answer, qIdx, i); } var status = document.querySelector('.statusBar'); status.style.width = (100 / endpoint) * (qIdx + 1) + '%'; } function begin() { main.style.WebkitAnimation = "fadeOut 1s"; main.style.animation = "fadeOut 1s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 1s"; qna.style.animation = "fadeIn 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block"; }, 450) let qIdx = 0; goNext(qIdx); }, 450); }
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
탭메뉴 갤러리클릭하면 갤러리들이안나오고 공지사항이그대로보이는데 뭐가잘못됬을까요 ..
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>a연습</title> <link rel="stylesheet" href="css/a연습.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">탑</a> <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li> <a href="#none">아우터</a> <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li> <a href="#none">팬츠</a> <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <a href="#none">레깅스</a> </div> </li> <li> <a href="#none">악세사리</a> <div class="sub-menu"> <a href="#none">귀고리</a> <a href="#none">목걸이</a> <a href="#none">반지</a> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b> </a> <a href="#none">홈커밍데이 진행위원회 결과를 다운로드 받으세요. <b>2020.01.07</b> </a> <a href="#none">카드결제 무이자 이벤트 한시적 10월 20일까지 <b>2019.12.31</b> </a> <a href="#none">보안강화 시스템 작업 안내 공지 <b>2019.12.20</b> </a> <a href="#none">부여 가을연꽃축제 10주년 콘서트 축제 <b>2019.12.20</b> </a> </div> <div class="tab2"> <a href="#none"><img src="imges/d-1images/gallery-1.jpg" alt="gallery1"></a> <a href="#none"><img src="imges/d-1images/gallery-2.jpg" alt="gallery2"></a> <a href="#none"><img src="imges/d-1images/gallery-3.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="banner"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>부여 가을연꽃축제 팸투어 모집</h2> <p>예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다!</p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/연습용custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; } a{ font-size: 15px; color: #333; list-style: none; text-decoration: none; } .container{ border: 1px solid #000; width: 1200px; } header{ display: flex; justify-content: space-between; } header > div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .menu{ padding: 0; list-style: none; margin-top: 30px; } .menu li{ float: left; width: 25%; text-align: center; box-sizing: border-box; } .menu li > a{ border: 1px solid pink; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: pink; color: #fff; } .sub-menu{ border: 1px solid pink; display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: palevioletred; color: #fff; } .slide{} .slide > div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items > div{ border: 1px solid #000; height: 200px; } .news{ width: 500px; } /*tab-inner*/ .tab-inner{ width: 97%; margin: auto; margin-top: 5px; } .btn{} .btn span{ border: 1px solid #000; display: inline-block; width: 100px; margin-right: -6px; padding: 4px; text-align: center; border-radius: 7px 7px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{} .tabs > div{ border: 1px solid #000; height: 150px; } .tab1{} .tab1 a{ display: block; border-bottom: 1px dashed #000; padding: 5px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer > div{ border: 1px solid #000; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*modal*/ .modal{ background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .modal-content{ background-color: #fff; width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .modal-content h2{ background-color: powderblue; text-align: center; } .modal-content p{ line-height: 1.5em; padding: 10px; } .close-modal{ border: 1px solid #000; padding: 5px 5px; margin-right: 30px; float: right; } /*tab-inner*/ $('.btn span:first-child').click(function(){ $('tab1').show() $('tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('tab2').show() $('tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })갤러리부분에 이미지도 넣어놨는데 tab2 부분이 안나타나고 tab1 부분만 그대로 나와움직이질않습니다 span부분클릭해도 tab1부분만 나와있어요 어디서부터 잘못된걸까요 전에꺼랑 비교햇을때 똑같은데 어떤게 잘못됫나요 ,,,
-
해결됨[코드캠프] 시작은 프리캠프
고농축 프론트엔드 수업
안녕하세요 강사님!덕분에 잘 완강해서 파이널과제까지 마쳤습니다.뭔가 이어서 배포까지 하는 프로젝트를 하나 만들어보고 싶은데고농축 프론트엔드 수업?이거 강의를 들으면 도움이 될까요?학습방향이 궁금해서 여쭤봅니다!그리고 뭔가 프로젝트 하나를 만들 때 피그마를 사용해야 하는 걸로 알고 있는데,이건 본인이 직접 만들어서 프로젝트에서 적용하는 건가요?아니면 프리캠프에서 했던 것 처럼 피그마 예시를 주고 거기다가 하는건가요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
이미지들이 포지션엡솔루트만하면 옆으로 사진처럼 옮겨지는데 어떤게 잘못된건가요 ?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>b-2레이아웃</title> <link rel="stylesheet" href="css/b-2.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <div class="sub-back"></div> </ul> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="imges/d-1images/slider01.jpg" alt="slide1"></a> <a href="#none"><img src="imges/d-1images/slider02.jpg" alt="slide2"></a> <a href="#none"><img src="imges/d-1images/slider03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"></div> <div class="sns"> <div></div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; body{ color: #333; margin: 0; background-color: #fff; } a{ list-style: none; text-decoration: none; color: #333; } .container{} .header-inner{ background-color: #eee; } .content-inner{} .footer-inner{ background-color: #eee; } header{ width: 1200px; margin: auto; display: flex; justify-content: space-between; position: relative; } header > div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } /*navigation*/ .menu{ padding: 0; list-style: none; margin-top: 70px; } .menu li { float: left; width: 25%; box-sizing: border-box; text-align: center; } .menu li > a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover{ background-color: #fff; color: #000; } .sub-back{ width: 100%; height: 200px; background-color: #000; position: absolute; right: 0; top: 100%; z-index: -1; display: none; } .slide{ position: relative; height: 300px; } .slide > div{ width: 1200px; height: 300px; margin: auto; border: 5px solid #000; position: absolute; } .items{ width: 1200px; margin: auto; display: flex; } .items > div{ border: 1px solid #000; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ width: 1200px; margin: auto; display: flex; } footer > div{ border: 1px solid #000; height: 100px; } .copyright{ width: 1000px; } .sns{ width: 200px; } .sns div{ border: 1px solid #000; height: 50px; } 슬라이드부분에 하다가 포지션 엡솔루트만 주면 사진기준이 이상하게되는데 뭐가잘못된건가요
-
미해결처음 만난 리액트(React)
버튼은 뜨는데 눌렀을 때 동작하지 않아요.
17, 17.0.0, 18.0.0 다 해봤는데 버튼은 뜨지만 눌렀을 때 글자가 바뀌지 않아요ㅠ 문제가 무엇일까요?
-
해결됨백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편
강의 누락
안녕하세요 Thymeleaf vs HTML + RestController 주제를 듣던 중 의아한 부분이 생겨 글을 작성하게 되었습니다.해당 강의에서 Thymeleaf 에 대한 설명을 진행하던 와중, 도중 강의가 갑자기 끝나는 듯한 느낌을 받았습니다.강의 페이지를 보니, 이후 설명되야 할 내용처럼 보이는 것을 발견했습니다. 혹시 중간에 강의가 누락된 것인지 확인 부탁드립니다.
-
해결됨[코드캠프] 시작은 프리캠프
안녕하세요
안녕하세요, 강사님!수업 너무 잘 듣고있습니다.다름이 아니라 제가 모르고 싸이월드 만들기 피그마에서 협업 요청 버튼을 눌렀는데 어떡하죠..?ㅠㅠ거절해주실 수 있나요..?