동물 앨범 만들기 코드 챕터에서 강의에서 제공하고 API_URL인 https://inf.run/7Sf7J주소로 들어가면 데이터가 보여지는게 아니라 아래 이미지처럼 나오는데 왜그럴까요?

영상 [4:12]에서 console.log()로 delay(3000)의 반환값인 Promise 객체를 출력했는데 어떻게 "3초가 지났습니다."라는 문구가 출력되는 건가요?

 let $animalInfo = document.querySelector("div.animal-info"); let ageElement = document.querySelector("div#age"); console.log($animalInfo); console.log(ageElement);다음과 같은 예제 코드를 실행했을 때,이렇게 출력이 되는데요. 강의에서는다음과 같이 태그와 함께 출력되는데 제 크롬 브라우저에서는 왜 다르게 나오는지 궁금합니다! 

const changePage = page => { history.pushState({page}, `Title`, "/${page}" }안녕하세요. 위 예제에서 pushState의 두번째 인자에 title이라고 해주셨는데 mdn을 보니 ununsed 로 되어있어서요. 영상을 봐도 title이 변경되진 않더라구요. 여기 수정이 필요할 것 같습니다. 감사합니다.

리액트로 작성된 textarea(controlled, uncontrolled 모두 포함) 의 경우에 개발자 도구에서 body 태그를 보면 무한깜빡거리는 현상이 있는데.. 이건 렌더링이 계속 발생하는거 아닌가요?textarea 에 포커스만 가더라도 body 에 무한깜빡현상이 발생하는데 왜 그런걸까요?이전값과 현재값을 비교하기도 해보고 useEffext를 사용하기도 해보고 했는데 해당 현상이 사라지지 않는것 같아요..

현직 개발자입니다. 생각이 많아져서 질문드립니다.SSR(타임리프, JSP), CSR(Vue3) 을 프로젝트 경험하면서.. 이런저런 생각이 드는데요.1.CSR은 SEO문제 해결이 가능한가요?2.CSR은 컴포넌트 재사용이 장점이나 화면복잡도가 높아질 경우 코드 복잡도가 높아진다고 생각되는데 어떻게 생각하시는지요?3.SSR이 화면 깜빡임이 있다고 하는데, 실은 비동기 통신하면 화면 깜빡임은 제어 가능합니다. html자체를 바꿔서 렌더링 하는게 아닌 화면 하나당 html하나로 렌더링하는거죠.(메뉴이동시에만 html이동하니 메뉴이동시 초기화면은 깜빡임은 있음)강의 내용에 있는 Tab은 한화면에 구성하면 깜빡일 일도 없고, 내부 공통 기능들은 공통JS로 빼고 틀은 같이 쓰고, 공통부분은 템플릿관련 JS로 처리하면 크게 다른부분을 모르겠습니다.화면 내에서는 전부 비동기 통신 Ajax로 처리하면 깜빡임은 없더라구요.4.CSR은 SPA기반이라 초기화면이 모바일쪽이 더 심플해서 나을거 같다라는 생각이 듭니다.대형 포털을 CSR기반으로 하면 복잡도도 높아지고, 제 경험엔 초기화면 또는 복잡한 화면들이 많이 느려지더라구요. 어떻게 생각하시는지요?SSR, CSR이 어떤 상황에 적용되는게 나을지에 대한 의문이 항상 있습니다.그냥 강의듣다가 개인적인 질문 드려봅니다.cf. 강의 내용은 아주 잘 듣고 있습니다.^^

AccordionItem에 작성하신 코드를 그대로 따라쳤다고 생각했습니다.닫힌 상태에서 문자열은 찾아지는데 자동으로 아코디언이 열리진 않습니다ㅠ추가적으로 css코드를 넣어야할까요?알려주신 링크를 들어가서 봤는데 setOpen을 useEffect 맨 위에 넣는걸 보고 새로운 상태를 넣어야하는건가 했습니다.

안녕하세요! 마지막 프로젝트 적용만 남았는데 manifest.json 파일 만들고 저렇게 작성했는데 확장 프로그램 로드를 못하는 상황입니다..!

🚨질문 작성법 및 안내사항질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.body { margin: 0 auto; width: 100%; font-family: 'Hi Melody'; background-image: url("https://source.unsplash.com/user/hanjw3288/likes"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; /* color: white; */ /* overflow: hidden; */ }강사님 안녕하세요!마지막 프로젝트 적용하기 전에 background-image 적용할때 unsplash가 적용이 안되는데 어떻게 해결해야 할까요..? 저 url 타고 들어가면 404페이지가 뜹니다..

🚨질문 작성법 및 안내사항질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.if (quoteItem) { //localstorage에 quote가 있다면 let { createDate, quoteData } = JSON.parse(quoteItem); if (createDate === `${month}-${date}`) { quoteElement.textContent = `"${quoteData}"`; } else { getQuote(); } } else { //localstorage에 quote가 없다면 getQuote(); }안녕하세요 강사님!api 활용해서 명언 설정하기 강의를 듣는 중에 마지막 로컬스토리지에 조건문을 하고 나서 명언이 나오고 그다음 새로고침을 하면 undefined가 출력이 되는데 어느쪽이 문제 일까요..?혹시 오타가 있나해서 강의 대본에 코드를 복붙해도 결과가 똑같아서 질문드립니다!안내사항- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다.

강사님 안녕하세요. 항상 강의 잘 보고 있습니다 🙂완강하고 다시 보다가, scrollSpy 바닐라버전에서 궁금한 점이 있어서 질문 남깁니다! 네비게이션의 버튼을 클릭 했을때, 버튼의 부모인 li의 index 값을 찾기 위해 사용했던 e.composedPath() 대신 closest('li') 메서드 를 사용하는 것은 어떤지 궁금해서요!퍼블리셔로 일하면서, 클릭한 타겟의 가까운 부모를 찾을때 자주 사용했던 메서드인데, e.composedPath()를 사용한 다른이유(강의에서 설명한 이유 외에)가 있으신지 궁금합니다! 

전체 사진 처음 화면은 로딩 되서 잘나오는데 펭귄이나 다른탭을 클릭하면 아래와 같은 오류가 나오는데 TabBar.js onclick 함수가 아니라는데;; 왜이런건지 함수가 맞는데 아래에 제가 작성한 코드 입니다 검토 좀 부탁드립니다.^^;;TabBar.jsexport default function TabBar({ $app, initialState, onClick }) { // TabBar 클래스를 생성합니다. 초기값과 클릭 이벤트를 받습니다. this.state = initialState; // 초기값 설정 this.onClick = onClick; // 클릭 이벤트 설정 this.$target = document.createElement("div"); // 새로운 div 요소를 생성합니다. this.$target.className = "tab-bar"; // div 요소에 클래스 이름을 추가합니다. $app.appendChild(this.$target); // $app 요소에 div 요소를 추가합니다. this.template = () => { let temp = `<div id="all">전체</div><div id="penguin">펭귄</div> <div id ="koala">코알라</div><div id ="panda">판다</div>`; // 전체 탭을 추가합니다. return temp; // temp를 반환합니다. }; this.render = () => { // 렌더링 함수 this.$target.innerHTML = this.template(); // div 요소의 innerHTML을 template 함수의 반환값으로 설정합니다. let $currentTab = document.getElementById(this.state); // 현재 탭을 선택합니다. // $currentTab ? ($currentTab.className = "clicked") : ""; // 현재 탭이 존재하면 clicked 클래스를 추가합니다. 없으면 변화없음. $currentTab && ($currentTab.className = "clicked"); // && 연산자를 사용하여 현재 탭이 존재하면 clicked 클래스를 추가합니다. const $tabBar = this.$target.querySelectorAll("div"); // 모든 div 요소를 tabBar 요소에 담아온다. $tabBar.forEach((elm) => { elm.addEventListener("click", () => { // 각 div 요소에 클릭 이벤트 리스너를 추가합니다. this.onClick(elm.id); // 클릭한 div 요소의 id를 onClick 함수에 전달합니다. }); }); }; this.setState = (newState) => { // state를 변경하는 함수 this.state = newState; // state를 새로 받은 newState로 업데이트합니다. this.render(); // state가 변경되면 렌더링 함수를 다시 호출하여 화면을 업데이트합니다. }; this.render(); // 렌더링 함수를 호출합니다. } App.jsimport TabBar from "./components/TabBar.js"; // TabBar.js 파일을 불러옵니다. import Content from "./components/Content.js"; // Content.js 파일을 불러옵니다. import { request } from "./components/api.js"; // api.js 파일을 불러옵니다. export default function App($app) { // App 생성자 함수를 생성합니다. // $app은 App 컴포넌트가 렌더링될 DOM 요소입니다. this.state = { //state 초기값 설정 currentTab: "all", // 탭 초기값 설정 tabbar 컴포넌트에 전달할 현재 탭 데이터 photos: [], // 사진 초기값 설정 content 컴포넌트에 전달할 사진 데이터 }; const tabbar = new TabBar({ $app, // App 컴포넌트가 렌더링될 DOM 요소를 전달합니다. initialState: "", // 초기값 설정 oncClick: async (name) => { // 클릭 이벤트 설정 변경값을 currentTab에 저장 this.setState({ // 클릭한 탭의 데이터를 state에 저장합니다. ...this.State, // 기존 state를 복사합니다. 스프레드 연산자 currentTab: name, // 클릭한 탭의 이름을 currentTab에 저장합니다. photos: await request(name === "all" ? "" : name), // 클릭한 탭의 새로운 사진을 request 이름으로 함수를 불러와 저장합니다. // request 함수는 비동기 함수로 async await를 사용하여 데이터를 받아옵니다. }); }, }); const content = new Content({ $app, // App 컴포넌트가 렌더링될 DOM 요소를 전달합니다. initialState: [], // 초기값 설정 }); this.setState = (newState) => { // 업데이트 값을 newState로 받습니다. this.state = newState; // state를 새로 받은 newState로 업데이트합니다. tabbar.setState(this.state.currentTab); // tabbar 컴포넌트에 state를 전달합니다. content.setState(this.state.photos); // content 컴포넌트에 state를 전달합니다. }; const init = async () => { //웹페이지가 로드되면 실행되는 함수 try { const initialPhotos = await request(); // request 함수를 불러와 initialPhotos에 저장합니다. this.setState({ // state를 initialPhotos로 업데이트합니다. ...this.state, // 기존 state를 복사합니다. 스프레드 연산자 photos: initialPhotos, // initialPhotos를 photos에 저장합니다. }); } catch (err) { console.log(err); } }; init(); // 웹애플리케이션이 실행될때 init 함수를 실행합니다. } index.jsimport App from "../src/App.js"; const $app = document.getElementById("app"); new App($app); api.jsconst API_URL = "https://animal-api-two.vercel.app"; // 이미지 url을 변수에 저장 // const $content = document.querySelector("div.content"); //(api 불러오는 코드만 남겨놓기 위해 삭제제) // let template = []; // (api 불러오는 코드만 남겨놓기 위해 삭제제) //API export const request = async (name) => { const res = await fetch(name ? `${API_URL}/${name}` : API_URL); // fetch 함수를 사용하여 API_URL을 호출합니다. name이 있으면 name을 호출합니다. 없으면 API_URL을 호출합니다. try { if (res) { let data = await res.json(); return data.photos; } } catch (err) { console.log(err); } }; index.html<!DOCTYPE html> <head> <title>Animal Album</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="../project2/src/style.css" /> <script type="module" src="../project2/src/index.js" defer></script> </head> <body> <div id="app"> <!-- TAB BAR --> <!-- CONTENT --> </div> </body> content.jsexport default function Content({ $app, initialState }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "Content"; $app.appendChild(this.$target); this.template = () => { let temp = []; if (this.state) { this.state.forEach((elm) => { temp += `<img src="${elm.url}"></img>`; }); } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); }  콘솔 오류코드 TabBar.js:26 Uncaught TypeError: this.onClick is not a function at HTMLDivElement.<anonymous> (TabBar.js:26:14)

Header에서 total, cost, fun 등 정렬 값이 바뀌는 건 알겠는데, 이 값이 바뀔 때 점수가 높은순으로 정렬이 되는데, 이 정렬을 지정해주는 실행 코드가 어디에 있는지 모르겠어요. <div class="filter"> <select id="sortList" class="sort-list"> <option value="total" ${sortBy === 'total' ? 'selected' : ''}>Total</option> <option value="cost" ${sortBy === 'cost' ? 'selected' : ''}>Cost</option> <option value="fun" ${sortBy === 'fun' ? 'selected' : ''}>Fun</option> <option value="safety" ${sortBy === 'safety' ? 'selected' : ''}>Safety</option> <option value="internet" ${sortBy === 'internet' ? 'selected' : ''}>Internet</option> <option value="air" ${sortBy === 'air' ? 'selected' : ''}>Air Quality</option> <option value="food" ${sortBy === 'food' ? 'selected' : ''}>Food</option> </select> </div> 

안녕하세요 코드 궁금증은 아니구요 이렇게 request로 이미지 불러오기를 했을 때 이미지를 불러오긴 하는거 같은데GET http://127.0.0.1:5500/undefined 404 (Not Found)와 같은 오류가 발생하면서 엑박이 뜨거든요... 도저히 제가 어디서 잘못했는지 발견을 못하겠어서 혹시 해결 방법을 아신다면 알려주시면 감사드리겠습니다...

const workA = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workA`); }, 5000); }); }; const workB = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workB`); }, 3000); }); }; const workC = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workC`); }, 10000); }); }; const start = async () => { try { let results = await Promise.all([workA(), workB(), workC()]); console.log(results); results.forEach((res) => console.log(res)); } catch (err) { console.log(err); } };[10:01] 강의 내용 보면 workA가 5초 workB가 3초, workC가 10초인데, 결국 출력 되는 값을 보면 동시에 출력이 됩니다.그리고 순서도 A, B, C 순입니다.let resultA = await workA(); let resultB = await workB(); let resultC = await workC(); console.log(resultA); console.log(resultB); console.log(resultC);물론 실행시간의 차이는 있지만, 실직적으로 프로그램에 표기 되는 값은 바로 위에 있는 코드예제에서 보여주신 A, B, C랑 같은데, 병령처리라면 시간이 짧은 B가 실행되고 그 다음에 A, 그 다음 C가 아웃풋으로 나와야 하는거 아닌가요??

제네릭을 사용하실 때 콤마는제네릭과 JSX의 혼동방지제네릭 구문을 명확히 해서 코드의 가독성 높임TSX 파일에서 사용할 때 하는 일반적인 관례로 인한 이유가 맞을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.  선생님.  덕분에 재밌게 근본을 다지고 있는데요.  혹시, 세 번째 강좌인 cssom에 대한 강좌는 아직 계획이 없으신걸까요? ㅜㅜ  향후 계획이 있으시다면, 언제 오픈하실 지 궁금합니다. ㅎㅎ  모조록 건강하시고, 새해 복 많이 받으세용 감사합니다.

src파일이랑 index.html파일 만드실 때, 문자 앞에 아이콘이있는데, 저는 없습니다. 또한 우측 큰 창에 보면시작, index.js탭은 있는데 html탭이 없네요,,, 또한 test아래 빈공간 우클릭해서 새폴더 만들기로src생성 후 html을 만들경우 html이 src 상단으로 올라가는데 정상적인 상황인가요...? 뭔가 설정이 잘못된 건가요...?스크린샷 파일 첨부 해드립니다ㅠ

안녕하세요 !해당 강의를 듣고 기능은 비슷한데 내용은 조금 다른 홈페이지를 제작해보고 싶어져서 질문 드립니다 !API를 호출하는 기능은 이해했는데, 강사님이 만드신 API 처럼 저도 직접 간단한 정보를 담은 api 를 만들어보고 싶은데 이 부분은 어떻게 제작하는 지 알 수 있을까요?!

 안녕하세요 citiList 에 더보기 버튼이 있는데handleLoadMore 함수가 더보기 버튼을 클릭했을 때 동작하는 함수인 것 이해했습니다. 근데 해당함수는 citiList 컴포넌트에서만 사용하니까 CitiList.js 에 작성할것으로 예상했는데App.js 에 작성하셔서 App.js 에서 작성하고 CitiList 로 전달하는 이유가 궁금합니다!