동물앨범만들기 1-1 api 오류

안녕하세요 🙂 질문 감사합니다.어제 AWS에서 이슈가 발생해 관련 서비스들에도 문제가 생긴 것으로 보이는데요,현재 10월21일 오전 10시를 기준으로 시도해보았을때 정상 작동하는것 같습니다! 다시 한 번 시도해보시고 그럼에도 문제가 발생한다면 다시 질문 남겨주세요! 감사합니다

포트 구분 관련

안녕하세요 🙂 질문 감사합니다.강의 초반에는 VSCode의 익스텐션인 Go Live를 사용해 3000번 포트로 실행하였으나,이후 SPA 프로젝트를 실행할 때에는 node 서버 코드를 직접 작성하여, 실행까지 하기 때문에 5500번 포트를 사용하는 것입니다 :)

CityList개발-handleLoadMore함수질문

안녕하세요 🙂 질문 감사합니다.$loadMoreButton.addEventListener('click', () => { this.handleLoadMore(); });handleLoadMore 함수는, 위의 코드처럼 CityList 컴포넌트가 렌더링 될 때 조건에 따라 나타나는 '더보기' 버튼을 눌렀을 때 실행되는 함수입니다.CityList.js 파일에 해당 부분을 작성하셨는지 확인해보시면 좋을 것 같습니다! 전체 코드는 아래와 같습니다.//CityList.js export default function CityList({ $app, initialState, handleLoadMore }) { this.state = initialState; this.$target = document.createElement('div'); this.$target.className = 'city-list'; this.handleLoadMore = handleLoadMore; $app.appendChild(this.$target); this.template = () => { let temp = ``; if (this.state) { this.state.cities.forEach((elm) => { temp += ` (사진) ${elm.city}, ${elm.country} ⭐️ ${elm.total} `; }); temp += ``; } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); if (!this.state.isEnd) { const $loadMoreButton = document.createElement('button'); $loadMoreButton.className = 'add-items-btn'; $loadMoreButton.textContent = '+ 더보기'; this.$target.appendChild($loadMoreButton); $loadMoreButton.addEventListener('click', () => { this.handleLoadMore(); }); } }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); }

const 객체/배열 차이

안녕하세요 🙂 질문 감사합니다.먼저 const는 const로 선언된 변수에 다른 값을 다시 할당하게 못하게 하는 키워드입니다.const user = { name: "아무개", age: 29 }; // ❌ 불가능 (참조 자체를 변경하려 함) user = { name: "홍길동" }; // TypeError // ✅ 내부 프로퍼티는 변경 가능 user.age = 30; console.log(user); // { name: "아무개", age: 30 }따라서 위의 코드처럼 user라는 변수는 한 번 객체를 가리키면, 그 주소를 바꿀 수 없지만, 그 주소 안에 저장된 객체 속성은 수정이 가능합니다. 내부의 구조를 바꾸는건 '재할당'에 해당하지 않기 때문입니다. const numbers = [1, 2, 3]; // ✅ 요소 수정 가능 numbers.push(4); numbers[0] = 10; console.log(numbers); // [10, 2, 3, 4] // ❌ 재할당 불가능 numbers = [9, 9, 9]; // TypeError배열또한 마찬가지인데요, 위의 코드와같이 재할당은 불가능하지만, 여러 메서드를 사용해 내부의 값을 변경하는 것은 가능합니다.

header 개발 새로고침 오류

안녕하세요 🙂 질문 감사합니다.해당 오류는, 서버가 요청을 처리하다가 예외가 발생해서 발생한 오류와 json을 전달받아야 하는 상황에서 html을 전달받아 생긴 오류인데요,먼저 VSCode의 Go Live가 아닌, server.js 를 실행해서 서버를 실행했는지 확인해주시고, 그 다음으로 요청이 제대로 된 주소로 가고있는지 확인해보시면 좋을 것 같습니다. 또한 형태인지도 확인해보시면 좋겠습니다!! 감사합니다.

Promise 객체

안녕하세요 🙂 질문 감사합니다.Promise 객체는 쉽게 말해보자면, '결과는 지금 모르지만 나중에 결과를 알려주는' 그런 약속된 객체라고 할 수 있습니다. dobbymin2님이 이해하신 비동기 작업은 시간이 걸리는 작업이기 때문에 자바스크립트가 기다리지 않고 계속 다음 코드를 실행할 수 있도록 해주는데요, 이러한 나중에 끝나는 작업의 결과를 담아두는 그릇을 바로 Promise라고 할 수 있습니다!! function getData() { return new Promise((resolve) => { setTimeout(() => { resolve("서버 응답 데이터"); }, 1000); }); }따라서 Promise를 반환한다 라는 의미는, 위의 코드와 같이 getData 함수처럼 실제 데이터를 반환하지 않고 대신 Promise 객체를 반환한다. 즉, 지금은 결과가 없지만 1초 후에는 '서버 응답 데이터'라는 값을 전달할 거라는 약속을 주는거라고 이해해주시면 될 것 같습니다 🙂

cityList 렌더가 안되는 문제

안녕하세요 🙂 질문 감사합니다.먼저 해당 오류는 브라우저가 import App from "./App.js"; 구문을 자바스크립트 모듈로 해석하지 못할 때 발생하는 오류인데요, index.js를 불러올 때, script 태그에 type을 module로 설정하셨는지 확인해보시기 바랍니다 :)

localhost:3000 오류

안녕하세요 🙂 질문 감사합니다.해당 오류는 Express에서 발생하는 오류인데요, server.js 코드를 올려주시면 확인해보겠습니다!!그리고 VSCode의 Go Live를 사용해서 코드를 실행하더라도, 아래와 같이 페이지에 사진들이 알맞게 나오는데요, 제가 제공해드리는 핸드북과 https://github.com/hbin12212/animal-album 를 참고해서 작성하신 코드와 제가 작성한 코드를 비교해보시면 좋을 것 같습니다. 감사합니다 :)(사진)

init 함수 앞에 await

안녕하세요:) 질문 감사합니다.App 컴포넌트 내부에 선언된 init 함수는 비동기함수이기 때문에, 호출 시 Promise 객체를 반환합니다.하지만 현재 App 컴포넌트에서는 init()의 반환값을 어딘가에 저장하거나, 그 결과를 활용하고 있지는 않습니다. 즉, init 함수의 호출이 끝날 때까지 기다릴 필요 없이 그냥 실행만 하면 되는 상황입니다!그렇기 때문에 await를 굳이 작성해주지 않았고, 그렇기 때문에 App 컴포넌트 자체도 async를 붙일 필요가 없게 된것입니다 🙂추가적인 질문이 있으시면, 다시 댓글이나 질문으로 남겨주세요! 감사합니다.

"6. 1. (최신 버전) 자바스크립트 코딩 환경 설정"의 화면이 정상적으로 출력되지 않습니다

안녕하세요 Sungkuk Park님! 질문 감사합니다 🙂화면 출력이 이루어지지 않는다는게, 영상이 정상적으로 나타나지 않는다는 말이실까요??해당 문제는 다른 수강생 분들께서도 종종 질문으로 남겨주셨는데요, 영상 출력이 정상적으로 되지 않는 문제는, 새로고침 또는 인프런 사이트에 다시 접속해보시거나, 인프런측에 문의를 남겨주시는 쪽으로 해결을 하셔야할 것 같습니다. 강의 수강에 불편을 드려 죄송합니다. 혹시라도 문제가 해결되지 않으신다면 언제든지 다시 질문 남겨주세요! 감사합니다.