묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
테이블 관계
안녕하세요예를 들어 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은 잘되는데
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
무한 루프 에러 질문드립니다.!
import React, { useState, useEffect, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import { BbsSettingContext } from "../common/Board"; import ToastEditor from "../component/ToastEditor"; import MyButton from "../common/ComButton"; const BoardView = ({ postId }) => { const titleInputRef = useRef(); const contentsAreaRef = useRef(); const toastEditorRef = useRef(); // ToastEditor의 ref const [post, setPost] = useState({ nttSj: "", nttCn: "", regDate: "", }); const [boardSetting, setBoardSetting] = useState(null); const boardSetData = useContext(BbsSettingContext); const Navigate = useNavigate(); const formatDate = (timestamp) => { const date = new Date(timestamp); const options = { year: "numeric", month: "long", day: "numeric" }; return date.toLocaleDateString("ko-KR", options); }; useEffect(() => { if (boardSetData) { setBoardSetting(boardSetData); axios .get(`http://localhost:8080/board/${boardSetData.bbsId}/post/${postId}`) .then((response) => { setPost({ nttSj: response.data.post.nttSj, nttCn: response.data.post.nttCn, regDate: response.data.post.regDate, }); }) .catch((error) => console.log(error)); } }, [post]); return ( <div className="BoardView"> <div className="upInfoArea"> <div type="text" name="boardTitle" className="titleDiv"> {post.nttCn} </div> <div type="text" name="regId" className="regIdDIv"> {formatDate(post.regDate)} </div> </div> <div className="contentArea"> <div className="contentsText">{post.nttCn}</div> </div> <section> <div className="btnArea"> <MyButton text={"리스트이동"} onClick={() => Navigate(-1)} /> <MyButton text={"수정하기"} type="positive" /> </div> </section> </div> ); }; export default BoardView; 질문이 있는데 useEffect에서 [post]로 하면 무한 루프가 돌고 저런식으로 [boardSetData,post.postId,post.nttSj,post.nttCn] 으로 놓으면 무한루프가 돌지 않는데 이유를 알수 있을까요 ...postId는 글번호 nttSj 제목 , nttCn 제목이며 const boardSetData = useContext(BbsSettingContext);여기서 boardSetData는 게시판 셋팅 데이터 입니다 .왜 무한 루프가 도는지 알수있을까요 .게시판 셋팅 , 글제목, 글번호 글내용이 바뀌면 useEffect의 axios가 전송 되어야 하게 할려고 합니다 근데 무한 루프가 도네요 ...
-
해결됨진짜! 자바스크립트(Javascript) - 기초부터 고급까지
커리큘럼 관련 질문
강의 커리큘럼에서추가 섹션 부분은 어떻게 이해하면 될까요?갑자기 다른 개념에 대해 강의를 듣는 기분이라 어렵게 느껴지기도 해서요
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
refresh 토큰이 만료됐는데 만료된 refresh 토큰으로 새로운 refresh 토큰을 발급받는 것인가요..?
access token이 만료되었을 떄 refresh 토큰을 통해 access token을 새로 발급 받는 것은 이해가 되는데.. refresh 토큰이 만료되어서 새로운 refresh 토큰을 발급받기 위한 시점에서 만료된 refresh 토큰을 사용할 수 있는 것인가요..? 조금 헷갈리내요..
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
[토큰 재발급 로직 코딩하기] 토큰 재발급 후 sub 정보 사라짐
signToken(user: Pick<UsersModel, 'email' | 'id'>, isRefreshToken: boolean) { const payload = { email: user.email, sub: user.id, type: isRefreshToken ? 'refresh' : 'access', }; return this.jwtService.sign(payload, { secret: JWT_SECRET, // seconds expiresIn: isRefreshToken ? 3600 : 300, }); } async rotateToken(token: string, isRefreshToken: boolean) { const decoded = this.jwtService.verify(token, { secret: JWT_SECRET, }); if(decoded.type !== 'refresh'){ throw new UnauthorizedException('토큰 재발급은 Refresh 토큰으로만 가능합니다!'); } return this.signToken({ ...decoded, }, isRefreshToken); }토큰 생성 시 payload에서 sub에 user.id를 할당하고 있는데 재발급시 decoded 객체를 그대로 할당하면 sub 정보가 사라지지 않나요?
-
미해결Vue.js 시작하기 - Age of Vue.js
vue 개발자도구
회사가 인터넷이 안되는 개발환경인데요. vue devtools 를 다운로드 해서 파일이동해서 설치 하고 싶은데 다운로드는 안되나요?
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
async와 await 로직을 사용해야 하는 기준을 잘 모르겠어요
비동기 로직을 호출만 하고 끝나는게 아니라 결과값을 활용해야할 때 async, await를 활용해야 한다고 이해하고 있는데요. 한가지 이해가 잘 가지 않는 부분이Auth Service에서async registerWithEmail( user: Pick<UsersModel, 'nickname' | 'email' | 'password'>, ) { const hash = await bcrypt.hash(user.password, HASH_ROUNDS); const newUser = await this.usersService.createUser({ ...user, password: hash, }); return this.loginUser(newUser); }async 함수는 결국 Promise를 반환하니까Auth Controller에서@Post('/register/email') registerByEmail( @Body('nickname') nickname: string, @Body('email') email: string, @Body('password') password: string, ) { return this.authService.registerWithEmail({ nickname, email, password, }); }async, await를 사용하지 않으면 제대로 동작하지 않을 줄 알았는데 비동기 호출의 결과인 token이 잘 반환되더라구요. 혹시 이유를 알 수 있을까요?async, await를 판단하는 강사님 만의 기준이 혹시 있으신지, 그리고 굳이 async, await가 필요 없는 곳에도 사용하게되면 성능의 차이가 생기는지도 궁금합니다.
