기술 개념 정리

CS

객체 지향 프로그래밍

class Dog{
	String name;
    Dog(String name){
    	this.name = name;
    }
    
    void bark() {
    	System.out.printLn(this.name + "woof!");
    }
}

public class Main {
	public static void main(String[] args) {
    	Dog pet = new Dog('SigorJab');
        pet.bark();

OOP(Object Oriented Programming)
데이터를 추상화시켜 상태와 행위를 가진 객체로 만들고, 그 객체들 간의 상호작용을 통해 로직을 구성하는 프로그래밍 기법
1. 캡슐화 : 변수와 함수를 한 개의 단위로 묶는 것. 정보보안
2. 상속화 : 이미 정의된 상위 클래스의 모든 속성과 연산을 하위 클래스가 물려받는 것
3. 추상화 : 객체들의 공통적인 특징을 도출하는 것

프로세스/ 스레드

• Process : 운영체제로부터 자원을 할당받은 작업의 단위
  프로그램을 실행시켜 컴퓨터가 자원을 할당해 실행하면 프로세스가 된다
• Thread : 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위
  한 개의 프로세스에서 동시에 진행되는 작업의 갈래
  많을 수록 프로그램 성능이 상승
  하나의 프로세스에서 스레드들은 각각 stack영역만 따로 할당받고 code,data,heap 영역은 공유함

멀티프로세스와 멀티 스레드의 차이

• Multi-Process : 하나의 프로그램을 여러개의 프로세스로 구성하여 각 프로세스가 하나의 작업을 처리하는 것
  장점 : 하나의 자식 프로세스에서 문제가 발생해도 영향이 전파되지 않음
  단점 : 잦은 Context Switching으로 인한 오버헤드가 발생할 수 있고, 프로세스 사이에 통신이 어려움(IPC)
• Multi-Thread : 프로그램을 여러 개의 스레드로 구성하고 각 스레드가 하나의 작업을 처리하는 것
  장점 : 시스템 자원 효율성 증가, 처리 비용 감소, 자원 공유
  단점 : 하나의 스레드에 문제가 생기면 전체 프로세스에 영향이 감. 자원 공유로 인한 동기화 문제, 디버깅이 까다로움

Stack, Queue

• Stack : 후입선출, Push, Pop
• Queue : 선입선출, Enqueue, Dequeue

List,Map,Set

• List
  - 순서와 중복이 있는 자료구조
  • 인덱스로 접근 가능
  • 가변적 크기
• Map
  - Key, Value 구조
  • 고유키, 순서없음
  • value 중복가능
  • 검색 속도 빠름
• Set
  - 순서 없음, 중복 없음
  • 검색 속도 빠름
  • 중복값을 허용하지 않는 데이터를 찾을때 유용함

라이브러리, 프레임워크

제어 흐름에 따른 주도권이 어디에 있는가

• 프레임워크 : 전체적인 흐름이 있으며, 개발자는 이에 따름
  React, Vue, TS, JS
• 라이브러리 : 개발자가 흐름에 대한 제어를 하며, 필요한 상황에 쓸 수 있음
  Tailwind, Redux, Recoil, Zustand

JavaScript

Sync, Async ( 동기 , 비동기 )

Sync : 작업 실행 시 해당 작업이 완료될 때까지 기다림.
- 설계가 간단하고 직관적, 결과반환을 대기해야함
Async : 작업이 실행되는 동안 다른 작업 수행 가능. 작업이 완료되는 것부터 결과반환
- 자원을 효율적으로 사용 가능, 설계가 복잡함]

블로킹, 논블로킹

제어권이 누구에게 있는가
블로킹 : 함수 실행 시 제어권을 넘겨주고 작업이 끝날때 돌려받음
논블로킹 : 함수 실행시 제어권을 유지함

콜백함수

• 다른 함수의 인자로 사용되는 함수
• 이벤트에 의해 호출되는 함수
  비동기 함수에서 불러오는 순서를 제어하기 위해 사용

콜백지옥

• 익명함수에 콜백함수를 전달하는 과정에서 콜백함수가 반복될 경우 코드의 들여쓰기 수준이 지나치게 깊어지는 현상을 말함
• Promise나 Aysnc Await로 해결

Event Loop

비동기 작업을 효율적으로 관리하기 위한 메커니즘
자바스크립트는 기본적으로 단일 스레드로 동작하기 때문에 시간이 오래걸리는 작업이 실행중일 때 프로그램이 멈추는 것을 방지하기위해 도입됨.

1. Call Stack (스택 호출)

• 현재 실행중이거나 실행될 함수를 기록하는 스택 구조.
• 함수 호출시 스택에 push 되고, 함수 실행이 완료되면 스택에서 pop됨.
• 한 번에 하나의 함수만 실행됨.

2. Web APIs

• 브라우저 환경 또는 Node.js환경에서 제공하는 비동기 작업을 처리하는 API. Call Stack에서 실행이 불가능한 작업을 처리함.(setTimeout, fetch 등)
• 작업 처리후 Task Queue로 결과를 보냄

3. Task Queue

• Web API에서 완료된 작업의 대기장소.
• Call Stack이 비어있는 경우 Task Queue에서 작업을 가져와 실행함.

4. Microtask Queue

• Promise의 then, catch, finally와 같은 작업을 처리하는 대기열
• Task Queue보다 높은 우선순위를 가짐.

위의 작업을 더 이상 가능한 작업이 없을때까지 반복

Promise /Async Await

Async Await는 ES8에서 도입된 Promise를 더욱 쉽게 사용하기 위한 문법.
Try Catch문으로 에러 처리를 해야함

map/forEach

map : 원본 배열을 변경하지 않고 새로운 배열을 생성
forEach : 원본 배열을 변경함

var/ let / const

var

• 중복 선언 가능
• 함수 레벨 스코프
  let
• 중복 선언 불가
• 재할당 가능
• 블록레벨 스코프
  const
• 중복 선언 불가
• 재할당 불가
• 블록레벨 스코프

메서드 체이닝

자기 자신을 반환하는 함수를 연결하여 호출하는 것
코드가 간략해지는 장점이 있으나, 에러를 찾기 어려움

일반함수/화살표함수

일반함수

• 함수 호출방식에 따라 this에 바인딩할 객체가 동적으로 결정
• new 키워드를 통해 constructor 함수로 활용 가능
• 실행 시 암욱적으로 arguments 변수가 전달되어 사용 가능

화살표함수

• ES6부터 도입된 함수로 좀 더 간략하게 함수를 정의할 수 있음
• arguments 객체를 생성하지 않음
• this는 언제나 상위 스코프의 this를 가리킴. 정적으로 결정

this의 의미

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수. 호출 방식에 따라 특정 개체를 바인딩
1. 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스에 바인딩
2. Call, Apply, Bind 메서드에서는 첫번째 인자로 전달된 객체에 바인딩
3. 객체 내부의 메서드에 호출된 경우, 해당 객체에 바인딩
4. 위를 제외한 경우에서 전역 객체에 바인딩
5. 화살표 함수에서는 화살표 함수가 선언된 상위 스코프의 this에 바인딩

함수 선언형/표현식

선언형 : function 키워드를 사용해 정의함. 호이스팅되기 떄문에 코드가 실행되기 전에 로드 가능함, 선언하기 전에도 호출 가능함
표현식 : 변수에 함수를 할당하는 식으로 정의함. 선언된 이후에만 호출이 가능하고 함수가 할당된 변수가 접근 가능한 스코프 내에서만 호출 가능함

호이스팅

변수 및 함수의 선언이 스코프 내의 최상단으로 끌어올려지는 현상. JS 엔진이 코드 실행 이전에 변수와 함수의 메모리 공간을 미리 할당해주기 때문에 가능

이벤트 버블링/이벤트 캡쳐링

이벤트 버블링 : 발생한 요소에서 상위요소로 이벤트가 전파됨
이벤트 캡쳐링 : 발생한 요소에서 하위요소로 이벤트가 전파됨

이벤트 전파/이벤트 위임

이벤트 전파 : DOM트리 상의 특정 Element에서 이벤트가 발생하여 다른 ELement로 전파되는것. Capturing > Target > Bubbling
이벤트 위임 : 이벤트를 하위요소에 추가하지 않고, 상위 요소에서 하위 이벤트를 제어

클로저

함수가 속한 Lexical scope를 기억하여, 함수가 Lexical Scope 밖에서 실행될 때에도 그 스코프에 접근할 수 있는 함수
캡슐화, 정보은닉을 위해 활용

렉시컬 스코프

함수가 선언된 위치에 따라 상위 스코프가 결정되는 개념. = 정적 스코프

렉시컬 환경

변수 식별자, 변수에 바인딩 된 값, 스코프 체인을 포함하는 자료구조. 함수를 호출할 때마다 새로운 렉시컬 환경이 생성되며, 실행 컨텍스트에 대한 정보를 가지고 있음. 함수가 종료되는 해당 환경도 제거됨

실행 컨텍스트

코드가 실행될때 생성되는 환경을 나타내는 추상적인 개념. 변수 객체, 스코프 체인, this 등이 포함되며 스택구조로 관리됨 와뇰되면 제거됨

스코프, 스코프 체인

• 스코프 : 변수에 접근 가능한 유효한 범위

1. 전역 스코프 : 어디서든지 접근 가능
2. 함수 스코프 : 함수 내에서만 유효한 범위를 갖게하는 스코프 ( 지역 스코프 )
3. 블록 스코프 : 블록 단위 내에서만 유효한 범위를 갖는 스코프

스코프 체인 : 스코프를 연쇄적으로 찾아나가는 방식. 변수를 참조할 때, 참조하는 스코프부터 상위 스코프 방향으로 이동하며 선언된 변수를 검색함

프로토 타입/ 프로토 타입 체인

깊은 복사/ 얕은 복사