묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요! useParams에서 막혀서 질문 남깁니다 ㅠㅠ
우선 웹라이브러리 파트의 Link태그 적용 강의에서 후반부에 useParams 를 사용하게 되는데, 이부분부터 무언가 오류가 발생하네요.. 1. 메인화면 들어갔을때 오류화면 2. 상품클릭했을때 콘솔로그 상품을 클릭했을때 변경된 주소까지는잘 적용 되고, useParams 를 사용하기 전까지는 정상 작동 했는데, product 폴더의 index.js 에 useParams 만 넣으면 위처럼 오류가 발생합니다 이전에 소스에서는 문제가 안생겼군요 ㅠㅠ import { useParams } from "react-router-dom"; function ProductPage() { const { id } = useParams(); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; 오타가 있나 싶어서 소스자료 복붙해도 마찮가지여서 문의로 남깁니다... react-router-dom 설치 할때 버전을 확인 못하고 그냥 설치했다가 나중에 확인해서 5.2 버전으로 다시 설치했는데, package.json 에는 5.2버전으로 정상적으로 보여지긴 하는데 오류내용이 버전이 충돌이 나서 그런건가 싶기도 하고.. 해결 방법이 있을까요? ㅠㅠ
-
미해결자바스크립트 : 기초부터 실전까지 올인원
질문있습니다
결과값이 이상해서요 마지막에 push한게 앞쪽 console.log에 반영이 되는거 같아요 다른영상들 보고 테스트 및 메모 한것들도 전부 콘솔찍어보면 저런식으로 되는거 같습니다 replit에 따로 설정한부분이있나요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
hiring button의 comment-dots image issue 2
말씀하신대로 index.html 과 style.css 풀 코드 올립니다. comment-dots image가 왜 적용 안되는지.. 혹 fontawesome 문제인지.. 설명 부탁 드리겠습니다. index.html: <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>bizpage website - Architecture</title> <script src="js/jquery-2.1.4.js"></script> <!-- Page scroll Effects JS & CSS --> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <<div> <div class="content"> <img src="images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <img src="images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <img src="images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section" id="contact"> <div> <div class="content"> <img src="images/temp-section-07.jpg"> </div> </div> </section> <header class="active"> <div class="gnb-inner"> <div class="logo active">bizpage</div> <div class="gnb active"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We think different and make different.</div> </div> <div class="trigger active"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <a href="#" class="gototop active"><img src="images/gototop.png"></a> <a href="" class="btn-hiring"><i class="fa-duotone fa-comment-dots"></i>Hiring</a> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html> style.css: /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nunito&family=Open+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * { box-sizing: border-box;} ul {list-style: none;} a {text-decoration: none;} /* Default CSS */ body { font-family: 'Mondtserrat', 'sans-serif'; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; } .gnb-inner { /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { font-size: 2.4rem; font-weight: bold; color: #066bf7; float: left; } /* .logd img { padding-top: 17px; } */ .gnb { float: right; } .menu { display: none; } /* .menu a {} */ .slogan { font-style: italic; font-size: 16px; float: right; } .trigger { display: none; } /* Hiring Button */ .btn-hiring { position: fixed; right: 30px; bottom: 30px; color: #fff; background-color: #000; padding: 10px 20px; border-radius: 20px; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.38); transition: 0.5s; } .btn-hiring .fa-duotone { transform: rotateY(180deg); margin-right: 5px; } .btn-hiring:active { transform: scale(0); }
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
jwtsecretkey
안녕하세요 jwtsecretkey 관련하여 질문드립니다. jwtsecretkey는 강의에 나와있는대로 그대로 사용했고, host는 AWS EC2에 명시된 퍼블릭 IP주소, User명에는 mysql 사용자명, port는 3306, password는 mysql 접속 시 비밀번호, 그리고 사용할 database명까지 입력을 해주었으나 localhost로 접속 시, Cannot get이라는 창만 계속해서 뜹니다. 혹시 이런경우에는 jwtsecretkey를 제것을 따로 생성하지 않아서 발생하는 문제인지 알고 싶습니다. 만약 jwtsecretkey의 문제라면 어떻게 생성하면되는지 알려주시면 감사하겠습니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의 자료에 대하여
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 질 좋은 강의 너무 잘 듣고 있습니다. 따로 권한을 받아서 볼 수 있는 강의 자료도 정말 잘 정리되어 있어 공부하기 수월해요!! 감사드립니다. 강의자료에 대해서 여쭤볼게있는데요. 1. 권한은 수업과 동일하게 기한제한없이 볼 수 있는건가요? 2. 개인적인 궁금증으로써.. 보통 초보(혹은 중급)개발자분들은 이러한 모든 css특징들을 모두 외우시는지, 아니면 이러한 기능이 필요해! 할때 구글검색을 하며(혹은 강의자료) 그때그때 꺼내쓰는건지 궁금합니다
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에러가 납니다ㅜㅜ
강의를 보며 그대로 따라했는데 const query = req.query; console.log("QUERY : ", query); 를 추가했을때 터미널에 node server.js를 하면 에러가 납니다ㅜㅜ
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
featherlight iframe를 사용해서 불러온 html에 scrolltrigger가 있는 경우 밀립니다
GRID 반응형 포트폴리오 강의를 참고하며 개인 포트폴리오를 작업 중입니다. featherlight iframe를 사용해서 연결한 html파일 중 scrolltrigger 이벤트가 뜨는 이미지나 글상자가 다르게 출력됩니다. 원본html을 직접 들어갈 경우 정상적으로 작동하는데, 아이프레임을 통해 들어간 경우만 scrolltrigger로 transform x, y값을 이동하게 지정한게 오류가 나서 문의드립니다. 이럴 때는 어떻게 접근해서 해결해야 좋을까요? 해당이미지의 js 코드입니다.
-
미해결애플 웹사이트 인터랙션 클론!
overflow-x:hidden을 사용했는데, 모바일 화면에서 우측이 잘리고 가로 스크롤이
d위 이미지처럼 가로 스크롤이 생기는 데 overflow-x: hidden 기능이 적용되지 않아서 생기는 문제일까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
dots custom cs 수정
dots 커스텀cs 로 수정하는 강의는 어디서 확인가능한가요 ??
-
미해결애플 웹사이트 인터랙션 클론!
스크롤이 적용이 안되는것같아요!ㅜㅜ
스크롤도 늘어나질 않고 스티키도 안보이고 씬도 변하질 않고 계속 0에 있어요ㅜㅜ 첨부하겠습니당 const main = () => { let y0ffset = 0; const sceneInfo = [ { //0 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0') } }, { //1 type: 'normal', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { //2 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2') } }, { //3 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3') }, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } console.log(sceneInfo); } function scrollLoop() { } window.addEventListener('resize',setLayout); window.addEventListener('scroll',() => { y0ffset = window.pageXOffset; scrollLoop(); }); setLayout(); }; main();
-
해결됨Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
DetailView 변수명
- 학습에 관련된 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. post_list.html에서는 변수를 소문자로 변환한 모델명 + _list 로 사용했는데 post_detail.html에서는 변수를 소문자로 변환한 모델명(post)로 사용한건가요? 어떤 방식으로 하는건지 설명이 없어서요...
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
공지사항 갤러리 탭메뉴 div a태그
공지사항 갤러리 탭메뉴랑 공지사항 갤러리 별도 구성메뉴가 있는데 div 안에 '공지사항', '갤러리' 제목넣는 곳에 태그를 span은 별도메뉴에 쓰고, 탭메뉴에는 a태그로 쓰면 되나요? 상호작용이 들어가는 부분은 tab을 눌렀을 때 확인되어야 해서 a 임시링크를 걸어주는 걸로 기억하는데, 별도 구성인 경우엔 a태그 말고 span으로 줘도 무관한가요?
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
js) 2/3 -> 3/3으로 안 넘어갑니다
1/3 -> 2/3 은 잘 되는데 2/3 -> 3/3은 안 넘어갑니다. const vheight를 .text가 아니라 영상대로 .test로 했을 땐 아예 넘어가지도 않았구요,(근데 이건 질문이랑 답, 버튼들 div class명이 text로 되어있어서 그런 것 같습니다.) 오타가 난 건가 확인을 해봐도 오타는 하나도 없는데 왜 안 되는지 모르겠습니다. 밑에는 자바스크립트 코드이구요. 혹시 css에서 수치를 잘 못 설정하면 이렇게 될 수도 있나요? 아니면 j query 때문일 수도 있나요.. ? 해결방법 아시는 분들 도움 부탁드립니다. (참고: alert창 나오는 부분은 일부러 코드를 적지 않았습니다. 커뮤니티 글 다 확인해보고 할 수 있는 수정은 다 해봤는데 안 됐습니다.)
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
소켓 프로그래밍 이란
질문있습니다. 소켓프로그래밍이라 하면 어떤것을 제작하는 것을 의미하나요 어렴풋이 서버 프로그래밍을 얘기하는 것 같은데.... 그리고 서버 어플리케이션을 만드는 것으 이야기하는지 서버의 운영체제를 만드는 것을 이야기하는지 잘 모르겠습니다. 도움말씀 부탁드려요..
-
미해결생활코딩 - HTML 기초
예제 없어서 불편한분들
https://opentutorials.org/module/1892/10930 이 사이트 가서 새로 배우세요 예제 포함되어있습니다.
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
라이브 서버가 네이버웨일에서는 안되는건가용?
안녕하세요 비주얼스튜디오 세팅부분 들으면서 선생님이 하시는거 따라 하는데 네이버 웨일 브라우저에서는 바디 부분에 글자 넣은게 반영이 안되는데 그래서 이 폴더에서 index를 우클릭하여 연결프로그램 -> edge 브라우저로 연결하면 텍스트가 반영이 되는데 문제는 주소가 이렇게 폴더위치로 뜨는데 이렇게 되면 안되는거 아닌가용?ㅠㅠ 어떻게 하면 좋을까요 ㅠㅠㅠㅠㅠㅠㅠ
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Product ? Products?
<질문1> Products.js에서 sequelize.define로 테이블 정의시 복수형태로 Products된다고 들었는데 models.Product.create도 Product 단수 형태로 테이블 이름에서 s를 빼주는건가요??? <질문2> result를 log찍어 봤을떄는 또 Product라고 나오고 위에는Products 테이블로 insert into 됐다고 나오는데테이블을 만들어주는건 models/products.js 에서하는건데 model.Product.create 이말은 사실 테이블 생성이아니라 데이터 삽입이라고 보면 될까요? models.Product.create({ name, description, price, seller, })
-
해결됨만들면서 배우는 HTML/CSS
왜 색이 안변하죠??
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. //style.css width: 100%; height: 100%; } .bx-wrapper, .bx-viewport, .slider{ width: 100%; height: 100%; } .background__01{ width: 100%; height: 100%; background: url("../images/a.jpg") no-repeat; background-size: cover; background-position: center; } .background__02{ width: 100%; height: 100%; background: url("../images/b.jpg") no-repeat; background-size: cover; background-position: center; } .background__03{ width: 100%; height: 100%; background: url("../images/c.png") no-repeat; background-size: cover; background-position: center; } .contents{ position: absolute; top:0; text-align: center; } .contents__name{ font-size: 64px; font-weight: bold; color :blanchedalmond; margin-bottom: 25px; } .contents__job{ font-size: 25px; font-weight: bold; color : blanchedalmond; margin-bottom: 50px; } .content__list{ font-size: 0; } .contents__list > li{ display: inline-block; width:52px; height: 52px; border:1px solid white; border-radius: 50%; font-size: 16px; } .content__list > li > a{ color : white; } //index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Halfhalfman's Homepage</title> <link href="css/reset.css" rel="stylesheet" type="text/css"/> <link href="css/style.css" rel="stylesheet" type="text/css"/> <script src="js/jquery.1.12.4.js" type="text/javascript"></script> <script src="plugins/bxslider/js/jquery.bxslider.js" type="text/javascript"></script> <script src="https://kit.fontawesome.com/2871c12638.js" crossorigin="anonymous"></script> <script> $(document).ready(function(){ $('.slider').bxSlider({ controls:false, pager:false, auto:true }); }); </script> </head> <body> <div class="slider"> <div class="background__01"></div> <div class="background__02"></div> <div class="background__03"></div> </div> <div class="contents"> <p class="contents__name">Halfhalfman</p> <P class="contents__job">I live at korea, I am a student, I have my own NFT.</P> <div class="contents__sns"> <ul class="contents__list"> <li> <a href="#"> <i class="fa-brands fa-discord"></i> </a> </li> <li> <a href="#"> <i class="fa-solid fa-water"></i> </a> </li> </ul> </div> </div> </body> </html>
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position 속성으로 인한 높이값문의
div 안에 div가 존재하고 자식 div에 position:absolute를 주면 높이값을 잃기 때문에 높이값을 부모요소에 준다고 알고있습니다. 근데 그 높이값이 고정으로 주는게 아니라 안에 자식들이 div가 여러개 있거나 자식 div높이값에 따라서 유동적으로 부모 div값도 고정값이 아닌 자동으로 높이값이 변경되게 하려면 어떻게 해야하나요? 꼭 고정값으로 줘야 하나요? 당연히...자식에 의해서 부모의 높이값을 주면 담길꺼라 생각했는데 실제 담기는게 아니라...부모 사이즈만 늘어나는것 같습니다.
-
해결됨애플 웹사이트 인터랙션 클론!
if (scrollRatio <= 0.22) 로 이벤트 발생 시점을 컨트롤 하는 부분과 values 에 있는 start 와 end 값
if (scrollRatio <= 0.22) 로 이벤트 발생 시점을 컨트롤 하는 부분과 values 에 있는 start 와 end 로 처리하는 부분이 동일하지 않나요?단순히 calcValues 도 하지 않기 위해서 if (scrollRatio <= 0.22) 와 같은 조건문이 있는걸까요?
