FrontEnd/ES&JS 문법

[Typescript] Utility Type 정리(ReturnType, Required 등)

1. Partial Type 집합의 모든 프로퍼티를 선택적으로 타입을 생성해줍니다. 그리고 이 유틸리티는 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있습니다. interface Address { email: string; address: string; } type MyEmail = Partial; const me: MyEmail = {}; // 가능 const you: MyEmail = { email: "noh5524@gmail.com" }; // 가능 const all: MyEmail = { email: "noh5524@gmail.com", address: "secho" }; // 가능 interface Product { id: number; name: string; price: number;..

[Javascript] 고차 함수 정리(array, reduce, filter 등)

1. 개요 고차함수는 외부 상태 변경이나 mutable(가변적인) 데이터를 피하고, 불변성(Immutability)를 지향하는 함수형 프로그래밍에 기반을 두고 있습니다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거해 복잡성을 해결하고, 변수의 사용을 억제해 상태 변경을 피하려고 하는 프로그래밍 패러다임 입니다. -> 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 해 가독성을 해치고, 변수의 값을 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적인 원인이 될 수 있기 때문입니다. 이러한 함수형 프로그래밍은 순수 함수를 통해 side effect를 최대한 억제해 오류를 피하고 프로그램의 안정성을 높이는 방향으로 이어갑니다. 2. Array...

[알고리즘] 깊이우선탐색(dfs) / 넓이우선탐색(bfs) (feat.javascript)

1. 깊이우선탐색(dfs) const graph = { A: ["B", "C"], B: ["A", "D"], C: ["A", "G", "H", "I"], D: ["B", "E", "F"], E: ["D"], F: ["D"], G: ["C"], H: ["C"], I: ["C", "J"], J: ["I"] }; const DFS = (graph, startNode) => { const visited = []; // 탐색을 마친 노드들 let needVisit = []; // 탐색해야할 노드들 needVisit.push(startNode); // 노드 탐색 시작 while (needVisit.length !== 0) { // 탐색해야할 노드가 남아있다면 const node = needVisit.shift();..

[Node.js] for 동기 처리(Promise, Mysql)

1. 개요 A 데이터베이스에서 데이터를 가지고 B 데이터베이스에 가공해서 Insert하는 프로그램을 짜는 과정에서 node.js 기반으로 프로그램을 짜보았습니다. 평소에는 자바로 짯지만 node.js로 코드를 짜면 npm 패키지로 쉽게 의존성이 필요한 라이브러리를 다운받을 수 있고, Linux에서도 쉽게 배포할 수 있어서 node.js를 사용해보았습니다. *필요했던 의존성 라이브러리는 데이터베이스 커넥터와 스케쥴러 2개였습니다. 하지만 java와 다르게 node.js는 대부분 비동기 처리가 되어버려서 데이터를 가공하는데 순서를 맞추기가 굉장히 곤란했습니다. A function output -> B function execute(x10) 이렇게 순차적으로 실행이 되는 로직으로 코드를 작성했고, java 기..

[Javascript] this 정리

1. this의 정의 자바스크립트의 this는 현재 실행 문맥이라고 합니다. 여기서 현재 실행 문맥이라는 건 호출자를 뜻하는데, 호출자는 크게 세 가지로 나뉘어집니다. 객체의 메소드 함수 생성자 함수 만약 this가 나온다면 세 가지 경우 중 하나인 함수호출방식에 따라 누가 호출했는지 보고 this가 어떤 의미를 가지는지를 따져보면 됩니다. 이를 함수 호출 패턴이라고 하며, 자바스크립트의 this 는 함수 호출 패턴에 따라 this 가 어떤 객체의 this 가 될 지 정해지고, 이것을 this 바인딩이라고 합니다. 2. 사용방법 2-1) 객체의 메소드 호출할 때의 this 바인딩 var obj = { name: ‘test’ sayName: function() { console.log(this.name);..

[Javascript] 브라우저 동작 원리, 렌더링 트리

1. 브라우저 기본 구조 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 웹페이지가 보여지는 창 등 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 렌더링 엔진 : 요청한 콘텐츠를 표시하기 위해 요청된 HTML과 CSS를 파싱해 화면에 표시합니다. 통신 : HTTP 요청과 같은 네트워크 호출에 사용됩니다. 독립적인 인터페이스로 각 플랫폼 하부에서 실행됩니다. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행합니다. 자료 저장소 : 자료를 저장하는 계층으로 로컬 스토리지, 쿠키와 같이 모든 종류의 자원을 하드디스크에 저장합니다. 크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 인스턴스를 유지해서 독립된 프로세스로 처리합니다(이래서 메모리를 많이 먹는 걸수도?) 2...

[Javascript] 이벤트 버블링

1. 이벤트 등록 이벤트 버블링에 알기 전에 앞서 이벤트 등록에 대해 알아봅니다. var button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem(event) { console.log(event); } 웹 개발을 하셨던 분이라면 익숙한 코드지요? 버튼을 클릭했을 경우 addItem 함수를 실행시키는 코드입니다. 버튼을 클릭하면 addItem함수가 실행되고, event 인자가 넘어오며, console.log를 통해 event에 관련된 정보를 알 수 있게 됩니다. 동작 원리는 이러한데, 브라우저는 어떻게 이벤트를 감지할까요? 2. 이벤트 버블링 이벤트 버블링은 특정 화면 요소에서 이..

[Javascript] 이벤트 루프와 태스크 큐

1. Javascript 이벤트 루프 자바스크립트는 기본적으로 싱글 스레드로 한번에 하나의 작업만 할 수 있는 특징이 있습니다. One thread == one call stack == one thing at a time Call stack(호출 스택)은 우리가 어떤 순서로 작업을 수행하는지 기록하는 작업 스케쥴링과 관련된 도구입니다. 특정 함수를 실행하면 그 함수를 호출 스택의 맨 위에 놓는데 이것을 push 과정이라고 합니다. 만약에 함수가 어떤 값을 리턴하거나 실행을 종료하면, 호출 스택 맨 위에서 그 함수를 꺼내는데 이 과정을 pop이라고 합니다. 이와 같은 코드가 있으면 스택에 순서대로 main() -> printSquare() -> square() -> multiply()로 push가 되고, ..

[Javascript] 호이스팅이란?

1. 호이스팅이란? 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 2. 자바스크립트 함수 동작 원리 1) 자바스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑는다. 2) 함수안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행한다. (함수 블록 {} 안에서만.) 3) 함수를 실행할 때, 호출한 위치보다 해당 함수가 하단부에 있을 경우 자바스크립트 Parser가 내부적으로 함수 위치를 끌어올려서 처리한다. -> 호이스팅 * 실제 메모리에서는 변화가 없습니다. Why? 자바스크립트에서 함수를 선언하는 방식이 함수선언식과 함수표현식이 있습니다. // 함수선언식 function test1() { return 1; } // 함수표현식 var ..

[Typescript] 자주 쓰는 문법 정리

1. 배열 // default let list: number[] = [1,2,3]; // or let list: Array = [1,2,3]; // interface array interface EnumServiceItem { id: number; label: string; key: any } interface EnumServiceItemList extends Array{} // using var result: EnumServiceItem[] = [ { id: 0, label: 'CId', key: 'contentId' }, { id: 1, label: 'Modified By', key: 'modifiedBy' }, ]; 2. 인터페이스 상속이 가능하다. interface PeopleInterface {..