티스토리

IT 공부 기록 블로그

검색하기

블로그 홈

IT 공부 기록 블로그

1tstudy.tistory.com/m

1tdev 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[JavaScript] 비동기 # callback const printString = (string) =>{ setTimeout( ()=>{ console.log(string) }, Math.floor(Math,random() * 100) + 1 ) } const printAll = () =>{ printString("A"); printString("B"); printString("C"); } - 위 코드의 결과는 실행시마다 달라진다. 비동기 함수이지만 순서를 제어할수가 없다. const printString = (string, callback) =>{ setTimeout( ()=>{ console.log(string); callback(); console.log(`${string}종료`) }, Math.floor(Math.rando.. 공감수 0 댓글수 0 2022. 7. 27.
[JavaScript] 객체지향의 특징과 클래스 객체 인스턴스 차이 # 객체 지향 프로그래밍 - 실제 세계를 모델링하여 소프트웨어를 개발하는 것. - 절차지향의 반대의미가아닌 목적으로하는 개념이 다름. 객체지향은 객체간의 '관계/상호작용'에 중점을 둠 - 코드의 재활용성이 높음, 유지보수가 쉬움, 협업에 유리함. - 설계에 시간이 많이듬 # OOP Basic Concepts Encapsulation - 은닉화 : 구현은 숨기고 동작은 노출 ( 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만들고 객체 외부에서 필요한 동작만 노출) - 관련된 기능과 데이터를 하나의 단위로 묶음 - 느슨한 결합에 유리, 언제든 구현을 수정할 수 있음. ( 코드 실행 순서에 따라 절차적으로 코드를 작성하는것이 아닌, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는것. 즉 코드만 보.. 공감수 0 댓글수 0 2022. 7. 22.
[JavaScript] 프로토타입 (prototype) # javascript는 prototype기반언어 이다. - javascript의 모든 객체들이 메소드와 속성들을 상속받기위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는의미. - 상속되는 속성과 메소드들은 해당 객체가 아니라 prototype속성에 정의 되어 있다. - 즉 prototype은 상속받은 멤버들이 정의되는 곳이다.(해당 객체가 복사되는것이 아닌 마치 체인을 타고 올라가며 접근하는것 처럼 '참조'하고 있음) - 프로토타입 객체는 '__proto__ 속성으로 접근 가능한 내장 객체이고, 'prototype 속성'은 상속 시키려는 멤버들이 정의된 객체를 가리킨다. [[Prototype]]은 __proto__로 접근이 가능하고 obj.toString은 prototype .. 공감수 0 댓글수 0 2022. 7. 20.
[JavaScript] This, new 키워드 c++, c#에서의 this는 인스턴스 자기 자신을 가리키는 포인터로 사용이 된다.따라서 this키워드를 이용하여 자신의 메서드나 변수에 접근할 수 있었다. 그러나 javascript의 this는 조금 다르다. javascript의 this는 '함수의 호출 방식'에 따라 this에 바인딩 되는 객체가 달라진다. - 내부함수가 일반 함수, 메서드, 콜백함수라면 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다. let obj = { myVar: 'foo', myFunc: function() { console.log(this.myVar) setTimeout(function() { console.log(this.myVar) }, 1000) } } obj.myFunc() // foo ... undef.. 공감수 0 댓글수 0 2022. 7. 16.
[JavaScript] Event에 관하여 이벤트 - 브라우저에서 이벤트란 사용자가 버튼을 누르거나 키를 누르거나 웹페이지가 로드되었을때 등 을 말한다. 이것은 DOM 요소와 관련이있다. - 브라우저는 이벤트를 감지하고 통지함으로써 사용자와 웹페이지 간의 상호작용이 가능해진다. 이벤트 핸들러 - 이벤트가 발생하면 그에 맞는 반응이 필요하다. 이를 위해 일반적으로 '함수'와 연결하며 '이 함수'는 이벤트가 발생할 때만 실행된다. '이 함수'를 '이벤트 핸들러' 라고 정의한다. 이벤트 리스너 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트를 처리할 핸들러를 추가할 수 있는 오브젝트 이벤트 리스너는 javascript이벤트가 발생할 때 사용자가 등록한 함수를 호출한다. 이벤트, 리스너의 종류 https://developer.mozilla.org/en.. 공감수 0 댓글수 0 2022. 7. 15.
[JavaScript] DocumentFragment 장점 DocumentFragment 의 정의 - 메모리에서만 정의되고, 기본적으로 DOM과 동일하게 작동하지만 HTML의 DOM트리에는 영향을 주지않음. DocumentFragment 사용, 일반적인 방식과 차이 const DF = document.createDocumentFragment(); const elDiv = document.createElement("div"); elDiv.textContent = "hi" DF.appendChild(elDiv); console.log(DF.textContent)//hi document.body.appendChild(DF) console.log(DF.textContent) // "" - body에 붙이면 만들었던 DocumentFragment의 값들은 이전된다. - .. 공감수 0 댓글수 0 2022. 7. 15.
[JavaScript] DOM(Document Objecet Model) DOM - 웹문서를 브라우저에 렌더링 하려면 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재해야한다. - DOM은 네종류의 노드로 구성된다. 문서노드(Document Node) 요소 노드 (Element Node) 어트리뷰트 노드(Attribute Node) 텍스트 노드(Text Node) - 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고(파싱하여) 이들을 트리 구조로 구성한 것이 DOM이다. - DOM은 HTML 요소를 Object처럼 조작 할 수 있는 Model이다. 따라서 웹 페이지를 동적으로 움직일수 있게 만들 수 있다. - DOM은 document객체에 구현되어있기 때문에 js어디에서나 호출이 가능하다. console.log(d.. 공감수 0 댓글수 0 2022. 7. 14.
[JavaScript] 배열, 객체 코딩하면서 모르는 내장함수가 있거나 헷갈릴때마다 정리예정.. # 배열 - 빈 배열인지 검사 let arr1 = []; console.log(arr1.length === 0) // true console.log(arr1 === [])// false -> arr1과 []의 주소값이 다르기 때문에 false라고 나온다. - 유사 배열 객체 (Array.form return value) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from //특정 데이터로 부터 배열을 만듬. console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] .. 공감수 0 댓글수 0 2022. 7. 14.
[JavaScript] 호이스팅(Hoisting) # Hoisting - 코드를 실행하기 전 실행 가능한 코드를 형상화 하고 구분하는 과정을 거치는데 이 과정에서 var, let, const, function등 을 스코프에 등록을 한다. - 위의 과정 덕분에 해당 코드가 실행전에 이미 변수 or 함수 선언이 되어 있기 때문에 선언문보다 호출문이 먼저 나와도 오류 없이 동작이 가능하다. 그러나 var키워드로 선언한 문장만 오류가나지 않고 값은 undefined인 상태이다. - const는 재할당이 불가능 하기때문에 호이스팅현상이 일어날 수 없다. - let, const는 선언만 메모리에 저장이되고 초기화 되지 않은 상태이기 때문에 변수를 참조할 수 없다. 따라서 에러가 난다. /* 정상 작동 */ console.log(text); //undefined t.. 공감수 0 댓글수 0 2022. 7. 13.
[JavaScript] 블록 스코프 vs 함수 스코프 # 스코프 - 특정 범위에서 다른 범위에 있는 변수에 접근할 수 있는 범위 - 전역 스코프, 지역 스코프로 나뉜다 (전역 변수, 지역변수 느낌) # 지역스코프 - 함수 스코프와 블록 스코프로 나뉜다. - 함수 스코프는 함수에서 선언한 변수는 해당 함수 내에서만 접근이 가능하다. var global = 10; //전역스코프 function func1(){ let a = 1; //지역 스코프 } if(a!==global){ var global2 = "전역변수"; } console.log(a) //error! console.log(global) // 10 console.log(global2) // 전역변수 # var, let ,const의 스코프 차이 function func2(){ for(var i = 0 .. 공감수 0 댓글수 0 2022. 7. 13.
[JavaScript] 클로져 MSN 정의 : 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이때의 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역변수로 구성된다. - 클로저 함수란 외부 함수의 컨텍스트에 접근할 수 있는 내부 함수를 뜻한다. : 이 현상이 없으면 클로저라고 할수가 없다. 꼭 외부함수의 컨텍스트에 접근하는 무언가가 있어야 한다. - 데이터를 보존하는 함수다. : 외부 함수의 실행이 끝나더라도 외부 함수 내의 변수가 메모리에 저장이 된다. (메모리 해제 전까지 할당) - 현업에서는 코드가 방대하기 때문에 특정 기능에서 다른 부분을 참고 하기보다는 그자체에서 해결하기위해서 클로져를 쓴다. - Closure는 일급함수로서 전달할 수 있는 함수인데, 함수를 이리 저리 전달해서 사용할 때, .. 공감수 0 댓글수 0 2022. 7. 12.
[JavaScript] 깊은복사, 얕은복사 JavaScript에서 객체를 공부하다 객체를 복사할 때 의문이 생겼다. 객체를 복사한 후 복사한 객체를 수정했더니 원본 객체의 값이 변했다 왜그럴까? let a = {name : "K"} let b = a; b.name = "D"; console.log(a.name) // D가 출력됨 console.log(a===b) // true; 대입연산으로 객체를 변수에 할당하면 원래 객체의 주소값이 할당 됨을 확인 할수 있었다. 이것을 얕은 복사라고 말하고 '참조에 의한 객체 복사'라고도 말한다. 얕은 복사가 아닌 서로 다른 객체를 만들고 싶다면 깊은 복사를 하면 된다. 1. 객체의 모든 프로퍼티를 순회하면서 복제할 객체에 추가 for (let key in obj) { clone[key] = obj[key]; .. 공감수 0 댓글수 0 2022. 7. 10.
[Javascript] 원시자료형, 참조자료형 # 자바스크립트 엔진 구성 - 자바스크립트 엔진은 크게 2개의 영역으로 구분한다. Call Stack(호출 스택) 작업이 요청되면(함수가 호출되면) 요청된 작업은 순차적으로 Call Stack에 쌓이게 되고 순차적으로 실행 된다. 자바스크립트는 단 하나의 Call Stack을 사용하기 때문에 해당 task가 종료되기 전 까지는 다른 어떤 task도 수행될 수 없다. Heap 동적으로 생성된 객체 인스턴스가 할당되는 영역 # Call Stack - 원시 타입(string, number, boolean, undefined, bigint, symbol, null)의 데이터가 저장이 된다. - javascript는 변수에 값을 재할당시 변수가 기존에 저장된 해당 상수값에 해당하는 메모리 주소를 가리킨다. # M.. 공감수 0 댓글수 0 2022. 6. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.