React프로젝트에서 D3를 사용하기 (3) (기초부터 다시...)

날짜 : 2017. 12. 08.(금)

React프로젝트에서 D3를 사용하기 (3) (기초부터 다시...)

1. 생각하게 된 동기

1. 어제의 포스팅에의 자료를 따라해보고 나온 결과를 적는다.

2. 생각하게 된점

0. 실습환경 설명
   • HTML + javascript + babel + react + react-dom + d3
   • index.html 파일에서 script태그로 라이브러리 호출, babel 아래와 같이 사용하여 react component 호출

<script type="text/babel" src="lib/app.jsx"></script>

1. adeveloperdiary 포스트를 따라하게 된 이유.

   • ahmadchatha 포스트를 통해서 어떻게 작성할 것인지는 감은 잡았다.
   • 하지만 실제 개발환경 처럼 component별로 파일을 쪼개서 사용하는 것을 배우고 싶었다. (간단한 점 찍기는 완료)

2. 막혔던 부분 및 의아했던 부분

   1. 예제에서는 d3를 react component 파일에서 부르지 않고 index.html(진입점)에서 script태그를 사용해서 d3를 호출 하였다.
   2. component에서 다른 파일의 component 호출이 되지 않는다. (해당 포스트에서는 react-mixins이라는 것을 사용하여서 문제를 해결.)

3. 막혔던 부분 해결내용

   1. 위의 2개의 질문 모두 javascript파일에서 다른 javascript파일을 호출하는 기능이 필요하다.
   2. javascript의 기능만으로 다른 파일을 호출(모듈을 불러오는) 하는 기능은 없다.
   3. 그래서 필요한 기능이 bundle(javscript파일을 합침) 기능이 필요하다. 만약 component를 단일 파일로 관리를 하고, 호출하는 라이브러리를 모두 html파일에 기입한다면 bundle작업이 필요없다.

4. 아래는 현재 간단하게 webpack 사용을 하기 위해 참고하고 있는 사이트 이다.

3.참고한 사이트

• webpack document
• firejune's blog
• webframeworks post