Bonfire

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

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

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

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

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

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

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

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

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

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

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

 constructor() {
 this.rootElement = PlayList.createRootElement();
 this.musicList = [];
 // 로컬 스토리지에 저장해놓은 것이 있으면 호출
 this.loadStorage();
 // 이벤트 바인딩
 this.bindEvents();
 }
</code></pre>
&nbsp;
&nbsp;

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

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

안녕하세요, 둥둥님.
&nbsp;
말씀주신대로 실행시에 뜨는 메시지와 관련이 있어보입니다.
혹 http-server 버전을 확인해볼 수 있을까요?
2번 캐러샐 기준&nbsp;"http-server": "^0.12.3" 입니다.
&nbsp;
만약 기존에 package.json 에 있던 것이 아닌 다른 프로젝트처럼 따로 설치하셨거나 따로 업데이트를 하신거라면, 최근 http-server 가 버전 업데이트가 되면서 cache 가 기본값으로 지정된 것으로 보입니다. (아마도 14.0.0)
<img src="https://cdn.inflearn.com/public/comments/0f50bac6-d3b4-4004-8d14-d2fe758187b0/blob" alt="" />
&nbsp;
이런 경우에 제가 회색 줄을 쳐놓은 부분과 같이
&nbsp;
<img src="https://cdn.inflearn.com/public/comments/774b190a-595e-448c-ac29-79e39e3a79ea/blob" alt="" />
&nbsp;
이렇게 추가해주시면 캐싱을 하지 않게 되어 바로 업데이트 되는 것을 보실 수 있을 것 같습니다.
&nbsp;
감사합니다.

질문입니다.

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

리액트로 구현

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

Bonfire

Posts