묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹 프론트엔드를 위한 자바스크립트 첫걸음
브라우져 호환성 문의
⚠질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.console.log("hello world");안내사항- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다. - '질문 해결'은 답변 작성일 기준 1일 이후에 설정됩니다.섹션7 33.[안내] 프로젝트 코드 주소 에서 소스 다운받고 index.html파일을 Linux firefox브라우져에서 열어보면 제대로 표시되지 않습니다. 브라우져상관 없이 정상 실행 되도록 하려면 어떻게 해야 하나요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
ssr방식 경험
취업준비를 위해react, next 강의를 듣기전에 프레임워크에 대한 깊은 이해를 위해바닐라js로 spa + csr방식을 체득하기 위해 이 강의를 듣고 있습니다. spa + ssr방식 또한 react,next에서도 사용한다고 알고 있는데 현재 강의에서 spa + csr방식만 잘 체득하고 프레임워크에 대한 공부를 해도 충분할지 제대로 이해하려면 바닐라 js로 spa + ssr방식도 이해하고 직접 구현 해보면서 체득하고 넘어가야지 프레임워크에 대한 깊은 이해가 가능할지가 궁금합니다..
-
미해결웹 프론트엔드를 위한 자바스크립트 첫걸음
4-23 Promise객체 12:05 코드 질문
⚠질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.console.log("hello world");안내사항- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다. - '질문 해결'은 답변 작성일 기준 1일 이후에 설정됩니다. 섹션4 23 Promise객체 강의에서 12:05시간에 아래와 같은 예제를 설명하는데,const executor = (resolve, reject) => { setTimeout( () => { reject("실패"); }, 3000); }; const promise = new Promise(executor); promise .then((res) => { console.log(res); }) .catch((err) =>{ console.log(err); });코드 아래에서 promise.then(...).catch(...);와 같은 형식으로 사용될 수 있는 이유를 알려주세요.then과 catch는 property라고 했는데, 이와 같이 초기화 하는 내용은 강의에서 못들은것 같고, Promise chaining으로 넘겨짚기에는 각 함수에서 객체를 리턴하지도 않고... 모르겠네요.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
compare 함수 설명에 오해의 소지가 있어보입니다.
안녕하세요. 아래 혼동을 줄수 있는 설명에 대해 문의드립니다. 아래 캡춰 설명에서 a: 다음 b: 이전 이 설명이 오해의 소지가 있어보입니다.오히려 거꾸로 설명해야 맞는거 같습니다.이 설명에서 a: 이전 b: 다음이렇게 옆 설명 멘트를 수정해야 맞는거 같습니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
DOM 트리 보는 곳
크롬 개발자 도구에 있는 Elements 탭이 DOM 트리라고 봐도 되나요?
-
미해결React 비기너: 튼튼한 기본 만들기
html이 어플레이케이션 중심으로 전환되었다는 뜻이 정확히 이해가 가지 않아 질문드립니다.
"html이 어플레이케이션 중심으로 전환되었다"는 뜻이html5 에서는 이전과는 달리, 단순 줄글 텍스트 데이터 형식으로 콘텐츠를 표현하는 것이 아니라,canvas나 video와 같이 텍스트 형식을 벗어난 엘리먼트들로 콘텐츠를 표현한다는 의미일까요? 그리고 여기서 정확히 "애플리케이션"이 의미하는 바가 무엇인지 궁금합니다. canvas, video와 같은 엘리먼트의 구현체(?)가 DOM에 객체를 추가하기 위해 계산등을 처리해주기에 이들이 "애플리케이션"으로써 분류된걸까요? 그리고 "마크업"이라는 것을 텍스트 형식으로 표시된 의미론적으로 분류된 텍스트라고 이해해도 될까요? 그렇다면 canvas도 마크업으로써 콘텐츠를 표현하는 것이지만, html 이 parse되어 DOM 으로 만들어질때, 즉 메모리에 객체 형태로 올라갈 때 그 형식이 텍스트가 아닌 다른 무언가이기에 "어플리케이션"이라는 표현이 사용되는 것일까요? 그렇다면 XHTML와 그 이전 버전에서는 canvas, video같은 앨리먼트 없이 오로지 텍스트를 표현하는 태그들만 사용되었던건가요? 좋은 강의 늘 감사합니다.
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
<div class="bookmark-item-add-btn"> 질문
선생님 강의에 보면 getElementById로 <div class="bookmark-item-add-btn"> 이 부분 가져오는데, 강의를 여러번 돌려봐도 아이디는 없고 클래스만 설정했는데 어떻게 코드가 강의에선 잘 돌아가는지 모르겠어요 ㅠㅠ똑같이 따라하려는데 안되네요 ㅠㅠ
-
미해결이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]
11강 내용과 12강 내용이 충돌하는 것 같아요.
11강에서는 removeEventListener 함수로 리스너를 명시적으로 제거하지 않는 한 요소가 사라지더라도 메모리에 계속 남아 있다고 설명하셨는데요. 12강에서는 요소를 제거하는 방식으로도 리스너를 제거할 수 있다고 해서 내용이 충돌하는 것 같아요.
-
해결됨구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]
클래스 vs 인라인 스타일 성능 질문
안녕하세요. 좋은 강의 감사합니다!26. 클래스와 스타일을 다루는 가장 강력한 방법 – classList, style, 그리고 리플로우까지 에서 인라인 스타일로 스타일을 바꾸면 리플로우/리페인트가 자주 발생할 수 있어 성능에도 안 좋을 수 있다고 설명하셨는데요.예시로 들어주신 코드에서는 어차피 자바스크립트 엔진이 싱글 스레드라 클래스든 인라인 스타일이든 모두 반영된 후에, 리플로우/리페인트가 발생하기 때문에 성능적으로는 유의미한 차이가 없을 것 같은데요. 좀 더 구체적인 설명을 해주실 수 있을까요?ChatGPT 답변도 같이 첨부합니다.https://chatgpt.com/share/69181628-34d0-8007-8e81-02401c649370
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
랜덤이미지
강의를 완강하고 복습하려고 다시 해봤는데요, 강의내에 있는 unspalsh 의 랜덤이미지가 없어진거 같아서요.비슷한 기능으로 다른거로 대체할수 있는게 있을까요...???
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
자바스크립트 질문
선생님 이 강의로 자스 입문하려고 하는데요바닐라 자바스크립트나 그냥 자바스크립트나 똑같은 건가요?다르다면 바닐라 자바스크립트는 배경지식이 필요한건가요..? 얘부터 해도 될까요
-
해결됨DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]
지금 이 화면에서 뭘로 fps를 알 수 있나요?
지금 이 화면에서 뭘로 fps를 알 수 있나요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물앨범만들기 1-1 api 오류
const API_URL = "https://animal-api-two.vercel.app/"; const getData = async () => { let res = await fetch(API_URL); try { if (res) { let data = await res.json(); console.log(data); } } catch (err) { console.log(err); } }; getData();(확대) 다음과 같은 오류가 발생해서 강의 진행이 어렵습니다이래저래 찾아봤는데 해결방법을 모르겠습니다 ㅜㅜ답변 부탁드리겠습니다 감사합니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
CityList개발-handleLoadMore함수질문
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂 안녕하세요 강의에 따라 그림이 로드 되는 것까지는 성공했지만 이후 handleLoadMore를 넣고 배열이 나오지 않아요...그리고 handleLoadMore함수가 어떻게 실행까지 이어지는지 알려주세요예) handleLoadMore가 new CityList의 인수로 지정되고 cityList 함수에 부여되어 00줄 console.log함수로 출력추가한 코드만 넣었습니다...! 주석 단 부분으로 확인해보니이렇게 작동됨은 확인했습니다! const cityList = new CityList({ $app, initialState: this.state.cities, handleLoadMore: async () => { const newStartIdx = this.state.startIdx + 40; const newCities = await request(newStartIdx, this.state.region, this.state.sortBy, this.state.searchWord); } }); //console.log(cityList) ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
객체와 배열의 const 차이
const로 했을 때 객체는 수정이 되고 배열은 수정이 안된다는 설명 부분이 이해가 잘 안됩니다. 고유 ID가 아니라는 말도 이해가 잘 안되는데 보충 설명을 받을 수 있을까요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
const 객체/배열 차이
왜 객체는 const로 했을 때 수정이 되고, 배열은 const로 했을 때 수정이 안 되는지 이해가 잘 안됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
header 개발 새로고침 오류
검색어 입력 후 새로고침을 하면 Failed to load resource: the server responded with a status of 500 () 이와 같은 오류가 뜨는데 왜 그러는걸까요?그리고 그 밑에 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON 이렇게 함께 콘솔창에 나옵니다.
-
해결됨Vanilla JavaScript로 직접 구현하는 Notion
만약 문서 수가 매우 많아진다면 성능 이슈는 없을까요?
문서 수가 수백개 이상으로 늘어나면 findDoc(), childrenOf() 등의 함수에서 전체 배열을 순회하는 부분이 성능면에서 문제가 될 수 있을까요? 만약 그렇다면 최적화할 수 있는 방법은 어떤 것이 있을까요?
-
해결됨DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]
CSS까지만 지연에 영향을 주는건가요?
안녕하세요~! 궁금한 점이 생겨 문의드립니다! DOM + CSSOM > Render Tree를 만들기 때문에 CSS 배치에 따라 CRP에 영향을 주는 것까지는 이해했는데요! script는 async 또는 defer 속성을 알맞게 적어주기만 하면 실행 순서만 보장이 되고 안되고의 차이이고 CRP에는 영향을 주진 않는건가요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
cityList 렌더가 안되는 문제
강의 영상대로 코드를 작성하고, localhost:3000을 열어보니 다음과 같은 오류가 계속 뜨네요 ㅜㅠㅠSyntaxError: Unexpected identifier 'App'. import call expects one or two arguments. 다음은 server.js 입니다const express = require("express"); const path = require("path"); const app = express(); const PORT = 3000; //현재 탐색기에 위치한 폴더들에 서버가 접근할 수 있도록 하는 코드 //join 안에 경로 작성 app.use(express.static(path.join(__dirname, ".."))); //어떤 경로의 요청이 오던지 항상 동일한 index.html 파일을 반환할 수 있도록 코드 작성 app.get("/*splat", (req, res) => { res.sendFile(path.join(__dirname, "..", "index.html")); }); //우리가 설정한 포트번호에서 서버가 항상 요청을 듣고 있을 수 있도록 하는 코드. app.listen(PORT, () => { console.log("START SERVER"); }); 다음은 index.js 입니다import App from "./App.js"; const $app = document.getElementById("app"); new App($app); 무엇이 문제일까요? import 경로를 계속 수정해봐도 같은 에러가 뜹니다 ㅠㅠ