묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결자바스크립트 비기너: 튼튼한 기본 만들기
Object type의 toString에 대해서
안녕하세요 강의를 듣다가 궁금증이 생겨서 질문 드리게 되었습니다. Built-in Object타입의 toString의 경우 어떤식으로 사용 할 수 있나요? 제가 테스트 해본 코드는 var object = {1: 123}; console.writeline(object.toString()); 이었습니다만 그 결과가 [object object]로 나왔습니다. 예상으로는 property의 이름이나 값을 출력해줄 것이라 생각했는데 단지 []괄호와 object만 출력이 되어 내부가 어떻게 돌아가는지 잘 이해가 가지 않아 질문드리게 되었습니다. 감사합니다.
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
기초적인 질문이라 부끄럽지만 질문 드립니다
안녕하세요, html, css는 잘 알지만 javascript는 이 강의로 처음 접해보기에 강의 진행에 어려움을 느껴 질문 드립니다. 강의 중 const windowEvent = () => { // 코드 내용 }; 위와 같은 형태가 나오는데요, 이게 함수를 만드는 문법인건가요? function 함수이름() { } 과 같은 형태는 자주 봤는데 처음 보는 형태라 질문 드립니다. 더불어 제가 쓰는 에디터에서 자꾸 노란줄이 생기는데요 (visual studio code 사용중입니다) 이것과 관련해 초기에 세팅 작업이 필요한건가요? 또 7강 진행 도중 this.el.parentNode.style.transform = 'translateX(${this.movex}px)' 부분이 동작하지 않아 this.el.parentNode.style.transform = 'translateX('+this.movex+'px)'; 위와 같이 바꿨더니 동작하는데, ${}가 어떤 것인지 설명 부탁드립니다. 좋은 강의에 부족한 실력이지만 열심히 따라가려고 노력하고 있습니다. 답변 기다리겠습니다. 감사합니다.
-
미해결
카테고리 수정
문제발생 URL : https://denhobby.com/ 발생 문제 현재 카페24 스킨을 구매를 해서 수정작업 중인데 현재 카테고리 박스 위치 수정을 할라고 css를 수정을 할라고 하는데 수정이 안되서 문의를 드립니다. css 고수님들 부탁 드립니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
모달창 관련 질문입니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. vue transition을 활용하여 강사님 강의 내용과 동일하게 Modal을 적용하였습니다. 그런데 modal창이 처음 등장할 때 애니메이션 효과는 적용되지 않네요. 강사님 코드는 다른가해서 클론받아 확인해봤는데, 마찬가지로 모달창이 처음 등장했을 때 애니메이션은 적용되지 않은상태입니다. 이 부분 관련해서 확인해주실수 있으실까요?
-
미해결인터랙티브 웹 개발 제대로 시작하기
firefox에서 backface-visibility: hidden; 이 이상하게 먹힙니다.
안녕하세요. firefox에서 카드에 마우스 호버시 F의 글자가 남아 B와 겹칩니다. 아래 사진 첨부합니다. ie용으로 만든 파일은 정상 작동을 하나, 사파리에서 해결했던 것과 같이 밴더프리픽스만 먹였을 때는 해결이 안되는 것으로 보입니다. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style 와 https://developer.mozilla.org/ko/docs/Web/CSS/backface-visibility 에서 브라우저 호환성을 확인했을 때 firefox에서 preserve-3d, backface-visibility 두 가지 모두 사용할 수 있는 속성으로 나와있는데 왜 안되는걸까요??
-
미해결Vue.js 시작하기 - Age of Vue.js
복습 정도에 대해서 궁금합니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 학습은 정도로 가는것이 맞다고 생각하지만, 제 개인적인 상황은 비교적 짧은시간 내에 이직을 목적으로 하고 있습니다. 공부시간도 일과 병행하다보니 많이 나는 상황은 아닙니다 ㅠ 복습을 할때 안보고도 칠 수 있는정도로 외우면서 원리까지 다 익혀야 하는게 맞는건지, 아니면 원리만 머리속에 이해하고 넘어가도 되는건지 복습을 어느정도까지 해야하는지 좀 감이 안옵니다. 사실 시간이 제한적이다보니 효율적인 방법을 자꾸 찾게 되는것 같습니다. 강사님 조언좀 부탁드립니다!
-
해결됨코어 자바스크립트
화살표함수 this 바인딩 관련 질문 드립니다.
안녕하세요, 선생님. this 강의를 듣고 아래와 같이 this 바인딩 코드를 작성하였는데, 함수를 실행시킨 곳에서 this 바인딩이 되서 전역에 있는 name 변수 값인 outer가 출력이 될 줄 알았는데 전혀 예상과 다르게 undefined가 출력이 되는데요. 왜 그런지 궁금합니다. const name = 'outer'; function test1() { const name = 'test1'; console.log(this.name); } const test2 = () => { const name = 'test2'; console.log(this.name); }; test1(); // undefined test2(); // undefined
-
미해결타입스크립트 입문 - 기초부터 실전까지
[질문아님] index.ts 노란색 밑줄 안뜨는 분들 참고하세용
2021-09-12 기준 영상과 동일하게 실습하면 밑줄이 안뜹니다. 먼저, Ctrl + Shift + P 키를 누르고 'settings'를 입력하시면 아래와 같은 화면이 나옵니다. 여기서 기본 설정: 설정 열기(JSON) 들어가시고 안에 내용을 추가해주세요. { ..., // 기존에 있던 내용 아래에 추가 "eslint.workingDirectories": [ {"mode": "auto"} ] } 그리고 저장 하시면 밑줄이 뜹니다. 한 프로젝트 내부에서 여러 개의 tsconfig.json을 사용하는 것을 IDE가 잘 인식하지 못하는 게 원인인 것 같습니다. 도움되셨으면 좋겠네요!
-
미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
return this에 대해서 (재업로드)
1-vanilla 폴더에서 View.js / FormView.js / TabView.js / KeywordView.js (상속 받는 HistoryView.js) 등이 갖고 있는 메서드 중에서 return this를 하는 메서드가 있는데요, return this를 하는 이유는 무엇이고, return this를 함으로써 어떻게 사용되는 것인지, 만약 return this를 하지 않는다면 어느 부분에서 어떤 에러가 발생하게 되는 것인지 명쾌하게 이해가 되지 않습니다. ResultView에서는 return this를 하지 않는 것은 또 왜인가요? 추가) 각 메서드 내부에서 console.log를 찍어보기는 했는데요, View.js의 init() 메서드 안에서 찍어본 console.log(this)는 Form, Tab, Keyword 등의 View객체를 가리키는 것 같긴 해요. 다른 ...View.js 파일에서 this를 쓰는 메서드마다 전부 console.log를 찍어보더라도 this에 대한 개념이 잘 와닿지가 않습니다. 답변 부탁드리겠습니다!
-
미해결코어 자바스크립트
17분 부분부터?
마지막에 설명해주시는 부분에 잘 모르겟어서 그런데요 inner contxt에서 a를 탐색할 때 a가 없으면 outer함수의 outerEnvironmentReference를 참조해서 거기에도 없으면 전역 컨텍스트를 참조해서 a를 어떻게는 찾아야 하는게 아닌가요? 근데 또 출력을 해보면 선생님 말씀대로 undefined가 잘 출력이 되서 ... outer함수에 처음 접근한 때에도 console.log(a)를 출력 하려는데 없어서 전역 컨텍스트에서 a를 찾아서 출력해 주잖아요? 근데 inner 컨텍스트는 다른건지 모르겟습니다. ㅠㅠ
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
overflow와 슬라이드 무빙
예제로 학습한 잔재미코딩 사이트에서 class-list의 overflow 속성을 none으로 하였는데요. 이렇게 되면 제가 설정한 roadmap-title-container의 영역을 침범하게됩니다. 그렇다고, hidden으로 설정하자니, 슬라이드가 이동하여도 카드가 가려진 상태로 이동하게되는데요... 슬라이드가 이동할때, hidden 속성을 유지하면서 가려졌던 카드가 다시 보일수 있게 하는 방법이 있을까요?
-
해결됨[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
result구현 오류... 질문드립니다.
두가지 오류가 있는거같습니다. const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 이런식으로 선언 했지만, +=연산을 돌린후 (안되길래 깃헙의 코드 그대로 복붙을 했음에도,,) 문자취급이 되어서 위 사진처럼 됩니다. 또한, vlet point = calResult(); const resultName = document.querySelector('.resultname'); resultName.innerHTML = infoList[point].name; 이코드에서도 name 프로퍼티를 찾을수 없다고 합니다.. 이유를 잘 모르겠습니다.. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <link rel="stylesheet" href="./css/animation.css"> <link rel="stylesheet" href="./css/default.css"> <link rel="stylesheet" href="./css/main.css"> <link rel="stylesheet" href="./css/qna.css"> <link rel="stylesheet" href="./css/result.css"> </head> <body> <div id="container"> <section id="main" class="mx-auto mt-5 py-5 px-5 mb-5"> <h1>십이간지로 알아보는 연애유형</h1> <div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto"> <img src="./img/main.png" alt="mainImage" class="img-fluid"> </div> <p>Lorem ipsum dolor sit amet</p> <button type="button" class="btn btn-outline-danger mt-4" onclick="js:start()">시작하기</button> </section> <section id="qna"> <div class="status mx-auto mt-5"> <div class="statusBar"> </div> </div> <div class="qBox mt-5 mx-4 mx-auto mb-5"> </div> <div class="answerBox"> </div> </section> <section id="result"> <h1>당신의 결과는...!</h1> <div class="resultname"> </div> <div class="resultImg col-lg-6 col-md-8 col-sm-10 col-12 mx-auto"> </div> <div class="resultDesc"> </div> <p>Lorem ipsum dolor sit amet</p> <button type="button" class="btn btn-outline-danger mt-4" onclick="js:start()">share</button> </section> </div> <script src="./js/data.js" charset="utf-8"></script> <script src="./js/start.js" charset="utf-8"></script> </body> </html> ㅇ const main = document.querySelector("#main"); const qna = document.querySelector("#qna"); const listrange = 12; const result = document.querySelector("#result"); const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; function calResult(){ console.log(select); var result = select.indexOf(Math.max(...select)); console.log(result); return result; } function setResult(){ let point = calResult(); const resultName = document.querySelector('.resultname'); resultName.innerHTML = infoList[point].name; var resultImg=document.createElement("img"); const imgDiv=document.querySelector("#resultImg"); var imgURL='img/image-'+point+".png"; resultImg.src=imgURL; resultImg.alt=point; imgDiv.appendChild(resultImg); const resultDesc = document.querySelector(".resultDesc"); resultDesc.innerHTML = infoList[point].desc; } function goResult() { qna.style.WebkitAnimation = "fadeOut 1s"; qna.style.Animation = "fadeOut 1s"; setTimeout(() => { result.style.WebkitAnimation = "fadeIn 1s"; result.style.Animation = "fadeIn 1s"; setTimeout(() => { qna.style.display = "none"; result.style.display = "block"; }, 450); }, 450); console.log(select); calResult(); setResult(); } function addAnswer(anstext, qIdx, idx) { var a = document.querySelector(".answerBox"); var answer = document.createElement("button"); answer.classList.add("answerList"); answer.classList.add("py-3"); answer.classList.add("my-3"); answer.classList.add("mx-auto"); answer.classList.add("fadeIn"); a.appendChild(answer); answer.innerHTML = anstext; answer.addEventListener("click", function() { select[qIdx] = idx; console.log(idx) var children = document.querySelectorAll(".answerList"); for (let i = 0; i < children.length; i++) { children[i].disabled = true; children[i].style.WebkitAnimation = "fadeOut 0.5s"; children[i].style.Animation = "fadeOut 0.5s"; } setTimeout(() => { var target = qnaList[qIdx].a[idx].type; for(let i = 0; i < target.length; i++){ select[target[i]] += 1; } // for(let i = 0; i < target.length; i++){ // select[target[i]] += 1; // } for (let i = 0; i < children.length; i++) { children[i].style.display = 'none' } goNext(++qIdx); }, 450); }, false); } function goNext(qIdx) { if (qIdx === listrange) { goResult(); return; } var q = document.querySelector(".qBox"); q.innerHTML = qnaList[qIdx].q; for (let i in qnaList[qIdx].a) { addAnswer(qnaList[qIdx].a[i].answer, qIdx, i); } var status = document.querySelector(".statusBar") status.style.width = (100 / listrange) * (qIdx + 1) + '%' } function start() { main.style.WebkitAnimation = "fadeOut 1s"; main.style.Animation = "fadeOut 1s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 1s"; qna.style.Animation = "fadeIn 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block"; var qIdx = 0; goNext(qIdx); }, 450); }, 450); }
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
야구게임에서 궁금한점이 있습니다.
야구게임에서 무작위 숫자를 만들 때 Math.random()을 사용해서 0이상 1미만의 숫자를 생성하는 부분에서 Math.random() * 9 + 1 을 하는 이유가.. Math.random() * 10을 하면 나중에 반올림을 했을 때 0이 포함이 되기 때문에 0을 없애기 위해서 Math.random() * 9 + 1을 해 주는건가요? Math.random() * 10
-
미해결Vue.js 시작하기 - Age of Vue.js
root 컴포넌트에서 undefined로 받습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 안녕하세요. 제가 진행한 부분은 root 컴포넌트에 데이터를 event발생하여 전달하는 부분까지 진행했습니다. app-content에서는 num = 10이 잘 등록되었는데, 버튼 이벤트를 발생할 때는 root 컴포넌트에는 undefined로 인식하여 이 값을 대입하는 현상이 있습니다. 오타도 안 난 듯 한데.. 어디서 문제인지 갑이 잡히지 않습니다. ㅠㅠ 에러 : Property or method is not defined on the instance but referenced during render 소스 : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Vue 외부 스크립트 호출 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <app-header></app-header> <app-content v-on:pass="resultNum(value)"></app-content> </div> <script> Vue.config.devtools = true; // 개발도구 사용여부(이건 제가 별도로 찾아서 적용했습니다.) var appHeader = { template: '<div>header</div>' }; var appContent = { // passNum 이라는 버튼을 클릭했을 때 appHeader로 데이터를 전달하는 방법 // → Root 컴포넌트로 event 발생시키고 appHeader로 props 전달한다. // 이때 Root 컴포넌트에서 하위 컴포넌트로 props를 실행하려면 데이터를 선언해야 한다. template: '<div>content' + '<button v-on:click="passNum">header로 전달</button>' + '</div>', methods: { passNum: function() { this.$emit('pass', 10); } } }; // root 컴포넌트 new Vue({ el: '#app', components: { 'app-header': appHeader, 'app-content': appContent }, data: { num: 0 }, methods: { resultNum: function(value) { // num 받기 this.num = value; } } }); </script> </body> </html>
-
해결됨자바스크립트 제대로 배워볼래?
함수 질문합니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) mdn 문서보면 저런식으로 써져있는데 [, [, [[[]]] 이런건 무슨 기호인가요?
-
해결됨자바스크립트 제대로 배워볼래?
mdn 문서를 봤는데 특이한게 있어서요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 이런식으로 쓰여져 있는데 [, [, ?? 이건 무슨뜻일까요?ㅠㅠ 중첩구조로 되있는데
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
blog폴더에 views.py에 class PostList(Listview) 내용과 post_list.html에 변수명이 틀린거에 대한 의문
view.py 에서 model = Post를 대입한 부분은 이해가 가는데 post_list.html에서 포문을 돌릴때 post_list라고 하는거는 변수명이 안맞는데 잘 돌아가는거에 대한 의문점이 듭니다.
-
미해결자바스크립트 비기너: 튼튼한 기본 만들기
lastIndexOf 코드 2번째 parameter 질문
lastIndexOf 2번째 parameter의 값이 0보다 작을 경우 무조건 -1을 반환한다는 것처럼 기술이 되어있어서 그런줄 알았는데 lastIndexOf도 indexOf처럼 두번째 parameter 값이 음수가 되면 0부터 검색한다는 개념으로 만약 value[0]에 1번째 parameter에 입력한 값이 존재 한다면 0으로 출력이 되는 부분이 있는 것 같습니다 이게 맞나요?
-
미해결자바스크립트 중고급: 엔진 핵심
정리시간 입니다.
var book = { member: {name: 100}, point: {value: 200} }; function show(param){ for (var type in param){ typeof param[type] === "object" ? show(param[type]) : console.log(type + ":", param[type]);} }; show(book); // name: 100 // value: 200 ``` 1. show(book); - 마지막 줄에서 show(book)를 호출하면서 - book 오브젝트를 파라미터 값으로 넘겨줍니다. 2. for (var type in param){...} - for-in으로 파라미터로 받은 오브젝트 전개 3. typeof paam\[type] === "object" ? show(param\[type]) : console.log(type + ":", param\[type]); 4. param\[type] 타입이 "object" 이면 - show()를 호출 - 자신을 호출하면서 param\[type]을 넘겨줍니다. - book\["member"]이므로 {name: 100}이 넘어 갑니다. 5. param\[type] 타입이 "object"가 아니면 - member: {name: 100}에서 {name: 100}을 읽은 것이므로 값을 출력합니다. --- ### \[정리시간\] ```javascript debugger; // 주어진 데이터 var member = { Jan: {item: {title: "JS", amount: 100}, point: [10, 20, 30]}, Feb: {item: {title: "JS", amount: 200}, point: [40, 50, 60]} }; // 배열이면 누적되는 값이 저장되는 변수 선언 // 계산을 해야하므로 단순히 선언만 하는 것이 아니라 초깃값으로 0을 할당해줬음 var result = 0; // 배열의 엘리먼트를 더해 누적하게 만드는 reduce의 콜백 함수 function callback(prev, curr){ return prev + curr; }; // 메인 함수 선언 function show(param){ // 파라미터로 오는 데이터가 오브젝트 형태여서 for-in문 활용 for (var type in param) { // Array이면 if (Array.isArray(param[type]) === true){ // 배열의 값을 출력하고 console.log(param[type]); // result에 배열의 값들을 누적합니다. result += param[type].reduce(callback); // 배열이 아닌 object이면 } else if (typeof param[type] === 'object') { // 프로퍼티 이름과 값을 출력하고 console.log(type,":",param[type]); // 재귀 호출을 통해 데이터를 끝까지 탐색 show(param[type]); // 가장 안에있는 오브젝트의 프로퍼티 이름과 값을 출력 } else { console.log(type,":",param[type]); } }; }; // 재귀 함수 호출 show(member); // 누적한 값 출력 console.log(result);
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
이 풀이법은 어떤가요 ?
function solution(s) { const lowercasedStr = s.toLowerCase(); if ([...lowercasedStr].reverse().join("") === lowercasedStr) { return "YES"; } return "NO"; }