안녕하세요 강사님. chapter03을 할때도 있던 문제와 더불어, chapter04를 진행할때도 문제가 생겨 질문드립니다.제가 궁금한 내용은port 3000번이 이미 사용중이라는 메세지가 뜨는이유(초반에 create ~~명령어를 사용해 my-app 폴더를 만들어 cd my-app , npm start를 쓸땐 port 3000번에 강의영상과 같은 화면이 잘 나왔습니다.) 이것 때문에 실행할때마다 포트번호가 3001, 3002, ... 3010 이런식으로 계속 증가합니다chapter3를 실행할땐 나오지 않던 에러페이지가 chapter4를 실행할때 나오는 이유입니다.(2번문제는 해결해서 에러는 확인해서 처리했습니다. 리턴할때 괄호를 붙이고 써서 나온 에러같아서 수정해보니 되더군요)우선 아래는 Clock.jsx파일입니다.import React from "react"; function Clock(props){ return( <div> <h1>안녕, 리액트!</h1> <h2>현재 시간: {new Date().toLocaleDateString()}</h2> </div> ); } export default Clock;그리고 index.js파일입니다.import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_03/Library'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(()=>{ root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000) // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 이를 새 터미널을 활용해 실행시켜보면 다음과 같이 뜨는데요,여기서 y를 눌러 실행을 해보면 아래와 같이 에러가 뜹니다.에러가 나는 이유와 해결방안이 궁금합니다 감사합니다.

custom.js에서 $(function(){ $('.trigger').click(function(){ $(this).toggeClass('active') $('.gnb').toggeClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active')}) $('.menu a').click(function(e) { e.preventDefault(); $.scrollTo(0, 900); }); }) 제이쿼리스크롤을 index.html에 링크 건 후에 custom.js의 click 부분들에 줄이 그어졌습니다."선언이 여기에 사용되지 않음으로 표시되었습니다" 라고 뜨는데 어떻게 해결해야 할까요?

자동으로 위로 줄이 올라가는데 어떻게 해결해야 하나요?..

설명보고 따라하였는데 시계가 아닌 오류문구만 뜹니다..무엇이 문제일까요?ㅠㅠ

강의보는중에 workbench 에서 hostname을 작성하고 나머지 정보도 작성해서 test Connection을 해줘도 비밀번호가 틀리다고 하여 노션에 있는 방법대로 비밀번호를 초기화하는 중에 사진과 같이 신택스 오류가 났다고 하는데 도저희 어디가 잘못되었는지 몰라서 남겼습니다. 비밀번호는 강의 내용 그대로 따라 했습니다

코드 스니펫은 어떤걸 사용하시나요. 추천하는게 있나요?

강의를 보던중 강사님께서 callback 이라는 뜻을 찾기위해 특정 위젯 같은 것을 실행 후 검색어 입력 후 파파고로 실행 하시던데.혹시 이 툴이 뭔지 알수 있을까요?윈도우 사용자 입니다.

본 강좌 <모던 HTML/CSS로 상용화도 가능한 반응형 모던 웹페이지 만들기5> 강의 7:35 분쯤에서 background-position 값을 center 10% > center 50% 로 바꿨을 때 y축 값이 커졌으므로 그림이 아래로 내려가는게 맞다고 생각하는데 왜 그림이 위로 올라가는 건가요 ?

선생님 강의 자세하게 설명해주셔서 너무 잘 듣고있습니다.Sass 환경설정 후 선생님처럼 동일한 코드를 붙여넣으면"liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.formats":[ // This is Default. { "format": "expanded", "extensionName": ".css", "savePath": "/css" } ], "liveSassCompile.settings.autoprefix": [], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**", ], "liveSassCompile.settings.includeItems": [ ], }저는 이런 에러가 떠요.아무리 구글링을 해도 다들 셋팅 방법만 나와있고 이런 설명이 없어서요..샘 답변 부탁드립니다.

css peaker 기능 중 해당 태그에서 alt + F11 누르면 해당 css가 아래에 뜨는 게 안되네요ㅠㅠ ctrl 누르고 클릭하면 해당 css파일에 해당 태그 스타일로 넘어가는건 정상 작동합니다.  ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.

makemygrations을 실행 시키려니까 이런 오류가 발생합니다. 번역시켜보니까 'main_developer와 main_Question에 대해 지연 참조로 선언되었지만 앱 'main'이 제공하지 않습니다.' 라고 하는데 어떻게 해야 하나요?

안녕하세요. 강의를 모두 수강하고 웹사이트를 배포한 상태입니다. 지도에 마커도 잘 찍히고인포윈도우 정보도 잘 뜨고 있는 상태입니다. 원래 강의에서는 인포윈도우에 유튜브 섬네일과 영상 링크가 올라가도록 코드를 짜주셨는데혹시 저 섬네일과 주소를 네이버 지도 상에 있는 주소와 섬네일로 고칠 수 있는지 궁금해서 질문을 남깁니다.제가 다니고 있는 학교 주변의 식당 정보들이 마커에 찍히고 그 마커를 찍었을 때 네이버 지도에 나와있는섬네일과 주소 링크를 달고 싶습니다.위 코드는 선생님께서 최종 배포하신 코드 자료에 올려주신 코드중에 인포윈도우 창에 올라가는 정보들을 설정하는 부분입니다(map.js 파일) 이 부분을 어떻게 잘 수정하면 될 거 같은데 어떻게 하면 좋을까요?네이버 지도에서 제 학교 주변의 중국집을 검색해서 식당중 하나를 클릭하면https://map.naver.com/p/search/%ED%95%9C%EA%B2%BD%EB%8C%80%20%EC%A4%91%EA%B5%AD%EC%A7%91/place/37921639?c=15.00,0,0,0,dh&placePath=%3Fentry%253Dbmp이러한 웹주소가 뜨고 그 식당옆에 있는 섬네일을 클릭하면https://map.naver.com/p/search/%ED%95%9C%EA%B2%BD%EB%8C%80%20%EC%A4%91%EA%B5%AD%EC%A7%91/place/37921639?c=15.00,0,0,0,dh&placePath=%2Fphoto%3Fentry%253Dbmp이런식의 주소가 주소창에 표시가 됩니다. 이 주소 형식을 어떻게 잘 이용해서 위에 올린 인포윈도우 코드에 적용을 하면 강의 자료처럼유튜브의 섬네일과 주소가 아닌 네이버 지도의 섬네일과 주소를 불러올 수 있을거 같은데코드를 어떤식으로 수정해야 할지 조언을 얻을 수 있을까요?  

위에 보시는 것과 같이 실행시키니까 facebookShare.addEventListner는 함수가 아니라고 오류가 발생하는데 분명 강의 내용과 똑같이 쳤는데도 불구하고 이런 오류가 발생했습니다. 혹시 이것만 오류가 있나해서 다른것도 확인해 보니까 밑에 kakaoshare나 copyBtn에서도 같은 오류가 발생하였습니다. 어떻게 해야하나요?

저도 강의 따라가다가 세로로 갑자기 변환되어서 답변 내용대로 해봤지만 고쳐지지를 않아서 질의 드립니다 아래 코드는 html코드입니다<html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> <body> <div id="header"> <div id="header-area"> <img src="images/images/icons/logo.png"/> </div> </div> <div id="body"> <div id="banner"> <img src="images/images/banners/banner1.png"/> </div> <h1>판매되는 상품들</h1> <div id="product-list"> <div class="product-card"> <img class="product-img" src="images/images/products/basketball1.jpeg"/> <div class="product-contents"> <span class="product-name">농구공 1호</span> <span class="product-price">50000원</span> <div class="product-seller"> <img class="product-avatar" src="images/images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> </div> <div class="product-card"> <img class="product-img" src="images/images/products/keyboard1.jpg"/> <div class="product-contents"> <span class="product-name">키보드 1호</span> <span class="product-price">30000원</span> <div class="product-seller"> <img class="product-avatar" src="images/images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> <div class="product-card"></div> <div class="product-card"></div> </div> <div id="footer"></div> </body> </head> </html>아래는 css코드입니다 * { margin: 0; padding: 0; } #header{ height: 64px; display: flex; justify-content: center; border-bottom: 1px solid gray; } #body{ min-height: 100%; width: 1024px; margin: 0 auto; padding-bottom: 24px; } #footer{ height: 200px; background-color: red; } #banner{ height: 300px; background-color: yellow; } #header-area{ width: 1024px; height: 100%; display: flex; align-items: center; } #header-area > img{ width: 128px; height: 36px; } #body > h1{ margin-top: 16px; } #banner > img{ width: 100%; height: 300px; } #product-list{ display: flex; flex-wrap: wrap; margin-top: 12px; flex-direction: row; } .product-card{ width: 180px; height: 300px; margin-right: 12px; margin-bottom:12px; border: 1px solid rgb(230, 230, 230); border-radius: 12px; } .product-img{ width: 100%; height: 210px; } .product-contents{ display: flex; flex-direction: column; padding: 8px; } .product-name{ font-size: 14px; } .product-price{ font-size: 16px; font-weight: 200px; margin-top: 4px; } .product-seller{ display: flex; align-items: center; margin-top: 12px; } .product-avatar{ width: 24px; }바쁘시겠지만 답변 해주시면 감사하겠습니다!+해당 코드 진행 후 개발자 도구 이용해서 보면 flex에 의해 정해지지않은 보라색 칸이 있는데 해당 칸 처리가 힘들어 추가 질문 올립니다!

섹션10 스크롤에 반응하는 이미지와 텍스트 애니메이션 제작에 자료파일이 안보여요.

안녕하세요! 제가 파이널 과제를 진행하다가 인증번호 전송부터 인증 완료 단계의 자바스크립트 코드를 작성하면서 어려움을 겪고 있어서 문의드립니다. 해당 코드를 적용하여 html 파일을 실행시킨 결과 인증완료 버튼을 눌러도 인증번호만 초기화가 되고 타이머는 그대로 1초씩 감소하는 상태가 유지되었습니다. clearInterval(timer)를 하면 반복함수가 멈춰 document.getElementById("timer").innerText = "3:00";의 결과로 3:00이 되는 것으로 생각했는데 왜 초기화가 되지 않는지 도통 모르겠습니다. <div class="certification"> <div id="certificationNumber">000000</div> <button id="sendButton" disabled = "true" onclick="submit()">인증번호 전송</button> </div> <div class="certification"> <div id="timer">3:00</div> <button id="completeButton" disabled = "true" onclick="completeMessage()">인증 확인</button>let timer let isStarted = false const submit = () => { const token = String(Math.floor( Math.random() * 1000000)).padStart(6, "0"); document.getElementById("certificationNumber").innerText = token; document.getElementById("sendButton").setAttribute("disabled", "true") document.getElementById("completeButton").removeAttribute("disabled") if(isStarted === false) { // 타이머가 작동중이 아닐때 isStarted = true let time = 180 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('completeButton').disabled = true; isStarted = false document.getElementById("certificationNumber").innerText = "000000"; document.getElementById("timer").innerText = "3:00"; clearInterval(timer) } },1000) } else { } } const completeMessage = (timer) => { clearInterval(timer) alert("인증이 완료되었습니다.") document.getElementById('completeButton').disabled = true; isStarted = false document.getElementById("completeButton").innerText = "인증 완료" document.getElementById("signup").disabled = false; }

Club GreenSock을 제외하면 상업적으로 무료로 사용가능한건가요?

실습 해보는데 css 중앙 정렬이 안되더라구요 그래서 뭔가 하고 봤더니 doctype부분에서만 차이가 있는데 오히려 doctype을 선언하지 않으니까 중앙 정렬이 돼요. 이게 왜 이럴까요?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="layout.css" /> </head> <body> <nav> <div class="inner"> <div class="nav-container"> <hi class="nav-title">맛집지도</hi> <button class="nav-contact">contact</button> </div> </div> </nav> <main> <section id="category"> <div class="inner"> <div class="category-container"> <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2> <div class="category-list"> <button class="category-item">한식</button> <button class="category-item">중식</button> <button class="category-item">일식</button> <button class="category-item">양식</button> <button class="category-item">분식</button> <button class="category-item">구이</button> <button class="category-item">회/초밥</button> <button class="category-item">기타</button> </div> </div> </div> </section> <!-- 카테고리 --> <div id="map" class="inner"></div> <!-- 카카오지도 --> </main> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b156fcbd2ea3a6340f64c07f5eaef559" ></script> <script src="layout.js"></script> </body> </html> @font-face { font-family: "KyoboHandwriting2020A"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff") format("woff"); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-family: "KyoboHandwriting2020A"; font-size: 10px; } nav { /* background-color: orange; */ } .nav-container { padding: 1rem 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .nav-title { font-size: 3rem; } .nav-contact { font-size: 2.5rem; justify-content: right; border: none; background: none; cursor: pointer; font-family: inherit; } .category-title { font-size: 3.5rem; } .category-item { width: 25%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: orange; cursor: pointer; } .inner { padding: 0 1.5rem; } @media all and (min-width: 1024px) { .inner { max-width: 1024px; margin: 0 auto; } } /* 카카오맵 css */ body { height: 100vh; } nav { height: 59px; } main { padding-top: 1.5rem; height: calc(100%-59px); display: flex; flex-direction: column; } #map { flex-grow: 1; width: 100%; height: 100%; } var container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3, //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 이렇게 했는데 지도가 안 나와요ㅠㅠ 어디가 틀린 걸까요

안녕하세요, 강의 처음으로 듣고 있는데요!강의자료가 노션(링크)에 있다고 써져있는데, 어디있는 걸까요..?ㅠㅠ (링크가 활성화되어있지 않습니다..)제가 못 찾고 있는건지 도무지 보이지가 않습니다ㅠㅠ지금 1강 들었는데 영상 하단에 강의자료 링크도 안뜨구요..강의 자료를 보기 위한 노션 링크 달아주실 수 있을까요?