묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨타입스크립트 입문 - 기초부터 실전까지
함수 반환 타입에서 유니온 타입에 대한 질문이 있습니다
타입을 유니온 타입으로 선언할 경우,해당 타입은 A, B 타입의 교차 속성에만 접근 가능한 것으로 이해하고 있습니다그래서function fn(): string | number { // do something } const val = fn(); val.toFixed(2) // type error에서val 의 타입이 string과 number의 교차 속성만을 가진 타입이라서 toFixed가 타입 오류를 내는 것으로 이해하고 있습니다.질문 드리고 싶은 것은,특정 함수가 A 타입인 값이나 또는 B 타입인 값을 반환할 수 있다고 가정할 경우,반환된 값을 변수에 할당하여 사용할 때 A 타입의 모든 속성 또는 B 타입의 모든 속성에 접근 할 수 있도록 하고자 한다면반환 타입을 어떻게 선언해야 하는지 궁금합니다.단순히 or 로 생각해서 유니온타입을 설정하면 교차 속성에만 접근이 되니 타입 오류가 발생하게 되어 어떻게 해야 할지 모르겠습니다.
-
미해결타입스크립트 입문 - 기초부터 실전까지
repository 의 app.js 소스 수정 요망
app.js 의 소스 2행의 코드가, 최초로 clone 후 받아온 소스와 강의에서 진행되는 코드가 서로 다릅니다. 강의에서는 디폴트가 /users 입니다.하지만 실제 repository 에는 /users/1 로 단일 객체로 가져옵니다. 영상 내에서 해당 항목에 대한 명시적인 소스 수정 부분도 없어, 그 부분을 인지 못하고 나머지 부분만 영상대로 따라하면서 수정하면 제대로 강의를 진행을 할 수 없습니다.자잘한 부분이기는 하지만, 이런 부분은 당연히 적용되어야 하는 부분 같습니다. step by step 으로 따라가는 걸 전제로 하는 게 아닐까요?
-
해결됨처음 배우는 리액트 네이티브
styled component를 사용하면 터집니다 ㅠㅠ
styled components 삭제하고 재설치 및 json파일 도확인했는데 버전 호환성 문제 떄문인지 계속 터집니다 styled 관련된 코드를 지우면 정상작동합니다 원인이 무었일까요>? ㅠㅠ
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build 후 localhost:3000으로 접속하면 404 에러가 뜹니다
serve -s build 후 localhost:3000으로 접속하면 404 에러가 뜹니다 어떻게 해결 할 수 있을까요?
-
미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
강의에 대한 제언
좋은 강의 정말로 감사합니다. 당연히 아시겠지만, 모든 엘리먼트에 이벤트 리스너를 다는 것 보다, 부모에 이벤트 핸들링을 위임하는 방식이 코드 작성량도 적고 메모리 사용량도 적은것으로 알고 있습니다. 추후 강의 개편을 하실 때, 이 내용을 강의에 넣어주실 수 있을까요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
node.js vscode 콘솔출력
vscode 터미널에 index.js 콘솔을 출력하려고 따라 작성했는데 node : 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.위치 줄:1 문자:1+ node index.js+ ~~~~ + CategoryInfo : ObjectNotFound: (node:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException 이런 오류가 나면서 콘솔이 나타나지 않는데 이유 알 수 있을까요?
-
미해결함수형 프로그래밍과 JavaScript ES6+
중간에 Promise가 있을때, 성능저하가 일어난다는 부분이 이해가 어렵습니다.
수업 내용 코드를 캡쳐해왔는데요.최초에 promise가 동작하도록 아래와 같이 코드 작성을 하셨고, 아래 코드는 위 코드에서 Promise.resolve(a+100)이후에 Promise chain을 타게 되어, 연속적으로 비동기가 일어나며 성능저하가 일어난다고 하셨는데요.Promise.resolve(a+100) 이후 acc에 할당되는 값이 acc.then(acc => f(acc,a));가 되다 보니까 결국acc.then(acc => f(acc,a)).then(acc => f(acc,a)).then...then...;위와 같이 계속 thenable 하게 chaining이 되고,그 결과 promise는 microstack 이기 때문에 microstack queue <-> callstack 사이에 task 이동으로 인해 부하가 생겨 성능 저하가 발생한다.하지만 코드 내에 호출되는 일반 함수의 경우 callstack에 바로 호출되기 때문에, 유명함수를 가진 함수로 리팩터링하신 것 같은데위와 같이 이해한 게 맞을까요?
-
해결됨자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
다른 방식으로 풀어보았는데, 효율적인 코드가 맞는지 확인 부탁드리겠습니다!
function solution(s: string, t: string) { let answer = 0; t = t.split("").sort().join(""); for (let i = 0; i < s.length; i++) { const slideStr = s.slice(i, i + t.length); console.log(slideStr); if (slideStr.split("").sort().join("") === t) answer++; } return answer; } console.log(solution("bacaAacba", "abc"));선생님께서 풀어주신 방식이랑 너무 달라, 이 방식도 효율적인지 확신이 안서서요. 제 코드 한 번 확인 부탁드리겠습니다.
-
해결됨[코드캠프] 시작은 프리캠프
CSS정렬 - 회원가입 과제 코드 공유
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다.100% 완전하지는 않은 코드지만 그래도 가시적으로 보기에는 더 나은 것 같아서 코드 공유 드립니다.<!-- test.html --> <!DOCTYPE html> <html lang="ko"> <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"> <title>회원가입</title> <link rel="stylesheet" href="./test.css"> </head> <body> <div> <div class="container"> <h2>회원가입을 위해<br>정보를 입력해주세요.</h2> <!-- input도 inline요소중에 하나다. --> <!-- inline이란 하나의 태그가 레코드(가로)방향을 모두 차지하는게 아니라, 자신이 속한 영역만 가지게 되는 것이다. --> <label for="email">* 이메일<br> <input type="text" id="email"><br><br> </label> <label for="name">* 이름<br> <input type="text" id="name"><br><br> </label> <label for="password1">* 비밀번호<br> <input class="pw" id="password1" type="password"><br><br> </label> <label for="password2">* 비밀번호 확인<br> <input class="pw" id="password2" type="password"><br><br> </label> <!-- 선택 영역 두번째 --> <!-- name을 부여함으로 인하여 radio의 선택 가능한 것들을 하나의 그룹으로 묶어준다. --> <form> <input type="radio" class="radio" name="gender">  여성 <input type="radio" class="radio" name="gender">  남성 </form> <br><br> <form> <input type="checkbox" class="agree">  이용약관 개인정보 수집 및 정보이용에 동의합니다. </form> <hr> <hr> <button>가입하기</button> <!-- 기능자체는 input의 타입을 button으로 하면 사용은 가능하지만, 굳이 button 태그를 사용하는 이유는 --> <!-- 커스터마이징이 button 태그가 더 용이하기 때문이다. --> <!-- <input type="button" value="가입하기"> --> </div> </div> </body> </html> /* test.css */ div { /* 바로 상위 태그인 body를 기준으로 맞춰주게끔 */ /* position의 absolute라는것이, 설정하게 되면 바로 직계부모 태그의 영향아래 놓이게 된다는 말이다. 더불어서 네모를 영역으로 봤을때 왼쪽 상단 꼭지점을 기준으로 움직이게 된다. */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 670px; height: 960px; background: #FFFFFF; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; /* 이것의 의미는 타겟팅된 영역에 대해 지정된 만큼 움직여주는 거라고 한다. */ /* justify-content: space-evenly; align-content: column; */ margin: 0px; padding: 100px; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; } h2 { width: 466px; height: 94px; left: 725px; top: 132px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068FF; justify-content: space-evenly; } button { width: 400px; height: 50px; left: 725px; top: 875px; background-color: #FFFFFF; color: royalblue; border-radius: 8px; border: #0068FF solid 1px; } input { padding: 0px; border: none; border-bottom: 1px solid #CFCFCF; width: 466px; height: 30px; } label { color: lightgrey; } .radio { align-items: center; font-size: 20pt; width: 15px; height: 15px; } /* div.container { justify-content: space-between; flex-direction: row; align-items: center; } */ input.agree { align-items: center; font-size: 20pt; width: 15px; height: 15px; }
-
미해결Node.js로 웹 크롤링하기
puppeteer waitFor 이제 못쓰나요?
puppeteer waitFor 이제 못쓰나요? 자동완성어로도 안 만들어지고, 예제처럼 반영도 안돼요waitForTimeout 이걸 써야 반영되는데, 이것도 이제 지원안한다는 문구가 뜨네요
-
해결됨[코드캠프] 시작은 프리캠프
반복문 질문
안녕하세요?개발자 도구 console창에서 let persons로 객체 배열을 선언하고 반복문 초기식에 선생님처럼 let count가 아닌 int i로 하여 만들었더니 Unexpected identifier 'i' 오류가 뜨더라구요. 객체 배열 선언할 때 사용했던 변수 선언 방식? 데이터 타입?을 for문에 넣을 때도 그대로 사용해야하는건가요?덧붙여, 쉽게 설명해주시는 좋은 강의 잘 듣고 있습니다. 새해 복 많이 받으세요 :) !!
-
미해결함수형 프로그래밍과 JavaScript ES6+
배열에서 몇개만 취득하는 것이 아닐 경우
안녕하세요, 강사님 :)강의내용에서 age<20, take(3) 처럼 3개만 뽑는 경우엔 지연성으로 인해 3개만 뽑고 뒤에 배열들은 탐색하지 않겠지만 age<20의 사용자를 모두 뽑는 경우엔 이렇게 지연성으로 하나 일반 map,filter를 사용하나 성능상에 차이가 없는 것이죠?
-
해결됨[코드캠프] 훈훈한 Javascript
intervalID가 1이 아닌 5부터 시작해요
강의에서는 1부터 시작하는데저는 intervalID가 5부터 시작합니다원인이 뭘까요ㅜㅜconst starter = function () { container.style.display = "flex"; messageContainer.style.display = "none"; counterMaker(); // setInterval함수가 1초 딜레이가 있기 때문에 counterMaker()를 먼저 실행해서 딜레이 없앰 const intervalID = setInterval(counterMaker, 1000); intervalIdArr.push(intervalID); console.log(intervalIdArr); }; const setClearInterval = function () { for (let i = 0; i < intervalIdArr.length; i++) { clearInterval(intervalIdArr[i]); } };
-
해결됨[코드캠프] 시작은 프리캠프
싸이월드 1탄 강의 수강 중 질문드립니다
사진과 같이 wrapper__left__header와 wrapper__left__body를 정의하는 순간부터 레이아웃이 강의와는 다르게 망가지는데 뭐가 문제인지 모르겠습니다 ㅠㅠ flex로 정렬해 봐도 바뀌는 게 없습니다... 왜인지 알려주시면 감사하겠습니다
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
추후에 반응형에 관련된 강의 내용도 포함될까욥,,?
선생님~ 혹시 gsap 심화강의(scrollTrigger 포함)에반응형 관련 강의도 있을까요 ㅠㅠ?gsap 공부하면서 가장 어려운게 반응형인 것 같아요 ㅠㅠ비율 구하기나, 크기조정, 위치값 같은게 너무 어렵네용 ;ㅅ;
-
해결됨[코드캠프] 훈훈한 Javascript
수업자료노션
어디에 가야 볼수있나요?
-
미해결함수형 프로그래밍과 JavaScript ES6+
평가 순서에 대해 질문이 있습니다!
안녕하세요. 먼저 좋은 강의와 항상 빠르게 답변을 해주셔서 너무 감사합니다. 질문은 아래와 같습니다.지연성 1 파트에 있는 평가순서 강의를 복습하면서 클레이슬리 컴포지션의 평가 순서를 생각해보았는데, 제 생각이 맞는지 궁금합니다. 예시코드// gogo( [1, 2, 3, 4, 5], L.map((n) => Promise.resolve(n)), L.filter((n) => n % 2), take(2), console.log // [1, 3] ); // takeexport const take = curry((l, iter) => { let result = []; iter = iter[Symbol.iterator](); // recur()가 실행되면, 여기서 다시 시작을 하는데. // iter.next()가 실행되면, return (function recur() { let cur; while (!(cur = iter.next()).done) { const value = cur.value; // a가 promise 인 경우 재귀함수를 이용해서 처리함 if (value instanceof Promise) return ( value // .then((v) => (result.push(v), result).length === l ? result : recur() ) // filter에서 reject가 되면, catch에 걸리고 e가 nop이면 recur()를 실행한다. .catch((e) => (e === nop ? recur() : Promise.reject(e))) ); result.push(value); if (result.length === l) return result; } return result; })(); });// L.filterconst nop = Symbol("nop"); export const L.filter = curry(function* (f, iter) { for (const a of iter) { const b = go1(a, f); if (b instanceof Promise) yield b.then((b) => (b ? a : Promise.reject(nop))); else if (b) yield a; } });// L.mapexport const L.Map = curry(function* (f, iter) { for (const el of iter) { yield go1(el, f); } }); 평가 순서take 함수 내, iter.next() 평가를 시도 → L.filter로 이동L.filter 내, iter.next() 평가를 시도 → L.map 으로 이동L.map 내, inter.next() 평가를 시도한다. → [1, 2, 3..] 를 iter 로 받았기 때문에 1로 평가 된다.L.filter 로 돌아와, L.map으로부터 평가받은 Promise.resolve(1) 이라는 값(b)으로 내부 로직을 수행한다.b의 인스턴스가 Promise라면, b.then을 실행하고 a 또는 Promise.reject을 한다.여기서 a는 Promise 이다.b의 인스턴스가 Promise가 아니라면, result.push(value); 을 실행하고 while로 순회한다.L.filter 의 평가가 끝나면 take 함수로 돌아온다take로 전해지는 L.filter 의 평가값은 4개 중에 하나일 것이다.a → take 내에서 result.push 가 실행됨Promise.resolve(a) → take 내에서 .then 절이 실행됨.Promise.reject(nop) → take 내에서 .catch 절이 실행되고 recur() 를 실행함Promise.reject(e) → take 내에서 .catch절이 실행되고, Promise.reject(e) 로 이어짐recur()가 실행되면, take 에서 실행된 첫번째 while 사이클이 끝나면서, 다시 recur()가 실행되며 iter.next()가 평가할때 위 과정을 다시 반복한다. take에 있는 while 사이클이 return되고 recur() 함수 실행이 종료됐음에도 iter.next()의 값이 이전값에서 이어지는 이유는 recur() 와 iter가 클로저이기때문이다.
-
해결됨[코드캠프] 훈훈한 Javascript
images파일
섹션 9 JSON 데이터 활용에서 images파일은 어디서 다운로드 받을수 있나요??아무리 찾아도 안보이네요..ㅠㅠ
-
미해결처음 만난 리액트(React)
섹션3 JSX 코드 작성해보기
이곳에서 코드를 똑같이 따라했는데 아래와 같은 오류가 뜨네요 ㅜㅜ 에러가 왜 나는지 모르겠습니다.
-
미해결처음 만난 리액트(React)
에러가 나요ㅠㅠ
에러가 나서요ㅠ
