안녕하세요기본편 부터 응용편 까지 천천히 학습하고 있습니다.응용편 부터는 라이브러리를 가져와서 강의를 진행하시는데 강의 수강 중 궁금한 사항이 있어 질문드립니다.  github에 올려주신 오픈소스를 참조하는데 takeL 부분이 이해가 되지 않아 문의드립니다. L.take = curry(function* (l, iter) { let prev = null; iter = iter[Symbol.iterator](); for (const a of iter) { if (a instanceof Promise) { yield (prev = a.then((a) => (--l > -1 ? a : Promise.reject(nop)))); prev = prev.catch(noop); } else { yield (--l, a); } if (!l) break; } }); L.take를 이렇게 표현하면 앞선 Promise가 resolve 되길 기다리는 Promise를 그대로 이어가면서 전달 가능한데 yield (prev = (prev || Promise.resolve()) .then((_) => a) .then((a) => (--l > -1 ? a : Promise.reject(nop)))); 이렇게 표현하신 이유가 어떤이유인지 알고싶습니다. 또 제가 작성한 수정한 부분에 문제가 있다면 알려주시면 감사하겠습니다. 또 궁금한 내용이 오픈소스에 for of 아래 a.catch(noop); Promise를 catch 하는 코드가 추가되어 있는데 이 부분 역시도 어떤의도로 구현한 것인지 궁금합니다. 수업내용에서는 비동기/동시성을 통해 한번에 Promise 콜백이 병렬적으로 평가되면서 배열에 담기는 시점에 콜스택에서 에러가 출력되지 않기 위해 사용하는 트릭으로 알고있는데요, L.take 에서 a.catch가 실행되는 시점에는 Promise가 reject로 풀려서 전달될 수 없을것 같은데 이 부분도 설명부탁드립니다.   

function solution(s) { let answer = s[0]; let count = {}; for (const i of s) { if (count[i]) count[i] += 1; else count[i] = 1; } for (const i in count) { if (count[i] > count[answer]) answer = i; } return answer; } let str = "BACBACCACCBDEDE"; console.log(solution(str));  혼자서 풀어봤을 때는 맵을 쓰지는 않았는데, 혹시 해쉬 구조에서 객체 대신 맵을 사용해서 얻을 수있는 이점이 어떤 게 있을까요? 또, 위와 같은 방법으로 풀었을 때 문제는 없을까요?  

강의중 debug 내용이 너무 좋아보여서실행하려고 하는데, 첫 step 부터 문제가 생겼습니다.말씀하신 대로에서 create a launch.json file 을 클릭했는데위 이미지 처럼 nodejs 가 나오지 않습니다. 몇시간 동안 검색을 했지만, 추가하는 방법을 찾지 못해 질문드립니다.혹시 수강생 중에 비슷한 상황을 겪어 보신 분..해결방법을 아시는 분 도움을 부탁드립니다.^^ [1] node -vv20.11.0v18.19.0 모두 테스트 해봤습니다.[2] 혹시나 해서 vscode 새로 설치도 해봤습니다.

안녕하세요, 강사님~자바스크립트 책과 강의에 많이 투자했는데 강사님 강의만큼 명료하고 쉬운 게 없어서 다른 것 재쳐두고 계속 이것만 정주행 하고 있습니다.입문자들의 희망이 되어 주셔서 정말 감사합니다! 다름이 아니라 단락평가 공부 중 쓸 데 없는 궁금증이 생겼는데검색을 해봐도 해소가 안 돼서 질문드립니다.function printName(person) { const name = person && person.name; console.log(name || "person의 값이 없습니다."); } let person = { name: "이정환", }; printName(person);강의 중에 이런 예시가 나왔었는데첫 줄에서 printName이라는 함수를 선언하면서 매개변수로 (person)을 받도록 했고, 마지막에 함수를 실행할 때도 (person)이라는 인수를 넣어서 실행하셨는데요,이유가 무엇인가요?여기서 person이라는 매개변수의 역할이 무엇인지 이해가 되질 않아서 빼보니 빼봐도 잘 작동하는데넣은 거랑 뺀 것이랑 어떤 차이일까요? 완전 초보라서... 기초적인 질문해봅니다!

vscode에서 html은 자동완성이 되는데 javascript 자동완성이 안됩니다. 해결방법이 있나요?

지금 변수와 값을 생성하는 부분을 보고있습니다. 그런데 메모리에 변수와 값들의 주소를 가지는 포인터 변수를 가진다고 하신 부분에서 궁금증이 생겼는데 그러면 메모리의 값들은 이미 메모리 셀에 기존부터 가지고 있는 건가요? 아니면 그때마다 임의로 값을 메모리에 생성하는 건가요?

현업에서 typeorm 만큼이나 prisma를 많이 사용한다고 하는데 이쪽은 자료때문에 공부하기가 좀 힘들어서요

function solution(test) { let answer = 0; let n = test.length; let studentNum = test[0].length + 1; // i는 멘토가 될 수 있는 학생 // j는 멘티가 될 수 있는 학생 for (i = 1; i < studentNum; i++) { for (j = 1; j < studentNum; j++) { if (i === j) continue; let flag = 0; // k는 n차 시험의 결과 for (k = 0; k < n; k++) { if (test[k].indexOf(i) < test[k].indexOf(j)) { flag++; } else { break; } } if (flag === n) answer++; } } return answer; } 각 시험 회차의 인덱스 번호가 학생의 번호다보니까 indexOf를 사용하면 반복문 하나 줄이고도 풀 수 있지 않을까 해서 이렇게 해봤습니다.

App()은 function 키워드를 사용하고 handleClick()은 const를 사용하셨는데 컨벤션 같은게 있을까요?

function addEachDigit(num) { const str = String(num); const addedNum = str.split("").reduce((acc, prev) => acc + Number(prev), 0) return addedNum; } function solution(n, arr) { let answer = 0; for (const i of arr) { const addNum = addEachDigit(i); const maxAddNum = addEachDigit(answer); if (addNum > maxAddNum) answer = i; if (addNum == maxAddNum) { if (i > answer) { answer = i; } } } return answer; } let arr = [128, 460, 603, 40, 521, 137, 123]; console.log(solution(7, arr)); 늘 감사합니다.제가 풀어본 문제 중에서는 처음으로 선생님의 풀이와 완전히 다른 방식이라 이런 방식은 어떨지 견해를 들어보고 싶습니다.

내림차순을 확인하려고 param에 DESC를 넣었는데 내림차순 적용 되지 않길래 디버깅하다 문제에 직면했습니다.* eslint-disable prettier/prettier */ /* eslint-disable @typescript-eslint/no-unused-vars */ import { BadRequestException, Injectable } from '@nestjs/common'; import { BasePaginationDto } from './dto/base-pagination.dto'; import { FindManyOptions, FindOptionsOrder, FindOptionsWhere, Repository, } from 'typeorm'; import { BaseModel } from './entity/base.entity'; import { FILTER_MAPPER } from './const/filter-mapper.const'; import { HOST, PROTOCOL } from './const/env.const'; @Injectable() export class CommonService { paginate<T extends BaseModel>( dto: BasePaginationDto, repository: Repository<T>, overrideFindOptions: FindManyOptions<T> = {}, path: string, // api path의 일반화를 위해 ) { if (dto.page) { return this.pagePaginate(dto, repository, overrideFindOptions); } else { return this.cursorPaginate(dto, repository, overrideFindOptions, path); } } // page기반과 cursor기반 페이지네이션 2가지 만들기 /**page기반 CommonService paginate*/ private async pagePaginate<T extends BaseModel>( dto: BasePaginationDto, repository: Repository<T>, overrideFindOptions: FindManyOptions<T> = {}, ) {} /**cursor기반 CommonService paginate*/ private async cursorPaginate<T extends BaseModel>( dto: BasePaginationDto, repository: Repository<T>, overrideFindOptions: FindManyOptions<T> = {}, path: string, ) { /** * where__likeCount__more_than * * where__title__ilike */ const findOptions = this.composeFindOptions<T>(dto); const results = await repository.find({ ...findOptions, ...overrideFindOptions, }); const lastItem = results.length > 0 && results.length === dto.take ? results[results.length - 1] : null; // 새로운 URL을 생성할 때 새로운 쿼리값을 추가하는 방법 const nextUrl = lastItem && new URL(`${PROTOCOL}://${HOST}/posts`); if (nextUrl) { // dto의 키값들을 loop /** * dto의 키값들을 루핑하면서 * 키값에 해당되는 밸류가 존재하면 * param에 그대로 붙여넣는다. * * 단, where__id_more_than 값만 lastItem의 마지막 값으로 넣어준다. */ for (const key of Object.keys(dto)) { if (dto[key]) { if ( key !== 'where__id__more_than' && key !== 'where__id__less_than' ) { nextUrl.searchParams.append(key, dto[key]); // 나머지는 변경되지 마지막 아이템과 연관없이 동일하니까 } } } // 오름차순인지 내림차순인지 체크 let key = null; if (dto.order__createdAt === 'ASC') { key = 'where__id__more_than'; } else { key = 'where__id__less_than'; } // URL에 추가하니까 string으로 nextUrl.searchParams.append(key, lastItem.id.toString()); } return { data: results, cursor: { after: lastItem?.id ?? null, }, count: results.length, next: nextUrl?.toString() ?? null, }; } private composeFindOptions<T extends BaseModel>( dto: BasePaginationDto, ): FindManyOptions<T> { /** * where, * order, * take, * skip -> page 일때만 */ /** * DTO의 현재 생긴 구조는 아래와 같다 * { * where__id__more_than: 1, * order__createdAt: 'ASC' * } * * 현재는 where__id에 해당되는 where 필터만 사용중이지만 * 나중에 likeCount에 해당되는 추가 필터를 넣고싶으면 * 모든 where 필터들을 자동으로 파싱할 수 있을만한 기능을 제작 * * 1) where로 시작한다면 필터 로직을 적용한다. * 2) order로 시작한다면 정렬 로직을 적용한다. * 3) 필터 로직을 적용한다면 '__' 기준으로 split 했을 때 * 3개의 값으로 나뉘는지 2개의 값으로 나뉘는지 확인한다. * 3-1) 3개의 값으로 나뉜다면 FILTER_MAPPER에서 해당되는 operator 함수를 찾아서 적용한다. * 3-2) 2개의 값으로 나뉜다면 정확한 값을 필터하는 것이기 때문에 operator 없이 적용한다. * 4) order의 경우 3-2와 같이 적용한다. */ let where: FindOptionsWhere<T> = {}; let order: FindOptionsOrder<T> = {}; for (const [key, value] of Object.entries(dto)) { if (key.startsWith('where__')) { where = { ...where, ...this.parseWhereFilter(key, value), }; } else if (key.startsWith('order__')) { order = { ...order, ...this.parseWhereFilter(key, value), }; } } return { where, order, take: dto.take, skip: dto.page ? dto.take * (dto.page - 1) : null, }; } private parseWhereFilter<T extends BaseModel>( key: string, value: any, ): FindOptionsWhere<T> | FindOptionsOrder<T> { const options: FindOptionsWhere<T> | FindOptionsOrder<T> = {}; /** * 예를들어 where__id__more_than * __를 기준으로 나눴을때 * * ['where', 'id', 'more_than']으로 나눌 수 있다. */ const split = key.split('__'); if (split.length !== 2 && split.length !== 3) { throw new BadRequestException( `where 필터는 '__'로 split 했을때 길이가 2 또는 3이어야합니다 - 문제되는 키값 ${key}`, ); } /** * 길이가 2일 경우는 * where__id = 3 * * FindOptionsWhere로 풀어보면 * 아래와 같다 * * { * where: { * id: 3, * } * } */ if (split.length === 2) { // [where, id] const [_, field] = split; // field => id // value => 3 /** * { * id: 3 * } */ options[field] = value; } else { /** * 길이가 3일 경우에는 Typeorm 유틸리티 적용이 필요한 경우 * * where__id_more_than의 경우 * where는 버려도 되고 두번째 값은 필터할 키값이 되고 * 세번째 값은 typeorm 유틸리티가 된다. * * FILTER_MAPPER에 미리 정의해둔 값들로 * field 값에 FILTER_MAPPER에서 해당되는 utility를 가져온 후 * 값에 적용 해준다. * */ // ['where', 'id', 'more_than'] const [_, field, operator] = split; // where__id__between = 3, 4 // 만약에 split대상 문자가 존재하지 않으면 길이가 무조건 1이다. // const values = value.toString().split(','); // field -> id // operator -> more_than // FILTER_MAPPER -> MoreThan 함수 // if (operator === 'between') { // options[field] = FILTER_MAPPER[operator](values[0], values[1]); // } else { // options[field] = FILTER_MAPPER[operator](value); // } options[field] = FILTER_MAPPER[operator](value); return options; } } } 디버깅으로 중단점 눌러가며 확인해봤는데 parseWhereFilter 메서드에서 options은 올바르게 key, value를 생성하고 반환하는데composeFindOptions 메서드에서 밑의 코드를 중단점 확인했을 때 let where: FindOptionsWhere<T> = {}; let order: FindOptionsOrder<T> = {}; for (const [key, value] of Object.entries(dto)) { if (key.startsWith('where__')) { where = { ...where, ...this.parseWhereFilter(key, value), }; } else if (key.startsWith('order__')) { order = { ...order, ...this.parseWhereFilter(key, value), }; } } return { where, order, take: dto.take, skip: dto.page ? dto.take * (dto.page - 1) : null, };order와 where가 빈 객체로 반환되는 것을 확인했는데 어떻게 고쳐야 할까요

2024년에 html이 새로 바뀌었다는 얘기를 들었는데 이 강의를 들어도 되나요?

수강신청 장바구니 화면에서 항목중 1개라도 선택이 해제되면 전체선택체크박스의 체크도 풀려야 하는거 아닌가요? 어떤 스크립트를 추가해야 적용이 되나요? 

안녕하세요 강사님 !! ㅎㅎ 강의 재밌게 듣고 있습니다. async await 방식이 코틀린의 코루틴과 굉장히 유사하다고 생각이 되는데 그럼 다음과 같이 Promise.all 대신 await를 늦추는 방식으로 풀어써도 똑같이 동작하나요?? async createBlog() => { await Promise.all([ Blog.insertOne({...}), // 1000ms User.UpdateOne({...}) // 1000ms ]) } // 실행시간 : 1000ms // 질문코드 async createBlog() => { const blogPromise = Blog.insertOne({...}) // 1000 ms const userPromise = User.updateOne({...}) // 1000 ms A(await blogPromise, await userPromise) } // 실행시간 : 1000ms(?)

아무것도 안떠서 어디서 확인해야하는지 모르겠어요

안녕하세요. 쉽고 자세한 설명해주셔서 즐겁게 잘 듣고 있습니다. 여기까지는 잘 따라왔는데요. 실행시 화면상에 약간의 차이가 있는 부분이 생겨서 문의드립니다. class-container 부분을 하고 있는데요.코드는 강사님 내용이랑 동일한데화면상에서 보이는 카드화면 부분이 제 화면에서는 좁게 나와서요.[강사님화면][제 화면]혹시나 코드가 뭐라도 다른 가 해서 전체적으로 살펴보았고,또 혹시나 해서 강사님 강의자료 ( 05_roadmap_section ) 의 index.html로 golive로 구동을 해보았습니다만.동일하게 좁은 상태인데....class-card 폭은 240px 고정이고요..class-card { width : 240px; /* 요런 건 사이즈를 픽스하는 게 좋다 */ /* box-shadow: 블럭에 그림자를 적용하는 CSS 기능 https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 10px 10px 10px -5px rgba(25, 42, 70, 0.2); border-radius: 8px; margin: 0 10px; }개발자 모드로 확인시에도 폭이 240px 이고...혹시 pc의 해상도에 따라서 다른 걸까요??이걸 확인을 어떻게 해야 할 지 모르겠습니다. ㅡㅡ;  

버튼을 눌렀을 때, navigate 하는 경우를 테스트할 때는 클릭 시 함수가 호출되었는지에 대한 테스트만 하면 되는 건가요??혹시, 특정 경로로 잘 이동되었는지에 대한 테스트를 하는 방법이 있는지 여부와 해당 테스트가 존재한다면 통합테스트인건지 단위 테스트인건지 궁금합니다! 그리고, 그런 테스트가 존재한다면 어떻게 assert할 수 있는지도 알고 싶습니다!

string의 slice메소드를 활용해서 다음과 같이 작성해보았는데 이렇게 해도 문제는 없는지, 시간복잡도는 어떻게 되는지 궁금합니다! // 두 문자열 아나그램인지 비교하는 함수 function compareStr(target, str) { // target문자열을 담은 hash 만들기 let targetH = new Map(); for (let x of target) { if (targetH.has(x)) targetH.set(x, targetH.get(x) + 1); else targetH.set(x, 1); } // target과 str이 같은지 비교 for (let x of str) { if (!targetH.has(x) || targetH.get(x) === 0) return false; targetH.set(x, targetH.get(x) - 1); } return true; } function solution(s, t) { let answer = 0; let n = t.length; // target의 길이 for (let i = 0; i <= s.length - n; i++) { let slicedStr = s.slice(i, i + n); // 문자열을 target 길이 맞춰서 잘라주기 // 비교해서 true이면 answer올리기 if (compareStr(t, slicedStr)) answer++; } return answer; } let a = "bacaAacba"; let b = "abc"; console.log(solution(a, b));감사합니다!

https://labs.phaser.io/assets/skies 여기403 Forbidden뜨고 안들어가져요ㅜㅜ 

ReactDOM.render( <React.StrictMode> <CommentList /> </React.StrictMode>, document.getElementById('root') )위 내용대로 npm start해서 띄우면 React 18버전부터는 React.createRoot를 사용하라고 나오네요..render대신에 .createRoot로 사용하면 될까여? 만약 .createRoot로 사용시 예제 간단히 알려주시면 감사하겠습니다.