시나브로 자바스크립트대시보드

안녕하세요, 강의 수강 중 사용하시는 툴? 익스텐션이 궁금해서 여쭤봅니다.'[2023-07-17] 오픈소스를 사용하다 문제에 부딪힐 때'의 강의에서 사파리 사이드바에서 검색도 가능하고, 탭을 관리할 수 있는 툴이 어떤 것인지 질문드립니다!

04. Array 메소드 - (2 of 7) Filter====================================filter의 마지막 테스트 중 원하는 결과값이 나오지 않습니다.강사님의 코드와 동일하게 작성하면const tweetsPostedAfter10pm = posts.filter((post) => { const frenchTimestamp = new Date(post.meta.created_at).toLocaleString('fr-FR'); return new Date(frenchTimestamp).getHours() >= 22; }); //결과 // - Expected "5" // + Received "1"이렇게 나옵니다.저는 한국에 있으니 지역이 문제인 것 같아서 한국으로 설정하고 돌리면 const tweetsPostedAfter10pm = posts.filter((post) => { const koreanTimestamp = new Date(post.meta.created_at).toLocaleString('ko-KR'); return new Date(koreanTimestamp).getHours() >= 22; }); //결과 // - Expected "5" // + Received "0"위처럼 나옵니다.. 콘솔로 데이터를 찍어보니 const tweetsPostedAfter10pm = posts.filter((post) => { const frenchTimestamp = new Date(post.meta.created_at).toLocaleString('fr-FR'); console.log(new Date(frenchTimestamp).getHours()); return new Date(frenchTimestamp).getHours() >= 22; }); //console 1 1 6 NaN NaN NaN 8 7 19 18 NaN NaN ...참고로 ko-KR은 모두 NaN으로 나옵니다.동일한 코드인데 왜 저는 이렇게 나오는 걸까요?? 오타라도 있는걸까요..? + 다른 코드로 해봤는데 9개가 나옵니다; const tweetsPostedAfter10pm = posts.filter((post) => { const date = new Date(post.meta.created_at); // UTC 시간을 한국 시간으로 변환 const koreanTime = new Intl.DateTimeFormat('ko-KR', { timeZone: 'Asia/Seoul', hour: '2-digit', hour12: false }).format(date); // '시' 부분만 추출 const koreanHour = koreanTime.split('시')[0]; const toNumber = koreanHour * 1; console.log(toNumber) return koreanHour >= 22;; }); //결과 // - Expected "5" // + Received "9" ++ 영상을 끝까지 보고나니까 오류가 있는게 맞는 것 같네요!? 저처럼 혼자 삽질하고 있을 학생들을 위해 남겨두겠습니다!

어려워서 겨우 따라가고 있는 학생입니다!현재 02.쇼핑몰만들기3(4/5) 수강중인데요reactivity.js 를 proxy로 수정 후 나오는 에러는 알아서 해결하라고 미션을 주셨지만.. 도통 어떻게 해결해야 할지 모르겠습니다.counter.js의 getTotalCount, getCountByProductId 함수 내부의 getCountMap()을 어떻게 수정하면 될지 힌트라도 요청드립니다! ===========================현재 이렇게 수정했는데, 각 물품 갯수에는 undefined가 뜨고 장바구니 토탈 갯수만 나오고 있습니다.첫 클릭만 undefined고 이후는 숫자가 증가하는데 해당 처리를 어떻게 해야 할까요..? const getTotalCount = () => { let count = 0; Object.values(countMap).forEach((number) => { count += number; }); return count; }; const getCountByProductId = ({ productId }) => { return countMap[productId] || 0; };export function bindReactiveState({ name, defaultValue }){ if (typeof defaultValue !== 'object') { throw new Error("bindReactiveState supports only object as default value."); } let value = new Proxy(defaultValue, { get(target, prop) { return target[prop]; }, set(target, prop, newValue) { const elements = Array.from( document.querySelectorAll( `[data-subscribe-to='${name}'][data-subscription-path='${prop}']` ) ); elements.forEach(element => { if(element.tagName === 'INPUT') { element.value = newValue[prop]; } else { element.innerHTML = newValue[prop]; } }); // target[prop] = newValue; return Reflect.set(target, prop, newValue); } }); return value; }  

안녕하세요! 저는 시나브로님의 강의를 듣고 있는 학생입니다! 다름이 아니라 이전에 강의를 들었을 때에는 다소 난이도가 있어 미뤄두고 이번에 들었는데 조금 나아진 것 같습니다. 사실 아직 배포를 해본 경험이 없어 제 이해가 맞는지 여쭤보고 싶습니다.배포를 위해서는 netlify나 vercel과 같은 호스팅 서비스를 이용하면 간편하게 진행할 수 있습니다(주변 분들께 궁금해서 여쭤보니, aws를 통해 좀 더 근간적으로 빌드와 배포를 진행할 수 있다는데 이 부분을 지금 공부하는 것이 좋을까요?)시나브로님께서 강의에서 parcel과 vite를 이용해 빌드 & 번들하는 것을 보여주셨습니다. 두 방식 모두 특정 디렉토리에 소스 파일들을 작성하고, build 명령어를 통해 dist 디렉터리에 배포될 파일들을 생성합니다. 후에 vercel 같은 호스팅 서비스에서는 해당 프로젝트가 어떤 번들 툴로 만들어졌는지를 파악하고 서비스를 도와줍니다.제가 추가적으로 chatGPT를 통해 알아보니 vite는 esbuild라는 트랜스파일링 & 번들을 동시에 해주는 내장 프로그램을 사용합니다. 이는 GO 언어로 작성되었기에 속도가 굉장히 빠릅니다. 기존의 CRA 프로젝트 같은 경우에는 babel 컴파일러와 webpack 번들러를 이용하지만, 이보다는 속도가 느릴 수 있습니다.tailwindCSS 라이브러리를 이용하여 문서의 스타일링을 진행하면 parcel이나 vercel 같은 프로그램이 이를 CDN을 통하여 관리해줍니다(이 부분이 개념이 다소 헷갈리는 것 같습니다). 사실 아직 실제로 해본 것이 아니라 개념이 헷갈립니다. 그래도 일단 강의를 한번 차례로 들으면 이해가 더 나아질까요? 감사합니다☺️

클로저에 대해서 어렴풋이 알고 있었지만, 막상 이벤트 핸들러 안에서 그것을 바라보니 조금 이해가 안되었는데요!저처럼 아직 클로저가 익숙하지 않은 분들은 이벤트핸들러를 분리해서 보면 조금 더 이해가 쉽습니다!그리고 디버거를 이용해서 스코프 안에 있는 변수들을 같이 보면 조금 더 이해가 되실거에요!일단 클로저를 "어떤 함수가 선언될 때 외부 영역을 기억하는 것" 이라고 생각하고 이 코드를 바라보면 onHelloButtonHandler 라는 함수(이벤트핸들러) 가 선언될 때 myCardCount 의 값을 기억합니다. 즉, Add Card를 할 때마다 + 1씩 올라간다고 하더라도 onelloButtonHandler 에게는 선언될 당시의 cardCount 를 myCardCount 로 받아서 기억하는 것이죠! 개발자 도구 우측에 Scope을 보면 onHelloButtonHandler 함수의 스코프체인을 볼 수 있는데요. myCardCount 가 로컬에 없기 때문에 그 위 스코프를 바라보는데요! 그 스코프가 바로 클로저이고! 저 클로저 스코프 안에 있는 myCardCount 라는 값은 이 함수가 선언될 당시의 값으로 정해집니다! 끝!!

강좌에 대해 궁금한 게 있으신가요?

yearn create 1분정도 에서 검은 창을 띄우시고 item 쓰셨는데 이 창은 어떻게 띄우는거에요?

02. 쇼핑몰 만들기 Part 1 - (3 of 7) Advanced event 4:50초쯤에 설명하시는 콘솔창에서 사용하는 $0 이, 현재 선택된 또는 클릭된 객체를 콘솔창에서 사용할때 $0으로 한다는 뭐 그런내용으로 설명하는 부분에서 저의 질문은 그렇다면 예를들어 let anyone = querySelectorAll('.sample') 처럼 같은 클래스가 여러개 존재하고 그 중의 하나를 선택하고자 할때 , 현재 클릭된 또는 선택되어 있는 ,콘솔창에 $0으로 접근하는 그것을 'this'라는 대명사(?)와 같은것인지 궁금합니다. 저는 this라는 것을 같은 것이 여러개 있을지라도 결국 어느 한순간에 실행되는 객체는 오직 하나이므로 (리얼 멀티프로세서가 아닌이상) 이것을 this로 생각 중..

js로 쇼핑몰 만드는 강좌에서 github 계정https://github.com/eunjae-lee/sinabro-js 아닌가요?안 열리네요? 혹시 private 인가요? 

안녕하세요. 우선 강의 자체에 대한 질문은 아닌데요.강의 중간에 VS Code에서 "로 감싸진 문자열을 `로 치환하는 장면이 종종 나오던데, 어떤 방법인지 궁금합니다.왼쪽 하단에 보여지는 키보드 표시로는 cmd + `를 입력하면 작동하는거 같은데, VS Code의 확장 프로그램일까요?그리고 하나 제보하자면, 정적 블로그 만들기 강의에서 6번에 7번 내용이 포함되어, 7번 Adding style 강의가 중복으로 재생됩니다.

https://learnwitheunjae.dev/api/sinabro-js/ecommerce혹시나 치기 귀찮으신 분들이 있을꺼 같아 적어놓습니다.그리고 크롬 사용하시는분들은 크롬 확장 프로그램의 JSONVue 을 검색하셔서 추가하시면 웹에서도 json 으로 format 으로 깔끔하게 보실 수 있습니다.