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 인턴이 남긴 댓글도 함께 읽어주시면 좋을 것 같네요! 좋은 질문 감사합니다!

append&appendChild+메소드 호출

안녕하세요 🙂 append와 appendChild는 비슷한 기능을 하는 메서드이지만, 몇가지 차이점이 있습니다.작성해주신 것과 같이 append 메서드는 텍스트 또한 동시에 추가할 수 있는데요, 다음과 같이 사용합니다.const parent = document.getElementById("parent"); const childDiv = document.createElement("div"); parent.append(childDiv, "텍스트도 추가할 수 있습니다.");강의에서는 appendChild를 사용하려고 했는데, 잘못 작성한 것 같습니다. 아무래도 라이브 코딩이다 보니 실수가 발생했네요,, 문제가 발생하지는 않지만, 해당 부분 정확하게 다시 자막으로 달아두겠습니다! 제보 감사합니다!! 또한 이벤트 리스너에서의 함수는, 괄호를 작성해주면 함수를 실행하는 것이므로, 함수를 즉시 실행 후 함수의 반환값을 전달하고, 괄호를 작성하지 않으면 함수 자체를 전달하기 때문에 '클릭' 이벤트가 발생할 때만 함수를 실행한다는 차이점이 있습니다.

최종 프로젝트 적용

안녕하세요 🙂 주소창에 chrome://extensions/를 입력하면 다음과 같은 페이지로 이동하는데요,(사진)우측에 '개발자 모드'가 있고, 왼쪽에 '압축해제된 확장 프로그램을 로드합니다.' 버튼이 있습니다.해당 버튼을 눌러 파일을 업로드 해주시면 됩니다. 감사합니다.