?. 연산자는 자바스크립트 연산자인가요?

안녕하세요 🙂 질문 감사합니다.옵셔널 체이닝(?.)은 TypeScript 전용 기능이 아니라, 자바스크립트 표준(ECMAScript)에 포함된 공식 연산자입니다. 객체의 특정 프로퍼티가 존재하지 않을 때 에러를 내지 않고, 안전하게 접근할 수 있게 해주는 자바스크립트의 연산자라고 할 수 있습니다. 감사합니다.

JS의 논리 연산자 &&, ||가 리액트의 조건부 렌더링 &&, ||인가요?

안녕하세요 🙂 질문 감사합니다.React.js에서 사용하는 조건부 렌더링은, 자바스크립트의 논리 연산을 그대로 사용한 것으로,강의에서 다루는 && 연산자(AND)와 || 연산자(OR)와 동일합니다.

<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배열또한 마찬가지인데요, 위의 코드와같이 재할당은 불가능하지만, 여러 메서드를 사용해 내부의 값을 변경하는 것은 가능합니다.