일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- REST API
- 인접행렬
- logger
- java
- Spring
- node.js
- TIL
- dfs
- OOP
- Deep Dive
- GraphQL
- nestjs
- MySQL
- winston
- typescript
- css
- javascript
- 변수
- 자료구조
- JWT
- 프로그래머스
- 알고리즘
- LifeCycle
- bean
- Interceptor
- queue
- html
- 인접리스트
- 코딩테스트
- 탐욕법
- Today
- Total
목록Language (51)
처음부터 차근차근
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bbtCpM/btsjHdzCPMU/ntLfZb9KYlgw0lp9yeLtRk/img.jpg)
Closure에 대한 정의 : A closure is the combination of a function and the lexical environment within which that function was declared(클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합니다.) - MDN 이걸 알기 위해서는 함수가 선언된 렉시컬 환경에 대하여 자세하게 알 필요가 있다. 아래의 예시를 보자. const x = 1; function outerFunc() { const x = 10; function innerFunc() { // x는 어디서 참조할까요?? // 함수가 선언된 렉시컬 환경!!! // 함수가 선언될 당시의 외부 변수 등의 정보! console.log(x); // 10 } innerFu..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/t5pP9/btsjFXc9QPB/TkkqTV1q1D5kSGaLMhQaH0/img.png)
다른 언어에서도 많이 쓰이는 Class란 무엇인가?? Class Class : 객체 지향 프로그래밍(OOP)에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀(template)이다. (Wiki 백과) 간단히 설명하면, Class는 학교에서 다양한 종류의 책상을 만드는 설계도와 비슷하다. Class로 만들어지는 Instance?? instance는 이 설계도를 보고 만들어지는 실제 책상이라고 생각할 수 있다. 결론 : 객체 지향 프로그래밍에서 Class는 객체를 찍어 내기 위한 틀이다. 그렇다면 Class를 쓰는 이유는?? 빠르고, 정확하고, 다량으로 객체를 생성 할 수 있기 때문이다. 아래 예시를 보자. // 클래스라는 설계도를 만들어봅시다. class Person { // 우리는 사람이..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/n4bsV/btsjtA31ZZ1/93KGK1o6tyDJXFNikIGovk/img.png)
DOM이란?? DOM : Document Object Modeling 이것만 가지고는 이해하기 힘들다. DOM의 기본 개념부터 알아보자. DOM의 기본 개념 DOM을 이해하기 위해서는, 웹 브라우저가 어떻게 동작하는지 알아야 한다. 1. Javascript가 왜 생겼는가?? - 브라우저에서 쓰려고 만들어진 언어 - 본연의 역할 : 웹 페이지를 동적으로 만들기 위해! (클릭하면 버튼이 이동한다던가, 리스트가 변한다던가..) → 즉, HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어. 2. 웹 페이지가 뜨는 과정 1) 사용자가 브라우저에 어떠한 주소를 입력한다. (여기서 사용자 = 브라우저 = 클라이언트, 같은 의미로 생각하면 된다) → 클라이언트가 서버에게 요청(request) 2) HTML..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bQj7gg/btsjjBvtKsU/ZWOUF24vkICVDVWK4wFUB1/img.png)
Callback(콜백함수)이란?? 프로그래밍에서 Callback 또는 Callback function이란 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받은 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 나중에 실행할 수도 있다. 간단한 예시로, setTimeout, 혹은 forEach 메소드를 통해 알아보자. // setTimeout setTimeout(function() { console.log("Hello, world!"); }, 1000); // forEach const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(number) { console.log(number); }); 여기서 봤을 때 Callback은 Call..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dhbwVA/btsjlWE0P0T/oghsQ5Rb54tOgpGIffNc0k/img.png)
다른 객체지향 언어에서의 this : 클래스로 생성한 인스턴스 객체를 의미한다. Javascript에서의 this : 어디에서든지 사용가능하다. This : '이것' 이란 뜻. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성된다. this는 코드 어디서든 참조할 수 있다. 자바스크립트의 this는 기본적으로 실행 컨텍스트가 생성될 때 결정된다. 즉, 함수를 호출할 때 결정된다. 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/EZxHi/btsiM96h7RZ/wyvTA8fjmi5SxwXm1ppkCK/img.png)
실행 컨텍스트란?? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이며, 실행 컨텍스트가 활성화되는 시점에 다음과 같은 일을 진행한다. 선언된 변수를 위로 끌어올리기(호이스팅) 외부 환경 정보를 구성 this 값을 설정 이러한 특징으로 인해 JS는 타 언어랑 다른 특징이 발생. Call stack에 대한 이해 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 위에서 설명한 '스텍'의 한 종류인 Call stack으로 쌓아 올린다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장한다. 컨텍스트의 구성 1) 실행 컨텍스트를 구성할 수 있는 방법 전역공간 eval()함수 함수(우리가 흔히 실행컨텍스트를 구성하는 방법) 2) 실..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bFRq3P/btshE0vi6KE/WezglBucYFBTHNbSgZL9a1/img.png)
JavaScript의 데이터 타입은 크게 두 가지로 나뉜다. 두 개의 구분 기준은 값의 저장 방식과 불변성 여부이다. [기본형과 참조형의 구분 기준] 복제의 방식 기본형 : 값이 담긴 주소값을 바로 복제 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 불변성의 여부 (데이터 값이 아닌, 메모리 관점에서 봐야 한다) 기본형 : 불변성을 띔 참조형 : 불변성을 띄지 않음 불변성의 경우, 기본형이 이해되지 않을 수 있다. 이를 위해서는 메모리와 데이터에 관한 기본 지식이 필요하다. 1, 메모리, 데이터 - 비트 컴퓨터가 이해할 수 있는 가장 작은 단위 0,1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미 이러한 작은 조각이 모여서 메모리가 만들어진다. - 바이트(byte) 0과..
Map - Key - Value 값을 가지는 자료구조 - 객체와 달리 key로 사용할 수 있는 모든 유형을 사용할 수 있다. - key가 정렬된 순서대로 저장된다. - 기능 : 검색, 삭제, 제거, 여부 확인 💡 [맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다] new Map() – 맵을 만듭니다. map.set(key, value) – key를 이용해 value를 저장합니다. map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다. map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다. map.delete(key) – key에 해당하는 값을 삭제합니다. map.clear() – 맵 안의 모든 ..
JS에서 함수는 일급 객체(First-Class Object)라고 한다. - 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. => 함수를 매우 유연하게 사용할 수 있다. 1) 변수에 함수를 할당 함수가 마치 값으로 취급된다. 나중에 사용될 수 있도록 조치가 되었다. const sayHello = function() { console.log('Hello!'); }; sayHello(); // "Hello!" 출력 2) 함수를 인자로 다른 함수에 전달할 수 있다. // 2-1 callback 함수 : 매개변수로써 쓰이는 함수 // 2-2 고차 함수 : 함수를 인자로 받거나 return하는 함수 function callFunction(func) { // 매개변수로 받은 ..
ECMAScript 6 (ES6)는 JS 버전 중 하나로, 쉽고 효율적으로 코드 작성이 가능하도록 개선되었다. 1) Let, Const - Let : 재할당은 가능하고, 재선언은 불가능하다. - Const : 재할당, 재선언이 불가능, 초기값이 없으면 선언이 불가능하다. - var : 재할당, 재선언이 가능하다. > 호이스팅이 가능하다. 2) arrow function - function이나 return 키워드 없이 함수를 만드는 방법이다. // 2 arrow function // ES5 function func() { return true } //ES6 const func = () => true const func = () => { return true } () => {} parm => {} (parm..