계속 헷갈리네요. 이게 맞나요?

안녕하세요 GG G님!Promise 개념은 조금 어려운 개념이기 때문에 당연히 헷갈릴 수 있습니다 😀Promise 객체는 생성될 때 내부적으로 executor 함수를 실행합니다. resolve와 reject는 executor 함수의 매개변수이며, 우리가 원하는 시점에 비동기 작업이 성공했을 때 resolve함수를, 실패했을 때 reject 함수를 호출하면 됩니다.resolve(value + 10)을 호출하면 Promise 의 내부 상태가 fulfilled로 변경되고, value + 10 이 Promise 객체의 결괏값이 되죠. workA()를 실행하면 workA는 결과로 Promise 객체를 반환합니다. Promise 객체를 반환하기 때문에 then 메서드를 사용할 수 있습니다.const workA = (value) => { const promise = new Promise((resolve) => { setTimeout(() => { resolve(value + 5); }, 5000); }); return promise; }; workA(10).then((resA) => { console.log(resA); // 20 (== value + 10) });따라서 위의 코드는, workA가 프로미스 객체를 반환하고, 5초 후에 resolve(15)을 호출한 다음,.then()에 등록된 콜백 함수가 실행되면서, resA에는 resolve(15)의 값인 15가 전달되어 출력되는 것입니다. Promise는 자바스크립트에 내장된 전역 객체이고, new Promise()를 사용해서 비동기 작업을 관리할 객체를 생성하는 것이라고 이해해주시면 될 것 같습니다 🙂 감사합니다.

동물앨범 3-3 에서 express@5 설치 후 app.get('/*', callback) 에서 문제가 발생합니다.

안녕하세요 coding bear님!해당 오류는, 최근 express 버전이 업데이트 되어 발생하는 문제인데요, 해당 문제는 제가 '핸드북'과 '수업노트'에 해결방법을 작성해두었습니다!공식 문서 링크도 남겨두었으니, 참고해보시면 좋을 것 같습니다. 감사합니다 🙂

1. 동물 앨범 만들기 1-1 에서 template 배열 선언후 왜 문자열로 합치기를 했나요?

안녕하세요 🙂 coding bear님!강의에서는 초보 개발자분들을 위해 보다 깔끔하고 간단한 코드를 작성하려고 다음과 같은 방식으로 작성을 했는데요, 작성해주신 방식이 훨씬 명확하고 좋은 것 같습니다.해당 부분은 조금 더 보완해서 보다 더 좋은 방식으로 이번주 내로 업데이트 해두겠습니다. 의견 감사드립니다!!

조건부 렌더링을 위해 인스턴스를 매번 생성하는 것의 장단점이 궁금합니다.

안녕하세요 cho766님! 질문주셔서 감사합니다 🙂cho766님의 말대로, 페이지를 이동할 때마다 새로운 인스턴스를 계속 생성하게 되면 메모리 측면에서 단점이 생길 수도 있고 성능에 영향을 줄 수도 있습니다. 하지만, 자바스크립트는 '가비지 컬렉션'을 지원하기 때문에 더 이상 참조되지 않는 객체는 자동으로 메모리에서 제거됩니다. 따라서 이정도 소규모의 프로젝트나 단순 학습의 목적이라면 크게 신경쓰지 않아도 괜찮을 것 같습니다.그리고, 아주 간단하게 말해보자면, React에서는 필요한 부분만 업데이트 할 수 있는 기능, 컴포넌트의 재사용 등으로 이를 해결할 수 있습니다.좋은 질문 감사드립니다!

Promise 객체 출력

안녕하세요 godeka님! 질문 감사드립니다 🙂console.log로 delya(3000)의 반환값인 프로미스 객체를 출력하는 것이 맞습니다.하지만, await 키워드를 작성해주었기 때문에, resolve되는 프로미스 객체가 반환하는 값을 기다렸다가 result 변수에 그 값을 저장합니다.다시 정리해서 말해보자면, await 키워드를 작성해주었기 때문에,프로미스 객체가 반환하는 값을 출력하게 되는 것입니다.async/await 강의에서는 프로미스 객체 resolve 함수를 통해 반환하는 값을 출력할 수 있는 then 메서드 대신, async/await 키워드를 사용해 이를 출력하는 방법에 대해 설명하고 있습니다.'비동기' 개념은 중요한 개념인 만큼 조금 어려운 내용이기 때문에 핸드북을 통해 다시 한 번 천천히 읽어보시는 것을 추천드립니다 😊

API 에러

안녕하세요 🙂제가 확인해보니, 접속이 잘 되는 것 같은데 다시 한 번 접속해보시면 좋을 것 같습니다! 감사합니다.아래에 주소를 다시 남겨드리겠습니다!!https://inf.run/7Sf7J추가적으로 문제가 발생한다면, 제가 내일(월)까지 답변을 작성해두겠습니다. 감사합니다!!

querySelector로 가져온 요소를 출력한 결과에 대한 질문

안녕하세요 🙂 질문 주셔서 감사합니다.결론부터 말하자면, 제 강의에 나와있는 출력값과 cho766님이 올려주신 출력값은 모두 정상입니다. 다르게 출력되는 이유는, 크롬 버전 또는 콘솔창의 설정 상태에 따라, 콘솔에 DOM 요소를 출력할 때,브라우저는 div.animal-info(요약 형태), ...(전체 HTML 구조) 이렇게 두가지 방식 중 하나로 표시를 하기 때문입니다.저도 요약 형태와 전체 구조가 번갈아가면서 출력 되더라구요!!좋은 질문 주셔서 감사합니다!!

5. SPA와 라우팅에서 history.pushState 관련 문의입니다

안녕하세요 🙂history.pushState()에서 두 번째 매개변수는 원래 title을 나타내 '문서 제목'을 변경하는 용도였으나, 현재는 무시되고 있습니다. 이러한 이유로 MDN이 두 번째 매개변수를 unused로 변경한 것으로 보입니다!!강의에서는 unused가 아닌, 과거에 사용되었던 'title'로 설명을 하고 있지만, MDN 에서 'unused'로 표기하고 있는 만큼, 최대한 빠르게 해당 영상에 부연 설명을 달아두도록 하겠습니다.감사합니다 😊

SSR, CSR 관련 질문입니다.

안녕하세요 🙂 질문주셔서 감사합니다.하나씩 답변을 드려보자면,CSR은 다른 방식에 비해 SEO에 불리하긴 하나, 여러가지 해결 방법은 존재합니다.예를 들면, prerender-spa-plugin과 같은 도구를 사용하는 방법이 있습니다. 또는 dynamic 렌더링을 사용해서 봇이 접근하면 SSR 방식을, 그리고 유저는 CSR 방식으로 선택하는 방법이 있을 수 있겠네요!말씀해 주신 것에 공감합니다. 그렇기 때문에 여러가지 상태 관리 도구들을 활용하고, 컴포넌트간의 책임을 분리하며, 디자인 시스템을 잘 활용해 복잡도를 줄여야합니다.맞습니다. SSR은 서버에서 렌더링된 HTML을 브라우저로 보내주는 방식이기 때문에, 깜빡임이 있을 수 있지만, 비동기 통신 방식이나 화면 구조 변경을 통해 깜빡임을 해결할 수 있습니다. 강의에서는 [동물 앨범] 프로젝트를 2가지 방식으로 제작을 하는데요, 두 제작 방식의 차이점을 조금 더 명확하게 보여주기 위해 해결 방식을 제안하기 보다는 SPA로 제작을 해보았습니다.실제로도 CSR이 좋은가? SSR이 좋은가? 에 대해 많은 분들이 고민을 하고 있는데요,대형 포털에서는 초반 자바스크립트 번들 크기가 클 수 있기 때문에 SSR을 선호하는 경우가 있고,말씀주신 것처럼, 모바일에서는 CSR이 조금 더 부드럽게 동작하며 심플하기 때문에 CSR을 선호하는 경우가 있는 것 같습니다. 어떤 점이 조금 더 우선적으로 필요한지를 정해, CSR과 SSR을 선택해 개발을 하시면 좋을 것 같습니다 🙂다시 한 번 좋은 질문 주셔서 감사드리고, 강의도 잘 들어주셔서 감사합니다 🙇🏻‍♀️🙇🏻‍♀️

섹션 7 - 7 프로젝트 적용하기

안녕하세요 🙂 질문주셔서 감사합니다.제가 직접 등록해보니 정상적으로 작동하는 것 같은데요,혹시 파일을 압축한 상태로 올리지 않았는지, 아니라면 제가 manifest.json의 코드를 복사 붙여넣기 해서 다시 한 번 설정해보시기 바랍니다! 감사합니다.