본문 바로가기

자바스크립트

 (24)
모던 자바스크립트 Depp Dive 16장 정리 데이터 프로퍼티와 접근자 프로퍼티 16.1 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고르짐을 설명하기 위해 ECMAScript 사양에서 사용하는의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)이다.ECMAScript 사양에 등장하는 이중 대괄호 [[ ... ]] 로 감싼 이름들이 내부 슬롯과 내부 메서드다.개발자가 직접 전근할 수 있도록 외부에 공개된 객체의 프로퍼티가 아니다.자바스크립트의 엔진의 내부 로직이므로 원칙적으로는 직접 전근하거나 호출할 수 있는 방법을 제공하지 않는다. 단 일부에 한하여 간접적으로 접근 할 수 있는 수단을 제공한다. 예를들어,  모든 객체는 [[Prototype]] 이라는 내부 슬롯(pseudo property)을 갖는다. __proto__를 통해 간접적으로 접..
자바스크립트 세미콜론 세미콜론 ( ; )은 문의 종료를 의미. 즉, 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다. 문을 끝내려면 세미콜론을 붙여야 한다. 단, 0개 이상의 문을 중괄호로 묶은 코드 블록 ( { ... } ) 뒤에는 세미콜론을 붙이지 않는다. if문, for문, 함수 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성(self closing)을 갖기 때문이다. 세미콜론은 생략 가능하다. 자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI ; automatic semicolon insertion)이 암묵적으로 수행되기 때문이다. 하지만..
모던 자바스크립트 Deep Dive 1장, 2장 정리 01장 프로그래밍1.1 프로그래밍이란 ?- 컴퓨터에게 실행을 요구하는 일종의 '커뮤니케이션'- 해결해야 할 문제 == 요구사항, 명확히 이해한 후 적절한 문제 해결 방안 정의 => 문제 해결 능력- 문제(요구사항)을 명확히 이해하는 것이 우선되어야 함.- 복잡함을 단순하게 분해, 자료를 정리, 구분, 순서에 맞게 행위를 배열.- 프로그래밍이란? 정확하고 상세하게 요구사항을 설명하는 작업. 결과물 : 코드- 컴퓨터의 입장에서 문제를 바라봐야함. 이때 필요한 것이 Computaional thinking(컴퓨팅 사고).- 논리적, 수학적 사고가 필요. - 해결과제를 작은 단위로 분해하고 패턴화해서 추출.- 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 한다.1.2 프로그래밍 언어- 프로그래밍 ..
Tabulator와 Chart.js 활용시, Chart.js 데이터를 Tabulator에 넣는 방법. Chart.js를 활용하여 차트를 먼저 만들어 놨는데, Tabulator를 추가할 일이 생겼다. 데이터를 처음부터 다시 가공하기 보다는 만들어 놓은 chart 데이터를 조금만 변형하면 되겠다. Chart.js에서 사용중인 데이터는 다음과 같다. ChartData : {"date":["2023-10-05 12:45:00","2023-10-05 13:00:00","2023-10-05 13:15:00","2023-10-05 13:30:00"],"TRF":[253,256,274,249],"WD_TRF":[268,261,275,274],"YD_TRF":[268,261,275,274],"PDST":[54,45,96,101],"WD_PDST":[58,25,74,101],"YD_PDST":[58,25,74,101],"..
js 객체안에 프로퍼티 출력 방법 자바스크립트... 객체 안에 넣은놈들을 확인하고 싶다.. 어떻게 했더라? 엥? 기억이 안나...!!!! js 객체안에 프로퍼티 출력 방법! 친절한 블로그를 만났다!! 감사!! https://jigeumblog.tistory.com/70 Javascript] 객체의 key(프로퍼티 이름), value(프로퍼티 값) 출력하기 1. Object.keys - 특정 객체의 프로퍼티를 출력하기 const newStudent = { "1.name" : "jinee", "2.age" : 26, "3.class" : "A", "4.number" : "23", "5.birthday" : "1997-04-01", "6.emailAddress": "jinee@google.com", "7.phoneNumber": "010-12..
자바스크립트 상수 선언 const시 대문자 사용에 대해 각개전투인듯 함께 개발하는 우리들... 내가 맡은 부분에 const로 선언한 상수 네임을 대문자로 사용하고 있었는데, 저녁시간에 그동안 내가 작성한 코드를 읽다가, 무언가, 어딘가.. 일관성이 없어 보였다. 단지 지식+경험 부족으로 코드가 지저분해서일까? const마다 대문자를 사용해서일까? 아직도 여전히 쪼렙이라 긴가민가하여 " 상수 대문자 " 검색했다! 좋은 글이 있어서 링크를 걸어본다! 언젠간.. 다시 읽어 보겠지 생각하며... ( 좋은글 감사... 많이 배워갑니다.. ) 코드를 다시 수정하러....... https://ko.javascript.info/variables 변수와 상수 ko.javascript.info https://velog.io/@sssssssssy/javascript-%EC%99..
제이쿼리없이 마우스 드래그 탈 제이쿼리를 하기위해.. 요즘 작성하는 코드마다 열심히 자바스크립트로 하고 있다. HTML : 제목 bbbb JS : function drgg(){ const draggableDiv = document.getElementById('draggableDiv'); const title = document.querySelector("#draggableDiv > h1"); let isDragging = false; let offsetX, offsetY; // h1 제목에 마우스 다운 이벤트를 처리. title.addEventListener('mousedown', (e) => { isDragging = true; offsetX = e.clientX - draggableDiv.getBoundingClientRect..
타블레이터 Tabulator 셀 한개에 div 추가해서 css 적용하기 타블레이터 Tabulator 셀 한개에 div 추가해서 css 적용하기 예시 코드 : const mainGrid = { createGrid: function(){ mainGrid.grid1 = new Tabulator('#testGrid', { placeholder:"No Data Set", movableRows:true, movableRowsConnectedTables:'#testGrid', movableRowsReceiver: "add", columns: [ { field: "C_ID", visible:false, }, { field: "C_NM", title: "", width:120, }, { field: "QNTY", title: "량", width:50,}, { field: "INCR", ti..

티스토리툴바