경로 질문드립니다

안녕하세요 🙂 질문주셔서 감사합니다. 프로젝트 파일이 반드시 c 드라이브 안에만 있어야 하는 것은 아닙니다.또한 바탕화면 또는 github 내부의 폴더에서 npm init을 하더라도 문제가 발생하지는 않는데요,node 버전에 따라 한글을 인식하지 못하는 문제 일 수 있으니, '사용자 이름'이 한글이라면 영문으로 변경하고 다시 시도해보시는 것을 추천드립니다! 감사합니다.

regionList 클릭시 해당 cities가 안나옵니다.

안녕하세요 🙂 질문주셔서 감사합니다.유진님이 보내주신 App.js와 RegionList.js의 코드로 실행을 해봤는데요,오류 없이 잘 동작하는 것으로 보입니다. 도시 리스트들이 나오지 않는다면, api.js 혹은 CityList.js 파일에 오류가 있는 것으로 보이는데요,해당 컴포넌트들에 매개변수들이 알맞게 작성되어 있는지, 순서가 올바른지 다시 한 번 확인 후그래도 오류가 발생한다면, 전체 코드를 첨부해서 보내주세요! 감사합니다.

select값이 출력이 안돼요

안녕하세요 🙂 질문주셔서 감사합니다.혹시 Header.js 파일의 코드도 첨부해주실 수 있을까요??

왜 전부다 div태그로 만드는지 궁금합니다.

안녕하세요 🙂 질문주셔서 감사합니다.웹 페이지를 제작할 때에는 h1, h2, button, li 태그 등 다양한 태그들을 사용하는 것은코드 상에서 각각의 태그들이 하는 역할이 무엇인지를 분명히하고, 검색엔진 최적화에 훨씬 좋습니다. 다만, 강의에서는 다른 태그들은 많이 사용하지 않고 div 태그를 사용했는데요,우선 html과 css를 잘 모르는 분들이라도 이 강의를 통해 최종 프로젝트를 보다 쉽게 이해하며 만들 수 있게 하기 위함이였습니다.그래도 헷갈리지 않도록 전부 div 태그를 사용한 후 class 이름과 id 이름으로 각각의 요소들의 역할을 구분해주었고, 목적이 '크롬 익스텐션' 을 개발하는 것이기 때문에 seo 또한 상관 없다고 판단해, div 태그를 사용해서 코드를 작성했습니다 🙂 좋은 질문 감사드립니다!

[수업질문] bookmark.js에서

안녕하세요 🙂 질문주셔서 감사합니다.우선 '인프런 AI 인턴'의 답변을 읽어보시는 것을 추천드립니다. 오류 메세지를 확인해보니, 21번째 줄에서 오류가 발생한 것 같은데, bookmark.js 에 작성하신 코드를 첨부해주시면 원인을 금방 파악할 수 있을 것 같습니다!해결이 되지 않으셨다면, 코드 첨부 부탁드릴게요!

컴포넌트에 매개변수 전달하는 방식에 대하여

안녕하세요 🙂 질문주셔서 감사합니다. App 컴포넌트는 단 1개의 매개변수를 전달받지만, CityList 컴포넌트는 여러개의 매개변수를 전달받습니다.여러개의 매개변수를 전달받는 경우에는 자바스크립트의 '구조 분해 할당'을 사용해서함수 내부에서 각각의 변수 이름을 사용해 직접 접근할 수 있어 코드가 간결해집니다.'인프런 AI 인턴' 이 작성한 답변도 한 번 읽어보시면 도움이 될 것 같네요 🙂감사합니다.

require 질문드립니다.

안녕하세요 🙂 질문주셔서 감사합니다.VSCode 상에서는 자바스크립트 설정이 ESM 방식을 따르기 때문에,CommonJs을 따르는 require 를 사용하면 빨간줄이 뜰 수 있습니다. 구글링해서 찾으신대로 package.json에 아래와 같이 작성하면 이를 해결할 수 있습니다.{ "type": "commonjs" }다음과 같이 작성해도 빨간줄이 뜬다면, VSCode 버전 업데이트를 한 번 해보시기 바랍니다!!

동물앨범 3-3 express 설치 후

안녕하세요 🙂 질문주셔서 감사합니다. 강의에서 나온대로, 포트번호는 라이브서버의 포트 번호가 아닌, 3000번과 같은 다른 숫자로 변경해주어야합니다. 또한 서버를 제작해주었기 때문에 라이브서버가 아닌, 제작한 서버를 사용해서 웹 페이지를 실행해주야합니다.라이브 서버는 VSCode에서 제공하는 서버이고, 강의에서 제작한 서버는 node.js를 사용해 제작한 서버이기 때문에 실행 방법도 다르고, 지정된 포트번호 또한 다릅니다. 보통 0~1023 사이의 포트번호는 다른 서비스가 예약하고 있고, 라이브서버의 또한 5500번과 같은 포트번호를 예약하고 있기 때문에, 이미 사용중인 포트번호를 사용하게 되면 충돌이 발생해 오류가 발생할 수 있습니다. 감사합니다 :)

동물앨범만들기3 질문드립니다.

안녕하세요 🙂 질문주셔서 감사합니다.화살표함수를 사용해서 onClick 함수 내부에 this.contentUpdate()를 실행할 경우에는this가 상위 App 컴포넌트의 this를 가리키지만, onClick: this.contentUpdate 로 작성하게 될 경우에는 contentUpdate 라는 함수를 직접 참고하고있기 때문에, this는 undefined 혹은 다른 객체를 가리킬 수 있습니다.강의에서는 나오지 않지만, 자바스크립트에는 call, bind, apply와 같은 메서드들이 있는데요,이들 중 bind 메서드를 사용해서 this.contentUpdate에 this를 정확하게 바인딩해준다면, 이를 해결할 수 있습니다.더 자세한 설명은, 아래의 '인프런 AI 인턴'의 답변을 읽어보시면 좋을 것 같습니다! 잘 설명하고 있는 것 같네요. 감사합니다 :)

동물앨범만들기 2-2

안녕하세요 🙂 질문 주셔서 감사합니다.$currentTab 변수에 현재 state값과 동일한 아이디를 갖는 버튼 요소를 할당하는 이유는,동물 앨범 TabBar 부분에서 어떠한 부분이 선택되었는지를 표시하기 위함이죠. 질문 주신 부분을 설명해드리자면, 웹 페이지가 실행이되면 가장 먼저 App.js 코드가 실행됩니다. init 함수를 통해 초기 상태값들이 설정되고, this.setState를 통해 초기 상태값들이 설정됩니다. 이 과정에서 tab.setState(this.state.currentTab)을 통해 TabBar의 state가 현재 App 컴포넌트의 state.currentTab인 'all'로 변경됩니다.initialState는 초기 상태값을 의미하기 때문에 초반에는 빈 문자열로 설정해두었지만,헷갈리신다면 initialState에 this.state.currentTab을 작성하셔도 괜찮을 것 같습니다 😄 아래에 인프런 AI 인턴이 남긴 댓글도 함께 읽어주시면 좋을 것 같네요! 좋은 질문 감사합니다!