묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹 프론트엔드를 위한 자바스크립트 첫걸음
HTML, CSS에 대한 선수 지식은 어느 정도로 필요한가요?
HTML이랑 CSS 아는 게 얼마 없는데 이 상태로 공부하면 하다가 막힐까요? 그리고 출판사에서 전자책 출간 일자 답변은 아직인지요..ㅠㅠ
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
러닝스쿨! 자바스크립트 첫걸음 전자책 버전은 언제쯤 나올까요?
종이책은 곧 나오던데 전자책 출시는 언제 될지, 출시할 계획이 있는지도 알 수가 없어서 이렇게 문의드립니다. 각각 한 권씩 사서 집에서는 종이책으로 보고 밖에서는 전자책으로 보고 싶습니다.
-
해결됨[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
css 만으로 아코디언 애니메이션을 적용할 경우, 다른 libary들은 코드로 그부분들을 해결해주고 있는걸까요?
애니메이션 관련해서 깊이 고민해보지 못한 부분(디테일)들을 발견할 수 있어서 의미있는 강의 였습니다. 강의에서 "item3" classname 을 적용하는 과정 중 얻은 인사이트는 컨텐츠 사이즈에 따라 height가 변경되는 애니메이션을 적용할 경우, 닫히는 아코디언 요소와 열리는 아코디언 요소가 이상하게 동작한다는 내용을 다루셨는데 저도 이상하는 느낌은 들었지만 정확한 원인을 모르겠네요.transition-duration:0.3s 은 같기 때문에 같이 닫히는게 동시에 닫히고 있는게 맞는데 왜 이상하게 느껴질까요?"ease" 가 그런 느낌을 주는 원인이 아닐까하고 그냥 넘어갈까 싶은데 혹시나 모르는 부분이 있을까 질문 남겨봅니다.:)
-
해결됨[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 }) 실행도 못해보고 터져버린 앱... ㅠㅠ
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
코딩환경설정 강의 중에서 질문입니다
코딩환경설정 강의에서 크롬-> ctrl+shift + I 누르면 저 화면이 나오는데 조금 다릅니다... 강의 화면이랑 똑같은 화면 모습으로 같이 수업을 참여하고 싶은데 어떻게 설명해야 되나요 ?
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
codesandbox 설정
🚨질문 작성법 및 안내사항질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.console.log("hello world");안내사항- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다. 안녕하세요. Create Sandbox에서 바닐라를 선택하라고 하셨는데요!! 열어보니 바닐라가 없는데 어떡하면 될까요? ?혹시 몰라 JavaScript로 만들어서 강의 내용대로 점 3개 Preferrence 통해서 설정하려고 하니 점 3개 칸도 안보이네요,,
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
크롬 확장프로그램 검색어 질문
안녕하세요! 강의 너무 잘 보고 있습니다! 그런데 확장 프로그램으로 적용해 보면서 궁금한 점이 생겼는데 그러면 프로젝트를 이렇게 만든 상태에서 적용을 하게 되고 만약에 실제로 쓴다면 검색어가 제가 지정한 링크가 아니라 실제 구글처럼 검색하려는 것을 검색하고 그 검색한 사이트가 보이게 만드는게 가능할까요?
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
디지털시계 개발하기
🚨질문 작성법 및 안내사항질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.console.log("hello world");안내사항- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다. 디지털 시계 개발하기에서 5:41초 강의에서 parseInt(number)는 명시적 형변환 아닌가요? 묵시적 형변환이라고 강의에서 말씀하시네요
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
비동기 처리 질문있습니다.
🚨질문 작성법 및 안내사항질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.console.log("hello world");안내사항- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다. 강의에서 종료 라는 문장을 정말 이 코드가 종료됐을 때 출력하고싶다면, 우리는 콜백함수를 이용해 해당 코드를 인수로 넘겨주어야합니다. 이 부분이 이해가 되지 않습니다. 콜백함수로 왜 넘겨줘야하는지 헷갈립니다. <이렇게는 안되나요>const work = () => { 2 setTimeout(() => { 3 console.log("3초만 기다리세요"); 4 console.log("종료"); 5 }, 3000); 6}; 7 const work = (callback) => { 2 setTimeout(() => { 3 console.log("3초만 기다리세요"); 4 callback(); 5 }, 3000); 6}; 7 8 work(() => { 9 console.log("종료"); 10}); setTimeout(() => { 2 console.log("3초만 기다리세요"); 3}, 3000); 4 5console.log("종료");
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
코드샌드박스 환경 설정 부분 질문 있습니다
섹션2 - 자바스크립트 코딩 환경 설정 강의를 들으면서 샌드박스에서 회원가입 후 create 를 눌러 vanilla를 생성했는데, 화면이 이렇게만 뜨는데 어떻게 해야하나요?ㅠㅠ 선생님처럼 파일이나 이런 게 뜨는 게 아니라 계속 저런 화면만 뜨네요