프로젝트 링크:https://drawppf.netlify.app/
레포지토리 링크:https://github.com/woominKO/trade_simul
(깃헙 리포지토리에 올려서 수정되는대로 새로 디플로이 하려고 했는데 netlify에 깃헙 리포지토리를 업로드 하면 무슨 이상한 오류 메세지가 뜨는데 추후에 수정할 예정이다.)
기술스택
HTMl, CSS, JS,netilify,Chart.js
(정확한 기술스택의 표기법은 추후해 공부해나갈것이다)
제작동기
경제학수업에서 배운것을 적용해 보고싶어서.굳이 PPF를 선택한 이유는 쉬운 경제학 개념이기 때문이다. 이 그래프를 그릴때 필요한건 두 재화의 최대생산량 두가지의 변수를 입력받고 직선으로 이어버리면 되기 때문이였다. 하지만 작동로직을 짜보니 물론 이렇게 chart.js가 돌아가는 것은 아니였다.
작동로직
작동로직을 정확이 어떻게 작성해야하는지도 모르겠고 기획하는법을 아직 몰라서 글자와 도형들로 찌끄려봤다. 내가 이것때문에 '사이드 프로젝트는 처음이라'를 읽기시작한 것도 있다.
화면에서 good1과 good2를 입력받는다. 이 두 변수들은 재화1과 재화2의 최대생산량을 나타낸다. 라벨을 너무 대충쓴것 같긴하다. 그리고 draw ppf버튼을 클릭하면 event(onclick)을 통해 update chart() 함수를 실행시킨다. update chart()함수를 실행시키면 가장면서 입력받은 값들을 good1과 good2변수에 할당한다 물론 선언을 하면서 document.getElementById('good1').value 이런식으로 말이다. 그리고 ppf같은 기타 변수들도 이곳에서 선언한다.
변수들을 선언 후에는 중요한 요소중 하나인 반복문을 실행하는데 이 반복문은 ppf의 좌표들을 생성해준다. 그리고 이 좌표들은 ppf변수의 배열형태로 저장된다.
조건문에서는 차트가 생성되어 있으면 차트의 데이터값에 ppf변수를 저장하는데 뭔가 여기서 동작 오류가 발생했다. 얘가 없어도 동작하는데 이상이 없다. (이거 왜 되는거지). 그리고 차트가 생성되어있지 않으면 data를 선언한다. data안에는 datasets가 있으며 여기는 라벨 데이터 타입 색깔 등의 요소가 있다.
또한 옵션도 정의한다. 마지막으로 chart도 선언하는데 이는 new chart() 를 이용한다.data는 아까 선언한 data변수이다.
아쉬운점
앞에서 말했다시피 조건문 동작이 살짝 이상한데 이 부분은 수정을 해야겠고 깃허브 레포지토리를 netlify에 올렸더니 이상하게 디플로이가 안된다..
힘들었던점
공식문서 이해하는게 제일 힘들었다. 공식문서라고는 MDN가끔씩 css까먹을때만 잠깐 보는게 다 였는데
추가하고싶은 기능
두 재화의 이름 입력받아서 출력하기
같은 재화조합의 ppf를 하나더 입력받게 해서 비교우위,절대우위,교환비율같은거 나타내기,
곡선인 ppf도 그려보기
관련문제 생성하기(?)
피드백은 환영입니다
