Jacob's Development Blog

Prototype 프로토 타입이란 클래스나 객체의 내용 복사 없이도 상속의 효과를 구현할 수 있게 해주는 방법이다. 프로토타입은 직접 참조 당하지 않고 프로토타입 링크(__proto__)를 통해 부모의 프로토타입 링크만 참조한다. 프로토 타입 속성(property's)의 값은 객체이며, 프로토타입 체인 아래에 있는 객체에 상속되기를 원하는 속성과 메서드를 저장하기 위한 공간인 객체이다. 그래서 Object.is(), Object.keys()같은 메서드들은 프로토타입 객체 안에 정의되지 않았기 때문에 Object.prototype에서 상속되는 객체 인스턴스나 객체 유형(object type)에 의해 상속되지 않는다. 프로토타입 객체에는 속성과 메서드를 추가할 수 있으며, 원하는 객체로 완전히 교체할 수도 ..

this 자바스크립트의 함수에는 메서드가 호출된 개체를 참조하는 this라는 특수한 변수가 있다. this의 값은 함수 호출에 따라 동적으로 변하며, 이 때문에 작은 문제 상황에 직면하게 된다. 함수는 정적 범위(static/lexical scope)와 동적 범위의 두 가지 범위(scope)에서 실행된다. '정적 범위'는 함수를 둘러싸는 범위이고, '동적 범위'는 함수를 호출한 범위이다. 자바스크립트에서 함수는 생성자, 메서드(객체의 일부), 함수(서브 루틴, subroutines)의 역할을 하는데, 함수가 서브루틴(이름이 겹쳐 아래부터는 서브루틴으로 명명)의 역할을 할 때 this가 동적으로 변해 문제가 생긴다. 서브루틴이 객체에 대해 호출되지 않기 때문에 this의 값은 strict 모드에서 정의되지..

호이스팅(hoisting) 호이스팅은 선언한 함수와 변수를 자바스크립트가 해석할 때 가장 상단에 있는 것처럼 인식하는 것을 말한다. 좀 더 자세하게 말하자면 자바스크립트는 코드의 라인 순서와 관계없이 함수 선언식과 변수를 위한 메모리 공간을 먼저 확보한다. 따라서 함수와 변수(var)는 코드의 최상단으로 끌어 올려진 것(hoisted)처럼 보이게 되는데 이를 호이스팅이라고 한다. 함수 전체가 호이스팅 된다. var로 변수 선언시, 선언은 호이스팅되지만, 할당을 호이스팅 되지 않는다. 변수 스코프는 함수이며, 함수만이 새 스코프를 도입할 수 있다. 호이스팅을 이해하기 위한 사전 지식들 호이스팅을 이해하기 위해 조금 축약하여 개념만 쉽게 이해해 보자. 스코프(scope) 스코프란 그 변수나 함수에 접근할 수..

도커 이미지 업데이트 하기 맨 위에서 말한 고민에는 이런 문제점 들이 포함된다. 지금은 애플리케이션이 작아서 그나마 문제가 없지만, 변경 범위나 내용에 상관없이 모든 종속성을 다시 설치해야 한다. 다시 빌드하고 다시 실행하는 과정이 너무 번거롭다. [2]번의 과정만 사실 있는게 아니라, 이전 컨테이너가 아직 실행 중이기 때문에 이전 컨테이너가 3000번 포트를 사용하고 있다. 따라서 수정한 컨테이너를 실행하려면 이전 컨테이너를 중지해야 한다. 그렇다면 어떻게 이 부분을 효율적으로 개선할 수 있을까? 1. 항상 전체 종속성 다운로드 개선 - Dockerfile 수정하자! # syntax=docker/dockerfile:1 FROM node:12-alpine RUN apk add --no-cache pyth..

도커 이미지 만들기 도커 컨테이너는 docker create [이미지 이름] 명령을 통해 만들 수 있다. 아래에서는 도커 이미지를 만드는 방법 먼저 배워보자. 예제 코드는 공식 홈페이지에 있는 것을 사용할 예정이다. [getting-started] 1. 도커 파일(Dokerfile) 만들기 도커 파일은 컨테이너 이미지를 만드는데 사용되는 단순한 텍스트 기반 지침 스크립트이다. Dockerfile이라는 이름의 파일을 만들자. 만약 vscode를 사용중이라면 docker extenstion을 설치하면 자동 완성 기능도 같이 사용할 수 있다. # syntax=docker/dockerfile:1 FROM node:12-alpine RUN apk add --no-cache python3 g++ make WORKD..

기본적으로는 공식 문서를 참고하되, 자주 사용하는 명령어 몇 개만 나열해 본다. docker run 이미지를 생성 및 실행해 주는 명령어이다. 원래는 분리된 생성(docker create)와 실행(docker start)을 한번에 실행시키는 명령어이다. docker run [이미지 이름] [실행할 명령어] 위 그림은 docker run hello-wolrd를 실행했을 때 나오는 결과이다. 중간에 메시지에 나와 있는 것을 보면 처음에 봤던 도커 아키텍처가 자연스레 생각날 것이다. 참고로 [실행할 명령어]의 경우 옵셔널한 값이다. 기본적으로는 원래 이미지에 설정된 기본 실행 명령어가 실행되지만, [실행할 명령어] 자리에 명령어를 별도로 넣어주게 되면, 기존에 설정된 값을 무시하고 내가 입력한 명령어를 실행한..

넋두리 도커에 대해 더 알아보기 전에 컨테이너에 대해 좀 더 이해해보자. 나 또한 리눅스를 깊게 공부해 본적은 없기 때문에 부족한 지식을 채우고자 이 파트를 추가했다. 이 부분은 필수는 아니고 원한다면 바로 다음으로 넘어가도 된다. 컨테이너란 무엇일까? 컨테이너를 처음들은 사람도 많을 거고, 사실 도커나 쿠버네티스 먼저 떠오르는 사람이 많을 것이다. 이 관점에서만 본다면 컨테이너를 저렴한 가상 머신(VM)으로만 생각할 수도 있다. 컨테이너(container)란, 공통 기능 세트를 충족하는 단일 호스트에서 실행되는 격리된 프로세스 그룹이며, 이런 기능 중 일부는 Linux 커널에서 찾을 수 있다. 어떻게 도커 컨테이너를 격리시키는 것일까? 이를 위해서는 Linux의 cgroup(control groups)..

넋두리 다녔던 대부분의 회사에서 도커를 사용했다. 물론 나와는 별개의 이야기인 경우가 많았다. 이미 누가 세팅해놔서 신경쓰지 않아도 됐거나, 프론트엔드에서는 사용을 안하는 경우도 많았다. 하지만 계속 거론되고 있고 사용하는 기술이기 때문에 너무 궁금하기도 했고, 도커를 만질 일이 곧 생겨 미리 공부해 보려고 한다. Docker 왜 도커를 사용하지? 도커(Docker)는 컨테이너라고 하는 느슨하게 격리된 환경에서 애플리케이션을 패키징하고 실행할 수 있는 기능을 제공하며 격리 보안을 통해 주어진 호스트에서 많은 컨테이너를 동시에 실행시킬 수도 있다. 컨테이너는 가볍고 애플리케이션을 실행하는데 필요한 모든 것을 포함하므로 현재 호스트에 설치된 것에 의존할 필요가 없다. 작업하는 동안 컨테이너를 쉽게 공유할 수..

상태 관리라는 주제는 RN에 국한된 내용은 아니다. typescript를 기반으로 여러 방법을 복습겸 테스트 해보자. 더 나아가 아직 사용해보지 않는 recoil 라이브러리도 경험해 보자. 아래에서 배운 내용은 대부분 생략한다. 설치 및 할일 만들기 내비게이션, Hooks 다이어리 앱 만들기 React Native With Typescript Getting Start $ npx react-native init StateManagementInReactNative --template react-native-template-typescript 1. Redux Toolkit (RTK) typescript에서 redux를 사용하려고 하니, 너무 많은 타이핑과 구조체들이 필요해서 실제로 프로덕션 환경에서 도입하여 ..

Recoil 페이스북에서 만든 상태관리 라이브러리로, useState를 사용하는 것만큼 사용이 간단하면서 상태 관리를 효과적으로 할 수 있게 도와준다. Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. 위에 말이 리코일의 핵심 개념으로 Recoil은 원자(atom, 공유 상태)에서 selector(순수 함수)를 거쳐 React Componenets로 흐르는 데이터 흐름 그래프를 만들 수 있게 해준다. 여기서 원자(atom)는 리액트 컴포넌트가 구독(subscribe)할 수 있는 상태 단위이..