2. Dynamic web project: 차트 테스트

당초 Jsffidle로 차트에 대한 테스트를 진행하려고 했으나

해당 예제가 tsv파일로 이루어져

여러분에게 어려움을 야기할 수 있다는 판단이 들어

 

Eclipse의 dynamic web project를 이용해 진행해보도록 하겠습니다.

Dynamic web project는 동적인 웹페이지를 웹어플리케이션 개발시 사용하는 프로젝트이며

JSP/Servelt을 사용하는 웹 개발 방법입니다.

 

 

테스트 구조

 

먼저 이클립스에서 File > New > Dynamic Web Project를 클릭하여

project name을 입력한 후 finish를 하여 프로젝트를 만듭니다.

 

그리고 구조와 같이 webcontent 안에 html 파일을 만들고

d3.js example에서 가져온 html 파일을 넣은 후 저장합니다.

 

그리고 data파일 역시 만들어 해당 폴더 안에 저장합니다.

 

그리고, 페이지가 정상적으로 도는지 확인하기 위해 Tomcat 서버를 구성합니다.

톰캣 서버를 만드는 과정은 이전 개발환경구축에 과정이 자세히 나와있으므로 생략하겠습니다.

 

서버를 실행 후

인터넷창을 연 후

url에 localhost:8080/프로젝트명/xxxx.html 을 입력하면 정상적으로 작동함을 확인 할 수 있습니다.

 

결과 화면

 

여러분은 이제 이클립스에서 코드를 수정 한 후 페이지를 확인하며 테스트를 하실 수 있습니다만

간단한 팁을 드리자면 F12를 누르고 개발자모드에서 console에 명령어를 입력하며 테스트도 가능하다는 점 알려드리고 싶습니다.

 

데이터를 변경해보시며 정말 차트가 변하고 있는지 확인해보시기 바랍니다.

 

------------------------------------------------------------------------------------------------------------

이외에도 원래 진행하려고 했던 테스트 방법은

간접적인 테스트 방법으로 jsffidle이나 codesandbox.io를 이용하는 방법이 있는데요

jsffidle의 경우 외부파일을 입력할 수 없어

외부파일을 API방식으로 만들어 테스트 하곤 하는데

 

여러분들은 직접파일을 넣어보는 것이 좋다고 판단함으로 위와 같은 이클립스의 Dynamic web project로 진행해보기를 추천합니다.

 

 

 

참고_)

codesandbox.io의 경우 실제 개발환경과 같이 사용자에게 제공해주는

웹에디터입니다..

 

기회가 되신다면 한번 사용해보세요~

다양한 라이브러리를 제공해주고 있습니다^^