뮤직플레이>인트로 컴포넌트 작성강의에 관련해서 궁금한게있어서 문의드립니다!

안녕하세요, simjieun님!이 부분은 조금 설명하기가 어려운 것이지만, 아주 예리한 질문입니다~! Intro컴포넌트에서만 돔을 그리게끔 하고싶어서 그런걸까요?Intro 클래스 안에 존재하는 createRenderElement 는 Intro 컴포넌트만의 부모 컴포넌트를 만들기 위해서 작성한 것입니다.이것만이 목적이라면 정적 메소드이든, 인스턴스 메소드이든 상관없습니다. Intro를 인스턴스화했을때 element를 생성하지 못하도록 한걸까요?못하도록 하려는 목적은 아닙니다. 해당 강의 내에서는 root element 를 생성하기 위한 방법으로 작성하다 보니 그렇게 된 것 뿐입니다.왜 Intro 인스턴스에서는 createRenderElement를 하면 안되는건지가 궁금해서요ㅠㅠ만약 createRenderElement 내부에 this 를 사용하는 등과 같이 Intro 클래스 객체를 참조할 일이 있다면 정적 메소드를 사용할 수 없게 되므로 인스턴스 메소드를 사용해야 합니다. 반대로 this 를 사용할 일이 없다면 정적 메소드를 사용하는 편이 좀더 유리합니다. 이런 식으로 작성을 하다보면 일반적으로 인스턴스에 의존하지 않는 경우에는 공통적인 부분이 있을 수도 있는데, 그 부분들을 다시 공통 utils 등으로 빼내는 리팩토링 작업을 할 수 있기도 하구요.모든 개발이 그렇지만 이 강의에서도 이 코드가 이론적으로 완벽하게 만들어진 코드라고 하기에는 어려운 부분을 말씀드리면서 한편으로는 좀더 좋은 방향이 있지 않았을까?하는 생각도 항상 있습니다. 좋은 질문 감사드립니다~!!

createRootElement가 static인 이유가 무엇인가요?

안녕하세요!createRootElement가 static인 이유는 해당 객체에 종속적이지 않은 유틸성 기능이기 때문입니다. 따로 유틸성 함수로 빼내어 다른 클래스에서 재사용하게끔 수정하면 더 좋을 것입니다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

[카드게임] 타이틀 display부분 질문 있습니다!

안녕하세요, 뿡치님!! 네 말씀하신것 대로입니다! 재밌게 봐주셔서 감사합니다!

album 컴포넌트 스크립트까지 다 따라 쳤는데 화면에 아예 안뜨네요..ㅜㅜ

안녕하세요, Bonfire입니다~! 작성된 코드 정보가 필요합니다! 파일을 압축해서 올려주시거나 깃주소를 알려주신다면 확인해보고 도움을 드리겠습니다.

이미지 하나가 움직임이 좀 부자연스럽

안녕하세요. 답변을 놓친 것 같습니다. 늦은 답변 죄송합니다. 해당 프로젝트를 작업하진 않았지만, 갑자기 바뀌는 문제는 이미지의 갯수를 정확하게 맞춰두고 작업했기 때문으로 생각됩니다. 만약 전체적으로 자연스럽게 돌아가는 것처럼 보이게 하기 위해서는 양 옆에 동일한 더미 이미지들을 준비한 후에 해당 더미 이미지로 도착했을 때에 교묘하게 트랜지션없이 순서를 맨 앞의 이미지로 교체시키는 방법을 흔히 사용합니다. 이 방법을 활용하여 작업해보시면 좋을 것 같습니다. 감사합니다.

궁금한점이 있어서 질문드립니다!

1. Component파일에서 emit과 on의 기능이 정확히 뭔가요? A: 아마 두 개의 챕터에서만 사용 중이고 방식이 조금 다르게 되어 있을 것이라 혼란이 있을 수 있을 것 같습니다. 자식에서 일어난 이벤트를 부모로 전파하는 방식 중 자주 사용되는 방식은 두 가지 정도 있는데요. (1) 부모에서 자식을 생성할 때 props 로 이벤트 핸들러 함수를 직접 전달하고 자식 컴포넌트에서 그 이벤트가 실행되는 시점에 실행하는 방식 (React 스타일) (2) 자식이 이벤트를 발생시킬 때 부모가 그 이벤트에 맞춰 콜백함수를 전달하는 방식 (Vue 스타일 || 일반적인 DOM Event) MusicPlayer와 ImageDriveClone 에서는 이중에서 2번 스타일을 모방하여 구현해보았습니다. on 함수는 이벤트를 등록할 때 사용하는 함수이고,emit 은 특정 이벤트가 발생하는 시점을 가리킬 때 사용합니다. 예를 들어 clickTab 이라는 이벤트가 자식에서 일어날 것으로 알고 있는 상황에서 부모 컴포넌트가 자식컴포넌트를 안에서 생성하면서 childComponent.on("clickTab", () => console.log("clickTab in child component")); 로 선언해두면, 자식 컴포넌트 안에서 this.emit("clickTab"); 이 실행될 때마다 위에 부모 함수에서 등록해둔 () => console.log("clickTab in child component") 콜백 함수가 실행되는 것입니다. this.events 를 보시면 아시다시피, on 과 emit은 this.events 객체를 참조하면서 실행을 하고 있으며, on 이벤트를 걸게 되면 this.events = { "clickTab": () => console.log("clickTab in child component") } 형태로 생성되어 있다가, emit 시에 실행하게 됩니다. 2. this.events라는 변수가 있는데 this.events는 생성자를 안써줘도 기억할 수 있는 건가요? A: 이 부분은 생성자에 모두 쓰기 번거로워서 그냥 쓰지 않았는데요.. 생성자에서 미리 선언해주는 편이 더 직관적이고 좋습니다. 자바스크립트의 경우에는 properties 들을 생성자에서 선언하지 않더라도 어디서든 선언해도 사용할 수 있습니다. 하지만.. 이런 자유로움 때문에 나중에 코드를 파악할 때 어려움이 생길 수 있기 때문에 생성자나 혹은 다음과 같은 형태로 미리 등록해주시는 것도 좋습니다. 이 부분은 미처 챙기지 못해 죄송합니다. _ _) export default class PlayList { rootElement; musicList = []; events; constructor() { this.rootElement = PlayList.createRootElement(); this.musicList = []; // 로컬 스토리지에 저장해놓은 것이 있으면 호출 this.loadStorage(); // 이벤트 바인딩 this.bindEvents(); }

궁금한점이 있어서 질문드립니다!

안녕하세요, bonfire 입니다. 먼저 답변이 늦어 죄송합니다. 연말에 급한 일정이 있어 답변이 지연되게 되었습니다. 오래 기다리시게 해서 죄송합니다. 추가 영상은 계획된 바가 현재로서는 없어서 따로 확답을 드리기 어렵습니다. 개인적인 생각으로는 추가 영상보다는 질문을 주시는 편이 나을 것 같습니다. 설명의 범위를 구체적으로 잡기가 어렵기 때문이기도 하고, 어떤 부분에서 어려움을 느끼시는지 알기 어려울 수 있기 때문입니다. 우선 순위를 정리해보셔서 하나씩 이 채널에 질문을 주신다면 몇 개가 되든간에 최대한 답변을 드리겠습니다. 이런 걸 질문해도 될까? 라던지 너무 많을 것 같은데라는 생각은 접고, 궁금증이 생긴다면 얼마든지 질문 부탁드립니다. 다만, 잘 진행되지 않거나 하는 것에 대해서는 상황을 자세히 설명해주실 수록 파악과 설명드리기가 더 쉬울 것 같습니다.

질문입니다.

안녕하세요, 둥둥님. 말씀주신대로 실행시에 뜨는 메시지와 관련이 있어보입니다. 혹 http-server 버전을 확인해볼 수 있을까요? 2번 캐러샐 기준 "http-server": "^0.12.3" 입니다. 만약 기존에 package.json 에 있던 것이 아닌 다른 프로젝트처럼 따로 설치하셨거나 따로 업데이트를 하신거라면, 최근 http-server 가 버전 업데이트가 되면서 cache 가 기본값으로 지정된 것으로 보입니다. (아마도 14.0.0) (사진) 이런 경우에 제가 회색 줄을 쳐놓은 부분과 같이 (사진) 이렇게 추가해주시면 캐싱을 하지 않게 되어 바로 업데이트 되는 것을 보실 수 있을 것 같습니다. 감사합니다.

리액트로 구현

안녕하세요. 본 수업의 내용을 디자인만을 참고하여 리액트로 따로 구현하려고 하신다면 특별히 문제될 것은 없을 것 같습니다. 다만, 수업의 내용이 바닐라JS로만 되어 있기 때문에 리액트로 구현하실 때 좋은 방법에 대한 것은 따로 찾아보시면서 해야하는 어려움이 있을 수 있다고 생각이 됩니다. 특히 리액트 공부가 필요한 상황이라고 하셔서 답변을 함부로 드리기 어려운 점이 있습니다. 이미 리액트를 학습하신 상태에서 좀더 연습을 위해 디자인을 참고해서 사용하신다고 한다면 재밌는 작업이 될 것 같습니다. 한가지 주의하실 점은 현재 쓰여진 코드들은 코딩 테스트만을 위한 코드이기 때문에, 리액트를 통해 실무에서 사용하시고자 한다면 좀더 많은 예외처리와 설계가 필요할 수 있습니다. 좀더 궁금하신 점이 있다면 댓글 부탁드립니다. 감사합니다. Bonfire 드림.

인트로 컴퍼넌트에서

안녕하세요, asw825님! 질문 주신 내용만으로는 조금 파악이 어려워서 그런데 브라우저나 터미널의 전체 스크린샷을 첨부해주실 수 있을까요? 단순히 추측해볼 수 있는 건 이미지 등의 파일이 필요한 경로에 있지 않거나, 혹은 npm install 및 npm start 를 통해 서버를 기동해야하는데 서버가 제대로 기동되지 않았거나 하는 문제 등이 있을 수 있을 것 같습니다. 필요한 내용이 좀더 추가되면 또 답변드리도록 하겠습니다! 감사합니다. _ _)