안녕하세요 선생님 고급강의 잘보고 있습니다.잘만들어 주셔서 감사합니다. 아코디언 만들기 1/6 을 보다가 궁금한 사항이 있어 질문드립니다. const toggleItem = (id: string) => () => { setCurrent((prev) => (prev === id ? null : id)) } 아코디언 1/6 강의를 듣다가 가운데 () 가 클로져 라고 하셨는데 가운데에 저렇게 () 를 쓰면 클로져가 되는건가요? ( 제가 프론트엔드 개발자가 아니라서 클로져의 장단점을 몰라서 질문을 드리는것 같습니다. )  chatgpt 에게 질문을 남겼는데 더욱 이해가 안되어서 질문드렸습니다..ㅎㅎ 아래는 gpt의 답변 입니다.  여기서 (id: string) => () => {...}는 두 개의 함수를 연속적으로 정의하고 있습니다. 1.외부 함수: (id: string) => {...} 이 함수는 id라는 문자열을 매개변수로 받습니다. 내부에는 또 다른 함수를 반환하고 있습니다.  2. 내부 함수: () => {...} 외부 함수가 반환하는 내부 함수입니다. 외부 함수의 id 매개변수를 사용하여 동작을 수행합니다.

catch-all segments 를 루트 페이지에 적용해서nextjs 의 파일 기반 라우트를 무력화 하기 때문에nextjs 에서 제공해주는 다양한 라우터 기능들route intercepting , parallel route 같은것들은사용할수 없게 된다?맞나여?그럼 실무의 next js 프로젝트에서 똑같이 gnb 를 구현 하면 안되겠죠?단순히 수업을 위해 임의로 구현한 포트폴리오 프로젝트용gnb 라고 보면 되는거져?아니면 실무에서라도 catch-all segments [...slug] 폴더를 디폴트 페이지가 아니라 특정 하위 페이지에 대해서만 적용 해서 구현 하는식으로 실무에서도 사용 할수 있나여?그리고 순수 바닐라 js를 이용한 구현 부분도 실무에서는 별로 안쓸것 같고 어려울것 같아서 skip 해도 되나여?

안녕하세요.인제 부트캠프를 하고 거의 끝나가면서 부족함을 느껴서 강의를 신청하게 되었는데요. 강의자료를 다운로드 받아서 설치해보니 아마 완성본(?) 인것 같더라구요. 그래서 route 설정할때 폴더 트리를 보고 내용도 지우고 진행하려고 합니다. 혹시 이렇게해도 앞으로 강의 나가는데 문제가 없을까해서 문의드립니다.예를 들면 현재 이런 상태입니다. 

export const randomize = ({ min = 0, max = 0, step = 1, }: { min: number; max: number; step: number; }) => { if (max < min || max - min < step) throw Error('wrong arguments'); const num = Math.random() * (max - min) + min; return Math.max(Math.floor(num / step) * step, min); };1. src/service/util.ts 파일에서 randomize 함수를 보면 위와 같습니다.num 값을 구하는 표현식이 min 이상 max 이하가 되려면 다음과 같이 바뀌어야 할 것 같습니다.const num = Math.floor(Math.random() * (max - min + 1)) + min; -> const num = Math.floor(Math.random() * (max - min + 1) + min)export type Datum = { index: number; id: string; title: string; description: string; }; export type FetchState = 'loading' | 'fetched' | 'idle' | 'error'; export type State<T> = { data: T[][]; state: 'loading' | 'fetched' | 'idle' | 'error'; };src/components/07_infiniteScroll/vanilla/infiniteFetcher.ts 에서 FetchState 타입을 활용하여 리팩토링 할 수 있을 것 같습니다.export type State<T> = { data: T[][]; state: FetchState; }; 

TextBox2의 경우 제목이 #2. React uncontrolled. canvas 라고 되어 있는데 코드를 보면 단순히 기존 onChange -> onInput으로만 바뀌어 있습니다. 따라서 ref를 사용한 예제로 바뀌면 좋을 것 같습니다.TextBox3 제목에 (자체 제작 방법) 이런 문구도 소괄호로 같이 표시되어 있으면 좋을 것 같습니다.또한 사소하지한 onChange와 onInput에 대한 약간의 차이 같은 설명이 주석이나 자막으로 처리되어 있으면 더욱 좋을 것 같습니다.TextBox5에 스터디를 하신 다른 분이 useImperativeHandle 훅을 사용한 것을 만들어주신 것 같은데 혹시 재남님은 useImperativeHandle을 실제 실무에서 활용하신 사례가 있으신지 궁금합니다.p.s) 매일 오전에 하나씩 보고 있는데 재밌게 보고 있습니다.좋은 강의 감사드립니다~

강의에는 positionType이 relative인 경우의 설명만 있어서 시간 여유가 되시면 absolute인 경우의 설명에 대한 보강 영상이 있으면 좋을 것 같습니다~

보통 window.addEventListener 같은 것을 사용할 때 이벤트 파라미터에 대해서는 Event 타입을 사용하시고, 버튼 같은 클릭 이벤트 리스너의 이벤트 파라미터에 대해서는 SyntheticEvent 타입을 사용하시는 것 같습니다. 보통 클릭이라고 하면 MouseEvent<HTMLButtonElement> 또는 MouseEventHandler로 함수의 타입을 줄 수 있을 것 같은데 SyntheticEvent로 지정하시는 이유가 있으실까요. 대략적으로 SyntheticEvent가 여러 브라우저 등 호환성을 위해 React에서 자체적인 내장 인터페이스로 추상적으로 Vanilla JS의 Event 타입을 확장한 것으로 인지는 하고 있습니다.

gnb 를 이렇게 수정해 봤어여https://github.com/hyunsokstar/challenge_gnb 부모 메뉴일 경우 토글 가능하도록 react 상태와 연동https://github.com/hyunsokstar/challenge_gnb/blob/main/src/app/Component/ParentGnbItem.tsx zustand 로 현재 active 메뉴 관리https://github.com/hyunsokstar/challenge_gnb/blob/main/src/app/Component/ChildGnbItem.tsx https://github.com/hyunsokstar/challenge_gnb/blob/main/src/app/%5B...item%5D/stores/isActiveLinkStore.ts결과:이렇게 수정한 방식도 괜찮을까여?그리고 강의에서 src\app\[...item]\page.tsx 에서 url path를 얻어와서 Next Js 의 파일 기반 페이지 라우팅을 통째로 custom 하는 방식을 사용하는데 이런 방식은 Next Js에서 gnb 를 구현 하는 이상적 혹은 보편적인 방법 이라서인지 아니면 강의를 위한 제한적 구현인지 궁금합니다

classnames/bind 를 사용하지 않고, classnames를 사용할 때, typescript-plugin-css-modules 라는 것을 사용하면 위와 같이 현재 scss파일 안에 있는 클래스들이 보여지게 되는데요! classnames/bind 를 통해 cx를 만들어 사용할 때도 클래스들이 자동완성 됐으면 좋겠다고 생각이 들었습니다. 혹시 이것에 대한 방법이 있을까요?

GNB를 구성하는 다양한 방법이 있을 것 같은데혹시 널리알려진 정형화 된 방법이 있을까요? 혹은 관련 지식이 프로젝트에서 알려주신 방법이 마음에 들어서 한번 적용해보려고 합니다. 🙂

안녕하세요! 알림 보고 바로 수강신청했습니다 ㅎㅎ그런데 강의 자료를 열어보니 06_lazyLoading/4_r 이 쓰여지고는 있는데 폴더가 없네요... const LazyImage = dynamic(() => import('@/components/06_lazyLoading/4_r/lazyImage'), { ssr: false }) 실행도 못해보고 터져버린 앱... ㅠㅠ 

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 강의가 중복으로 재생됩니다.