1. Chart Container

목적: 샘플을 보고, 해석하고 변형할 수 있는 능력 기르기
https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.commons.ChartContainer

• Chart Container의 Simple Toolbar 예제 사용
• 아래 화면을 그릴 거야
  

package.json

• 노드 프로젝트에 꼭 필요한 파일들이 들어있다.
• 즉, 어플리케이션을 노드 기반으로 돌리겠다는 의미
• 노드의 실행 명령이 npm start이다.

1. npm start
2. view로 가서 text 하나 추가 후 저장
   • 저장 시마다 자동으로 터미널 업데이트됨
   • 코드 넣고 잘 돌아가는지 확인 후 다음 단계로 넘어갈 것

---

• 내가 프로젝트를 만듦으로써 하는 거는, Shell-Home에 App title이라는 내 앱을 하나 만든 거야.
• 내가 만든 폴더에서 npm start를 하면 Shell-Home을 거치지 않고, 내가 만든 네임스페이스가 뒤에 패턴으로 붙어서 바로 내 앱의 주소로 찾아들어가져.
• 근데 만약에 Shell-Home이 나온다? 그건 이제 에러일 경우가 많으니까 확인을 해봐야해
• 위 두 개 사진을 보면 # 뒤에 붙는 게 달라 -> #은 패턴이야. 기본 주소 뒤에 붙는 패턴을 통해 페이지를 구분할 수 있어. 그렇기 때문에 우리는 처음 웹에 접속했을 때 뿌려지는 페이지에 굳이 패턴을 주지 않았어. --> Q. 패턴을 주지 않는 이유는 바로 루트뷰로 들어가기 때문인 건지 여쭤보기.
• 제대로 작동하는지 보기 위해 content 안에 text만 뿌려줘봤다.

---

View

• 우리의 시작은 controller가 아니라, view다!

xmlns(xml name space) 맞추기

일단은 xmlns를 맞춰줄 거야.

이름공간 또는 네임스페이스(영어: namespace)는 개체를 구분할 수 있는 범위를 나타내는 말로 일반적으로 하나의 이름 공간에서는 하나의 이름이 단 하나의 개체만을 가리키게 된다.(식별자)

XML 네임스페이스(namespace)

XML 네임스페이스는 XML 요소 간의 이름에 대한 충돌을 방지해 주는 방법을 제공합니다.
XML 네임스페이스는 요소의 이름과 속성의 이름을 하나의 그룹으로 묶어주어 이름에 대한 충돌을 해결합니다.
이러한 XML 네임스페이스는 URI(Uniform Resource Identifiers)로 식별됩니다.
참조: http://www.tcpschool.com/xml/xml_basic_namespace

• 프로젝트를 생성하면 기본 네임스페이스가 우리는 sap.m 으로 되어 있는데, 샘플을 보면 다르게 정의되어 있어
• 기본 xmlns는 개발자가 본인이 주요하고 중요하게 생각하는 걸로 설정할 수 있어. 즉, 샘플 코드를 작성한 개발자 친구는 주요하게 commons를 쓰고 싶었던 거지.
• 근데 나는 ChartContainer만 가져오면 되거든. 왜냐하면 내가 뿌리고 싶은 화면이 Chart니까.
  
  
• 그래서 맞춰줬어. commons의 네임스페이스에 해당하는 모든 요소들에 대해서.

그리고 뭘 한다? 확인

Controller

• 이제 기본 뷰는 뿌렸으니까 컨트롤러에 가서 작업을 해줄 거야.
  

• onInit 부분을 보면 페이지가 시작할 때 oVizFrame이라는 변수를 통해서 어떤 데이터를 가져오고 있어. 위로 따라가 보면 id를 가져오는 걸 알 수 있는데, 필요한 정보가 이거 뿐이라서 그냥 가져왔어.
  

• 그리고 변수를 선언해줘서 뭔가를 하고 있는데, 살펴보면 vizFrame 패스를 통해 데이터에 접근해서 모델을 셋팅하고 있어.

• 우리는 꼭 그럴 필요가 없어서 로컬에 그 데이터를 셋팅한 후에 모델을 셋팅할 거야.

• 근데 내가 여기서 계속 하는 실수가 있어. 아래 오류가 발생하는 이유는 변수 선언한 후에, 그 변수 안에 객체가 담겨있는데! 콤마를 찍었기 때문이야. It's variable!!!!!
  

• 그리고 샘플 코드에는 빈 모델을 변수로 선언해주고 그 변수를 통해 모델을 셋팅해줬는데, 우리는 한 번에 할 거라서 setModel 시에 같이 선언을 해줘야 해.

여기까지 하고 확인

• 에러 잡힘!!!!

• feedItems는 아래와 같고
  
• _addFeedItems를 한 순간 차트 뿌려짐 ---> addFeedItems...다시 check
  

---

이제 코로나 데이터를 뿌릴 것이다.

• 코로나 데이터를 공공데이터 포털에서 가져오려고 했지만 활용신청 전이라서 다른 서버를 우회해서 가져올 것이다.
  
• chartData를 기존에 선언한 상태로(왜냐? 왜냐면 우리는 지금 모델을 chartData를 가지로 셋팅했고 이 친구는 Products라는 어레이 형태이며 객체에 접근할 수 있기 때문에 사실 객체를 추가해주면 되기 때문에 그냥 두는 것이다.)
  
• 통신을 통해서 데이터를 받아오는데, chartData의 구조에 맞춰줘야 데이터가 바뀐다.
  
• 맵을 돌면서 Country에 내가 통신을 통해 받아온 data의 gubun값을 넣어주고, Revenue에 defCnt를 넣어준다. 그냥 막 넣어주는 게 아니라 데이터를 보고! 어떤 것과 대응하는지 생각하고! 바꿔준다.
• 이제 데이터를 받아왔으니, 차트를 만들 것이다. that._createChart로 함수를 호출하는데, ajax 안에 들어가면 this의 스코프가 바뀌므로 우리는 위에서 that에 this를 넣어줬다.
  
• _updateVizFrame에서 해줬던 이 긴 코드들을 createChart에서 하나로 만들어주기 위해 정리한다.
  
• 중구난방으로 펼쳐져있던 데이터를 하나의 변수 안에 담아준다. 이것이 가능한 이유는? {} 오브젝트이기 때문에. 키값:밸류
  
• 4가지 옵션을 사용자가 선택할 수 있도록 넣어주었다.
  --> Q. 사용자가 어떻게 선택하는지..

• 그리고 모델 셋팅

여기까지 하고 확인