inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

다른 방식으로 풀어보았는데, 효율적인 코드가 맞는지 확인 부탁드리겠습니다!

해결됨

자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

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")); 선생님께서 풀어주신 방식이랑 너무 달라, 이 방식도 효율적인지 확신이 안서서요. 제 코드 한 번 확인 부탁드리겠습니다.

  • 코테 준비 같이 해요!
  • javascript
Eunji Lee 댓글 1 좋아요 0 조회수 356

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">&nbsp 여성 <input type="radio" class="radio" name="gender">&nbsp 남성 </form> <br><br> <form> <input type="checkbox" class="agree">&nbsp 이용약관 개인정보 수집 및 정보이용에 동의합니다. </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; }

  • 회원가입
  • HTML/CSS
  • 과제
  • javascript
  • css
  • 정렬
  • 코드
  • 공유
최다니엘 댓글 1 좋아요 2 조회수 3751

puppeteer waitFor 이제 못쓰나요?

미해결

Node.js로 웹 크롤링하기

puppeteer waitFor 이제 못쓰나요? 자동완성어로도 안 만들어지고, 예제처럼 반영도 안돼요 waitForTimeout 이걸 써야 반영되는데, 이것도 이제 지원안한다는 문구가 뜨네요

  • puppeteer
  • nodejs
  • 웹-크롤링
  • javascript
김형 댓글 2 좋아요 1 조회수 574

반복문 질문

해결됨

[코드캠프] 시작은 프리캠프

안녕하세요? 개발자 도구 console창에서 let persons로 객체 배열을 선언하고 반복문 초기식에 선생님처럼 let count가 아닌 int i로 하여 만들었더니 Unexpected identifier 'i' 오류가 뜨더라구요. 객체 배열 선언할 때 사용했던 변수 선언 방식? 데이터 타입?을 for문에 넣을 때도 그대로 사용해야하는건가요? 덧붙여, 쉽게 설명해주시는 좋은 강의 잘 듣고 있습니다. 새해 복 많이 받으세요 :) !!

  • HTML/CSS
  • javascript
댓글 1 좋아요 0 조회수 400

배열에서 몇개만 취득하는 것이 아닐 경우

미해결

함수형 프로그래밍과 JavaScript ES6+

안녕하세요, 강사님 :) 강의내용에서 age<20, take(3) 처럼 3개만 뽑는 경우엔 지연성으로 인해 3개만 뽑고 뒤에 배열들은 탐색하지 않겠지만 age<20의 사용자를 모두 뽑는 경우엔 이렇게 지연성으로 하나 일반 map,filter를 사용하나 성능상에 차이가 없는 것이죠?

  • 함수형-프로그래밍
  • javascript
댓글 1 좋아요 0 조회수 372

intervalID가 1이 아닌 5부터 시작해요

해결됨

[코드캠프] 훈훈한 Javascript

강의에서는 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]); } };

  • javascript
권새롬 댓글 1 좋아요 4 조회수 484

싸이월드 1탄 강의 수강 중 질문드립니다

해결됨

[코드캠프] 시작은 프리캠프

사진과 같이 wrapper__left__header와 wrapper__left__body를 정의하는 순간부터 레이아웃이 강의와는 다르게 망가지는데 뭐가 문제인지 모르겠습니다 ㅠㅠ flex로 정렬해 봐도 바뀌는 게 없습니다... 왜인지 알려주시면 감사하겠습니다

  • javascript
  • HTML/CSS
댓글 1 좋아요 0 조회수 590

추후에 반응형에 관련된 강의 내용도 포함될까욥,,?

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.01

선생님~ 혹시 gsap 심화강의(scrollTrigger 포함)에 반응형 관련 강의도 있을까요 ㅠㅠ? gsap 공부하면서 가장 어려운게 반응형인 것 같아요 ㅠㅠ 비율 구하기나, 크기조정, 위치값 같은게 너무 어렵네용 ;ㅅ;

  • 인터랙티브-웹
  • javascript
  • HTML/CSS
  • gsap
밀크티 댓글 1 좋아요 1 조회수 767

props로 전달받은 onEdit함수를 바로 onClick에 못쓰는 이유가 궁금합니다.

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

기존 방식인 <button onClick={handleEdit}>수정 완료</button> 대신에, <button onClick={() => {onEdit(id, localContent)}}>수정 완료</button> 가 안되는 이유는 무엇인가요?

  • nodejs
  • react
  • javascript
댓글 1 좋아요 0 조회수 402

수업자료노션

해결됨

[코드캠프] 훈훈한 Javascript

어디에 가야 볼수있나요?

  • javascript
방방이 댓글 1 좋아요 1 조회수 513

평가 순서에 대해 질문이 있습니다!

해결됨

함수형 프로그래밍과 JavaScript ES6+

안녕하세요. 먼저 좋은 강의와 항상 빠르게 답변을 해주셔서 너무 감사합니다. 질문은 아래와 같습니다. 지연성 1 파트에 있는 평가순서 강의를 복습하면서 클레이슬리 컴포지션의 평가 순서를 생각해보았는데, 제 생각이 맞는지 궁금합니다. 예시코드 // go go( [1, 2, 3, 4, 5], L.map((n) => Promise.resolve(n)), L.filter((n) => n % 2), take(2), console.log // [1, 3] ); // take export 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.filter const 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.map export 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
withkey 댓글 1 좋아요 0 조회수 387

images파일

해결됨

[코드캠프] 훈훈한 Javascript

섹션 9 JSON 데이터 활용에서 images파일은 어디서 다운로드 받을수 있나요?? 아무리 찾아도 안보이네요..ㅠㅠ

  • javascript
댓글 2 좋아요 1 조회수 347

섹션3 JSX 코드 작성해보기

미해결

처음 만난 리액트(React)

이곳에서 코드를 똑같이 따라했는데 아래와 같은 오류가 뜨네요 ㅜㅜ 에러가 왜 나는지 모르겠습니다.

  • HTML/CSS
  • react
  • javascript
댓글 2 좋아요 0 조회수 483

에러가 나요ㅠㅠ

미해결

처음 만난 리액트(React)

에러가 나서요ㅠ

  • HTML/CSS
  • javascript
  • react
조은진 댓글 1 좋아요 0 조회수 646

저는 스타일이 이상하게 적용되네요 ㅠ

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

<template> <div class="inputBox shadow"> <input type="text" v-model="newTodoItem"> <span class="addContainer" @click="addTodo"> <i class="fa-solid fa-plus addBtn"></i> </span> </div> </template> <style scoped> input:focus { outline: none; } .inputBox { background: white; height: 50px; line-height: 50px; border-radius: 5px; } .inputBox input { border-style: none; font-size: 0.9rem; } .addContainer { float: right; background: linear-gradient(to right, #6478FB, #8763F8); display: block; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; } </style> 위처럼 아예 input창 크기도 안맞춰지고 span 태그도 사라져있더라구요.. 왜 이상하게 나왔는지를 몰라서 임시로 아래처럼 바꿨는데 요즘은 flex를 현업에 안쓴다고 들었는데 그게 맞을까요 ?? 아직 git 허가를 못받아서 ..😭 input:focus { outline: none; } .inputBox { display: flex; align-items: center; background: white; height: 50px; line-height: 50px; border-radius: 5px; } .inputBox input { height: 100%; width: calc(100% - 3rem); border-style: none; font-size: 0.9rem; } .addContainer { background: linear-gradient(to right, #6478FB, #8763F8); display: block; height: 100%; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; }

  • es6
  • vuejs
  • javascript
  • vuex
이준혁 댓글 2 좋아요 1 조회수 837

openWeatheAPI Unauthorized 오류 해결 공유(수정)

해결됨

[코드캠프] 훈훈한 Javascript

아래와 같이 Url이 승인되지 않는 경우가 발생합니다. openWeatherMap API 강의에서 버전을 API버전을 3.0에서 2.5로 바꾸라고 합니다. 저는 그렇게 바꾸었는데, 안되었습니다. 3.0도 Unauthorized로 거부 되었습니다. 그래서 2022년 12월 13일 기준으로 2.5로 바꾸지 않고, 2.8로 바꾸니 Unauthorized 메시지가 사라졌습니다. 그런데 위 글의 사항을 반영하였다면, then, catch 파트의 인강을 수강할 때, fetch함수의 url 주소를 .org/data/2.8/onecall?lat=$~~~~ 에서 .org/data/2.5/weather?lat=$~~~ 로 다시 바꾸어 주셔야합니다!!! 2.8 유지 하시면 안됩니다!!! 중간에 오류가 나서 당황해서 "왜 안되지" 라고 멘탈붕괴가 오실 수 있을 텐데, 끝까지 인강대로 따라오면 오류 없어집니다. 인강 내용이 맞습니다. .org/data/2.8/weather?lat=$~~~ 유지시 오류 .org/data/2.5/weather?lat=$~~~ 오류 해결 ※중간에 오류가 나더라도 인강내용대로 따라 가면 "현재 기준"으로 오류 사라집니다. 괜히 이 글이 혼란을 줄까봐 염려스럽네요. 아 그냥 이런 경우도 있었네 라고 봐주시면 감사하겠습니다.

  • 버전
  • javascript
똑같이썼는데안돼 댓글 5 좋아요 13 조회수 2751

3차원 배열, 4차원 배열

미해결

함수형 프로그래밍과 JavaScript ES6+

2차원 배열일 경우에는 L.flatten 코드로 가능하지만 3차원 배열, 4차원 배열일 경우엔 어떻게 구현해야 좋을까요? 아래와 같이 구현할려고하니 deepFlatten을 해결해주는 곳이 없어서 3차원 배열 이상은 이터레이터로 리턴받고 있습니다.ㅠㅠ const isIterable = a => a && a[Symbol.iterator]; function* deepFlatten(iter){ for(const a of iter){ if (isIterable(a)) yield deepFlatten(a) else yield a; } } L.flatten = function* (iter) { for (const a of iter) { if (isIterable(a)) yield deepFlatten(a) else yield a; } }; var it = L.flatten([[1, [1,2,3]], 3, 4, [5, 6], [7, 8, 9]]); log(take(Infinity, it)) [deepFlatten, 3, 4, deepFlatten, deepFlatten]

  • 함수형-프로그래밍
  • javascript
댓글 1 좋아요 0 조회수 587

9분 38초쯤에 왜 inputValue 에 빈 문자열이 바로 추가되지 않은건가요? 여기에 대한 설명이 있으면 좋을것같습니다 ..ㅠ

해결됨

[코드캠프] 훈훈한 Javascript

9분 38초쯤에 왜 inputValue 에 빈 문자열이 바로 추가되지 않은건가요? const inputValue = document.querySelector('#todo-input').value; 이 상태에서 inputValue =''; 이렇게 바로 추가해도될것같은데 안되니까 혼란스럽습니다 ㅠ..

  • javascript
가스라이팅의정석 댓글 1 좋아요 4 조회수 311

권한요청드립니다

해결됨

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

권한요청드립니다. 인프런 아이디 : woojoo216 인프런 이메일 : woojoo216@naver.com 깃헙 아이디 : woojoo216@naver.com 깃헙 Username : woojoo216

  • javascript
  • vuejs
woojoo216 댓글 1 좋아요 1 조회수 294

권한요청드립니다.

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

aaa

  • es6
  • vuejs
  • vuex
  • javascript
sobbingcat 댓글 1 좋아요 1 조회수 397

인기 태그

인프런 TOP Writers

주간 인기글