자바스크립트는 시간이 지남에 따라 점저 변해가고 있다. 하지만 그 만큼 발전한 버전을 따라와 주지 못하는 브라우저나 환경이 있기 마련이다. babel은 최신 문법을 써도 이전 버전 브라우저 환경에서도 사용할 수 있도록 최신 문법을 특정 예전버전의 js로 변환해주는 툴이다. 즉, 최신문법을 이전문법으로 바꿔주는 API인것. 바벨에 사용하는 4가지 모듈 - @babel/core : 말 그대로 바벨의 코어, 핵심 요소들이 들어가 있는 모듈 - @babel/cli : 명령어를 통해 cmd에서 바벨을 직접 컨트롤 할 수 있게 해준다. - @babel/preset-env : 바벨의 설정을 일일이 할 필요없이 가장 일반적인 대표 설정들을 모은 플러그인 세트 - @babel/preset-react ; 바벨을 JSX 문..

leetcode.com/problems/longest-palindromic-substring/ Longest Palindromic Substring - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 핵심 아이디어 팰린드롬 문자열이란 문자를 거꾸로 했을때 기존의 문자열과 같은 문자열을 뜻한다. 이 문제를 해결하는 방법은 많으나 여기서 소개하는 방법은 DP를 이용한 방법이다. 여기서 가장 중요한 핵심은 "현재 문자열의 양끝 문자가 같고 내부의 문자열이 펠린드롬이면 ..

클로저는 어떤 함수의 내부함수와 밀접한 관계를 가지고 있는 주제이다. 내부함수는 외부함수의 지역변수에 접근 할 수 있는데, 외부함수의 실행이 끝나서 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있다. 이러한 매커니즘을 클로저라고 한다. 에를 들어보자 function outer(){ const title = "Hi"; return function(0{ console.log(title); } } const test = outer(); test(); 위 결과는 어떻게 될까? 예상대로 Hi가 출력될 것이다. outer를 호출하여 그 결과인 익명의 함수가 test에 담기는데 outer 함수가 종료되었음에도 불구하고 익명의 함수에서 Hi를 출력하는 것으로 보아, 외부함수의 지역변수를 사용하는 내부함수가 ..

Javascript에는 문자열 자르는 함수가 여러개 존재한다. 이중 문자열을 cutting했을때 실제 문자열에 영향을 주는 splice는 제외하고 특징을 비교해보자. 1. string.slice(start, end) slice는 substring과 사용법이 같다. 파라미터로 자를 문자열의 start, end 인덱스를 주어 해당하는 범위의 문자열을 반환한다. 2. string.substring(start, end) 파라미터로 자를 문자열의 start, end 인덱스를 주어 해당하는 범위의 문자열을 반환한다. 3. string.substr(start, length) 파라미터로 입력받은 start 인덱스 부터 length길이만큼의 문자열을 반화ㄴ한다. 그렇다면 slice와 substring의 차이점은? => ..

leetcode.com/problems/string-to-integer-atoi/ String to Integer (atoi) - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 핵심아이디어 문제의 조건을 구현하기만 하면된다. 1. 앞 공백은 무시한다. => trim(' ')을 사용 2. -, +는 음,양수를 뜻한다. 아무 sign이 없으면 양수이다. 3. 숫자가 아닌 문자가 나오면 그 뒤의 문자열은 무시한다. (첫번째가 -,+인 경우는 당연히 제외겠지?), (처..

d3.select("body").selectAll('') - 조건과 일치하는 첫번째 DOM 문서요소의 참조를 반환한다. - DOM에서 'body'를 찾고 'p' 엘리먼트를 모두 선택한다는 의미 .data(dataset) - data() 메서드는 데이터 값이 몇 개 인지 계산하고, 파싱한다. - dataset 변수에서 불러온 배열의 값이 5개이면, 다음 체인으로 연결된 모든 내용은 값마다 한번씩 총 5번 실행된다. .enter() - 불러온 데이터를 적용합니다. - 이때 enter를 사용함으로써 DOM요소보다 데이터의 개수가 많은 경우 이름없는 요소들을 생성해서 데이터들을 동적으로 모두 표현할 수 있게 해준다. .append('p') - 위 enter()에서 생성된 이름없는 요소에 p태그를 사용한다는 의미..

Data-Driven-Documents.js 1. Loading (데이터 불러오기) : 시각적 요소를 그리기 전에 보여주고자 하는 데이터를 불러온다. .tsv, .csv, json 등 다양한 형식의 데이터 연동 가능. 2. Binding (데이터 엮기) : 데이터를 시각적인 요소와 연동시킨다. 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연동시킨다. 3. Transform (시각적 요소 지정) : 데이터의 시각적인 요소 지정 그래프의 유형, 요소의 색상, 축과 범례의 여부 등 다양한 요소 지정 가능 파이, 트리맵 등 그래프 유형별로 레이아웃 코드 제공 4. Transition (사용자 반응 지정) : 클릭, 드래그 등 사용자 반응에 따른 효과 지정 가능

SVG는 Scalable Vector Graphics의 약자로 웹용 벡터그래픽을 뜻한다. HTML 문서에 직접 포함시키거나 삽입할 수 있으며, IE8 이하를 제외한 모든 브라우저에서 지원한다. 코드작업으로 이미지 편집이 가능하고, 품질손상없이 확대/축소가 가능하다.