공부기록

setInterval을 이용해 1초마다 시간을 갱신해서 출력하는 코드. 

재사용이 불가능하다.

다음과 같이 재사용 가능하게끔 컴포넌트를 분리시키자.

이와 같은 Comment 컴포넌트가 있다. 컴포넌트 내에서 쓰인 UserInfo나 Avatar는 재사용되기 힘들다.

다음과 같이 작게 쪼개보자

먼저 Avatar 컴포넌트부터 분리해냈다.

좀 더 일반적이고 Avatar 관점에서 바라봤을 때 어울리는 이름으로 바꿔보자.

{props.author...} => {props.user...}

이제 UserInfo도 분리해보자.

UserInfo컴포넌트에 Avatar가 사용되므로 

UserInfo컴포넌트에 Avatar를 포함시켜준다. 

이제 UserInfo와 Avatar는 재사용 가능한 컴포넌트가 됐다.

소개

es6의 문법을 지원하지않는 브라우저들이 꽤나 있다
이런 브라우저에서는 자바스크립트의 편하고 강력한 최신문법을 사용하지 못한다
하지만 Babel을 이용한다면, 최신 코드들을 호환이 되는 코드로 변환시켜준다.
따라서 우리는 구형 브라우저에서도 새로운 자바스크립트 문법들을 사용할 수 있게된다.

예제

화살표함수는 es6의 문법이다 따라서 구형브라우저에서는 호환이 안될 수 있다. 그럴 경우 바벨을 사용해 호환성을 맞춰준다.

cdn : <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

jsx 또한 구형 코드로 변환시켜준다. 위와 같은 바벨의 cdn코드를 넣어주고,
scrpit 태그의 type 속성에 text/babel 을 삽입시켜주면된다.