<div class="bookmark-item-add-btn"> 질문

안녕하세요 🙂 질문 감사합니다.해당 강의 영상의 25초를 보시면, 자막으로 "id 값도 동일하게 작성해주세요" 라고 나와있습니다.id 값을 동일하게 작성해주시면 될 것 같습니다. 감사합니다.

랜덤이미지

안녕하세요 🙂 질문 감사합니다..해당 영상의 '수업 노트'에서도 말씀드렸듯이, unsplash에서 제공하는 api가 삭제되어 더 이상 사용할 수 없게 되었습니다. 따라서 원하시는 이미지의 주소를 복사해서 사용해주시면 예쁜 배경으로 사용하실 수 있을 것 같습니다. 감사합니다 :)

자바스크립트 질문

안녕하세요 🙂 질문 감사합니다.다른 개발 언어에 대한 지식이 있으시다면, 한 번에 끝내는 자바스크립트 강의를,아예 개발이 처음이시라면, 웹 프론트엔드를 위한 자바스크립트 첫 걸음 강의를 추천드립니다!바닐라 자바스크립트는, 다른 라이브러리나 프레임워크를 사용하지 않는 '순수'한 상태의 자바스크립트를 말해요. React.js, Next.js가 아닌 순수한 자바스크립트를 익힌 다음, 인기 라이브러리, 프레임워크들을 학습하시는 것을 추천드립니다 :)

영상 편집 관련 문의

안녕하세요 🙂 질문 감사드립니다.해당 영상 확인했습니다. 영상에서 5분50초 이후에 동일한 영상이 반복되고 있는 것 같은데요, 빠르게 잘라낸 후 재업로드 도와드리겠습니다. 강의 수강에 불편을 드려 죄송합니다 🙇🏻‍♀️

동물앨범만들기 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초 후에는 '서버 응답 데이터'라는 값을 전달할 거라는 약속을 주는거라고 이해해주시면 될 것 같습니다 🙂