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(' 숫자를 먼저 입력하세요. ') } };그냥 이렇게 하면 안되는 이유가 궁금합니다. 

안녕하세요 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 연습문제를 더 풀어보고 싶은데 연습문제만 있는 곳이 있나요?

안녕하세요! Nginx 적용 강의까지 수강한 이후 개발용 컨테이너를 실행하기 위해 docker-compose -f docker-compose.dev.yml up 명령어를 입력하였는데 다음과 같은 에러가 발생했습니다.개발용과 배포용 도커 분리하기 에서도 개발용 컨테이너를 실행하면 잘 됐었습니다. 이후 Nginx 적용하기까지 하는데도 강의와 책을 따라가며 잘 진행하여 문제없이 끝마쳤습니다. 왜 이러한 에러가 발생했는지 궁금합니다. +) 혹시나 제 코드에 무엇인가 오타가 있을까봐 수용님의 깃허브에 올라온 코드와 일일히 비교하며 찾아봤지만, 코드에 오타는 발견하지 못하였습니다.아래 사진은 Docker-Desktop에서 컨테이너와 이미지, 저장소를 캡쳐한 사진입니다.

깃허브에 코멘트를 남기긴 했는데 여기 게시판에도 남깁니다.인프런 아이디 : @sangho235인프런 이메일 : isking235d@gmail.com깃헙 아이디 : isking235@hanmail.net깃헙 Username : sangho || isking235 감사합니다.

안녕하세요 선생님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#  

 안녕하세요 수업 잘따라 가고있었습니다만2.5 버전 사용시에 계속 400 에러가 떠서 질문드립니다.질문글들을 저보다 빨리 수강을 하신분들은 잘되시는것같은데요.저는 계정을 생성한지 이틀을 기다려도 계속 400 에러가떠서 구글링을 좀해보니 더이상 새로 생성된 계정에는 2.5버전 api 키를 주지않는것같더라구요.3.0버전은 구독제이기때문에 구독하지않은 계정에서는 작동 하지않구요 ㅠ마지막 강의만 남았는데 여기서 진행이 막히니 슬프네요 ㅠ 혹시 대안방안 같은건 있을까요?

페이지 구현- 홈(/) 파트에서 17:00분 정도에 useEffect를 사용하여 data를 콘솔에 찍어보는데 그전까지는 home component까지는 더미데이터가 잘 받아와졌는데 저부분에서 콘솔에서 이렇게 빈배열로 넘어와져요계속 코드를 몇번씩이나 강의돌려보고 검토했지만 도저히 제눈엔 보이지않아 강사님께 질문드립니다.깃허브에 코드올려놨습니다. 한번 검토해주시면 감사하겠습니다!!https://github.com/eunsoo-cho/emotion-Diart.git

■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- 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()이 부분이 잘못된것 같은데 아무리 고쳐보고 검색해봐도 작동이 되지 않아 이렇게 여쭤 봅니다.

안녕하세요 소셜로그인 강의 듣다가 질문드립니다.소셜로그인을 했을때 네트워크에는 쿠키가 들어오는데 어플리케이션에는 쿠키가 들어가지 않더라구요.검색해보니 credential 문제인 것같아서 아래와 같이 추가 시켜줬는데도 안들어왔습니다.밑에 @Get부분에도 추가시켜주려고 했는데 방법을 잘모르겠습니다.어떻게 하면 쿠키가 들어오게 할 수있을까요??

 안녕하세요. 현직 QA 입니다. 제가 프로젝트 끝난 이후에 QA쪽을 단순 테스트에만 그치는 것이 아니라, 자동화 테스트쪽으로 영역을 좀 더 넓히고 싶은데, 자동화 테스트를 하려면 코딩도 할 줄 알아야 한다고 들었습니다.그래서 드리는 말씀인데 QA로서 자동화 테스트를 하기 위한 용도로 이 자바스크립트 강의를 들어도 상관없나요? 그 중 저는 UI쪽으로 자동화 테스트를 하고 싶습니다. 혹시 현 자바스크립트 강의 외에도 HTML/CSS 이전 강좌도 있나요?

/* * 자신의 바로 앞 수보다 큰 수만 출력하는 프로그램을 작성하세요. 단, 첫 번째 수는 무조건 출력한다. */ function solution(integers:number[]): number[] { return integers.filter((int, index) => { if (index === 0) { return int; } if (int > integers[index - 1]) { return int; }; }); } console.log(solution([7,3,9,5,6,12]));

 https://productive-printer-b81.notion.site/GSAP-Basic-4c37387fe8254db4a7d14c883f8baa2d노션 주소가 이거 맞나요? 환경설정 파트 > 수업 자료 라고 되어 있는 거 클릭하면 이런 주소가 나옵니다. ..제대로 된 주소 찾느라고 다섯개 강의를 다 다시 봤는데... 흠...진도를 나갈 수가 없어요. ㅠ.ㅠ확인부탁드립니다.

안녕하세요. 판다님강의 열심히 듣고 있는 수강생입니다!결과 부분 진행중인데요~setTimeout안에 select를 넣어서qIdx번째 질문에서 클릭한 답이 select 배열데이터에 담기는데어째서 클릭한게 idx로 담기게 되는걸까요...? ㅠbutton을 클릭했을 때 addEventListener로 다음 질문으로 넘어가는건 알겠는데클릭한 답변이 왜 idx에 담기게 되는지 잘 이해가 안되어서요 ㅜㅜ그리고 button을 html에 안만들고 js에서 createElement로 만드신 이유가 따로있을까요..?  

indexOf(), lastIndexOf()를 활용한 코드 작성 문제 풀이입니다. 부족하거나 틀린점이 있다면 알려주세요!이런식으로 하는게 맞는지 문제해결방식이 헛갈리네요...!//출생날짜를 변수로 저장 var birth = "19971212"; //나이가 27살인가요? var k = birth.indexOf(1997); //출생에 제일 앞에 위치하는 년도 4자리는 앞에서부터 구해야 정확하니 indexOf를 사용하여 변수 k에 저장해준다 if(k == 0){ //년도가 인덱스 0번째로 확인된다면 원하는 년도 출생임으로 27세가 된다. console.log("27세 입니다."); }else{ //그렇지 않을 경우 다른 나이로 판단한다. console.log("27세가 아닙니다."); } //생일이 12월인지 구하시오. var i = birth.lastIndexOf(12, 4); //생일은 년도보다 뒤에 있기 때문에 lastIndexOf를 사용하되 날짜와 혼동 될 수 있으므로 2번째 파라미터를 활용해 월에 해당하는 위치부터 시작하도록 설정한다. console.log(i); if(i == 4){ //인덱스 4번째가 월에 해당하는 위치이기 때문에 해당 위치로 확인되면 12월생임을 알 수 있다. console.log("12월생입니다."); }else{ //그렇지 않을 경우 다른 월로 판단한다. console.log("12생이 아닙니다."); }

안녕하세요 강의 잘 듣고있습니다! 아래 퀴즈19에서 4번하다가 질문드립니다.4-a은 context.req에서 id빼와서 find한 다음에 db에 패스워드 변경하는 식으로 하면 될 것 같은데, 4-b와 4-c가 잘 이해가 안갑니다. 4-b는 현재 로그인한 유저를 조회하는 api를 만들라는 것으로 이해했는데 로그인한 정보를 어디서 가져와야하는지 잘 모르겠네요.. 4-c는 로그인한 유저를 찾은뒤 강제로 로그아웃 시키라는 것인가요? 제가 문제를 제대로 이해한게 맞는지, 어떤 식으로 접근해야 할지 알려주시면 감사하겠습니다!

안녕하세요 도저히 찾아봐도... 찾을 수가 없고 답답한 나머지 멘토님께 여쭈어보려고 합니다.현재 저는 백엔드 코스와 프런트엔드 코스를 둘 다 수강 중인 학생입니다. 백엔드 코스에서 공부한 이미지 업로드를 프런트에서 공부한 이미지 불러오기를 적용하던 중 오류가 발생하여 문의드립니다.포스트맨을 통해 이미지 업로드 정상 작동되는 것을 확인하였지만 프런트 엔드와 같이 연결하여 이미지 업로드를 진행 중"This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight\n" 이러한 원인이 설명 부탁 드립니다... ...

안녕하세요.바뀐 버전의 강의에서는 elastic search에 관한 내용이 없는 것 같던데 혹시 없어진 이유가 있나요??

<div id="app"> <p>{{num}}</p> <!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> --> <app-header v-on:pass="logText"></app-header> <app-content v-on:addNum="numPlus"></app-content> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appHeader = { template: '<button v-on:click="passEvent">click me</button>', methods: { passEvent: function () { this.$emit('pass'); } } } var appContent = { template: '<button v-on:click="addNumber">add</button>', methods: { addNumber: function () { this.$emit('addNum'); } } } new Vue({ el: '#app', components: { 'app-header': appHeader, 'app-content': appContent }, methods: { logText: function () { console.log('hi'); }, numPlus: function () { this.num = this.num + 1; } }, data: { num: 10 } });

v-on:하위 컴포넌트에서 발생한 이벤트이름이라고했는데v-on:pass="logText"더라고요근데 아래보면 var appHeader = { template: '<button v-on:click="passEvent">click me</button>', methods: { passEvent: function () { this.$emit('pass'); } } } new Vue({ el: '#app', components: { 'app-header': appHeader }, methods: { logText: function () { console.log('hi'); } }이렇게되어있는데 상위컴포넌트의 메서드이름은 logtext:function(){}하니까logtext인건알겠는데 왜 하위컴포넌트이름이 pass인가요 passEvent아니낙요?