묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
toString으로 변환하여 비교해서 풀어 보았습니다.
문제를 이해를 잘 못한건지, 저는 날짜가 먼저 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함수를 이용하여 풀어보았습니다.
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));
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[input 속성 및 state 관리] 사용자 입력 처리하기
안녕하세요.사용자 입력 처리하기 강의 관련 질문입니다. 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의 초기값은 반드시 빈문자열등으로 인자를 전달하는 게 나은가요? 아무 인자도 전달하지 않으면 어떤 잠재적인 에러 발생 가능성이 있는건가요?
-
미해결입문자를 위한, ES6+ 최신 자바스크립트 입문
[계산기 CSS Markup]output 창의 높이관련
안녕하세요. 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; }
-
미해결입문자를 위한, ES6+ 최신 자바스크립트 입문
[계산기]소수점 이하 '0' 버튼 입력시 상단표시 관련
안녕하세요.계산기 코드에서, 소수점선택이랑, 0 을 선택하는 경우,floatNumber 는 해당값 인식이 안되어, 상단 currentDisplay에 표시가 안되고,이후 다른 숫자를 누르면 소수점 및 0을 포함하여 floatNumber 값이 인식이 되어 상단에 함께 표시가 되던데요. 소수점은 아니더라도 소수점 이하 0을 눌렀을 때에 상단화면에 0까지를 바로 표시가 되도록 하려면 if 문으로 추가 코딩을 해야 하는 거겠죠??
-
미해결함수형 프로그래밍과 JavaScript ES6+
함수형 프로그래밍이란
함수형 프로그래밍이 프로그래밍적 함수를 수학적 함수의 개념을 차용해 코딩하는 방법같다는 생각이 드는데, 맞을까요? 그렇게 차용하기 위해 순수함수, 참조 투명성 등이 필요한 거고!
-
미해결함수형 프로그래밍과 JavaScript ES6+
reduce 예제 코드 제안!
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에 가까운 구현은 이쪽이 아닐까 싶습니다!초기 값이 존재하지 않을 때, 배열의 첫번째 요소를 사용하는 사례를 더 잘 표현한 것 같습니다.
-
미해결처음 만난 리액트(React)
chap05) 저는 왜 폰트가 사진에 딱 붙어서 나올까요?
CSS 코드는 올바르게 짠 것 같은데저는 사진에 착 달라붙어서 폰트가 출력되네요..뭐가 문제일까요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
마우스 갖다대면 리턴값 설명 나오는 거 질문드려요
마우스 갖다대면 리턴값 없다고 떠야하는데 뜨지않네요. 어디를 설정해야할까요? 아래 캡쳐(강의모습)처럼 떠야하는데 그렇게 안뜨네요 ㅠ
-
미해결[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
강의에 있는 똑같은 ppt는 pdf로라도 구할 수 없는걸가요?
강의자료에 자료가 있습니다만, 가르쳐주시는 곳의 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("종료");
-
해결됨[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론
Phaser3 질문드립니다!!
안녕하세요 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;이렇게 하면 카메라도 고정이고, 무한배경도 구현할 수 있는걸 알게되었습니다. 그런데어느 게임처럼.. 배경의 크기가 좀 크지만 정해져있고, 플레이어가 배경 끝에 다다르기 전까지는 시점이 중앙 고정이었다가, 배경의 끝에 다다르게 되면 카메라 시점 고정이 풀리게 되는 방식을 만들기 위해서는 어떻게 해야될지 모르겠어서 질문 남겨드립니다!
-
해결됨처음 만난 리액트(React)
알림이 1초마다 두 개씩 뜹니다.
분명히 코드를 그대로 따라 쳤는데 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
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[props] children 사용법 및 동작원리 질문
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)방식의 동작원리에 대해 질문드립니다!!
-
미해결타입스크립트 입문 - 기초부터 실전까지
js에서 @ts-check 적어도 체크하지 못하는 문제입니다
12줄에 @ts-check 적어서 25줄에 넘버타입 아니라고 알려주어야 하는데 안뜨네요 어떤 게 문제인가요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
index.html에서 타입스크립트 콘솔 찍는 법 질문드립니다
같은 폴더 안에 sample.js, sample.ts가 있는데요index.html에 <script> sample.js 추가했고 콘솔 찍어보면서 강의듣고 있었는데 sample.ts는 콘솔에 안 나오더라구요 어떻게 하면 연결할 수 있을까요? 회사 컴퓨터라 이미 타입스크립트 쓰고 있어서 컴파일은 깔려있을 것 같습니다
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
figma 파일 임포팅이 되지 않습니다.
beyond insight > 피그마 원본 > 수강생 참고자료, 파일 임포팅이 되지 않습니다 ㅜ 파일명이 수강생 참고자료(Beyond Insight).fig..fig..fig 입니다.
-
미해결타입스크립트 입문 - 기초부터 실전까지
섹션 1-3 추론 질문드립니다
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)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
회원가입 과제 정답지를 알고싶어여
파이널 과제말고 수업도중에 회원가입 과제가있는데 그거 정답지를 좀 알고싶어요
