묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결타입스크립트 입문 - 기초부터 실전까지
프로젝트 실행
html 파일에서 Open with Live Server 하면 동작이 안하는데 따로 모 실행해 줘야 되나요?
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
넓이를 %로 적용하긴 어려울까요?
넓이를 높이를 전부 고정값으로만 사용하게 되는데 혹시 해당 부분은 100% 로 채워서는 적용이 어려울까요?모바일까지 고려하게되면 퍼센트로 작업해야할것같은데 뭔가 넓이값이 달라지게 되면 중간중간 요소들 컨트롤이 아에 어려운 구조가 될까요?
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
안녕하세요. 수업 잘 듣고 있습니다. 포트폴리오 관련 질문도 가능할까요?
수강중인데 리뉴얼 되고 굉장히 깔끔해진 것 같은 느낌 받습니다!혹시 포트폴리오 페이지는 AWS로 운영 중 이신걸까요?아니라면 어떤걸로 하고 계신지 궁금합니다!
-
해결됨mongoDB 기초부터 실무까지(feat. Node.js)
$pull 문법에 대한 질문
선생님, 안녕하세요. 좋은 강의 너무 감사드립니다. 답변도 잘해주셔서 너무 감사드려요!이번 강의를 들으면서,Blog.updateMany( { "comments.user": userId }, { $pull: { comments: { user: userId } } } )이 구문이 나왔는데요. 여기서 updateMany의 첫번째 변수인{ "comments.user": userId },는 comments배열의 user가 userId인 객체를 찾는거고,{ $pull: { comments: { user: userId } } }여기서도 comments배열안의 user가 userId인 객체를 찾는 거라서, 사실상 같은거를 두번 써준 게 아닌가요??그래서 const [user] = await Promise.all([ User.findOneAndDelete({ _id: userId }), Blog.deleteMany({ "user._id": userId }), Blog.updateMany( { "comments.user": userId } // { $pull: { comments: { user: userId } } } ), Comment.deleteMany({ user: userId }), ]);이런식으로 updateMany의 두번째 변수만 Blog.updateMany( { "comments.user": userId } // { $pull: { comments: { user: userId } } } ),이런식으로 주석처리를 해줬습니다. 그러자 { "err": "Cast to ObjectId failed for value \"2023-07-03T10:17:04.313Z\" (type Date) at path \"user\" because of \"BSONError\"" }이런 에러가 나왔어요. 그래서 확인해보니, User.findOneAndDelete({ _id: userId }), Blog.deleteMany({ "user._id": userId }), Comment.deleteMany({ user: userId }),updateMany말고 다른 구문들은 다 실행이 됬더라구요. 그래서 user도 삭제되고 블로그도 삭제되고, comment도 삭제되었지만 blog안의 user가 작성한 comment는 pull되지 않아서 그대로 남아있었습니다. 그런데 여기서 궁금한게, promise.all로 묶어서 같이 실행하면, 하나라도 에러가 나면 바로 실행을 중단하고 에러를 배출한다고 배운 것 같은데, Blog.updateMany의 아래 구문인, Comment.deleteMany가 실행됬더라구요. 트랜잭션까지는 아니더라도 updateMany에서 에러가 나면 Comment.deleteMany는 실행이 안될 줄 알았는데, 이거까지 실행된 거를 보면, Promise.all에서는 전부 순서없이 비동기로 동시에?실행되는 걸까요?
-
미해결[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
Prototype(프로토타입) 결과 값이 undefind로 나와서요
제가 처음 접하는 부분이라서 처음부터 쭉 보고 있는데요. 섹션3 - 객체에 대한 모든 것에서 Prototype(프로토타입) 수업을 들으면 진행하는데요. console.log(yuJin._proto_); 출력하면 undefind로 나오고 있는데요. 왜 그런지 알 수 있을까요????[Object: null prototype], {} 이렇게 출력되어야 하는거죠???
-
미해결타입스크립트 입문 - 기초부터 실전까지
union type을 쓸 때 주의할 점에서 질문 있습니다!
'강의에서 let capt: string & number & boolean; 이면 capt가 never type이 된다고 하셨는데 그 이유가 capt가 문자열이면서 숫자이면서 boolean일 수가 없어서이고, 인터페이스에 이 인터섹션 타입을 활용했을 때는 Developer 타입과 Person 타입을 모두 만족해야 하기 때문에 name, age, skill 속성에 모두 접근 가능하다' 이렇게 이해를 했는데 제가 이해한 것이 맞나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
refreshToken
refreshToken 은 DB에 저장을 따로 안해도 되나요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
강사님 다중요소제어 stagger 질문있습니다
vs코드에서 코드를 치면서 보는중인데 새로고침하면 첫번째 요소가 이미 위로 올라간상태로 시작되어서 어색한데 이 부분은 어떻게 해결 가능할까요? duration을 좀 줘보고 해봐도 첫번째 박스는 위로 좀 올라간상태에서 시작하네요 delay: 0.6 정도주면 대충 맞긴한대 delay 주는 방법밖에는 없겠죠? gsap.to(".stage .box", { y: -50, stagger: 0.2, });
-
해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
책 내용중 forEach 부분 질문
const index = value.indexOf(String(number))에서굳이 String을 넣은 이유가 무엇인가요?
-
해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
고차함수 질문
const onClickOperator = (op) => { return () => { if (numOne) { operator = op; $operator.value = op; } else { alert(' 숫자를 먼저 입력하세요. ') } } }; document.querySelector('#plus').addEventListener('click', onClickOperator('+')); document.querySelector('#minus').addEventListener('click', onClickOperator('-')); document.querySelector('#divide').addEventListener('click', onClickOperator('/')); document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));여기서 함수를 고차함수가 아닌 const onClickOperator = (op) => { if (numOne) { operator = op; $operator.value = op; } else { alert(' 숫자를 먼저 입력하세요. ') } };그냥 이렇게 하면 안되는 이유가 궁금합니다.
-
미해결처음 만난 리액트(React)
12강 실습 (섭씨 화씨)
안녕하세요 12강 실습코드를 그대로 작성했는데 섭씨온도를 적었을때 화씨온도로 자동으로 변환되어 나타나지 않습니다. 화씨온도를 먼저 적었을때도 마찬가지고요. 코드 한번 봐주실 수 있나요? 감사합니다. Calculatorimport React, {useState} from "react"; import TemperatureInput from "./Temperatureinput"; function BoilingVerdict(props){ if(props.celsius >= 100){ return <p>물이 끓습니다.</p>; } return <p>물이 끓지 않습니다.</p>; } function toCelsius(fahrenheit){ return ((fahrenheit-32)*5)/9; } function toFahrenheit(celsius){ return (celsius*9)/5+32; } function tryConvert(temperature,convert){ const input = parseFloat(temperature); if(Number.isNaN(input)){ return ""; } const output = convert(input); const rounded = Math.round(output*1000)/1000; return rounded.toString(); } function Calculator(props){ const [temperature, setTemperature] = useState(""); const[scale,setScale]=useState("c"); const handleCelsiusChange = (temperature) => { setTemperature(temperature); setScale("c"); }; const handleFahrenheitChange = (temperature) => { setTemperature(temperature); setScale("f"); }; const celsius = scale === "f" ? tryConvert(temperature, toCelsius):temperature; const fahrenheit = scale === "c" ? tryConvert(temperature, toFahrenheit):temperature; return ( <div> <TemperatureInput scale="c" temperatrue = {celsius} onTemperatureChange={handleCelsiusChange}/> <TemperatureInput scale="f" temperatrue = {fahrenheit} onTemperatureChange={handleFahrenheitChange}/> <BoilingVerdict celsius={parseFloat(celsius)} /> </div> ); } export default Calculator;Temperatureinputconst scaleNames = { c:'섭씨', f:'화씨', }; function TemperatureInput(props){ const handleChange = (event) => { props.onTemperatureChange(event.target.value); }; return ( <fieldset> <legend> 온도를 입력해주세요(단위:{scaleNames[props.scale]}); </legend> <input value={props.temperature} onChange={handleChange} /> </fieldset> ); } export default TemperatureInput;
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
javascript 연습문제
javascript 연습문제를 더 풀어보고 싶은데 연습문제만 있는 곳이 있나요?
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
Nginx 설정 이후 개발용 도커 컨테이너 실행
안녕하세요! Nginx 적용 강의까지 수강한 이후 개발용 컨테이너를 실행하기 위해 docker-compose -f docker-compose.dev.yml up 명령어를 입력하였는데 다음과 같은 에러가 발생했습니다.개발용과 배포용 도커 분리하기 에서도 개발용 컨테이너를 실행하면 잘 됐었습니다. 이후 Nginx 적용하기까지 하는데도 강의와 책을 따라가며 잘 진행하여 문제없이 끝마쳤습니다. 왜 이러한 에러가 발생했는지 궁금합니다. +) 혹시나 제 코드에 무엇인가 오타가 있을까봐 수용님의 깃허브에 올라온 코드와 일일히 비교하며 찾아봤지만, 코드에 오타는 발견하지 못하였습니다.아래 사진은 Docker-Desktop에서 컨테이너와 이미지, 저장소를 캡쳐한 사진입니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청 드립니다.
깃허브에 코멘트를 남기긴 했는데 여기 게시판에도 남깁니다.인프런 아이디 : @sangho235인프런 이메일 : isking235d@gmail.com깃헙 아이디 : isking235@hanmail.net깃헙 Username : sangho || isking235 감사합니다.
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
certbot 실행 오류
안녕하세요 선생님certbot 설치 후 실행을 하면 오류가 납니다.어디서부터 다시 해봐야하는지 모르겠습니다 오류내용Challenge failed for domain hahahagood.shophttp-01 challenge for hahahagood.shopCleaning up challengesSome challenges have failed.IMPORTANT NOTES: - The following errors were reported by the server: Domain: hahahagood.shop Type: dns Detail: no valid A records found for hahahagood.shop; no valid AAAA records found for hahahagood.shoproot@ip-172-31-46-56:/home/ubuntu#
-
해결됨[코드캠프] 훈훈한 Javascript
openweather api 2.5 관련 질문드립니다
안녕하세요 수업 잘따라 가고있었습니다만2.5 버전 사용시에 계속 400 에러가 떠서 질문드립니다.질문글들을 저보다 빨리 수강을 하신분들은 잘되시는것같은데요.저는 계정을 생성한지 이틀을 기다려도 계속 400 에러가떠서 구글링을 좀해보니 더이상 새로 생성된 계정에는 2.5버전 api 키를 주지않는것같더라구요.3.0버전은 구독제이기때문에 구독하지않은 계정에서는 작동 하지않구요 ㅠ마지막 강의만 남았는데 여기서 진행이 막히니 슬프네요 ㅠ 혹시 대안방안 같은건 있을까요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
dummyData 받아오는 오류가 있습니다.
페이지 구현- 홈(/) 파트에서 17:00분 정도에 useEffect를 사용하여 data를 콘솔에 찍어보는데 그전까지는 home component까지는 더미데이터가 잘 받아와졌는데 저부분에서 콘솔에서 이렇게 빈배열로 넘어와져요계속 코드를 몇번씩이나 강의돌려보고 검토했지만 도저히 제눈엔 보이지않아 강사님께 질문드립니다.깃허브에 코드올려놨습니다. 한번 검토해주시면 감사하겠습니다!!https://github.com/eunsoo-cho/emotion-Diart.git
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2)
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 해당 강의 응용하다 막히는 부분이 있어 질문 드립니다. 이 강의에 부분을 메뉴에서도 활용 할 수 있을것 같아 아래와 같이 만들어 보았습니다. HTML <header> <div class="gnb"> <div class="search_menu"> <div class="dropdown"> <div class="nav1 title">MENU1-1</div> <ul class="sub_nav1 sub_nav"> <li><a href="#none">MENUI1-1</a></li> <li><a href="#none">MENUI1-2</a></li> <li><a href="#none">MENUI1-3</a></li> <li><a href="#none">MENUI1-4</a></li> </ul> </div> <div class="dropdown"> <div class="nav2 title">MENU2-1</div> <ul class="sub_nav2 sub_nav"> <li><a href="#none">MENU2-1</a></li> <li><a href="#none">MENU2-2</a></li> <li><a href="#none">MENU2-3</a></li> <li><a href="#none">MENU2-4</a></li> </ul> </div> <div class="dropdown"> <div class="nav3 title">MENU3-1</div> <ul class="sub_nav3 sub_nav"> <li><a href="#none">MENU3-1</a></li> <li><a href="#none">MENU3-2</a></li> <li><a href="#none">MENU3-3</a></li> <li><a href="#none">MENU3-4</a></li> </ul> </div> </div> </div> </header>CSS@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); * { padding: 0; margin: 0; list-style: none; font-size: 10px; } a{ text-decoration: none; } header .search_menu { background-color: #9c9388; display: flex; } header .selectbox { position: relative; border-right: 1px solid #c9c1b7; } header .selectbox:last-child{ border:0; } header .selectbox .select{ width: 88px; height: 35px; padding:10px 12px; font-size: 1.2rem; } header .selectbox:last-child .select { width: 100px; } .dropdown { width: 8.4rem; cursor: pointer; position: relative; border-right: 1px solid #c9c1b7; } .nav1, .nav2, .nav3 { background-size: 9px; background-color: #9c9388; color: #fff; padding: 1.2rem 1rem;} .nav1::after, .nav2::after, .nav3::after{ content: '\f107'; font-family: fontawesome; position: absolute; right: 10px; font-size: 12px; line-height: 14px; } .sub_nav1, .sub_nav2, .sub_nav3 { position: absolute; list-style: none; padding:0; margin: 0; left: 0; top:100%; width: 100%; display: none; z-index: 100; } .sub_nav1 li a, .sub_nav2 li a, .sub_nav3 li a { color: #fff; display: block; padding: 7px; background: #9c9388; border-bottom: 1px solid #aaa; } .sub_nav1 li a:last-child, .sub_nav2 li a:last-child, .sub_nav3 li a:last-child { border: none; }JS 1 (정상작동) (개별적으로 class를 모두 지정하였습니다.)$('.menu li').click(function(){ $(this).children('.sub_menu').slideDown() }) $('.menu li').click(function(){ $(this).children('.sub_menu').slideUp() }) $('.nav1').click(function(){ $('.sub_nav1').stop().slideToggle() $('.sub_nav2').stop().slideUp() $('.sub_nav3').stop().slideUp() $(this).find('>ul').toggle() }) $('.sub_nav1 li').click(function(){ $(this).parent().stop().slideUp() $('.nav1').text($(this).text()) }) $('.nav2').click(function(){ $('.sub_nav2').stop().slideToggle() $('.sub_nav1').stop().slideUp() $('.sub_nav3').stop().slideUp() // $(this).find('>ul').toggle() }) $('.sub_nav2 li').click(function(){ $(this).parent().stop().slideUp() $('.nav2').text($(this).text()) }) $('.nav3').click(function(){ $('.sub_nav3').stop().slideToggle() $('.sub_nav1').stop().slideUp() $('.sub_nav2').stop().slideUp() // $(this).find('>ul').toggle() }) $('.sub_nav3 li').click(function(){ $(this).parent().stop().slideUp() $('.nav3').text($(this).text()) })JS 2 (문제의 JS) (JS1와 같은 매커니즘 코드를 줄여 작성했습니다.)//메뉴 토글 $('.title').click(function(){ $(this).siblings('.sub_nav').slideUp() $(this).next().stop().slideToggle() }) //메뉴 text 변경 $('.sub_nav li').click(function(){ $(this).parent().stop().slideUp() $(this).parent().siblings('.title').text($(this).text()) })이렇게 만들어서 메뉴1-1을 누르면 2-1과 3-1 이 들어가야하는데 3개가 모두 개별적으로 펼쳐집니다.JS 1 처럼 class를 모두 직접 지정하면 정상적으로 되는데 너무 코드가 지저분해서 간단하게 지정을 하려고 작동을 확인 한 뒤 JS 2를 만들었는데 메뉴 text 변경 되는건 잘 되는데 메뉴 토글에서 막혔습니다.$(this).siblings('.sub_nav').slideUp()이 부분이 잘못된것 같은데 아무리 고쳐보고 검색해봐도 작동이 되지 않아 이렇게 여쭤 봅니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
application에 쿠키가 안들어는 문제
안녕하세요 소셜로그인 강의 듣다가 질문드립니다.소셜로그인을 했을때 네트워크에는 쿠키가 들어오는데 어플리케이션에는 쿠키가 들어가지 않더라구요.검색해보니 credential 문제인 것같아서 아래와 같이 추가 시켜줬는데도 안들어왔습니다.밑에 @Get부분에도 추가시켜주려고 했는데 방법을 잘모르겠습니다.어떻게 하면 쿠키가 들어오게 할 수있을까요??
-
해결됨자바스크립트 ES6+ 기초 핵심 문법
QA 자동화 테스트할 때 자바스크립트와의 연계성
안녕하세요. 현직 QA 입니다. 제가 프로젝트 끝난 이후에 QA쪽을 단순 테스트에만 그치는 것이 아니라, 자동화 테스트쪽으로 영역을 좀 더 넓히고 싶은데, 자동화 테스트를 하려면 코딩도 할 줄 알아야 한다고 들었습니다.그래서 드리는 말씀인데 QA로서 자동화 테스트를 하기 위한 용도로 이 자바스크립트 강의를 들어도 상관없나요? 그 중 저는 UI쪽으로 자동화 테스트를 하고 싶습니다. 혹시 현 자바스크립트 강의 외에도 HTML/CSS 이전 강좌도 있나요?