구버전
-
[React] 고차 컴포넌트 (HOC, High Order Component)구버전/React 2024. 1. 20. 16:09
고차 컴포넌트 하나의 개발 패턴으로 컴포넌트를 인자로 받아서 새로운 컴포넌트로 변환해 반환하는 방식으로 인자로 넘긴 컴포넌트에게 추가되길 원하는 로직을 HOC에서 가지고 있다가 로직이 적용된 엘리멘트를 반환하게 된어 횡단 관심사 문제를 해결하는 역할을 한다. 횡단 관심사란? 대표적인 예시로 인증 & 인가 서비스, 로깅, 트랙젝션 처리, 에러처리 등등이 있으며 계층 분리를 통해서 기능을 분리한다고 하여도 중복된 코드가 생길 수 밖에 없는 경우가 있다 이러한 계층에 상관없이 공통적으로 필요한 관심사가 있는데 이것이 횡단 관심사이다. 즉 어플리케이션 전반에 공통적으로 필요한 문제를 횐단 관심사라고 부를 수 있다. // 이렇게 관심사 분리를 통해서 분리를 해도 공통적으로 필요한 로직이 있는 경우가 있다 언제 사..
-
[Javascript] 이터레이터, 제너레이터구버전/JavaScript 2024. 1. 19. 18:32
이터레이션 프로토콜 일종의 약속인데 이 약속을 잘 지키는 데이터 컬렉션(객체, 배열 ...)은 for...of문으로 순회할 수 있고 spread문법을 적용할 수도 있다. 종류로 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 이터러블 프로토콜 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한며 이러한 이터러블은 Symbol.iterator 메소드(이터레이터를 반환)를 구현하거나 프로토타입 체인에 의해 상속한 객체를 말한다. 이러한 이터러블은 for...of문과 spread 연산자의 대상으로 사용 가능하다. - 배열은 Symbol.iterator 메소드를 소유하고 있고 일반 객체는 소유하고 있지 않다. 하지만 객체도 이터러블 프로토콜을 준수한다면 이터러블이 되며 이러한 방법으로 커스텀 이터러블이 있다. ..
-
[Javascript] 메모리 힙 & 콜 스택구버전/JavaScript 2024. 1. 19. 13:03
힙(heap)과 콜스택(call stack)이란? 자바스크립트 엔진이 코드를 읽고 실행하는 과정에서 중요한 두 단계로 정보를 저장하는 것, 코드를 트래킹하는 작업 두가지가 있다. 이때 정보를 저장하는 공간(메모리)가 메모리 힙이고, 코드를 트래킹하는 영역이 콜스택이다. 아래 코드를 통해 콜스택과 힙이 어떤식으로 작동하는지 알아보자 const a = 10 const b = 35 const arr = [] function func() { const c = a + b; // 스코프 체인에 따라 GEC의 VO 참조 obj = { d: c } return obj } const o = func() 1. 먼저 원시 값과 참조 값으로 구분되어서 각각 콜스택과 힙에 위치한다. 2. func() 가 실행되면서 새로운 컨텍..
-
[Javascript] prototype, class구버전/JavaScript 2024. 1. 18. 21:30
개요 프로토타입 클래스 언제 사용하는가? 문득 인벤이나 오피지지 같은 사이트를 만들고 싶다는 생각을 했을 때 게임 캐릭터에 대한 정보를 자료형으로 정리를 해야한다 그 때 자바스크립트 오브젝트 형식으로 정리를 하려고 할 때 하나하나 만드는 하드 코딩은 너무 비효율적이다. 그렇기에 비슷한 형식의 객체를 많이 많들어야 할 때 사용할 수있는 문법이 클래스이고 자바스크립트가 클래스 문법이 없었을 때는 어떻게 만들 수 있었는지 또한 프로토타입은 어떠한 영향을 끼치는지에 대해서 알아보자 프로토 타입 (Prototype) 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다. 이때 프로토 타입은 객체를 생성하기 위한 방법으로 객체를 생성하기 전 클래스를 정의해서 이를 통해서 인스턴스(객체)를 생성하는 방식과 다..