묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[React / VanillaJS] UI 요소 직접 만들기 Part 1
item7 style이 강의자료에 없습니다.
아코디언 8_r.tsx에서 item7 클래스를 주셨는데 강의자료에 item7 클래스가 없는 것 같아요!
-
미해결[React / VanillaJS] UI 요소 직접 만들기 Part 1
이벤트 핸들러가 Root에 모이면
리액트에서는 onClick으로 이벤트를 등록하면 Root에 모이게 된다고 하셨는데제가 이 부분을 정확히 이해했는지 알고싶어서 질문 드립니다!보통은 자바스크립트에서는 각 요소마다 addEventListener를 여러 번 호출하면 메모리 측면에서 비효율적이고 성능이 떨어질 수 있다고 알고 있습니다. 그래서 이벤트 위임을 사용하는 것으로 이해했습니다. 현재 강의에서는 각 요소마다 onclick 이벤트를 등록하셨는데 리액트에서는 Root에서 중앙통제하기 때문에 상관없다는 것으로 인지했습니다.제가 알기로는 이벤트들을 모아다가 root에 addEventListener를 하는 것으로 알고 있는데 이게 맞을까요?그러면 리액트에서는 굳이 이벤트 위임을 사용할 필요가 없을까요? 예를 들어 onClick을 여러 요소에 등록하지 않고 상위 요소 하나에만 등록하는 것처럼 말이죠..!
-
미해결[React / VanillaJS] UI 요소 직접 만들기 Part 1
append와 insertAdjacentElement 차이가 무엇일까요?
insertAdjacentElement 를 사용해서 구현하셨는데저 부분을 append로 해도 똑같은 결과가 나옵니다.혹시 append말고 insertAdjacentElement를 사용하신 이유가 있을까요?개인적으로 검색해봤는데 append와 차이점이 insertAdjacentElement는 '지정한 위치에 요소를 삽입할 수 있다'는 점 이외에는 없더라구요..ㅠ어떤 장점때문에 insertAdjacentElement 를 사용한지 알고 싶습니다!
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 2
테일윈드로 포탈로 모달작성시 뒤에 클릭이 안됩니다
<div id='modalRoot' ref={ref} className='fixed inset-0 z-100 flex flex-col items-center justify-center' > {children} </div>테일 윈드로 선생님 모달 포탈로만드는것 해보고있는데.뒤에 클릭이 안되요 pointer-events-none 쓰지말고 하는법이 없을까요?!일단은 아래처럼 쓰고잇긴한데 ㅠㅠ 먼가 ...'use client'; import React, { useEffect, useRef } from 'react'; import { useModalStore } from '@/shared/models/modal/stores/modalStore'; const mutationObserverOption: MutationObserverInit = { childList: true, subtree: false, }; /** * 모달 컴포넌트를 렌더링하기 위한 전역 컨테이너 프로바이더입니다. * 모달이 열려 있을 때 body 요소에 'no-scroll' 클래스를 토글하여 스크롤을 비활성화합니다. * * @param {React.ReactNode} children - 모달 루트 내부에 렌더링할 자식 요소 * @returns {JSX.Element} 모달 루트 프로바이더 */ const ModalRootProvider: React.FC<{ children: React.ReactNode }> = ({ children, }) => { const ref = useRef<HTMLDivElement>(null); const { openedModalTypes, closeModal } = useModalStore(); // const isModalOpen = openedModalTypes.length > 0; useEffect(() => { let observer: MutationObserver; /** * MutationObserver를 사용하여 모달 루트 컨테이너의 자식 요소 변경을 감지합니다. * 모달이 열려 있는 경우 body 요소에 'no-scroll' 클래스를 추가하고, 모달이 닫혀 있는 경우 클래스를 제거합니다. */ if (ref.current) { observer = new MutationObserver(() => { const size = ref.current?.childNodes.length || 0; document.body.classList.toggle('no-scroll', size > 0); ref.current!.classList.toggle('bg-black/50', size > 0); ref.current!.style.pointerEvents = size > 0 ? 'auto' : 'none'; }); observer.observe(ref.current, mutationObserverOption); } // 컴포넌트 언마운트 시 MutationObserver 연결을 해제합니다. return () => { observer.disconnect(); }; }, []); return ( <div id='modalRoot' ref={ref} className='fixed inset-0 z-100 flex flex-col items-center justify-center pointer-events-none' // onClick={handleOutsideClick} > {children} </div> ); }; export default ModalRootProvider;
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
아코디언 1/6 강좌 클로져 관련 질문입니다.
안녕하세요 선생님 고급강의 잘보고 있습니다.잘만들어 주셔서 감사합니다. 아코디언 만들기 1/6 을 보다가 궁금한 사항이 있어 질문드립니다. const toggleItem = (id: string) => () => { setCurrent((prev) => (prev === id ? null : id)) } 아코디언 1/6 강의를 듣다가 가운데 () 가 클로져 라고 하셨는데 가운데에 저렇게 () 를 쓰면 클로져가 되는건가요? ( 제가 프론트엔드 개발자가 아니라서 클로져의 장단점을 몰라서 질문을 드리는것 같습니다. ) chatgpt 에게 질문을 남겼는데 더욱 이해가 안되어서 질문드렸습니다..ㅎㅎ 아래는 gpt의 답변 입니다. 여기서 (id: string) => () => {...}는 두 개의 함수를 연속적으로 정의하고 있습니다. 1.외부 함수: (id: string) => {...} 이 함수는 id라는 문자열을 매개변수로 받습니다. 내부에는 또 다른 함수를 반환하고 있습니다. 2. 내부 함수: () => {...} 외부 함수가 반환하는 내부 함수입니다. 외부 함수의 id 매개변수를 사용하여 동작을 수행합니다.
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
gnb 만들기를 실무 next js 프로젝트에서 사용할수 있나요?
catch-all segments 를 루트 페이지에 적용해서nextjs 의 파일 기반 라우트를 무력화 하기 때문에nextjs 에서 제공해주는 다양한 라우터 기능들route intercepting , parallel route 같은것들은사용할수 없게 된다?맞나여?그럼 실무의 next js 프로젝트에서 똑같이 gnb 를 구현 하면 안되겠죠?단순히 수업을 위해 임의로 구현한 포트폴리오 프로젝트용gnb 라고 보면 되는거져?아니면 실무에서라도 catch-all segments [...slug] 폴더를 디폴트 페이지가 아니라 특정 하위 페이지에 대해서만 적용 해서 구현 하는식으로 실무에서도 사용 할수 있나여?그리고 순수 바닐라 js를 이용한 구현 부분도 실무에서는 별로 안쓸것 같고 어려울것 같아서 skip 해도 되나여?
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
학습자료 관련해서 질문있습니다.
안녕하세요.인제 부트캠프를 하고 거의 끝나가면서 부족함을 느껴서 강의를 신청하게 되었는데요. 강의자료를 다운로드 받아서 설치해보니 아마 완성본(?) 인것 같더라구요. 그래서 route 설정할때 폴더 트리를 보고 내용도 지우고 진행하려고 합니다. 혹시 이렇게해도 앞으로 강의 나가는데 문제가 없을까해서 문의드립니다.예를 들면 현재 이런 상태입니다.
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
무한스크롤 강의 관련 질문입니다.
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; };
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
반응형 TextBox 질문입니다.
TextBox2의 경우 제목이 #2. React uncontrolled. canvas 라고 되어 있는데 코드를 보면 단순히 기존 onChange -> onInput으로만 바뀌어 있습니다. 따라서 ref를 사용한 예제로 바뀌면 좋을 것 같습니다.TextBox3 제목에 (자체 제작 방법) 이런 문구도 소괄호로 같이 표시되어 있으면 좋을 것 같습니다.또한 사소하지한 onChange와 onInput에 대한 약간의 차이 같은 설명이 주석이나 자막으로 처리되어 있으면 더욱 좋을 것 같습니다.TextBox5에 스터디를 하신 다른 분이 useImperativeHandle 훅을 사용한 것을 만들어주신 것 같은데 혹시 재남님은 useImperativeHandle을 실제 실무에서 활용하신 사례가 있으신지 궁금합니다.p.s) 매일 오전에 하나씩 보고 있는데 재밌게 보고 있습니다.좋은 강의 감사드립니다~
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
Tooltip의 useStyleInView 훅 질문입니다.
강의에는 positionType이 relative인 경우의 설명만 있어서 시간 여유가 되시면 absolute인 경우의 설명에 대한 보강 영상이 있으면 좋을 것 같습니다~
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
이벤트에 대한 타입을 지정할 때 궁금한 점이 있습니다.
보통 window.addEventListener 같은 것을 사용할 때 이벤트 파라미터에 대해서는 Event 타입을 사용하시고, 버튼 같은 클릭 이벤트 리스너의 이벤트 파라미터에 대해서는 SyntheticEvent 타입을 사용하시는 것 같습니다. 보통 클릭이라고 하면 MouseEvent<HTMLButtonElement> 또는 MouseEventHandler로 함수의 타입을 줄 수 있을 것 같은데 SyntheticEvent로 지정하시는 이유가 있으실까요. 대략적으로 SyntheticEvent가 여러 브라우저 등 호환성을 위해 React에서 자체적인 내장 인터페이스로 추상적으로 Vanilla JS의 Event 타입을 확장한 것으로 인지는 하고 있습니다.
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
gnb 를 이렇게 수정해 봤어여
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 를 구현 하는 이상적 혹은 보편적인 방법 이라서인지 아니면 강의를 위한 제한적 구현인지 궁금합니다
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
class 자동완성 방법은 없을까요?
classnames/bind 를 사용하지 않고, classnames를 사용할 때, typescript-plugin-css-modules 라는 것을 사용하면 위와 같이 현재 scss파일 안에 있는 클래스들이 보여지게 되는데요! classnames/bind 를 통해 cx를 만들어 사용할 때도 클래스들이 자동완성 됐으면 좋겠다고 생각이 들었습니다. 혹시 이것에 대한 방법이 있을까요?
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
보통 GNB가 있는 프로젝트에 이렇게 심혈을 기울여 Routes를 따로 만드나요?
GNB를 구성하는 다양한 방법이 있을 것 같은데혹시 널리알려진 정형화 된 방법이 있을까요? 혹은 관련 지식이 프로젝트에서 알려주신 방법이 마음에 들어서 한번 적용해보려고 합니다. 🙂
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
강의 자료 다운받았는데 06_lazyLoading/4_r 폴더가 없어요
안녕하세요! 알림 보고 바로 수강신청했습니다 ㅎㅎ그런데 강의 자료를 열어보니 06_lazyLoading/4_r 이 쓰여지고는 있는데 폴더가 없네요... const LazyImage = dynamic(() => import('@/components/06_lazyLoading/4_r/lazyImage'), { ssr: false }) 실행도 못해보고 터져버린 앱... ㅠㅠ
-
해결됨시나브로 자바스크립트
filter test 마지막 문제 결과값이 이상합니다.
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" ++ 영상을 끝까지 보고나니까 오류가 있는게 맞는 것 같네요!? 저처럼 혼자 삽질하고 있을 학생들을 위해 남겨두겠습니다!
-
해결됨시나브로 자바스크립트
reactivity.js 를 proxy로 수정 후 오류
어려워서 겨우 따라가고 있는 학생입니다!현재 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 라는 값은 이 함수가 선언될 당시의 값으로 정해집니다! 끝!!
-
해결됨시나브로 자바스크립트
yarn dev 안되요..
강좌에 대해 궁금한 게 있으신가요?