묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
API 실행시 에러
해당 에러 구글링해도 제가 아직 배움이 짧은지 이해를 못하겠습니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
이미 구매해서 문의에는 안써져서 여기에 물어봅니다
1. 배포에 관한 부분은 아직 없는 것 같은데 업데이트 중인가요? 아니면 Part2로 나눠서 나올까요?2. 강의 구매 인증을 하면 우선 답변을 받을 수 있는 채널로 초대하신다고 했는데 어디서 구매 인증을 해야 할까요?
-
해결됨[코드캠프] 훈훈한 Javascript
혹시 프론트, 백엔드 코스랑 강의가 겹치나요?
안녕하세요?혹시 프론트, 백엔드 코스 구매하면앞부분에 강의가 겹치는지 문의드려요
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vuex와 컴포넌트 설계 관련 질문
안녕하세요, 강의를 잘 수강하고 실무에서도 잘 사용하고 있습니다. 다름이 아니라 몇가지 질문들이 있어서 드립니다. 1) action에서 반드시 mutation을 호출할 필요는 없는 것이죠? view에서 action을 통하여 api를 호출하여 비동기로 데이터를 받은 다음, action을 호출한 method에서 데이터를 처리하고 mutation을 다시 호출하여 state에 넣어도 되는 것이죠? 2) 1번 질문의 연장 질문입니다. action에서 비동기로 받은 데이터를 return을 받는 방법은 일반적인 method에서 return 시키는 방법처럼은 없는 것인가요? 검색해보면 전부 promise를 사용하는 방식인거 같아서요. 3) 제가 이해하기론 view에서는 getter를 이용해서 state의 데이터를 받는 것이라고 이해했습니다.그렇다면 우리가 어떤 컴포넌트의 v-model에 getter를 직접 연결해도 괜찮은가요?실제로 vuex에는 데이터가 잘 반영이 되는데, 이렇게 되면 getter가 mutation의 역할도 같이 해버리는 것 같아서요.찾아보면 value=mapState + @input을 통하여 method에서 mutation을 호출하여 분리하여 처리하라고 하는거 같은데, view에서 바로 state를 붙게되면 또 getter의 의미가 퇴색되는거 같아서 그렇습니다. 4) 특정 메뉴의 컴포넌트의 depth도 깊고 child도 많은 상황이라 vuex를 사용하려합니다. 그런데, 버튼을 클릭하면 특정 컴포넌트를 추가하고 또 삭제도 가능한 상황입니다. v-for를 통하여 vuex에 있는 list에 해당 컴포넌트의 데이터를 추가하고 삭제하면서 관리를 합니다. 다만, 특정 컴포넌트에서 vuex에 있는 데이터에 바로 접근하려면 항상 본인의 index를 props로 내려받아서 list[this.index].object 이런식으로 접근해야하는데, v-for와 vuex를 동시에 사용하는 상황에서 효과적으로 컴포넌트를 설계하는 방식이 있을까요? 5) action과 mutation의 동작 범위action과 mutation은 각각 비동기/동기로 데이터를 처리하는 것으로 이해하고 있습니다.그렇다면 우리가 action과 mutation에도 많은 녀석들이 생성될 텐데요.action과 mutation안에서 단순히 api로 데이터를 비동기로 호출하거나 또는 동기로 state에 데이터를 저장하는 그런 동작 외에 어떤 데이터를 처리하거나 하는 Logic단같은 코드나 함수를 추가해도 되는 것일까요?아니면 그런 코드들은 view에서 생성하고 거기서만 처리하고 action과 mutation에는 단순 데이터를 호출하고 저장하고 하는 그런 코드만 작성하여 최소한으로 해두어야하는 것일까요? 6) 현재 저희는 typescript로 넘어가지 않고 아직 javascript를 사용하고 있습니다.간간히 javascript의 class를 사용하고 간단한 디자인 패턴도 넣어서 같이 구현하곤 하는데요.혹시 다른 객체지향언어(C#, Java)와 같이 class와 상속/조합 과 같은 설계를 많이 사용하시나요?아니면 그런걸 지원하긴 하지만 거의 안쓰시나요?또한, 전략/팩토리/옵저버 등과 같은 간단한 디자인패턴도 사용하시는지? 아니면 브릿지 등과 같은 고급 패턴도 typescript/javascript에서 구현을 해서 사용을 하는 경우도 있는지 이런 부분이 생기면 최대한 backend단으로 넘겨서 처리시키시는지 front에서의 처리를 어느정도로 하는지 궁금합니다. 말솜씨가 안좋아서 저의 질문이 잘 전달되었는지는 모르겠습니다.혹시나 확인하시고 여유가 되신다면 답변을 부탁드립니다 :)
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
노드몬 에러 참조하세요
nodemon : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\~~~~~\AppData\Roaming\npm\nodemon.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1+ nodemon+ ~~~~~~~+ CategoryInfo : 보안 오류: (:) [], PSSecurityException+ FullyQualifiedErrorId : UnauthorizedAccess 이런거 뜨면https://velog.io/@kimy/VS-CODE-supervisor-nodemon-%EC%98%A4%EB%A5%98-ps1-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%A1%9C%EB%93%9C%ED%95%A0-%EC%88%98-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4이 방법대로 참조하세요 혹시 안되시는분들
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
깃허브에서 다운받지 않고 생성하는 방법 여쭤보고 싶습니다.
저 강의에서는 vpm init 등등을 활용해 노드js 기타등등을생성하셨는데 이번강의에선 깃허브에서 다운을 통해 선생님께서 이미 준비하신 node.js파일들을 제공받았는데..만약 제가 스스로 혼자서 셋팅하고 만들어보고 싶은 경우에는 어찌해야 할까요...? 아니면 그냥 선생님이 만들어주신 저 다운패키지들을 활용해도 별 문제 없을까요...?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
테이블 관계
안녕하세요예를 들어 MockUserRepository를 만들고 그 안에 mydb라는 데이터가 있습니다.만약 기존 User 테이블이 Post 테이블과 관계가 맺어져 있다면 Post까지 mydb에 담아야 하나요?mydb = [{ id= '', name:='', password= '' }] 이렇게 해야 하는 건지아니면 mydb = [{ id: '', name:'', password: '', post: { id: '', title: ''}] 이렇게 작성해야 하는 건지 궁금합니다!! 그리고 userService에서 postService를 사용하는 로직이 있는데 userService 테스트시 MockPost 테이블까지 같이 구현해야 하는 건지..아니면 다른 방법이 있는 건지ㅜㅜ 궁금하네요 하나만 더 여쭤보자면.. ㅜㅜ 제가 이해가 잘 안가서 그러는데 controller.ts를 테스트할 때는 service를 mock하고, service.ts를 테스트할 때는 데이터베이스를 mock해서 사용하는 건가요??
-
미해결왕 초보 자바스크립트
undefiend을 반환하는 이유
function showError(){ alert('에러가 발생했습니다'); } const result = showError(); console.log(result);여기서 showError() 함수만 실행했을 때와 다르게 result에 입력해서 실행하고 나서 undefined 가 나오는 출력되는 이유는 무엇인가요?제가 추측하기엔 변수가 함수와 인자까지 같이 실행시켜야하는데 인자가 존재하지않아 undefined 가 나오는 것이라고 추측하고 있습니다만,정확하게 모르겠습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
yarn start:dev 실행시 에러
포스트맨에서 요청하려는데 어느 부분이 문제여서 에러가 난걸까요?일단 어느부분을 보셔야 해결해주실 수 있으실지 모르겠어서 캡처를 2개 했습니다.
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
확인부탁드리겠습니다.
module.exports = { jwtsecret : "jwt_secret_key_9312", host : "3.38.61.157", user : "root", port : "3306", password : "~~~", detabase : "enrolment", };이렇게 하고 index.js를 해줬는데선생님처럼 aws아이피는 안 뜨고 그냥PS C:\Users\YOONJUNHO\Documents\Test\Node-Template-For-Food-Map-main> node index.js2023-11-15 02:38:07 info: undefined - API Server Start At Port 3000이것만 뜨는데 이것도 연결된건가요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
이중for문으로 조건에 맞는 케이스를 찾아서 풀어보았습니다 뿌듯!
열심히 풀었습니다! function solution(array) { let answer = 0; for (let i = 0; i < array.length; i++) { for (let j = 0; j < array[i].length; j++) { const result = []; const target = array[i][j]; const left = array[i][j - 1] ?? 0; const right = array[i][j + 1] ?? 0; const top = i > 0 ? array[i - 1][j] : 0; const bottom = i < array.length - 1 ? array[i + 1][j] : 0; result.push(target); result.push(left); result.push(right); result.push(top); result.push(bottom); if (target === result.sort((a, b) => b - a)[0]) answer++; } } return answer; } console.log( solution([ [5, 3, 7, 2, 3], [3, 7, 1, 6, 1], [7, 2, 5, 3, 4], [4, 3, 6, 4, 1], [8, 7, 3, 5, 2], ]) );
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
setStatus, 콜백함수, 변수 스코프에 대해 질문드립니다.
강사님 안녕하세요항상 상세한 답변을 주시는 점 감사드립니다.아래의 코드를 보고 질문을 받아주시면 감사하겠습니다.import './App.css'; import Counter from './Counter'; import Container from './Container'; import {useEffect, useState} from "react"; import MyHeader from './MyHeader.js' export default function App() { const [state, setState] = useState({ a: 0, b: 0 }); const onClick = () => { const c=10; setState(c=>({ a: c + 1 })); }; return ( <div className="App"> <div>a : {state.a}</div> <button onClick={onClick}>증가</button> </div> ); }1번째 경우원래는 아래의 코드처럼 setState의 콜백함수의 인자에 state를 넣는 게 맞습니다.const c=10; setState(state=>({ a: c + 1 // 이 줄의 c는 1번째 줄의 c를 가리키므로 a: 10 + 1 과 같습니다. }));이때는 a:c+1에서의 c가 함수 밖에 선언된 맨위의 const c= 10의 c를 가리킵니다. 2번째 경우 일부러 setState의 콜백함수의 인자를 state가 아닌 c로 적어봤습니다.const c=10; setState(c=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. }));그러자 a: c + 1 에서의 c는 1번째 줄의 c가 아닌, 콜백함수 인자로 들어간 2번째 줄의 c를 가리킵니다.그래서 변수의 스코프를 공부하고 싶어서 조언을 구하고 싶습니다. 1번째 질문을 드립니다.변수가 const, let, var 인지에 따라서 스코프가 다른 것으로 아는데콜백함수의 인자로 들어간 변수는 const인지 let인지, var 인지 질문드리고 싶습니다. 2번째 질문을 드립니다.이 부분에 대해 학습하면 좋을 자료 링크를 추천해주시면 감사하겠습니다.저도 현재 변수 스코프에 대해 다시 공부하는 중입니다.3번째 질문을 드립니다.const c=10; setState(c=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. })); 에서2번째 줄의 콜백함수 인자의 c는 1번째 줄의 c를 가리키지 못하는 이유에 대해 질문드리고 싶습니다.4번째 질문을 드립니다.const c=10; setState(state=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. }));3번째 줄의 c는 1번째 줄의 c를 가리킬 수 있는 이유에 대해 질문드리고 싶습니다감사합니다.
-
해결됨Javascript ES6+ 제대로 알아보기 - 중급
궁금한게 있어서 질문 남겨봅니다!
희안하게 set에서는 forEach를 사용 할 수 있는데, map이랑 filter, reduce등은 안되더라고요. forEach만 되는 이유가 혹시 따로 있는건가요?
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
쿵쿵따 만들엇는데 갠찬은가요 ??
샘 직접 만들어 봣습니다 며칠 고민하면서 근데 공지에는 코드전체를 올리지말라햇는데 피드백을 받으려면 올릴수박에 없어서요 만든게 어떤지 평가나 피드백좀주실수잇나여 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div><span id="order">1</span>번쨰 쿵쿵따 참가자</div> <div>제시어:<span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇명인지 입력을 받는다:')); const $input = document.querySelector('input'); // 인풋울 자스로 기능을 넣어야 하기떄문이다 const $button = document.querySelector('button'); // 버튼 을 자스기능으로 넣어야 하기떄문 const $order = document.querySelector('#order'); // 몇번쨰인지 자스기능으로 값을 조절해야하기떄문 이다 const $word = document.querySelector('#word'); // 제시어의 저장및 잇는지 확인 하기 위해 자스기능으로 넣어야 하기떄문이다; let word; let newWord; // 인풋에 적혓을떄 세글자인지 판단한다 // 그와반대로 버튼에 눌럿을떄 이벤트가 발생되면 // 제시어값이 잇는채로 버튼이 눌리면 #word와 끝자리가 맞는지도 확인 작업을 해야하고 // const onClick = () => //버튼을 눌럿을떄 { if(newWord.length===3) // 버튼을 누르고 세글자 일떄 { if(!word) // 세글자이면서 제시어가 비어잇다 첫사람이다 { //제시어를 입력한 상태로 그값을 저장 해주어야 한다 word=newWord; $word.textContent = word; // word 변수에 담긴 내용이 $word라는 HTML 요소의 텍스트 내용으로 들어가게 될 거예요. // 그래서 워드 안에 입력된 뉴월드 단어값이 $word. 에 저장이 되서 제시어가 저장이 되는원리이다 $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else //세글자이면서 제시어가 잇는 즉 이미 한명이 시작한단계 { if(word[word.length-1]===newWord[0]) // 세글자이면서 제시어가 잇으며 마지막 단어와 시작단어가 같을떄 //둘다 값이 같을떄 제시어를 받는다 { word=newWord; /// 워드에 인풋 입력값을 저장해놈 단어를 저장 해둠 $word.textContent = word; // 이 해석을 연구해봐야 한다; $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else // 자리수 값이 다를떄 올바르지 않는단어임을 알려준다 { alert('입력을 다시하십시오 올바르지않는단어입니다'); } } } // 세글자 일떄 실행 else // 버튼을 눌럿을대 세글자가 아닐떄 들어가지지도 못하게 하면된다 { alert('세글자가 아니므로 다시 세글자를 입력해주세요'); } } const writing =(event) => // 인풋 글자입력란 이벤트 리스너와 연결된 함수 { newWord= event.target.value; // 인풋의 값이입력되면 저장 할껏 뉴월드에 ; } $input.addEventListener('input',writing); // 인푹에 이벤트 발생됫을떄 함수로 연결해서 단어를 저장한다; $button.addEventListener('click',onClick); // 버튼 이벤트 </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div><span id="order">1</span>번쨰 쿵쿵따 참가자</div> <div>제시어:<span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇명인지 입력을 받는다:')); const $input = document.querySelector('input'); // 인풋울 자스로 기능을 넣어야 하기떄문이다 const $button = document.querySelector('button'); // 버튼 을 자스기능으로 넣어야 하기떄문 const $order = document.querySelector('#order'); // 몇번쨰인지 자스기능으로 값을 조절해야하기떄문 이다 const $word = document.querySelector('#word'); // 제시어의 저장및 잇는지 확인 하기 위해 자스기능으로 넣어야 하기떄문이다; let word; let newWord; // 인풋에 적혓을떄 세글자인지 판단한다 // 그와반대로 버튼에 눌럿을떄 이벤트가 발생되면 // 제시어값이 잇는채로 버튼이 눌리면 #word와 끝자리가 맞는지도 확인 작업을 해야하고 // const onClick = () => //버튼을 눌럿을떄 { if(newWord.length===3) // 버튼을 누르고 세글자 일떄 { if(!word) // 세글자이면서 제시어가 비어잇다 첫사람이다 { //제시어를 입력한 상태로 그값을 저장 해주어야 한다 word=newWord; $word.textContent = word; // word 변수에 담긴 내용이 $word라는 HTML 요소의 텍스트 내용으로 들어가게 될 거예요. // 그래서 워드 안에 입력된 뉴월드 단어값이 $word. 에 저장이 되서 제시어가 저장이 되는원리이다 $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else //세글자이면서 제시어가 잇는 즉 이미 한명이 시작한단계 { if(word[word.length-1]===newWord[0]) // 세글자이면서 제시어가 잇으며 마지막 단어와 시작단어가 같을떄 //둘다 값이 같을떄 제시어를 받는다 { word=newWord; /// 워드에 인풋 입력값을 저장해놈 단어를 저장 해둠 $word.textContent = word; // 이 해석을 연구해봐야 한다; $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else // 자리수 값이 다를떄 올바르지 않는단어임을 알려준다 { alert('입력을 다시하십시오 올바르지않는단어입니다'); } } } // 세글자 일떄 실행 else // 버튼을 눌럿을대 세글자가 아닐떄 들어가지지도 못하게 하면된다 { alert('세글자가 아니므로 다시 세글자를 입력해주세요'); } } const writing =(event) => // 인풋 글자입력란 이벤트 리스너와 연결된 함수 { newWord= event.target.value; // 인풋의 값이입력되면 저장 할껏 뉴월드에 ; } $input.addEventListener('input',writing); // 인푹에 이벤트 발생됫을떄 함수로 연결해서 단어를 저장한다; $button.addEventListener('click',onClick); // 버튼 이벤트 </script> </body> </html>
-
미해결Javascript ES6+ 제대로 알아보기 - 중급
엌ㅋㅋ 인프런에 개발자 도구 켜서 console에 하면
강의 보면서 f12에 개발자 도구 켜서 const str = "이 _ 문자열을 _ 이렇게 _ 나누어주었으면 _ 좋겠어."; String.prototype[Symbol.split] = function (string) { let result = ""; let residue = string; let index = 0; do { index = residue.indexOf(this); if (index <= -1) { break; } result += residue.substr(0, index) + "/"; residue = residue.substr(index + this.length); } while (true); result += residue; return result; }; console.log(str.split(" _ "));해당 코드 실행 시키면 인프런 팅깁니다. 조심하세요 ㅋㅋ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
페이지구현 - 일기수정(Edit) 수정 에러 질문
정환님 안녕하세요.질문이 있습니다.DiaryEditor 컴포넌트로 onCreate, onEdit 함수를 전달하여일기를 생성, 수정 하는데요.이때, 일기 생성 후, 일기를 수정 하면 수정된 일기 + 수정된 일기가 1개 더 추가 생성이 되는 에러가 발생하여서요.어떤 부분이 문제인지 짐작이 안갑니다. ㅠㅠ아래 코드 캡쳐본 첨부드립니다.답변주시면 감사하겠습니다.그리고 강의 잘 듣고있습니다. 좋은 강의 감사합니다 :) App 컴포넌트Edit 컴포넌트DiaryEditor 컴포넌트
-
해결됨처음 만난 리액트(React)
component관련 질문있습니다.
안녕하세요 🙂React 첫 인강을 소플님의 강의로 시작했습니다.소플님의 인강을 들으면서 유튜브에 올라오는 React 사이드 프로젝트들을 따라하고 있는데 component관련에서 궁금한 사항이 생겨서 늦게나마 질문을 올립니다. 예시) Main component 안에 Button // List // Write 3개의 component가 있다고 가정한다면소플님은 먼저 3개의 작은 component들을 만들고 조합하여 Main component를 완성한다고 말씀하셨습니다.(재사용성 떄문)그런데 어떤분들은 먼저 Main component에서 3개의 작은 component 내용들을 전부다 쓰고 마지막에 3개를 분리하여 각각 해당 component들에 나눠담으시던데 먼저 큰 컴포넌트를 레이아웃을 구성해서 작은 컴포넌트에 나눠 담는게 맞는건지작은 컴포넌트들을 조합해서 큰 컴포넌트를 만드는게 맞는건지 알 수 있을까요? React 처음으로 완강했는데 너무 유익한 강의였습니다 감사합니다:)
-
미해결Colini 웹개발 가이드
혹시 git 실습은 진행하지 않는 건가요?
다음 영상이 git 실습이 되어야할 것 같은데 혹시 동영상은 따로 없는 걸까요?
-
해결됨문법 공부 다음엔, 자바스크립트 프로젝트 101
trello-app에서 질문 있습니다
이 부분에서 if문 들어가기 전 targetId는 uuid로 나옵니다. listsIds는 doing, todo이런 리스트들만 있구요. includes를 해도 해당 targetId인 uuid 값이 listsId에 없어 if문이 넘어갈거 같은데 들어간다는게 이해가 안됩니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading '$store')"에러..
main.js, store.js 등에서도 vuex랑 연결 잘되있는데removeOneItems랑 toggleOneItems 클릭시 저런 애러가 뜸니다 addOneItems은 잘되는데