묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
css 코드 작성 영상은 어디에 있나요?
console.log('hello'); 찾아봐도 없는데 아직 영상은 없나요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
질문있습니다.
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂console.log('hello'); 안녕하세요, 강의 잘 수강하고 있습니다.궁금한게 있는데,혹시 vsCode 사용할 때단축키 설정이나플러그인 등추천해주실만한 게 있을까요?이를테면 괄호()안에 무엇을 누르면 탭을 빠져나오는 단축키가 있다던지 소소한 팁이 있으시다면 공유부탁드리고 싶습니다.
-
미해결[React / VanillaJS] UI 요소 직접 만들기 Part 1
강의 연장관련
만료일까지 완강을 못할거 같은데 가능하다면 수강기간을 몇일이라도 늘려주실 수 있을까요? 첫질문이 수강기간에 관한 내용이라 죄송합니다 !!
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
git 주소
안녕하세요 소스 올려진 git링크 알 수 있을까요?
-
미해결React 비기너: 튼튼한 기본 만들기
React 비기너: 튼튼한 기본 만들기 / 섹션 23. React Event / 2. 이벤트 핸들러 작성
버튼 컴포넌트 onClick={handleClick()} jsx 에서 위처럼 적으면 자바스크립트에서 엔진에서 즉시실행함수로 인식하는것 처럼 인식을 해서 렌더링이 되기도전에 함수를 먼저 실행해버리는 현상이 생기는 이유가 맞을까요? 결국 핸들러 함수의 기능도 하지못하고1회용으로 즉시실행되고 소멸해버리는 함수가 되어버리는 것 같아보이는데 이에 대한 정확한 설명이 있을까요? 제가 생각한 이 부분에 보충적으로 필요한 설명을 혹시 해주실 수 있으실까요?
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
Tooltip-useSyncExternalStore()에 함수 넘기는 방식에 대해...
안녕하세요!항상 유익한 강의를 제공해 주셔서 감사드리며,강의를 통해 UI를 다양한 방법으로 구현하는 법과 요구 사항의 디테일한 부분을 어떻게 처리해야 하는지에 대해 많은 것을 배우고 있습니다.조심스럽게 여쭤보고 싶은 점이 있어 글을 남깁니다.혹시 시간이 괜찮으시면 선생님의 고견을 듣고 싶습니다. - tooltip의 react 버전viewportContext.tsx에서 useSyncExternalStore()사용부분useSyncExternalStore를 통해 외부요소의 변화를 구독할 수 있게, 첫번째 인자로 subscribe를 넘기고 해당 상태를 컴포넌트와 동기화 할 수 있도록 두번째 인자로 getViewportRect를 넘기고 있습니다. 첫번째 인자인 subscribe는 함수의 참조를 넘기는데, 두번째 인자인 getViewportRect는 "getViewportRect()"로 값을 넘기고 있어, 이 부분에서 조금 의문이 생겨 아래와 같이 수정하면 어떨까 생각했습니다.useSyncExternalStore의 두번째 인자에도 함수의 참조를 넘기도록 수정하여react에게 제어권을 넘기고, getViewportRect에서 리턴된 함수는 stored값을 기억할 수 있도록 즉시실행함수로 만드는 방식입니다.const getViewportRect = (() => { let stored: Rect = DefaultRect; return () => { const el = typeof document !== 'undefined' && document.scrollingElement; if (!el) return stored; const { left, top, width, height } = el.getBoundingClientRect(); const newRect = { left, top, width, height, scrollHeight: el.scrollHeight }; if (newRect && !isSameRect(stored, newRect)) stored = newRect; return stored; }; })(); //1. 즉시실행함수로 수정 const ViewportContextProvider = ({ children }: { children: ReactNode }) => { const viewportRect = useSyncExternalStore(subscribe, getViewportRect); //2.두 인자 모두 참조만 넘기도록 수정 return ( <ViewportContext.Provider value={viewportRect}> {children} </ViewportContext.Provider> ); };이렇게 수정하는 것이 더 나은 방법일지 여쭙고 싶습니다. useStyleView.ts에서 useLayoutEffect의 의존성배열에 참조 자료형 넣는 것 viewportRect가 객체인데, 이를 의존성배열에 그대로 넣는것이 괜찮은지 궁금합니다. const viewportRect = useViewportRect(); //객체 useLayoutEffect(() => { ... }, [viewportRect, wrapperRef, targetRef, position]); viewportRect에서 개별 값만 분리해서 넣는 방법도 고려해 보았습니다. const { top, left, width, height } = useViewportRect(); //생각해본 버전 useLayoutEffect(() => { ... }, [top, left, width, height, wrapperRef, targetRef, position]); 강의자료에 완성코드가 있다고 하는 걸 어디서 본 것도 같은데... 제가 어디있는지 찾지를 못해서...🥲강의 내용만 보고 작성한 코드임을 양해 부탁드립니다. 🙇♀
-
미해결React 비기너: 튼튼한 기본 만들기
React 비기너: 튼튼한 기본 만들기 / 섹션22. 이벤트 핸들러 강의 / Content Attribute와 IDL Attribute 사용 방식에 대한 질문드립니다
안녕하세요.항상 좋은 인사이트와 경험을 공유해주셔서 감사드립니다.최근 프론트엔드 개발을 공부하면서 "Content Attribute"와 "IDL Attribute"의 사용 방식에 대해 고민하게 되었습니다. 이를 정리해보면서 나름대로 다음과 같은 결론에 이르렀습니다.Content Attribute는 변하지 않는 어트리뷰트 값이나 리소스를 표현할 때 사용하고,그 외, 동적으로 핸들링이 필요한 경우에는 IDL Attribute를 사용하는 것이 맞다고 이해하고 있습니다.이러한 개념을 공부하면서, 현업에서 다양한 코드들을 보게 되었는데요, 특히 주니어 개발자분들이 작성한 코드에서는 Content Attribute를 많이 사용하는 반면, 시니어 개발자나 CTO급 분들의 코드에서는 Content Attribute 사용이 상대적으로 적고, 대부분 IDL Attribute를 적극적으로 사용하는 모습을 많이 볼 수 있었습니다.이런 현상을 보며 자연스럽게 궁금증이 생겼습니다.왜 경험 많은 개발자일수록 Content Attribute 사용이 줄어드는 걸까?Content Attribute 방식과 IDL Attribute 방식에 대해 어떻게 생각하시고, 어떤 기준으로 선택하시는지 궁금합니다.혹시 이 부분에 대해 간단히 의견을 들려주실 수 있다면 큰 도움이 될 것 같습니다.(물론 바쁘시다면 답변 주시지 않아도 괜찮습니다! 이렇게 질문을 정리하는 과정만으로도 많은 공부가 되고 있습니다.)읽어주셔서 감사합니다.좋은 하루 되세요.
-
미해결React 비기너: 튼튼한 기본 만들기
React 비기너: 튼튼한 기본 만들기 / 섹션22. 이벤트 핸들러 / 3. 이벤트 핸들러: 콘텐트 속성 7:00
p id =one onclick=show() 1. five 오브젝트를 클릭할때 one onclick 이벤트삭제2. five 오브젝트를 클릭할때 one onclick null 로 재할당2번을 쓰게 되는 경우가 어떤경우가 일까요?1번방법이 일반적으로 쓰게될 것 같다는 생각이 듭니다
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
4:45 부터 무한로딩되어 재생이 안됩니다ㅠ
안녕하세요!7.스코프 편 강의를 듣고 있는데 4:45부터 재생이 끊깁니다. 이전 강의(정확히 어느 편이었는진 기억이 안남) 에서도 동일한 현상이 있었는데 다행히 영상이 거의 끝날 쯔음이라 신경 쓰지 않았는데 지금은 아예 중간부터 끊겨서 강의에 지장이 생기네요ㅠㅠ 단순히 제 PC의 문제로 봐야할까요..? ㅠ
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
섹션 8. 상태 관리와 API - 2.동물 앨범 만들기-2-2
안녕하세요 효빈님 !해당 강의에서 상태 관리 코드들은 this.state, this.setState, this.render를 통해 생성자 함수의 프로퍼티로 작성하는 반면 App 컴포넌트의 init 함수는 프로퍼티가 아닌 함수로 작성하신 부분이 궁금하여 질문드립니다. 혹시 메서드로 작성한 함수와 자체적인 내부 함수로 작성한 기준이 있으실까요 ?!init 함수는 내부에서만 사용되는 함수이고, 다른 메서드 함수는 외부에서도 사용할 수 있어서 그런걸까요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
this 질문
App.js 에 있는 코드입니다.43라인에 this.setState({...}) 코드를 봤을때header 생성자에 들어가는 코드지만 //32 라인화살표 함수라서 this 는 Header 이 아니라App 이라고 생각하면 맞는걸까요 ?
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
BigInt Type 에 대하여
🚨질문 작성법 및 안내사항질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.console.log("hello world");안내사항- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다. BigInt에 대해서 조금더 자세하게 설명해 주실 수 있을까요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
CityList 개발 실습진행 오류
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, '..'))); app.get('*splat', (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); app.listen(PORT, () => { console.log(`START SERVER`); }); 서버키고 localhost:3000에 접속하면저는 사이트에 이미지가 안나와요예제를 잘못따라친건가 싶어서 노트 예제 복붙하고 했는데도 안보이네요 콘솔탭보니까 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.라고 나오는데 해결법 아시나요?⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
프로그래밍 방식 관련 질문
목소리가 시원 시원하셔서 강의가 잘들어옵니다. 다름이 아니라 document.querySelector('div.content');이렇게 프로그래밍 하면 만약에 같은 페이지에 새로운 div content 클래스가추 후에 또 생성되면 생각하지 않았던 동작이 일어 날수 있지 않나요 ?id 값은 유일하니까 id 값을줘서 dom 컨트롤 하는 방식이 좋나요 ?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
노드 텍스트 추가
말티즈 문구 추가 하실때textContent 사용해주셨는데아래 3개가 다 가능한거같은데아무거나 사용해도 되는걸까요? $type.textContent = '말티즈'; $type.innerHTML ='말티즈' $type.innerText='말티즈';
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
promise.all
안녕하세요. promise.all([]) 자바스크립트는 병렬로 실행할수 없는데promise.all 을 사용하면 병렬이 가능한건가요 ?
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
계속 헷갈리네요. 이게 맞나요?
🚨질문 작성법 및 안내사항질문 작성법섹션 4. Promise 객체안녕하세요.수강 중에 계속 헷갈려서 적어봤는데, 이게 맞나요?Promise가 resolve, reject를 콜백 함수로 사용.setTimeout에서 resolve(value+10)으로 호출.resolve는 Promise의 state를 성공? 으로 바꾸고 resolve= value+10 으로 변환workA는 Promise를 반환 ...(객체?).then을 통해 promise의 resolve 프로퍼티 반환?반환된 값을 바로 매개변수 사용?(???)(resA) => {내용}; 을 콜백 함수로 이용.workA(10).then((resA) => {내용}); Promise는 미리 정의된 객체고 new Promise로 promise에 생성? 한 거죠?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물앨범 3-3 에서 express@5 설치 후 app.get('/*', callback) 에서 문제가 발생합니다.
npm i express 로 express 를 설치 후 강의와 같이 코드를 작성했지만 ..app.get('/*', (req, res) => {...}); 에서 오류가 발생합니다.TypeError : Missing parameter name at 2: https://git.new/pathToRegexpError 가 발생합니다.구글에서 검색하여 보니 Express v5에서 '/*' 형식은 맞지 않는 것으로 보입니다.따라서 아래와 같이 코드를 정규식으로 변환하니 제대로 실행 되었습니다.app.get(/^\/(.*)/, (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); 혹시 정규식 말고 다른 수정 방법이 있는지 알고 싶습니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
1. 동물 앨범 만들기 1-1 에서 template 배열 선언후 왜 문자열로 합치기를 했나요?
template 변수를 빈 배열 리터럴 초기화한 후 배열에 push() 메서드를 사용하여 생성된 이미지 요소를 삽입하는 것이 맞다 봅니다. 나중에 출력 시 join() 메서드로 문자열 출력하는 것이 좋겠네요... 🙂const API_URL = 'https://animal-api-two.vercel.app/'; const $content = document.querySelector('div.content'); let template = []; const getData = async () => { let res = await fetch(API_URL); try { if (res) { let data = await res.json(); data.photos.forEach((elm) => { template.push(`<img src="${elm.url}" alt="${elm.name}" />`); }); $content.innerHTML = template.join(' '); } } catch (err) { console.log(err); } }; getData(); ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
미해결React 완전 끝내기: useHoooooook
React 완전 끝내기: useHoooooook / seCallback 사용 배경 / name 변수가 무엇인지 알수있을까요?
name 이 선언되어있지않아서 실행시 에러가납니다