묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Vue 3 시작하기
컴포넌트간의 데이터 이동에 대해
안녕하세요.동일 레벨 컴포넌트간에 데이터를 주고 받는 방법에 대해 레벨1 -루트레벨2 - 컴포넌트a, 컴포넌트b인경우컴포넌트a -> 루트 -> 컴포넌트b 라고 수업내용에서 배웠습니다.그렇다면 계층이 더 깊은 경우는 어떻게 되나요?예를 들어 컴포넌트 구조가 레벨1 -루트레벨2 - 컴포넌트a-1, 컴포넌트b-1레벨3 - 컴포넌트a-2, 컴포넌트b-2인경우 (트리구조 비슷한?)컴포넌트 a-2에서 b-2로 전달하려면 컴포넌트a-2 -> 컴포넌트a-1 -> 루트 -> 컴포넌트b-1 -> 컴포넌트b-2 이런식으로 루트를 통해야 되나요? 그리고 a-2옆에 같은 레벨의 a-3이 있다면,이또한 루트까지 데이터를 올린다음 내려 받아야 할까요? 이런 느낌입니다.
-
해결됨Vue 3 시작하기
Event Emit 구현에서 이벤트가 여러개의 경우
<app-contents v-on:refresh="showAlert"></app-contents> methods: { sendEvent() { this.$emit('refresh'); } }강의 코드의 경우, 이벤트가 하나인데요.여러개의 경우 어떻게 작성하는게 좋을까요? 예를 들어methods: { sendEvent1() { this.$emit('refresh1'); }, sendEvent2() { this.$emit('refresh2'); }, sendEvent3() { this.$emit('refresh3'); }, }인경우<app-contents v-on:refresh1="showAlert1" v-on:refresh2="showAlert2" v-on:refresh3="showAlert3" > </app-contents>이런식으로 작성하나요?아니면 따로 좋은 작성방법이 있을까요? 매번 이벤트 추가할 때 마다 연결을 해줘야 하는게, 추적을 위해서 라고는 하지만 편리한지 모르겠습니다.
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
slot 적용 안되는 것 해결법
vue3 부터 slot 태그를 지원하지 않는 것 같습니다.아래와 같이 v-slot으로 작성해주셔야 합니다. 또한 v-slot은 template 태그에서만 동작 합니다. TodoInput Component<Modal v-if="showModal" @close="showModal = false"> <template v-slot:header> <i class="closeModalBtn fas fa-times-circle" v-on:click="showModal = false">경고!</i> </template> <template v-slot:body>아무것도 입력하지 않았습니다.</template> </Modal> 감사합니다.
-
미해결처음 만난 리액트(React)
[chapter_04]시계만들기 오류
안녕하세요 강사님. chapter03을 할때도 있던 문제와 더불어, chapter04를 진행할때도 문제가 생겨 질문드립니다.제가 궁금한 내용은port 3000번이 이미 사용중이라는 메세지가 뜨는이유(초반에 create ~~명령어를 사용해 my-app 폴더를 만들어 cd my-app , npm start를 쓸땐 port 3000번에 강의영상과 같은 화면이 잘 나왔습니다.) 이것 때문에 실행할때마다 포트번호가 3001, 3002, ... 3010 이런식으로 계속 증가합니다chapter3를 실행할땐 나오지 않던 에러페이지가 chapter4를 실행할때 나오는 이유입니다.(2번문제는 해결해서 에러는 확인해서 처리했습니다. 리턴할때 괄호를 붙이고 써서 나온 에러같아서 수정해보니 되더군요)우선 아래는 Clock.jsx파일입니다.import React from "react"; function Clock(props){ return( <div> <h1>안녕, 리액트!</h1> <h2>현재 시간: {new Date().toLocaleDateString()}</h2> </div> ); } export default Clock;그리고 index.js파일입니다.import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_03/Library'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(()=>{ root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000) // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 이를 새 터미널을 활용해 실행시켜보면 다음과 같이 뜨는데요,여기서 y를 눌러 실행을 해보면 아래와 같이 에러가 뜹니다.에러가 나는 이유와 해결방안이 궁금합니다 감사합니다.
-
미해결Vue 3 시작하기
영상 하단에 강의노트가 있다고 하셨는데 안보입니다...
영상 하단에 강의노트가 있다고 하셨는데 안보입니다...업로드가 아직 제대로 되지 않은 것인 지, 제가 그냥 못 찾는 것인 지 모르겠네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
softdelete는 어떤 식은 test 코드를 짜야할까요?
jest 를 이용하여 테스트코드를 짜고 있는데 처음이라 너무 어렵네요. softdelete는 어떤식으로 테스트코드를 짜야될까요?그리고 조인해서 결과 값을 뽑을 때 테스트코드를 어떻게 짜야할지 감이 안옵니다.구글링해도 자료가 별로 없네여...
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
삼항연산자를 이용해서 풀어 보았습니다
삼항 연산자를 이용하여 가장 큰 수 를 구하고, 전체 수를 더한값을 뺀 후 나머지 2개의 숫자의 합을 구해서 비교하여 "YES"와"NON"를 구해 보았습니다.<!-- 삼각형 판별하기 --> <html> <head> <meta charset="UTF-8" /> <title>출력결과</title> </head> <body> <script> function solution(a, b, c) { let answer; const longLine = a > b ? (a > c ? a : c) : b > c ? b : c; const totalLine = a + b + c; const remainder = totalLine - longLine; answer = longLine < remainder ? "YES" : "NO"; return answer; } console.log(solution(7, 5, 2)); </script> </body> </html>
-
해결됨시나브로 자바스크립트
첫 강의 배포 & 번들러의 기초에 대한 제 이해가 맞는지 궁금합니다
안녕하세요! 저는 시나브로님의 강의를 듣고 있는 학생입니다! 다름이 아니라 이전에 강의를 들었을 때에는 다소 난이도가 있어 미뤄두고 이번에 들었는데 조금 나아진 것 같습니다. 사실 아직 배포를 해본 경험이 없어 제 이해가 맞는지 여쭤보고 싶습니다.배포를 위해서는 netlify나 vercel과 같은 호스팅 서비스를 이용하면 간편하게 진행할 수 있습니다(주변 분들께 궁금해서 여쭤보니, aws를 통해 좀 더 근간적으로 빌드와 배포를 진행할 수 있다는데 이 부분을 지금 공부하는 것이 좋을까요?)시나브로님께서 강의에서 parcel과 vite를 이용해 빌드 & 번들하는 것을 보여주셨습니다. 두 방식 모두 특정 디렉토리에 소스 파일들을 작성하고, build 명령어를 통해 dist 디렉터리에 배포될 파일들을 생성합니다. 후에 vercel 같은 호스팅 서비스에서는 해당 프로젝트가 어떤 번들 툴로 만들어졌는지를 파악하고 서비스를 도와줍니다.제가 추가적으로 chatGPT를 통해 알아보니 vite는 esbuild라는 트랜스파일링 & 번들을 동시에 해주는 내장 프로그램을 사용합니다. 이는 GO 언어로 작성되었기에 속도가 굉장히 빠릅니다. 기존의 CRA 프로젝트 같은 경우에는 babel 컴파일러와 webpack 번들러를 이용하지만, 이보다는 속도가 느릴 수 있습니다.tailwindCSS 라이브러리를 이용하여 문서의 스타일링을 진행하면 parcel이나 vercel 같은 프로그램이 이를 CDN을 통하여 관리해줍니다(이 부분이 개념이 다소 헷갈리는 것 같습니다). 사실 아직 실제로 해본 것이 아니라 개념이 헷갈립니다. 그래도 일단 강의를 한번 차례로 들으면 이해가 더 나아질까요? 감사합니다☺️
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vue에서 Dependency Injection이 없나요?
안녕하세요~!프론트에 관심이 생겨서재미있게 강의를 듣고 있는 백엔드 개발자 입니다. 강의를 듣다보니 js는 component를 작성할 때 클래스를 만드는 것보다는 함수를 만들어서 해결하는 것 같은데요. 컴포넌트 클래스를 생성하고 spring framework 처럼 IoC를 사용하여 각 컴포넌트간에 DI를 사용할 수는 없는 건가요?감사합니다.
-
미해결처음 만난 리액트(React)
chapter_04 시계만들기에서 오류가 납니다ㅠㅠ
설명보고 따라하였는데 시계가 아닌 오류문구만 뜹니다..무엇이 문제일까요?ㅠㅠ
-
미해결함수형 프로그래밍과 JavaScript ES6+
fxts를 배워보려고 합니다.
안녕하세요. 이번에 회사에서 함수형 프로그래밍을 해보려고 하는데, fxts를 사용하려고 합니다.이 강의는 fxjs를 다루고 있는데, fxts를 사용하려 할때도 도움이 될까요?감사합니다.
-
미해결함수형 프로그래밍과 JavaScript ES6+
flatMap 관련 질문드립니다~
안녕하세요 선생님~~지금까지 모르는거 있어도 그냥 계속 반복해서 보고, log 찍어보면서 해결했는데flatMap 부분에서 도저히 이해 안 가는 부분이 있어서 이렇게 질문드립니다 ㅠㅠ.. 우선 왜 map을 먼저하는지 모르겠습니다..중첩배열을 먼저 평탄화 시켜주고 그 다음 map을 했을때에는 예상치 못한 결과나 에러가 발생하지 않았는데요.map을 먼저 하게 되면 중첩 배열을 받아서 전달된 함수를 실행하는 부분에서 계속 결과값이 이상해 집니다... ㅠㅠ사실 당연한 결과인데 map이든 L.map이든 [1,2,[3,4],[5]] 이런 중첩배열을 받아서 순회를 하고a => a+10 이런 함수를 실행하면 당연히 결과 값이 이상해지는데 선생님 코드에서는 어떻게 제대로 작동 되는 건지 궁금합니다...;;만약 L.flatMap(a => a, [1, 2, [3, 4], [5]]) 이런식으로 하면 그냥 a를 반환만 하니까 중첩배열이 반환 되고 L.flatten 에서 평탄화 되니까 별문제 없는데 a =>a +10 이런식의 함수를 넘겨주면 결과값이 이상해집니다...ㅠ 뭐가 문제 인지 힌트 부탁드립니다~ const curry = fn => (a, ...args) => args.length ? fn(a, ...args) : (...args) => fn(a, ...args); const reduce = (fn, iter, acc) => { if (!acc) { iter = iter[Symbol.iterator](); acc = iter.next().value; } for (const a of iter) { acc = fn(acc, a); } return acc; } const L = {}; L.map = curry(function* (fn, iter) { for (const a of iter) { yield fn(a) } }); const isIterable = (a) => a && a[Symbol.iterator] L.flatten = function* (iter) { for (const a of iter) { if (isIterable(a)) { yield* a } else yield a } } const map = curry((fn, iter) => { const res = []; for (const a of iter) res.push(fn(a)) return res; }) const take = curry((limit, iter) => { const res = []; for (const a of iter) { res.push(a) if (res.length === limit) return res; } return res; }); const go = (...args) => reduce((a, fn) => fn(a), args); const pipe = (f, ...fn) => (...args) => go(f(...args), ...fn); // L.flatMap L.flatMap = curry(pipe( L.map, L.flatten )); const iter = L.flatMap(a => a + 10, [1, 2, [3, 4], [5]]) console.log(...iter) // 결과값 11 12 3 , 4 1 0 5 1 0
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 프로젝트 생성시 질문
npx-create 시 에러나서user/Appdata/Roaming 경로 아래 npm폴더를 생성하고 재수행했더니 작동했는데 이유가 궁금합니다. 그리고 강사님께서 하시는 방법으로 바꿀수 있는 방법은 없을까요...? 매번 appdata로 가서 폴더 선택하는것이 번잡스러워서요...
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
props 사용 시 중괄호 질문
props를 사용해 전달 받을 때 어떤 상황에서 중괄호를 사용하고 특히 함수를 전달 받을 때 왜 중괄호가 필요한지 궁금합니다.const DiaryEditor = ({onCreate}) => {return} const DiaryList = ({diaryList}) => {return} const DiaryItem = ({author, content, create_date, emotion, id}) => {return}
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
참고링크가 잘못 되어 있습니다.
참고링크 주소에https://github.com/joshua1988/vue-advanced라고 표기 되어있는데, 실제 링크되어 있는 URL은https://gist.github.com/joshua1988/da1b9ab5703480f71cef88b2f8cb6edehttps://github.com/joshua1988/vue-advanced입니다. https://gist.github.com/joshua1988/da1b9ab5703480f71cef88b2f8cb6ede https://github.com/joshua1988/vue-advanced 두개의 주소가 같이 붙어있네요.. ^^;;;
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
코드샌드박스 환경 설정 부분 질문 있습니다
섹션2 - 자바스크립트 코딩 환경 설정 강의를 들으면서 샌드박스에서 회원가입 후 create 를 눌러 vanilla를 생성했는데, 화면이 이렇게만 뜨는데 어떻게 해야하나요?ㅠㅠ 선생님처럼 파일이나 이런 게 뜨는 게 아니라 계속 저런 화면만 뜨네요
-
해결됨코어 자바스크립트
실행컨텍스트와 스택프레임
안녕하세요, 선생님. 강의 정말 잘 들고 있습니다..! 몇가지 궁금한 점이 생겼는데요.실행컨텍스트는 작동방식이고 그걸 구체적으로 표현한 객체가 스택프레임이라고 생각하면 될까요? 아니면 같은 개념인데 표현이 다른 걸까요? 콜스택을 간접적으로나마 확인할 수 있는 방법이 있을까요? 좋은 수업 정말 감사드립니다!!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nestjs+graphql로 작업할때 response도 dto로 만들어야하나요?
선생님, 질문두가지 드릴게요, 감사합니다1. nestjs+graphql로 작업할때 response도 dto로 만들어야하나요?2. class-validator를 entity에서 사용하고 dto를 pick, omit으로 상속받는게 좋나요? 아니면 dto들에서 따로 class-validator를 적용하는게 좋나요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
mysql 신택스 오류 질문드립니다 ㅠㅠ
강의보는중에 workbench 에서 hostname을 작성하고 나머지 정보도 작성해서 test Connection을 해줘도 비밀번호가 틀리다고 하여 노션에 있는 방법대로 비밀번호를 초기화하는 중에 사진과 같이 신택스 오류가 났다고 하는데 도저희 어디가 잘못되었는지 몰라서 남겼습니다. 비밀번호는 강의 내용 그대로 따라 했습니다
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드 중에 질문이 있어요 ..
아래 코드에서 ${emotion} 으로 쓰는것과 그냥 {strDate}랑 하나는 $를 쓰고 하나는 안쓰는거같은데 이거 어떨떄 차이가 나는지좀 알수있을까요??import { useEffect, useState, useContext } from "react"; import MyButton from "./MyButton"; import { useNavigate } from "react-router-dom"; const DiaryItem = ({ id, emotion, content, date }) => { console.log(process.env.PUBLIC_URL + `/assets/emotion${emotion}.png`); const strDate = new Date(parseInt(date)).toLocaleDateString(); const goDetail = () => { Navigate(`/diary${id}`); }; const goEdit = () => { Navigate(`/edit${id}`); }; return ( <div className="DiaryItem"> <div onClick={goDetail} className={[ "emotion_img_wrapper", `emotion_img_wrapper_${emotion}`, ].join(" ")} > <img src={process.env.PUBLIC_URL + `assets/emotion${emotion}.png`} /> </div> <div className="info_wrapper"> <div className="diary_date">{strDate}</div> <div className="diary_content_preview">${content.slice(0, 25)}</div> </div> <div className="btn_wrapper"> <MyButton onClick={goEdit} text={"수정하기"} /> </div> </div> ); }; export default DiaryItem;
