본문 바로가기

Learning/Javascript

(9)
[나만의 js 차트 만들기1] - new 삽질의 시작 상용이나 공개 되어 있는 라이브러리를 사용하지 말고 '그냥 내가 다 만들어 보자' 라는 마음으로 시작! 라이브러리를 사용할 때 보통 HTML에는 JS 에는 let 이름 = new 라이브러리('라이브러리에서요구하는이름', options); 이름.메소드(옵션); 이런식으로 되어 있다. 그리고 소스를 보면 ....ㅋㅋㅋ 복잡하다. 이리저리 복잡한 많은 소스를 보면서 주눅이..... 진짜 복잡한것도 있지만 대부분의 소스는 안쓰는 소스들도 상당한 부분을 차지 한다. 이유는 특정 부분처리를 위해서 다른 라이브러리를 불러 와서 사용하기 때문이다. 라고 나는 생각한다. 이번에 블로그를 보는 당신과 같이 만들어 볼것은 차트 이다. 원형 차트로 구역을 나누고 마우스를 올렸을때 타이틀을 보여 주고 약간의 에니메이션을 주는 ..
마우스 스크롤과 메뉴 하이라이트 주기 velog를 보면 마우스를 내리면 오른쪽에 목차가 같이 따라 내려가는것이 보인다. 이전부터 한번 만들어 보자 라고 생각만 하다가 우연히 창원 개발자 단톡방에서 어떤분이 질문을 하여 이참에 구현해 보자라고 생각이 되어 코딩을 시작한다. (우리회사 부장은 코딩이란 단어를 싫어한다 왜인지 모르겠는데 코딩쟁이가 코딩이라고 업무보고 적으면 안되나??? 쳇) 자! 구현해 보자! 우선 깃에서 자바스크립트 공부내용을 끌고 오고 [.] [..] [api] [bridge] [drag-and-drop] [dropdown] [egoing] [export-import] modal.js README.md study.css test.html 4개 파일 3,234 바이트 8개 디렉터리 222,409,691,136 바이트 남음 F:\..
호이스팅(hoisting) 여러 강좌들을 보다 보면 자주 접하는 용어인 호이스팅 호이스팅은 변수와 함수의 선언을 가장 상단으로 올린다는 의미이다. 딱 여기까지만 생각하고 살다가 즉시실행함수(IIFE)에 대해보는 중 호이스팅을 다시 생각하는 계기가 되어 블로그에 남길려고 한다. 일반적으로 내가 알았던 호이스팅의 의미는 함수와 변수의 선언을 가장 상단으로 올린다. 이다. foo(); function foo(){ console.log('foo'); } 결과는 콘솔에 foo가 찍힐 것이다. 그럼 아래는 어떻게 될까? foo(); var foo = () => console.log('foo'); //var foo = function(){console.log('foo')}; 우리는 Uncaught TypeError: foo2 is not a ..
논리연산자 && || ! 1. && AND 연산 a && b a가 true면 b, a가 false면 a 2. || OR 연산 a || b a가 true면 a, a가 false면 b 2. ! NOT 연산 !a a를 true로 변환할 수 있으면 false를 반환. 그렇지 않으면 true를 반환 false 변환할 수 있는 표현의 예는 다음과 같습니다. null NaN 0 빈 문자열 ("", '', ``) undefined 연산자 우선순위 다음 표는 가장 높은 우선 순위 (21)에서 가장 낮은 우선 순위 (1)로 정렬되어 있습니다. Precedence Operator type Associativity Individual operators 21 Grouping n/a ( … ) 20 Member Access left-to-right … ..
addEventListener 와 자주 사용하는 event addEventListener(event, f, [boolean, {options}]) 첫번째로는 Event명 두번째로는 콜백함수 function (e) {} 여기에 e는 이벤트의 객체인데 써도 되고 안써도 되는데 addEventListener는 일단 던져준다. 세번째는 사용해도 되고 안해도 되는 것인데 useCapture의 boolean값으로 default는 false이다. 버블링과 캡쳐링 관련 설명은 다음에 적는것으로.. 캡쳐 -> 타겟 -> 버블 음.... 다음에.. ㅋㅋ 무튼 false면 캡쳐단에서는 동작안하고 버블단에서 동작한다는 의미 그리고 options {capture:false, once:true, passive:false} capture = useCapture once는 참이면 한번만 실..
함수 매개변수의 기본값 설정하기-삼항 연산자 , = === 사용 아래는 ES5 버전으로 작성한 예 function drawES5Chart(options) { options = options === undefined ? {} : options; var size = options.size === undefined ? 'big' : options.size; var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; var radius = options.radius === undefined ? 25 : options.radius; console.log(size, cords, radius); // 이제 드디어 차트 그리기 수행 } drawES5Chart({ cords: { x: 18, y: 30 }, r..
배열의 구조분해 - 선언 시 중괄호{}, 대괄호[] 사용 구조 분해 관련해서 MDN을 보고 남긴다. JS 소스들을 보면 선언부에 괄호를 사용한 소스들이 있다. var [a,b] = [10,2,30,40]; var {c,d} = {c:40,d:60}; 우선 대괄호는 배열의 인자값을 순서대로 가져 온다. console.log(a)를 실행하면 10이 a에 할당된것을 알수 있다. b는 2이다. 그리고 나머지 가져오기도 가능하고 기본값 지정 값을 버리는 것도 가능하다. var [a,...b] = [10,2,3,5]; a는 10이고 b는 [2,3,5] 값을 가지는 배열이 된다. 나머지 가져오기 ... 사용할 경우 뒤에 ,이 있으면 에러가 나니 주의. var [a,,b] = [1,2,3]; 이렇게 버림도 가능하다 a는 1 이고 b는 3이고 2는 버려진다. var [a=4,..
선언이 없는 할당 - 소괄호 ( ... ) JS 소스를 보다 보면 가끔 소괄호로 둘러쌓인 함수나 코드들이 보인다. (function () .. ) 혹은 var a, b; ({a, b} = {a: 1, b: 2}); 참고: 할당 문을 둘러싼 ( .. )는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다. {a, b} = {a:1, b:2}는 유효한 독립 구문이 아닙니다. 좌변의 {a, b}이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다. 하지만, ({a, b} = {a:1, b:2})는 유효한데, var {a, b} = {a:1, b:2}와 같습니다. ( .. ) 표현식 앞에는 세미콜론이 있어야 합니다. 그렇지 않을 경우 이전 줄과 연결되어 함수를 실행하는데 이용될 수 있습니다. 참고는 MDN의 ..