리액트에서 장고 서버에 csrf토큰을 보내줘야 했는데 submit이 아니라 axios로 직접 보내주고 싶었다 (리액트에서 csrf토큰을 넣는 건 쿠키에서 파싱해서 인풋 태그에 넣는 방식으로 해결했다) 인터넷에서 찾아서 나름 조치를 취해서 보냈는데 토큰이 가지 않아서 form submit으로 보내니 갔다 FormData가 form처럼 데이터를 보내는 형식인 줄 알았는데 아니었던 걸까? 같은 형식인 건 맞다 하지만 내가 csrf토큰을 첨부하는 것에 대해 오해하고 있었서 다른 결과가 나왔다 헤더에 설정을 해주면 된다고 해서 그걸로 끝인 줄 알았는데 그게 문제가 아니었다 이게 form 태그에 csrf토큰이 첨부될 때의 모습이다 그러면 이 csrf토큰을 직접 FormData에 추가해줘야 했다(submit이면 알아..

Panning and Zooming 초기값 homeGeoPoint: 처음 위치 homeZoomLevel: 처음 줌 레벨 var chart = root.container.children.push( am5map.MapChart.new(root, { // 유럽이 중심인 세계지도 homeZoomLevel: 3.5, homeGeoPoint: { longitude: 10, latitude: 52 } }) ); // PolygonSeries가 하나라도 만들어져야 줌 가능 polygonSeries.events.on("datavalidated", function() { chart.goHome(); }); 리셋: chart.goHome(); 줌 버튼 추가 chart.set("zoomControl", am5map.ZoomC..

map chart 세계지도 불러오기! 불러올 지도는 클릭하면 해당 국가의 도시를 보여주는 지도다 country data root var root = am5.Root.new("chartdiv"); var colors = am5.ColorSet.new(root, {}); root.setThemes([ am5themes_Animated.new(root) ]); chart var chart = root.container.children.push( am5map.MapChart.new(root, { panX: "rotateX", projection: am5map.geoMercator() }) ) chart.set("zoomControl", am5map.ZoomControl.new(root, {})); chart.c..

세계지도를 활용한 프로젝트를 만들기 위해서 amCharts5를 사용했다. https://www.amcharts.com/docs/v5/getting-started/ install npm install @amcharts/amcharts5 import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; cdn root element 차트를 만들 때 가장 중요한 오브젝트 wrapper같은 느낌 var root = am5.Root.new("chartdiv"); Root 인스턴스가 new()가 아니라(class' static method) new [ClassName]을 사용했다 amCharts5는 모두 이 ..

일급함수 First-class function JavaScript는 일급함수를 지원한다. 일급함수란 object, string 등 다른 타입에서 할 수 있는 일이라면 함수도 할 수 있다는 개념이다. 변수에 할당하거나 실행 중에 생성하는 등 다른 타입에서 할 수 있는 모든 일을 포함한다. 즉, 함수를 특별한 오브젝트라고 볼 수 있다. 이는 오브젝트의 모든 기능 + 함수만의 특별한 기능을 수행할 수 있기 때문이다. 오브젝트이기 때문에 속성과 메소드를 더할 수 있다. 함수만의 특별한 기능은 두 가지를 들 수 있다. 첫번째, 이름을 가질 수 있다. 이름을 가질 수 있는 것이지 가져야만 하는 것은 아니기 때문에 익명 함수로 남는 것 역시 가능하다. 두번째, code를 가진다. 함수의 내용을 말한다. 함수의 내용 ..

다른 프로그래밍 언어에서는 오브젝트와 함수를 두 가지 다른 것이라고 말하지만 자바스크립트에서는 두 개가 굉장히 밀접한 관련이 있다. 오브젝트는 어떤 형태로 우리의 컴퓨터 메모리상에 존재하고 있을까? 오브젝트는 property와 method를 가질 수 있다. 오브젝트는 property들의 집합으로 property는 name-value 페어의 집합이다. value에는 boolean, number 등 기본 타입이나 또 다른 name-value 페어의 집합이 올 수 있다. 오브젝트는 함수를 가질 수도 있는데 이 함수를 method라고 한다. 함수이지만 오브젝트와 연결되어 있는 것! 오브젝트뿐 아니라 오브젝트에 딸린(?) property와 method도 메모리 주소가 있다. 이렇게 다른 메모리에 저장되어 있는 p..

연산자의 우선순위 여러개의 연산자가 함께 쓰일 때 어떤 연산자 함수가 먼저 처리될 것인지를 결정한다. 연산자의 결합법칙 연산이 왼쪽에서 오른쪽으로 이루어질지 아니면 그 반대일지를 결정한다. 같은 우선순위를 가진 연산자 여러개가 한 줄에 쓰여 있을 때, 어떤 연산자를 먼저 계산할지를 결정하는 것이다. 즉, 첫번째로 연산자의 우선순위를 통해 순서를 결정하고 그 후에 같은 우선순위 내에서 결합법칙으로 순서를 결정한다. 곱하기는 우선순위가 14로 우선순위 13인 더하기보다 우선하므로 곱하기와 더하기가 함께 있으면 곱하기를 먼저 하고 더하기를 해야 한다. 예시 추가 예정 모질라 재단에서 제공하는 연산자 우선순위와 결합법칙 표! https://developer.mozilla.org/en-US/docs/Web/Jav..

연산자(operator)는 특별한 함수로 우리가 코드로 짜는 보통의 함수와는 조금 다르다 오퍼레이터는 보통 두 개의 매개 변수를 받고 하나의 결과를 리턴한다. var a = 3+ 4; console.log(a); 이 때, 콘솔에 나타나는 값은 몇일까? 7 굉장히 당연한 결과일 것이다. 그런데... 우리에게 당연한 이 결과를 자바스크립트는 어떻게 처리하는 걸까? --> 자바스크립트 엔진은 + 사인을 보면 + 양옆의 숫자를 더하라고 프로그래밍 되어있다. 이 때, + 사인이 바로 연산자이다. 더하기 연산자로 말한 것처럼 실제로는 함수의 한 형태이다. 원래 +(3, 4) 이런 식으로 인자를 넘겨주고 더한 값을 리턴하는 함수일 것이다. 그런데 이렇게 하면 아무래도 사용자가 느끼는 불편함이 크니까 새로운 표기 방식..

동적 타이핑 자바스크립트는 동적 타이핑(dynamic typing) 언어! 내가 코드를 짤 때 이 변수에 어떤 데이터 타입이 할당될 지 선언하지 않고 자바스크립트 엔진이 코드를 실행하면서 이 변수 데이터가 어떤 타입인지 알아낸다는 것이다. 그러므로 하나의 변수가 코드가 실행되면서 다른 타입의 데이터를 가질 수도 있다. var a = 'string_var' // a의 타입은 스트링이 됩니다. a = 1 // a의 타입은 숫자가 됩니다. cf) java나 c#같은 정적 타이핑(static typing) 언어는 변수에 어떤 데이터 타입이 할당될 지 선언해야만 한다. 다른 타입 데이터를 할당하려고 시도하면 에러가 난다. Primitive Types 자바스크립트에는 여섯가지의 기본 타입(primitive type..

undefined는 무슨 뜻일까? not defined와 undefined는 같은 뜻일까? 답부터 말하자면, 그렇지 않다 undefined는 자바스크립트가 해당 변수에 아직 값이 할당되지 않았을 때 주는 특별한 value라고 할 수 있다 즉, hoisting을 했거나 var = a;까지만 해서 값이 할당되기 전에 변수 a에 부여되는 특별한 값이 바로 undefined다 undefined는 키워드로 혹시 변수의 값을 undefined와 비교할 일이 있다면 'undefined'라고 스트링처럼 표현하는 것이 아니라 그냥 undefined라고 쓰면 된다 아예 선언되지도 않은 변수를 호출하면 Uncaught Reference error가 난다 아예 메모리 공간이 할당조차 되지 않았기 때문이다 undefined는 ..