묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 훈훈한 Javascript
객체 속성 접근시 브라켓 이용(vs. 닷 오퍼레이터)
<JS로 HTML, CSS 조작> 강의편에서 객체와 속성 코드 적으실 때 hours.textContent = remainingObj["remainingHours"]; 와 같이 브라켓을 이용해서 속성에 접근하셨는데, 객체 속성 접근할 때 닷 오퍼레이터말고 브라켓을 이용하신 이유가 있나요? 아니면 단순한 개인의 취향 문제인지요 ㅎㅎ 이번 강의에서 처음 알게된 내용이라 궁금해서 여쭤봅니다 :)
-
해결됨[코드캠프] 시작은 프리캠프
회원가입 과제 질문
* { justify-content: center; align-items: center; } .hr { width: 470px; height: 0.998px; flex-shrink: 0; background: #e6e6e6; } .bak { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #aacdff; background: #fff; box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25); } .h2 { width: 466px; color: #0068ff; font-family: Noto Sans CJK KR; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; } .email { width: 158px; height: 23.649px; flex-shrink: 0; color: #797979; font-family: Noto Sans CJK KR; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .name { width: 158px; height: 23.649px; } .pw { width: 158px; height: 23.649px; } .pw { border: 1px solid blue; } .button { border-radius: 10px; border: 1px solid #0068ff; background: #fff; width: 470px; height: 75px; flex-shrink: 0; } .check { color: #000; font-family: Noto Sans CJK KR; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel="stylesheet" /> </head> <body> <div class="bak"> <h2 class="h2">회원 가입을 위해<br>정보를 입력해주세요</h2> <input class="email" type="text" placeholder="이메일" /><br /><br /> <input class="name" type="text" placeholder="이름" /><br /><br /> <input class="pw" type="password" placeholder="비밀번호" /><br /><br /> <input class="pw" type="password" placeholder="비밀번호 확인" /><br /><br /> <select> <option disabled="true" selected="true">지역을 선택하세요</option> <option>서울</option> <option>경기</option> <option>인천</option> </select> <br /><br /> <input class="radio" type="radio" name="gender" />여성 <input class="radio" type="radio" name="gender" />남성 <br /><br /> <input class="check" type="checkbox" /> 이용약관 개인정보 수집 및 동의 <hr class="hr"> <br> <br> <button class="button">가입하기</button> <!-- <input type="button" value="가입하기" /> --> </body> </div> </html> 코드 작성한 게 저렇게 화면이 보여지는데 가운데 정렬을 하려면 어떻게 해야될까여..... flex랑 just로 시작하는 속성을 넣으면 이상하게 되더라구요 너무 어렵네요 ㅠㅠ
-
미해결Vue.js 시작하기 - Age of Vue.js
computed와 watch 관련 질문 드립니다.
watch까지만 들었을 때는 오히려 명확하게 다르다고 생각했었는데, computed와 watch을 비교하는 과정 속에서 살짝 혼동이 와서 질문드립니다.제가 이해하기로 사용법에 있어서도 그렇고, computed의 경우 특정 element 'a'의 상태 변화에 따라 영향받는 다른 element 'b'의 상태를 미리 계산해서 갖고 있기 위해 수행되는 부분이고watch의 경우 'a'의 상태 변화시 수행되어야 할 함수들(콜백함수처럼)을 정의하면 된다고 생각을 했었는데, 이렇게 이해하면 될까요??
-
해결됨애플 웹사이트 인터랙션 클론!
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
안녕하세요,유익하고 좋은 강좌 만들어주셔서 감사드립니다! 덕분에 브라우저 스크롤 애니메이션에 대한 개념이해를 갖게 됐습니다!. 이런 내용을 바탕으로 '미려한' 애니메이션을 만들고 싶은 욕심이 생겼는데요,해당 강좌를 시청하며 2가지 문의사항이 있습니다.감사합니다! #질문1. svg의 path의 생성하는 법, 만들어주신 강좌 중 svg 강의를 보면 아이디어를 얻을 수 있을까요?보너스로 추가해주신 아이패드 강좌 부분을 보면서, svg의 path를 커스텀으로 만들고 싶은 생각이 들었습니다. 아직 svg 로딩 강좌 섹션은 보지 못했는데, 혹시 인터렉티브 로드맵 중 svg강좌를 들으면, path를 만들 수 있는 힌트를 얻을 수 있을까요? 예를 들어 '안녕하세요 반갑습니다' 라는 svg를 브라우저 스크롤 하면서 하나씩 그려내고 싶습니다.#질문2. 3번째 섹션, 이미지프레임과 fixed된 텍스트들을 서로 싱크를 맞추려면, 어떻게 한땀한땀 해야할까요?강좌에서 공부한 스크립트와 마크업/스타일을 바탕으로, 새로운 애니메이션을 만들때, 이미지/비디오 프레임과 fixed된 텍스트를 서로 싱크 맞추는 요령? 방법?이 무엇이 있을까요? 혹시 이미지 애니메이션을 완성하고, 수작업으로 텍스트의 fixed위치를 변경하면서, 수치를 정하는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
복습개념으로 다시 들을려고 하는데요
html,css,javascript를 복습 개념으로 다시 들을려고 하는데 훈훈한 Javascript 부터 들으면 되나요?
-
해결됨[코드캠프] 시작은 프리캠프
복사붙여녛기가 끝인데
피그마 css에 나오는 부분을 복사붙여넣기 하면 끝인데 과제라는 의미가 있나요? 복붙만 하는 건데 도움이 되는 건가요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
todoItem.item이 왜 key가 될까요?
안녕하세요 강사님!어플리케이션 탭을 보면 엄연히 key, value가 있고 value 안에 completed, item이 있는 건데...todoItem.item이 어떻게 키값이 되는건지 궁금합니다.처음 설정할 때 key값과 todoItem.item을 같게(?) 해놓으면 todoItem.item을 key 값으로 접근할 수 있나요?만약 key(id값)으로 접근하려면 어떻게 해야 하나요?초보라 질문이 많습니다 ㅠㅠ 시간되실 때 답변해주시면 감사드리겠습니다 :)
-
미해결처음 만난 리액트(React)
여기서 백틱으로 감싸주는 이유가 궁금합니다.
const Wrapper = ~~~ 아래에 백틱으로 감싸주는 이유가 궁금합니다.그리고 왜 저는 강사님처럼 안나오고 전부 붉게 나올까요..?
-
미해결Vue.js 시작하기 - Age of Vue.js
router 로 페이지 이동 시 항상 새로고침
안녕하세요, 캡틴판교님.덕분에 Vue 강의 잘 듣고 있습니다.한가지 질문 사항이 있는데요.메인페이지와 서브페이지를 구현했는데,메인페이지에서 스크롤을 내리면 서브페이지로 가는 router-link를 클릭했는데,메인에서 스크롤 내린만큼 서브페이지도 스크롤이 내려가 있어서이것을 어떻게 해결해야될지 의문입니다.제가 메인페이지에 애니메이션도 준게 있어서router 이동시에 항상 페이지 새로고침 되게 하고 싶습니다.(+추가로 새로고침이 아닌 메인 이동시에 애니메이션이 재 사용되게 막게끔도 하고 싶습니다..)
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
섹션12 보너스 챕터에 관한 질문입니다!
섹션12에서 텍스트가 나타나고 사라지는 인터렉션에서 처음 텍스트를 스크롤 하지 않고 처음 텍스트만 보이다가 스크롤이 시작되고 나서 사라지고 다음텍스트가 보이게 하려면 어떻게 코드를 작성해야할까요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
빨간줄 에러 질문드립니다
노트북으로 할땐 빨간줄이 안떳는데 데스크탑으로 오니, 빨간줄이 많이 떠서 2가지 질문드립니다. 1. 엔터친 빈 공간에 저렇게 빨간줄이 뜨는데 어떻게 없앨 수 있을까요? 이것도 노트북에선 문제없이 강의듣고 넘어갔는데 데스크탑으로 켜니 이렇게 뜨네요. 어떻게해야할까요..?
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
결과 계산하기에서 콘솔이 다르게 찍힙니다.
다른 분들도 비슷한 오류가 있었는데 봐도 해결이 안되어서 질문드립니다.현재 결과 계산하기 파트에서 오류가 생겨 이후 강의는 작성하지 않은 상태입니다. 질문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
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
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에 가까운 구현은 이쪽이 아닐까 싶습니다!초기 값이 존재하지 않을 때, 배열의 첫번째 요소를 사용하는 사례를 더 잘 표현한 것 같습니다.
