묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결인터랙티브 웹 개발 제대로 시작하기
-2550px 0 에 대한 제가 이해한 내용 그림으로 공유할게요!
제가 처음에 이해못할 때는 "보는 시각이 바뀌는거 아닌가?" 라고 생각하면서 첫번째 그림처럼 접근했어요. 이해가 됐을 때는 두번째 그림처럼 그림이 움직인다고 접근해서 이해했습니다. 두번째 그림의 부가설명을 하자면 처음 그림 포지션은 0 0 입니다. 1step -150px 0 만큼 그림이 왼쪽으로 움직입니다. 2step -150px 0 만큼 그림이 또 움직입니다 (총 -300px 0) ~~~~ 17step -150px 0 만큼 그림이 움직인다. (총 -2550px 0) 틀릴 수도 있습니다. 근데 전 이렇게 접근해보려구요!
-
미해결타입스크립트 입문 - 기초부터 실전까지
타입호환은 어디에 쓰는건가요?
내용은 이해가 되는데 구조적 타이핑은 실무에서 언제쓰는지 궁금하네요..
-
해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
function loop()..
안녕하세요! function loop(){ window.requestAnimationFrame(loop); } 에서 window.requestAnimationFrame(); 안에 인자를 왜 부모 함수인 loop로 받는 것일까요? 부모함수인 loop 안에 존재하는 window.requestAnimationFrame()이 어떻게 loop함수를 다시 받을 수 있는지, 자바스크립트에선 이러한 문법을 뭐라고 부르는지 궁금합니다.
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
이벤트 함수에서 임의의 인자 e의 역할에 대해 궁금증이 생겨서 문의드립니다!
안녕하세요 선생님 :) 바쁘실텐데 죄송합니다. function mouseFunc(e){ console.log(e.clientX, e.clientY); } 이 부분에 인자 e의 역할은 이벤트를 감지하기 위한 인자인 것으로 이해하고 있습니다. 이 부분이 맞을까요?😊 실습하다보니, e를 넣으면 정상 작동이 되나. e를 인자로 넣지 않으면 오류가 뜨는 이유는 무엇인지 궁금해서.. 굳이 임의의 인자를 넣어 이벤트를 감지 시켜야 하는 자바스크립트의 생태계에 대해 좀 더 스터디 해보려고 하는데 뭐라고 검색해야 자료를 찾고 스터디 할 수 있을까요?
-
미해결mongoDB 기초부터 실무까지(feat. Node.js)
이미지나 동영상 예제
저번에도 말씀드렸지만 이미지나 동영상 예제 올려주실 수 있나요? 물론 몽고DB 강의에 범주를 넘어가는것은 알겠으나, 아예 없다고는 생각하지 않아서요. 애매하게 중간에 걸친 것 같은데 혹시 예제를 올려주실 수 있나해서요? 아니면 참고할만한 사이트 부탁드립니다. 늘 친절한 답변 주셔서 감사합니다. ps: 앗!!!! 미니 강의 올려주신다 하셨네요. 그럼 강의도 좋은데 실무에서 사용하고 있는 저장 관련 모듈 사이트 알려주시면 감사하겠습니다. ^^ 찾다가 보니 아래와 같은 자료가 있어서 남깁니다. 그런데 제가 궁금한게 Streams 를 많이 사용하나요? Multer는 생각보다 안 사용하는 것 같네요. 생각해보니 mongodb 보단 nodejs범주인것 같긴하네요. 그래도 강사님은 어떤걸 더 추천 하시나요? multer 보니깐 데이터 저장된 파일이 이상한 문자로 나오던데 이 파일을 저장하는건 괜찮은 방법 같습니다만 .... 실무에서 어떤걸 쓰는지 궁금하네요. 제일 궁금한건 Streams인데 범주를 넘어서면 굳이 대답안해주셔됩니다.
-
미해결생활코딩 - 자바스크립트(JavaScript) 기본
강의를 들으면서 비쥬얼스튜디오 코드를 사용하여도 상관 없을까요?
강의를 들으면서 비쥬얼스튜디오 코드를 사용하여도 상관 없을까요?
-
미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
마커 색깔변경
안녕하세요 좋은 강의 감사합니다~ㅎㅎ 다름이 아니고 마커를 green색 뿐만 아니라, 다른색깔도 적용해보고 싶습니다. css파일의 .marker를 red;색상으로 바꾸면 전체 마커가 red로 바뀌게 되는데, .marker2 이런식으로 추가하게 되면 index.ejs의 for문은 어떻게 바껴야 하나요? marker2를 다루는 for문이 추가되어야 하는건가요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
username.innerText = user[0].name 부분에서 값이 안불러와 지는 경우 어케해야되나요?
username.innerText = user[0].name 부분에서 값이 화면에 안불러와 지는 경우 어케해야되나요? 콘솔창에서는 TypeError: Cannot read property 'name' of undefined at app.js:20 해당부분이 타입이 맞지않다고 나옵니다.
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
자바스크립트용 중급알고리즘강의언제나오나요
우선 좋은강의 감사합니다 c++로 중급알고리즘강의나왔던데 자바스크립트로는 언제나오는지궁금합니다
-
해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
Destructuring 을 배웠었나요...?
제가 입문부터 강의를 보고 있습니다. 지금 강의를 보면 Destructuring 을 말씀하셨다고 하셨는데.. 어느 강의에서 말씀하셨었나요..? 참고 URL 외엔 설명된 부분이 없는 것 같아서요.. 참고 URL 주신 사이트를 보면 context 처럼 response 를 인자로 무조건? 당연하게 받기 때문에 context.commit => { commit } response.data => { data } 로 표현한게 맞을까요?? 제가 이해한 부분이 맞는 지... 궁금해서 문의합니다.
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
선생님 질문에 대한 신속한 답변 감사합니다! 그런데 ㅠㅠ 슬라이더가 작동이 안되고 이미지가 왜 저렇게 되는지 모르겠어요!
원인을 모르겠어요 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StarUp Mate : App Official Landing</title> <link rel="icon" href="images/logo-favicon.png"> <!---jquery CDN---> <script src="http:s//code.jquery.com/jquery-3.5.1.min.js"></script> <!--Slick slider--> <link rel="stylesheet" href="js/slick/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick/slick.css"> <script src="js/slick/slick.min.js"></script> <!-- Custom CSS & JS --> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="custom.js"></script> </head> <body> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png" alt=""></a> </div> <div class="gnb"> <a href="#none">CEO 인사말</a> <a href="#none">서비스 특징</a> <a href="#none">자주 묻는 질문들</a> <a href="#none">경영비전</a> <a href="#none">사용자 리뷰</a> <a href="#none">앱 사용자 가이드</a> <a href="#none">최신소식</a> </div> </div> </header> <!-- Section : welcome --> <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.png"> <img src="images/slide-welcome-02.png"> <img src="images/slide-welcome-03.png"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em id="typing"></em> </h1> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> <div class="welcome-btns"> <a href="#none" class="btn start">CEO 시작하기</a> <a href="#none" class="btn guide">사용자 가이드</a> </div> </div> <div class="mouse"> <span class="wheele"></span> </div> </section> <!---.ceo-access---> <section class="ceo-access"> </section> <!---.banner---> <section class="banner"> </section> <!---.feature---> <section class="feature"> </section> <!---.vision---> <section class="vision"> </section> <!---.faq---> <section class="faq"> </section> <!---.review---> <section class="review"> </section> <!---.focus---> <section class="focus"> </section> <!---.guide---> <section class="guide"> </section> <!---.news---> <section class="news"> </section> <footer> </footer> </body> </html> css /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); /* Web Fonts - Source Sans Pro */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); /* font-family: 'Source Sans Pro', sans-serif; */ /* Web Fonts - NoonNoo */ @font-face { font-family: 'NEXON Lv2 Gothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset CSS */ * { box-sizing: border-box; } a { text-decoration: none; color: #222; } button, input { outline: none; } h1,h2,h3,h4,h5,h6 { margin-top: 0; font-weight: normal; line-height: 1.5em; } /* Default CSS */ body { font-family: 'NEXON Lv2 Gothic', sans-serif; font-size: 18px; line-height: 1.7em; margin: 0; background-color: #fff; color: #222; } /*########header#########*/ header{ position: fixed; width:100%; z-index: 100; } .header-inner{ width:1300px; margin: auto; overflow: hidden; padding-top: 30px; padding-bottom: 15px; } .logo{ float: left; } .logo img{ margin-top: -7px; } .gnb{ float: right; } .gnb a{ margin: 10px; font-size: 16px; } /* ################# section : welcome ################# */ .welcome { /* border: 5px solid #000; */ height: 90vh; position: relative; } .slideshow {} .welcome-heading { position: absolute; top: 50%; transform: translateY(-50%);/*수직으로 섹션을 기준으로 정중앙에 옴*/ left: 200px; text-align: center; width: 750px; } .welcome-heading span { font-size: 24px; } .welcome-heading h1 { font-family: 'Source Sans Pro', sans-serif; font-size: 60px; font-weight: 600; line-height: 1.2em; margin-bottom: 30px; margin-top: 15px; } .welcome-heading h1 em { display: block; font-style: normal; color: #eb4d4b; } .welcome-heading p { padding: 0 100px; margin-bottom: 50px; } .welcome-btns {} .btn { display: inline-block; width: 160px; padding: 8px; color: #fff; border-radius: 5px; margin: 5px; transition: 0.5s; } .btn:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transform: translateY(-5px); } .btn.start { background-color: #0abde3; } .btn.guide { background-color: #fff; color: #222; } /* Mouse Wheele */ .mouse { border: 2px solid #fff; position: absolute; width: 32px; height: 45px; border-radius: 30px; bottom: 100px; left: 250px; } .wheele { position: absolute; width: 4px; height: 15px; background-color: #fff; border-radius: 5px; left: 12px; top: 10px; animation: wheele 1.5s linear infinite; } @keyframes wheele { 0% { top: 10px; } 50% { top: 20px; } 100% { top: 10px; } } /* ▦▦▦▦▦▦▦▦▦ Slick Custom CSS ▦▦▦▦▦▦▦▦▦ */ .slideshow .slick-arrow { border: 1px solid #000; display: none !important; } .slideshow * { outline: none; } jquery $(function(){ /* Slick Slider - Welcome */ $('.slideshow').slick({ infinite: true, dots: false, autoplay: true, autoplaySpeed: 2000, fade: true, speed: 1000, pauseOnHover: false });
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
자막...
질문은 아니고 이번 강의 안에 들어가는 자막에 유독 오타도 많고 크기가 커서 수정이 필요해보입니다.
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
이제는 자동링크가 모두 되는것 같아요.
파스칼, 케밥 모두 링크로 연결되어보여지는데 파스칼 유지해도 좋은것 인가요?
-
미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
"안전한 합성에 대해" 강의 관련해서 질문드립니다
먼저, 덕분에 함수형 프로그래밍에 조금씩 친숙해지고 있어서 너무 감사합니다. 다름 아니라, "안전한 합성에 대해" 강의 관련해서 궁금한 점이 있어서 질문드립니다~ "안전한 합성에 대해" 강의에서 에러가 터지지 않게 배열로 만들어 안전하게 합성한다고 하셨고 예전 feConf에서 유인동님의 "ES6+ 비동기 프로그래밍과 실전 에러 핸들링" 영상에서는 에러를 뿜어내는게 좋다고 말씀하셨는데, 에러를 뿜는게 좋으면, map을 이용해서 만드는 의미가 어떤게 있나 라는 궁금증이 들더라구요. 어떤 맥락에서는 에러를 뿜는게 좋고, 어떤 맥락에서는 map을 이용해서 에러를 뿜지 않는게 좋은지 궁금합니다.
-
해결됨애플 웹사이트 인터랙션 클론!
비디오에 맞춰 텍스트가 나타나는 타이밍 질문입니다
안녕하세요 선생님 강의 잘 듣고있습니다!! 다름이 아니라 스크롤 섹션 2의 경우에는 비디오 타이밍에 맞춰 텍스트가 나오는데 그 타이밍 설정은 직접 콘솔로 scrollRatio 값을 확인해가면서 정하면 되는걸까요??
-
해결됨모던 자바스크립트(ES6+) 기본
[강의자입니다] 브라우저 디버거 창의 오른쪽에 let, const 변수 표시
강의를 만드는 시점에는 let 변수와 const 변수가 브라우저 디버거 창의 오른쪽에 표시되지 않았으나, 2021.02.13 기준, 질문을 받고 확인해보니 표시됩니다. 변경되었습니다.표시되더라도 변수 앞에서 호이스팅으로 let 변수, const 변수를 사용할 수 없으며 에러가 발생합니다만, 블록에 작성된 변수를 표시하여 사용의 편리를 제공하기 위한 것으로 생각됩니다. 바로 아래 질문에 화면 캡처가 있으니 참조하기 바랍니다.
-
해결됨애플 웹사이트 인터랙션 클론!
스크롤 이벤트 시작하는 위치 질문입니다
안녕하세요 선생님 강의 잘 듣고 있습니다. 다름이 아니라 스크롤 이벤트를 시작하는 위치 구하는 부분에서 이벤트가 실행될 scroll-section의 offsetTop으로 구하는 것과 이벤트가 실행될 scroll-section 위에 존재하는 scroll-section들의 높이 합으로 구하는 것이 차이가 있는지 궁금합니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청드립니다~
인프런 아이디 : itsonlyreport@gmail.com인프런 이메일 : itsonlyreport@gmail.com깃헙 아이디 : itsonlyreport@gmail.com깃헙 Username : itsonlyreport 입니다. 감사합니다~
-
해결됨타입스크립트 입문 - 기초부터 실전까지
compile과 transcompile
수업 내용에서 보면 compile이라고 하셨는데, 또 어디서는 transcompile이라는 용어를 사용하더라구요 두가지의 차이점과 어떤게 맞는건지 알고싶습니다 판교님!
-
미해결자바스크립트 비기너: 튼튼한 기본 만들기
console.log((5*10 % (2*2.3*10))/10); 에서 2를 왜 곱하나요?
[3:28] 강의에서 console.log((5*10 % (2*2.3*10))/10); 와 console.log((5*10 % (2.3*10))/10); 의 결과가 모두 0.4가 나옵니다. 제 생각엔 2를 곱하지 않아야 할 것 같은데요, 어차피 나머지를 구하는 것이니 2를 곱해도 결과가 같을 것이기 때문에 곱하신 건가요?
