jineecode

Primitive data type 문자, 숫자 자료형 let name1 = '김'; let name2 = name1; name1 = '박'; console.log(name1); 박 console.log(name2); 김 Reference data type Array, Object 자료형 이 타입은 자료를 변수에 직접 저장하지 않고, Reference를 변수에 저장함 let name3 = { name : '김' }; let name4 = name3; name3.name = '박'; console.log(name3); // {name: '박'} console.log(name4); // {name: '박'} 객체를 복사한 게 아닌, 객체를 가리키는 화살표를 복사한 것! Q. Reference?? A. 컴퓨터..

overflow-x: auto; 를 갖고 있는 div가 있고, 그 안에 여러 가지 이미지가 들어있다. 즉, 가로로 스크롤 되는 기능. 그리고 이미지 중 active를 갖고 있는 이미지는 border가 적용된다. 페이지에 진입할 때, active 클래스를 갖고 있는 자료가 화면 가운데에 보이도록 하는 기능을 넣기로 했다. .growthHorizontalWrapper { display: flex; width: 100%; overflow-x: auto; } .growthWrapper { width: 113px; height: 185px; background-color: #fff; border-radius: 2px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); display:..

이전 글) https://jineecode.tistory.com/191 chart.js 내가 맡은 업무 중 하나인 그래프 만드는 업무에 chart.js가 들어가기로 했다. 버전이 여러 번 업데이트 되는 것 같았고 그럴수록 설치 방법부터 코드도 뒤바뀌는 느낌이다. 예전 버전은 파일을 zip jineecode.tistory.com 그래프 파트가 많이 안정되었고 chartjs를 적용하면서 겪었던 시행착오를 적어둔다. 차트의 옵션들은 공식 홈페이지에 잘 나와있으나 잘 모르겠다면 이전에 적은 포스팅을 확인해보거나 이것저것 적용해보길 바란다. 제이쿼리를 사용했으며, 아래 두 파일을 적용했다. chartjs에 들어갈 데이터값이 하드코딩되어있다면 간단하지만, API를 사용해 데이터값이 변동된다면 기타 여러가지 처리를 ..

1. default parameter 파라미터에 디폴트 값을 주는 기능. default 파라미터에는 함수도 들어갈 수 있다. function plus(a, b = 10){ console.log(a + b) } plus(1); // 11 function another(){ return 10 } function plus (a, b = another() ){ console.log(a + b) } plus(3); // 13 2. arguments 함수의 모든 파라미터를 배열 안에 넣어주는 기능. 이 기능을 쓰면 확장성이 생긴다. function example(a,b,c){ console.log(arguments) } example(2,3,4); //Arguments(3) [2, 3, 4, callee: ƒ, S..

1. 배열을 벗기고 문자열만 추출하고 싶을 때 join 메서드를 주로 사용했지만 Spread Operator 을 사용하면 메서드를 이용할 필요 없이 간단하게 벗길 수 있다. let a = [1,2,3]; let b = [4,5]; // let c = [1,2,3,4,5]; 가 되도록 하려면? let a = [1,2,3]; let b = [4,5]; let c = [...a, ...b]; 2. Spread Operator은 배열을 복사할 때 유용하게 사용된다. 더보기 a라는 배열을 복사해서 b를 만들고 싶을 때 이렇게 하면 큰일난다. var a = [1,2,3]; var b = a; console.log(a); console.log(b); 등호로 복사를 하면 a와 b 변수는 [1,2,3]을 각각 따로 하나..

tagged literal function taggedLiteral(){ return 10 } taggedLiteral(); // 10 일반적인 함수 모습 let name = '지니'; let hello = `안녕하세요 ${name}입니다`; function taggedLiteral(){ return 10 } taggedLiteral`안녕하세요 ${name}입니다`; // 10 함수에다 소괄호() 대신 문자열을 붙일 수 있다. 왜 이런 게 생겼을까...? let name = '지니'; function taggedLiteral(text, param){ console.log(text); console.log(param); } taggedLiteral`안녕하세요 ${name}입니다`; // (2) ['안녕하세..

[1, 2, 3, 4].forEach(function(a){ console.log(a) }) // array 자료 갯수만큼 내부 코드를 실행해주세요. // 파라미터 a : array 내의 자료들 [1, 2, 3, 4].forEach(a => console.log(a)); document.getElementById('button').addEventListener('click', (e)=>{ this; // X }) let objectExam = { newFunc : () => { return this //window } } objectExam.newFunc(); arrow func 은 바깥에 있던 this값을 내부에서 그대로 사용하므로, eventListener 내에서 쓰면 window를 가리키게 된다. ..

1. console.log(this) function 함수() { console.log(this) } 함수(); // strict mode + 일반 함수 내에서 쓰면 undefined 가 뜹니다. window : { 함수() { console.log() } } window 기본 함수들 수납 공간 global object : 전역 변수 보관소 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체 2. let examp = { data : 'kim', hello : function () { console.log(this) } } examp.data; examp.hello(); //함수인 걸 명시해주기 위해서 소괄호를 포함합니다. //{data: 'kim', hello: f} 오브젝트 내 함수 안(met..