묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Vue.js 시작하기 - Age of Vue.js
vue cli 설치 하는데 오류 해결을 못하고 있습니다.
node, npm 설치 잘 되여있는데 vue cli만 설치할려면 저런 오류가 뜹니다.cmd/cmder/powershell 들을 관리자 권한으로 실행해서 명령어를 쳐봐도 달라지는건 없었습니다.npm uninstall -g @vue/cli 하고 다시 명령어를 쳐도 똑같이 나옵니다powershell 권한 수정 그런것도 해보고 환경변수 설정도 다 해보고 Cmder.exe 도 다운받아서 npm install -g @vue/cli 명령어 치면 계속 오류만 뜹니다.해결방법을 알려주시면 감사하겠습니다..
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React에서 사용자 입력 처리하기 강의중 22:02쯤 spread연산자 관련 질문 입니다.
setState()에서setState({author:e.target.value,...state,});요 부분에서 spread연산자를 사용하면setState({author:e.target.value,author: "", content: "",});이런식으로 펼쳐지는 건가요?setState는 새로운 객체를 만들어주는건데 저리 펼치면 author가 중복되는 부분 아닌가요?
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
완성 사이트 접속이 안됩니다
안녕하세요. 오늘부터 <풀스택 맛집지도> 수강하고 있는데요. 아래 완성 링크에 접속이 되지 않습니다. 확인 부탁드립니다~! 감사합니다. http://www.seongong.shop/
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
스스로 풀어보았습니다. 괜찮은 코드인가요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨함수형 프로그래밍과 JavaScript ES6+
비동기 관련 질문입니다!
안녕하세요! 강의 잘 듣고 있습니다. 덕분에 함수형 프로그래밍에 대해 많은 관심을 가지게 되었고, 또한 실제로 회사 프로젝트 내에서도저는 fxjs를 적극 활용하여 사용하고 있습니다. 강의를 여러번 돌려 보고는 있지만 DB를 오가며 사용하는 비동기 상황에는 미흡하고 궁금해 질문 드립니다.아래는 Node.js 서비스 함수 안에서 사용 하고 있으며 DB(mysql)에 접근해 update하는 로직입니다. fn: async() => { _.go( 배열, _.map(로직), _.each(async(num) => await MemberBookmark.update({ where: { target_id: num } })), ); } map으로 가공된 배열을 활용하여 each에서 DB를 업데이트 하는 로직으로 위와 같이 작성 하였는데 문제는 없을지 모르겠습니다. 일단 작동은 제대로 하는데each함수 내에서 async(num) => await Model 업데이트 이런 식으로 비동기적인 작업을 해도 괜찮을지 궁금합니다!
-
미해결누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌
key is not a prop 에러에 대하여
배열 데이터 제거하기에서 PhoneInfo.js 스크립트에서 handleRemove 함수 내부에서onRemove(Info.id) 대신key값을 구조분해할당 받아onRemove(key)를 줬는데제목과 같은 에러가 뜨고 정상적으로 동작을 안하더라고요.검색해보니 prop은 자식컴포넌트로 전달하지 않는다고 하더라고요.이에 대한 설명이 빠져있어서 그런데 key는 왜 자식 컴포넌트로 넘기지 않는걸까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
var isFool = true; 는 무슨 용도인가요?
var name ="그랩";var num = 100;이렇게만 입력해도 비교 연산자가 작동하는데var isFool = true; 는 왜 쓰인건지 궁금합니다
-
미해결Node.js로 웹 크롤링하기
앱 크롤링
수업 잘듣고 있습니다교육내용가 관련없지만웹말고 앱 크롤링이 가능한가요?
-
미해결<1만 시간의 법칙> 웹 페이지 제작하기
공부하면서 내용들
공부한 내용들 개인 블로그랑 깃허브에 올려도 되나요? 저작권 문제때문에 문의드립니다!
-
미해결자바스크립트 : 기초부터 실전까지 올인원
로컬스토리지 저장하는 방법 알려주세요 ㅠㅠ
로컬스토리지에 투두리스트 내역들을 저장하고 싶은데 콘솔/로컬스토리지에는 저장이 되는데 화면에는 새로고침해도 그냥 다 사라저버리네요 ㅠㅠ 로그인은 새로고침해도 이름이 남아있는데.. 혹시라도 코드한번보시고 도와주세요 ㅠㅠ let loginForm = document.querySelector('#login-form'); let loginBtn = document.querySelector('#login-btn'); let loginInput = document.querySelector('#login-input'); let greeting = document.querySelector('#greeting'); let taskArea = document.querySelector('.task-area'); let inputArea = document.querySelector('.input-area'); let inputText = document.querySelector('.input-area__text'); let addBtn = document.querySelector('.input-area__btn'); let arrary = []; let titleList = document.querySelector('.title-box'); let discription = document.querySelector('.discription'); const body = document.querySelector('body'); const images = [ '훈이.jpg', '유리.jpg', '철수.jpeg', '흰둥이.jpeg', '부리부리3.png', ]; let randomIndex = Math.floor(Math.random() * images.length); let container = document.querySelector('.container'); //로그인 const HIDDEN_CLASSNAME = 'hidden'; const USERNAME_KEY = 'username'; function loginHandle(event) { event.preventDefault(); loginForm.classList.add(HIDDEN_CLASSNAME); const userName = loginInput.value; localStorage.setItem(USERNAME_KEY, userName); greeting.innerHTML = `<span style="color:blue">${userName}</span> 님이 로그인함`; greeting.classList.remove(HIDDEN_CLASSNAME); reMoveClassList(); backImg(); } //리무브 클래스 function reMoveClassList() { taskArea.classList.remove(HIDDEN_CLASSNAME); inputArea.classList.remove(HIDDEN_CLASSNAME); } const savedUserName = localStorage.getItem(USERNAME_KEY); loginForm.addEventListener('submit', loginHandle); if (savedUserName === null) { loginForm.classList.remove(HIDDEN_CLASSNAME); backImg(); } else { reMoveClassList(); greeting.classList.remove(HIDDEN_CLASSNAME); greeting.innerHTML = `<span style="color:blue">${savedUserName}</span> 님이 로그인함`; backImg(); } //로컬스토리지 let toDos = []; const TODOS_KEY = 'todos'; function saveToDos() { localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } const savedToDos = localStorage.getItem(TODOS_KEY); console.log(savedToDos); if (savedToDos !== null) { const parsedToDos = JSON.parse(savedToDos); toDos = parsedToDos; parsedToDos.forEach(render); } //인풋 function enterBtn(event) { event.preventDefault(); let obType = { id: Math.floor(Math.random() * 1000), isComplete: false, inputValue: inputText.value, }; inputText.value = ''; arrary.push(obType); render(); toDos.push(obType.inputValue); console.log(toDos); saveToDos(); } addBtn.addEventListener('click', enterBtn); //랜더 function render() { divHTML = ''; discription.innerHTML = `<sapn style="color:lightgreen">전체할일 :${ arrary.length } <sapn style="color:red">완료할일 :${checkCount()}</span>`; for (let i = 0; i < arrary.length; i++) { if (arrary[i].isComplete == true) { divHTML = divHTML + ` <div class="title-list"> <div class="title-list__title"> <h4 class="textDone">${arrary[i].inputValue}</h4> </div> <div class="title-list__btn"> <button class="title-list__btn1" onclick="checkBtn('${arrary[i].id}')"> <i class="fa-solid fa-face-tired"></i> </button> <button class="title-list__btn2" onclick ="deleteBtn('${arrary[i].id}')"> <i class="fa-solid fa-trash-can hello"></i> </button> </div> </div>`; } else { divHTML = divHTML + ` <div class="title-list"> <div class="title-list__title"> <h4>${arrary[i].inputValue}</h4> </div> <div class="title-list__btn"> <button class="title-list__btn1" onclick="checkBtn('${arrary[i].id}')"> <i class="fa-solid fa-check-to-slot"></i> </button> <button class="title-list__btn2" onclick ="deleteBtn('${arrary[i].id}')"> <i class="fa-solid fa-trash-can"></i> </button> </div> </div>`; } } titleList.innerHTML = divHTML; } //전체할일 카운트 function checkCount() { let count = 0; for (let i = 0; i < arrary.length; i++) { if (arrary[i].isComplete == true) { count++; } } return count; } //삭제버튼 function deleteBtn(b) { for (let i = 0; i < arrary.length; i++) { if (arrary[i].id == b) { arrary.splice([i], 1); break; } } render(); } //체크버튼 function checkBtn(a) { for (let i = 0; i < arrary.length; i++) { if (arrary[i].id == a) { arrary[i].isComplete = !arrary[i].isComplete; break; } } render(); } //시계 let getClock = () => { let date = new Date(); //new라서 객체임 현재 시간을 가저옴 const clock = document.querySelector('#clock'); let hour = String(date.getHours()).padStart(2, '0'); let mimute = String(date.getMinutes()).padStart(2, '0'); let second = String(date.getSeconds()).padStart(2, '0'); clock.innerHTML = `<span style="color:red">${hour}시 ${mimute}분 ${second}초</span>`; }; //타이머 함수를 통해서 1초마다 시간을 받아오게 작성 setInterval(getClock, 1000); getClock(); //배경 이미지 function backImg() { container.style.backgroundImage = `url(./image/${images[randomIndex]})`; container.style.backgroundSize = '160px'; container.style.backgroundRepeat = 'repeat'; } backImg();
-
미해결함수형 프로그래밍과 JavaScript ES6+
질문 있습니다.
안녕하세요. 수업 중 이해를 잘 못한것 같아 질문 드립니다.const value = [[1, 2], [3, 4], [6, 7, 8]]; L.flatMap = curry(pipe( L.map, L.flatten, )); let it = L.flatMap(map(a => a * a), value) log(...it)위 코드가 돌아가는 과정을 한눈에 이해하기 어렵네요. 제가 생각한 흐름은 아래와 같은데 봐주실수 있을까요??L.flatMap을 만든다. L.flatMap은 인자를 받을 준비를 하는 함수로 인자를 받으면 L.map과 L.flatten을 차례로 실행시켜 준다. L.flatMap의 내부 함수 pipe를 curry로 감싸긴 했지만 실행시 인자 2개를 같이 넣어줄 것이기 때문에 의미 없다. L.flatMap을 실행시켜준다. 첫번째 인자로 map(a => a a) 두번째 인자로 value 값을 넣는다. 넣은 값은 L.map으로 간다. \L.map과 L.flatMap의 인자로 들어온 인자(a => a a, value)는 L.map과 합성된다. 하지만 L.map 안에 log가 바로 찍히지 않는다. 왜냐면 제너레이터는 값이 필요해질 때(next()) 코드가 실행된다. 첫 번째 값이 필요 없다면 아예 실행되지 않고 map(a => a a)와 value가 들어간 상태로 대기?한다. 그 후 L.flatMap 함수를 평가해 값을 하나씩 가져오게 되면 L.flatten으로 가서 값을 만드려 하는데 iter 값이 없으므로 L.map으로 간다. L.map 으로 가서 값을 만드는데 이터러블한 데이터를 하나 가져와서 3번에서 인자로 받은 map(a => a a)을 이용해 값을 다룬 후 yield로 보내준다.차례대로 값을 가져온다.다시 앞으로 돌아가서 천천히 복습해보는게 좋을까요? 아니면 일단 들어보면서 이해해보는게 좋을까요? 어렵지만 강의와 강의 내용은 너무 재밌습니다. 감사합니다.
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
스택을 사용하기 했는데 효율성이 떨어지는 거 같아 리뷰 요청드립니다~
function solution(a){ let answer=0 let stack = [] let stick = [] let laser = [] // 막대 내 속한 레이저의 갯수 + 1이 최종 막대 갯수 // 막대 한 개 안에 속한 레이저가 총 몇개인지 구해서 카운트 더하기 for(let x=0; x<a.length; x++){ //막대 시작 if(a[x]==="(" && a[x+1] !==")"){ stack.push(x) } // 막대 끝 if(a[x]===")" && a[x-1] !=="("){ const pair = stack.pop() stick.push([pair,x]) } //레이저인데 막대 내부에 있는 레이저인 경우 if(a[x]=="(" && a[x+1]==")" && (a[x-1]=="(" || a[x+2]==")")){ laser.push(x) } } for (let i = 0; i < stick.length; i++) { const start = stick[i][0]; const end = stick[i][1]; let cnt = 0 for (let j = 0; j < laser.length; j++) { if (laser[j] > start && laser[j] < end) { cnt++ } } answer += cnt+1 } console.log(stick,laser) return answer } let a="()(((()())(())()))(())"; console.log(solution(a)); 이렇게 하다 보니 이중 for문을 사용해 복잡도가 n2이 되버려서 효과적이지 못한거같습니다.. 이런 접근 법은 별로일까요
-
미해결처음 만난 리액트(React)
chapter5인데 왜 안되는지 모르겠습니다.
clock은 위에 app import문을 주석처리하고 cd my-app하고 npm start하니까 돌아가는데, 이거는 똑같이 해도 계속 안 돌아가고 오류메세지가 뜹니다. 어떻게 수정해야하나요?
-
미해결처음 만난 리액트(React)
그냥 npm start하면 돌아가지 않습니다.
npm ERR! Missing script: "start"npm ERR!npm ERR! Did you mean one of these?npm ERR! npm star # Mark your favorite packagesnpm ERR! npm stars # View packages marked as favoritesnpm ERR!npm ERR! To see a list of scripts, run:npm ERR! npm runnpm ERR! A complete log of this run can be found in:npm ERR! C:\Users\hhayo\AppData\Local\npm-cache\_logs\2023-04-01T13_55_50_978Z-debug-0.log이런 에러가 뜨는데 cd my-app을 해야만 돌아가는데 어떻게 바꿀 수 있나요? 그리고 이유가 뭔가요?
-
미해결처음 만난 리액트(React)
시계 만들기 실행이 안됩니다.
복붙해서 한건데, 실행이 안돼서 위에 import app 부분 주석처리하니까 돌아갑니다. 강사님은 안그러는데 제꺼에서는 왜 그런가요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
LRU 코드 리뷰 부탁드립니다
function setQueue(queue, val) { if (queue.includes(val)) { queue = queue .slice(0, queue.indexOf(val)) .concat(queue.slice(queue.indexOf(val) + 1)); queue.unshift(val); } else { queue.pop(); queue.unshift(val); } return queue; } function solution(s, n, arr) { let queue = new Array(s).fill(0); for (const val of arr) { if (queue.length === s) { queue = setQueue(queue, val); } else { queue = setQueue(queue, val); } } return queue.join(" "); } hit, miss 인 경우의 로직을 setQueue로 함수화해서 처리를 해보았는데, 혹시 틀리거나 예외케이스에서 틀릴 경우가 생길까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
<Link>와 useNavigate hook의 차이는 무엇인가요?
react-router-dom 을 공부하다가 의문이 생겨서 질문글에 올립니다.다이어리 상세 페이지로 이동시킬 때 useNavigate hook을 활용하고 있는데, useNavigate hook은 <a>태그로 렌더링되지 않고 키보드로도 접근이 안 돼서 공식 문서에서는 <Link>를 더 권장하는 거 같더라구요. https://reactrouter.com/en/main/start/concepts#navigating어떤 걸 쓰는 게 더 좋을까요?
-
해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
리뉴얼 이전 강의 파일
안녕하세요!강의 잘 듣고 있습니다! 이번에 강의가 리뉴얼되면서리뉴얼 되기 이전의 강의 영상과 파일이 사라져있는데이전 강의 파일이 필요한데 혹시 이전 강의 파일은 어디서 받을 수 있을까요..? ㅠ3ㅠ
-
해결됨함수형 프로그래밍과 JavaScript ES6+
강의 중 혼란스러운 부분이 생겨 질문 드립니다.
안녕하세요 강의 중 혼란스러운 부분이 생겨 질문 드립니다.const queryStr2 = pipe( Object.entries, L.map(([k, v]) => `${k}=${v}`), function(a) { log(a) return a; }, join('&'), )위 코드에서 Object.entries는 Lazy하게 구현한 것이 아니라 빌트인 객체의 메서드를 사용했다고 이해 했는데 L.map으로 인해 a값이 Object [Generator] {} 인걸 이해 못했습니다. Object.entries가 이터레이션 프로토콜을 따르는 이터레이터라는 것까진 이해 했는데 내부적으로 제너레이터로 구현이 돼 있는 걸까요?? 값을 yield로 리턴하도록 구현돼 있는 것인지 궁금합니다. 아니면 Object.entries는 이미 평가 된 상태에서 L.map 부분만 지연 평가가 돼 Generator가 된 걸까요?
-
해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
현재 해커 뉴스의 Jobs API가 동작하지 않네요.
제가 코딩 잘못했나 1시간 동안 헤맸습니다.. https://api.hnpwa.com/v0/jobs/1.json jobs의 URL이 동작하지 않네용