다른 분들도 비슷한 오류가 있었는데 봐도 해결이 안되어서 질문드립니다.현재 결과 계산하기 파트에서 오류가 생겨 이후 강의는 작성하지 않은 상태입니다. 질문1goResult 함수에서 const select = [] 로 정의된 변수를 실행시키니 0번 인덱스가 비어있음으로 뜹니다. 어떻게 해야 첫번째 인덱스도 함께 나올수 있을까요?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) }) console.log(select) calResult() }function goNext(qIdx){ if(qIdx === endPoint){ goResult() return } let q = document.querySelector(".qBox"); q.innerHTML = qnaList[qIdx].q; for (let i in qnaList[qIdx].a){ addAnswer(qnaList[qIdx].a[i].answer, qIdx, i); }; let status = document.querySelector(".statusBar") status.style.width = (100/endPoint) * (qIdx+1) + "%" } 질문 2calResult 함수에서 console.log(resultArray)를 찍으니 아무것도 나오지 않습니다.어디서부터 잘못된지 모르겠습니다..ㅠ  function calResult() { let pointArray = [ { name: "mouse", value: 0, key: 0 }, { name: "cow", value: 0, key: 1 }, { name: "tiger", value: 0, key: 2 }, { name: "rabbit", value: 0, key: 3 }, { name: "dragon", value: 0, key: 4 }, { name: "snake", value: 0, key: 5 }, { name: "horse", value: 0, key: 6 }, { name: "sheep", value: 0, key: 7 }, { name: "monkey", value: 0, key: 8 }, { name: "chick", value: 0, key: 9 }, { name: "dog", value: 0, key: 10 }, { name: "pig", value: 0, key: 11 } ]; for (i = 0; i < endPoint; i++) { let target = qnaList[i].a[select[i]]; for (j = 0; j < target.type.length; j++) { for (k = 0; k < pointArray.length; k++) { if (target[j] === pointArray[k].name) { pointArray[k].value += 1; } } } } let resultArray = pointArray.sort(function (a, b) { if (a.value > b.value) { return -1; } if (a.value < b.value) { return 1; } return 0; }); console.log(resultArray); let resultword = resultArray[0].key; return resultword; } 소스 코드만 보내드리면 보시기 힘들어하시는것같아 깃 파일도 같이 첨부하였습니다!https://github.com/kihet77/psychologyTestWeb/tree/main/MyMBTI-main/start

문제를 이해를 잘 못한건지, 저는 날짜가 먼저 3일,13일, 23일이 올 수 있고 그걸 일의자리 수를 알아낸 후 비교하여 풀었습니다. function solution(day, arr) { let answer; let waringCars = []; const checkDay = day.toString().length === 1 ? day.toString() : day.toString()[1]; arr.map((cars) => { if (cars.toString()[1] === checkDay) waringCars.push(cars); }); return waringCars.length; } const day = 23; let arr = [25, 23, 11, 47, 53, 17, 33]; console.log(solution(day, arr));

map함수를 이용하여 풀어보았습니다.function solution(arr) { let sum = 0; let oddNumbers = []; arr.map((value) => { if (value % 2 === 1) { sum += value; oddNumbers.push(value); } }); return [sum, Math.min(...oddNumbers)]; } let arr = [12, 77, 38, 41, 53, 92, 85]; console.log(solution(arr));

풀고 난 후 강의를 보니 for문으로 풀었어야 됬나 싶군요. function solution(arr) { return Math.min(...arr); } let arr = [5, 7, 1, 3, 2, 9, 11]; console.log(solution(arr));

안녕하세요.사용자 입력 처리하기 강의 관련 질문입니다. input 태그를 통해 사용자 입력을 받고, 상태 관리하면, 상태에 사용자의 입력이 반영되는 게 한 단계씩 늦는 것 같습니다. (그 이유가 useState가 비동기적으로 처리된다고 들은적이 있는 것 같은데, 정확히 이해가 가지 않아서 질문드립니다.) 아래 코드의 handleOnChange함수에서,Q1) e.target.name, e.target.value은 제깍제깍 실시간으로 반영이 되는데, input state는 한 단계 늦게 반영이 됩니다. 이런 현상이 발생하는 이유는 무엇이고, 이건 개발하는데 문제가 되지 않는 이유는 뭔지? 가 궁금합니다! import { useState } from 'react'; const DiaryEditor = () => { const [input, setInput] = useState({ author: '', content: '', emotion: 1, }); const handleOnChange = (e) => { console.log(e.target.name); console.log(e.target.value); setInput({ ...input, [e.target.name]: e.target.value }); console.log(input); }; const handleSubmit = () => { console.log(input); alert('오늘의 일기가 저장되었습니다!'); }; return ( <div className='DiaryEditor'> <h2>오늘의 일기</h2> <div> <input name='author' value={input.author} onChange={handleOnChange} /> <p>{input.author}</p> </div> <div> <textarea value={input.content} name='content' onChange={handleOnChange} /> <p>{input.content}</p> </div> <div> <span>감정 지수 : </span> <select onChange={handleOnChange} name='emotion' value={input.emotion} > <option value={1}>1</option> <option>2</option> <option>3</option> <option>4</option> <option value={5}>5</option> </select> </div> <div> <button onClick={handleSubmit}>저장하기</button> </div> </div> ); }; export default DiaryEditor; Q2) 위처럼 input이란 state는 한단계씩 늦게 반영이 되는데, select태그의 value 속성을 주는 목적은 무엇인가요??인풋의 value 속성은 실시간으로 인풋의 값과 상태를 동기화해주는 목적으로 사용한다고 생각했는데,state가 곧바로 변하지 않는거면, 이 인풋의 value 속성은 무용지물인 것 아닌가라는 생각이 들어 질문드립니다.  <select onChange={handleOnChange} name='emotion' value={input.emotion} >Q3) useState의 초기값은 반드시 빈문자열등으로 인자를 전달하는 게 나은가요? 아무 인자도 전달하지 않으면 어떤 잠재적인 에러 발생 가능성이 있는건가요?

안녕하세요.  output 창의 높이가 강사님 화면처럼 고정되지가 않고, previous 와 current.textContent 값이 있으면 높이가 조금 높아졌다가, 값이 없으면 작아집니다. 계산기의 style.css 를 그대로 따라 했고요.안되서 강의 파일을 그대로 복사했어도 동일합니다.당췌 이유를 모르겠습니다. ㅡㅡ;  ( 참고로 강의 파일에는 right 로 되어 있어서 botton 으로 수정해서 적용했습니다. )body { height: 100vh; background: linear-gradient(to right, #00aaff, #0f4c81); } [index.html] <!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" /> <link rel="stylesheet" href="style.css" /> <script src="main.js" defer></script> <title>계산기</title> </head> <body> <div class="calculator-grid"> <div class="output"> <div class="previous-operand" data-previous-operand></div> <div class="current-operand" data-current-operand></div> </div> <button class="span-two" data-all-clear>AC</button> <button data-delete>DEL</button> <button data-operation>÷</button> <button data-number>1</button> <button data-number>2</button> <button data-number>3</button> <button data-operation>×</button> <button data-number>4</button> <button data-number>5</button> <button data-number>6</button> <button data-operation>+</button> <button data-number>7</button> <button data-number>8</button> <button data-number>9</button> <button data-operation>-</button> <button data-number>.</button> <button data-number>0</button> <button class="span-two" data-equals>=</button> </div> </body> </html> [style.css]* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(to bottom, #00aaff, #0f4c81); } .calculator-grid { display: grid; justify-content: center; align-content: center; min-height: 100vh; grid-template-columns: repeat(4, 100px); grid-template-rows: minmax(120px, auto) repeat(5, 100px); } .calculator-grid > button { cursor: pointer; font-size: 2rem; border: 1px solid #fff; outline: none; background-color: rgba(255, 255, 255, 0.75); } .calculator-grid > button:hover { background-color: rgba(255, 255, 255, 0.9); } .span-two { grid-column: span 2; } .output { grid-column: 1/-1; background-color: rgba(0, 0, 0, 0.75); display: flex; align-items: flex-end; justify-content: space-around; flex-direction: column; padding: 10px; word-wrap: break-word; word-break: break-all; } .output .previous-operand { color: rgba(255, 255, 255, 0.75); font-size: 1.5rem; } .output .current-operand { color: #fff; font-size: 2.5rem; }  

안녕하세요.계산기 코드에서, 소수점선택이랑, 0 을 선택하는 경우,floatNumber 는 해당값 인식이 안되어, 상단 currentDisplay에 표시가 안되고,이후 다른 숫자를 누르면 소수점 및 0을 포함하여 floatNumber 값이 인식이 되어 상단에 함께 표시가 되던데요. 소수점은 아니더라도 소수점 이하 0을 눌렀을 때에 상단화면에 0까지를 바로 표시가 되도록 하려면 if 문으로 추가 코딩을 해야 하는 거겠죠??

함수형 프로그래밍이 프로그래밍적 함수를 수학적 함수의 개념을 차용해 코딩하는 방법같다는 생각이 드는데, 맞을까요? 그렇게 차용하기 위해 순수함수, 참조 투명성 등이 필요한 거고!

const reduce = (f, iter, acc) => { if (acc === undefined) { iter = iter[Symbol.iterator]() acc = iter.next().value } for (const v of iter) { acc = f(acc, v) } return acc }console.log(reduce(add, [1, 2, 3, 4, 5], 0)) console.log(reduce(add, [1, 2, 3, 4, 5]))강의 언제나 즐겁게 듣고 있습니다!reduce 파트 듣다가 js reduce에 가까운 구현은 이쪽이 아닐까 싶습니다!초기 값이 존재하지 않을 때, 배열의 첫번째 요소를 사용하는 사례를 더 잘 표현한 것 같습니다. 

CSS 코드는 올바르게 짠 것 같은데저는 사진에 착 달라붙어서 폰트가 출력되네요..뭐가 문제일까요?

마우스 갖다대면 리턴값 없다고 떠야하는데 뜨지않네요. 어디를 설정해야할까요? 아래 캡쳐(강의모습)처럼 떠야하는데 그렇게 안뜨네요 ㅠ   

 강의자료에 자료가 있습니다만, 가르쳐주시는 곳의 ppt 랑 똑같은거는 아니더라고요. 강의중에 쓰는 ppt가 복습할때 더 효율적일 거 같아서 볼려고 하는데 볼 수 없을까요?

🚨질문 작성법 및 안내사항질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.console.log("hello world");안내사항- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다.  강의에서 종료 라는 문장을 정말 이 코드가 종료됐을 때 출력하고싶다면, 우리는 콜백함수를 이용해 해당 코드를 인수로 넘겨주어야합니다. 이 부분이 이해가 되지 않습니다. 콜백함수로 왜 넘겨줘야하는지 헷갈립니다. <이렇게는 안되나요>const work = () => { 2 setTimeout(() => { 3 console.log("3초만 기다리세요"); 4 console.log("종료"); 5 }, 3000); 6}; 7  const work = (callback) => { 2 setTimeout(() => { 3 console.log("3초만 기다리세요"); 4 callback(); 5 }, 3000); 6}; 7 8 work(() => { 9 console.log("종료"); 10}); setTimeout(() => { 2 console.log("3초만 기다리세요"); 3}, 3000); 4 5console.log("종료");

안녕하세요 Phaser3 강의를 듣고 있는 학생입니다. // camera가 가는 곳으로 background가 따라 움직이도록 해줍니다. this.m_background.setX(this.m_player.x - Config.width / 2); this.m_background.setY(this.m_player.y - Config.height / 2); // tilePosition을 player가 움직이는 만큼 이동시켜 마치 무한 배경인 것처럼 나타내 줍니다. this.m_background.tilePositionX = this.m_player.x - Config.width / 2; this.m_background.tilePositionY = this.m_player.y - Config.height / 2;이렇게 하면 카메라도 고정이고, 무한배경도 구현할 수 있는걸 알게되었습니다. 그런데어느 게임처럼.. 배경의 크기가 좀 크지만 정해져있고, 플레이어가 배경 끝에 다다르기 전까지는 시점이 중앙 고정이었다가, 배경의 끝에 다다르게 되면 카메라 시점 고정이 풀리게 되는 방식을 만들기 위해서는 어떻게 해야될지 모르겠어서 질문 남겨드립니다!

분명히 코드를 그대로 따라 쳤는데 1초에 두 번씩 알림이 나오는 경우도 존재하나요?Warning: Each child in a list should have a unique "key" prop. 오류도 떴습니다. 각각 notification.jsx, notificationList.jsx 코드입니다import React from "react" const styles = { wrapper: { margin: 8, padding: 8, display: 'flex', flexDirection: 'row', border: '1px solid grey', borderRadius: 16 }, messageText: { color: 'black', fontSize: 16 } } class Notification extends React.Component { constructor(props) { super(props) this.state = {} } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ) } } export default Notificationimport React from 'react' import Notification from './notification' const reservedNotifications = [ { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, ] var timer class NotificationList extends React.Component { constructor(props) { super(props) this.state = { notifications: [] } } componentDidMount() { const { notifications } = this.state timer = setInterval(() => { if(notifications.length < reservedNotifications.length) { const index = notifications.length notifications.push(reservedNotifications[index]) this.setState({ notifications: notifications }) } else { clearInterval(timer) } }, 1000) } render() { return ( <div> {this.state.notifications.map(v => { return <Notification message={v.message}/> })} </div> ) } } export default NotificationList

props 강의 관련 질문입니다!1)어떻게 컨테이너 컴포넌트에 프롭스 형태로 전달하지 않아도,<Container children = { <Counter {...counterProps} />} />2)jsx 자체를 컨테이너 아래에 중첩?! 시키는 방법만으로도 children prop으로 작용할 수 있게되는지 그 이유? 원리가 궁금합니다!!<Container> <div className='App'> <Counter {...counterProps} /> </div> </Container> import './App.css'; import Container from './Container'; import Counter from './Counter'; function App() { const counterProps = { // initialValue: 7, a: 1, b: 2, }; return ( <Container> <div className='App'> <Counter {...counterProps} /> </div> </Container> ); } export default App; 저는 예를 들어 아래와 같은 방식으로 children prop을 전달하는 걸로 생각하고 있었습니다. <Container children={<OddEvenResult count={count} />} /> 1), 2) 방식의 차이는 무엇이고(어떤 게 더 나은 방식이고?), 2)방식의 동작원리에 대해 질문드립니다!!

12줄에 @ts-check 적어서 25줄에 넘버타입 아니라고 알려주어야 하는데 안뜨네요 어떤 게 문제인가요?

같은 폴더 안에 sample.js, sample.ts가 있는데요index.html에 <script> sample.js 추가했고 콘솔 찍어보면서 강의듣고 있었는데 sample.ts는 콘솔에 안 나오더라구요 어떻게 하면 연결할 수 있을까요? 회사 컴퓨터라 이미 타입스크립트 쓰고 있어서 컴파일은 깔려있을 것 같습니다

beyond insight > 피그마 원본 > 수강생 참고자료, 파일 임포팅이 되지 않습니다 ㅜ 파일명이 수강생 참고자료(Beyond Insight).fig..fig..fig 입니다.   

2. 영상에서 설치하라는 것 다 똑같이 따라했는데 이부분 영상에서처럼 상자모양?별모양?으로 나오지 않습니다. 어떻게 해야할까요? 두번째 사진에 city도 나오지 않습니다 ㅠ 스크립트 전문입니다 // api url var url = "https://jsonplaceholder.typicode.com/users/1"; // dom var username = document.querySelector("#username"); var email = document.querySelector("#email"); var address = document.querySelector("#address"); // user data var user = {}; function fetchUser() { return axios.get(url); } /** * @typedef {object} Address * @property {string} street * @property {string} city */ /** * @typedef {object} User * @property {string} name * @property {string} email * @property {Address} address */ /** * @returns {Promise<User>} */ fetchUser().then(function (response) { response.address; }); function startApp() { // axios // .get(url) fetchUser() .then(function (response) { // console.log(response); user = response.data; // TODO: 이름, 이메일, 주소 표시하기 console.log(user); username.innerText = user[0].name; email.innerHTML = user[0].email; // 그냥 문자열이 아니라 객체였음(키:밸류 값) address.innerHTML = user[0].address.street; }) .catch(function (error) { console.log(error); }); } startApp(); // /** // *@param {number} a // *@param {number} b // * // */ // function sum(a, b){ // return a+b; // } // SubmitEvent(10,20)