성장, 그리고 노력

부족하더라도 어제보다 더 잘해지자. 노력은 절대 배신하지 않는다.

전체 글 125

[Javascript] 프로토타입(Prototype)

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

Javascript 2022.01.01

this, arrow-function

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

Javascript 2021.12.31

호이스팅(hoisting)

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

Javascript 2021.12.30

[Docker] 도커 입문하기 5 - 이미지 업데이트

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

Docker 2021.12.20

[Docker] 도커 입문하기 4 - 도커 이미지 만들기

도커 이미지 만들기 도커 컨테이너는 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 2021.12.14

[Docker] 도커 입문하기 3 - 기본 명령어 및 실습

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

Docker 2021.12.14

[Docker] 도커 입문하기 2 - 배경 지식 쌓기

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

Docker 2021.12.13

[Docker] 도커 입문하기 1 - 맛보기 및 설치

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

Docker 2021.12.13

React Native에서 상태 관리

상태 관리라는 주제는 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를 사용하려고 하니, 너무 많은 타이핑과 구조체들이 필요해서 실제로 프로덕션 환경에서 도입하여 ..

React 2021.12.10

Recoil 기초 개념 및 사용법

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)할 수 있는 상태 단위이..

React 2021.12.10

[React Native] 다이어리 만들기

Diary 앞에서 배운 내용을 토대로 다이어리 앱을 만든다. 배운 내용에 대한 것들은 많이 생략한다. 설치 및 할일 만들기 내비게이션, Hooks 참고 npx pod-install 기존에는 ios 폴더로 이동하여 pod install을 해주었다. 위 명령어는 동일한 기능이자만, 루트 폴더에서도 pod를 설치할 수 있게 해주는 명령어다. 설치 $ yarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context react-native-vector-icons info.plist 파일 업데이트(아이콘 관련) buil..

React 2021.12.07

[React Native] 내비게이션 및 Hooks 익히기

이전글 참고하기 2021.11.29 - [React] - [React Native] 설치 및 할일 목록 만들기 [React Native] 설치 및 할일 목록 만들기 첫 회사에서 RN으로 프로젝트를 했었으나, 사실 기억도 안나고 그 이후로 딱히 웹뷰 이외에 직접 RN을 사용하거나 코드를 작성할 일이 없어 새 실리콘 맥북에 적응도 해볼겸 공부해 본다. React-Na code-masterjung.tistory.com 앞써 공부한 내용(설치 및 할일목록 만들기)를 토대로, 내비게이션(navigation)을 공부한다. 참고 IOS 애뮬레이터 리로딩: 커맨드 + R Android 애뮬레이터 리로딩: R 두번 (키보드 입력이 한글인 상태에서는 해당 커맨드가 안먹는다.) https://reactnavigation.o..

React 2021.12.03

[React Native] 설치 및 할일 목록 만들기

첫 회사에서 RN으로 프로젝트를 했었으나, 사실 기억도 안나고 그 이후로 딱히 웹뷰 이외에 직접 RN을 사용하거나 코드를 작성할 일이 없어 새 실리콘 맥북에 적응도 해볼겸 공부해 본다. React-Native apple slicon mac에서 RN 프로젝트 처음부터 셋업 및 공부용 프로젝트. 설치 xcode android studio $ brew install --cask adoptopenjdk/openjdk/adoptopenjdk8 $ brew install watchman $ sudo gem install cocoapods 안드로이드 스튜디오 환경변수 설정 # zsh 사용시 $ vi ~/.zshrc # 맨 아래에 추가 # export ANDROID_HOME=$HOME/Library/Android/sd..

React 2021.11.29

Object를 만드는 3가지 방법

객체 객체는 외부에 드러나는 행위(behavior)와 행위를 지원하기 위한 상태(state)를 묶어주는 편리한 단위이다. 만약 객체가 없다고 생각해 본다면, 하나의 프로그램의 상태가 마구잡이로 섞여서 프로그램을 수정하기도 어렵고 이해하기도 어렵기 때문에 유지보수도 힘들 것이다. 하지만 객체를 사용하여 참조할 수 있는 상태의 네임스페이스가 훨씬 작아지므로, 특정 변화에 의해 상태가 어떤 영향을 받을지 분석하기 더 쉬워진다. 또한 객체의 목표 중 하나는 저장소를 관리하는 것이다. 각 객체는 조그마한 메모리를 갖고 있는 별도의 작은 컴퓨터라 볼 수 있다. 1. 객체 리터럴 가장 접하기 쉽고 일반적으로 객체를 만드는 방법이다. const person = {name: 'jacob', age: 20} 1-1. 새로..

Javascript 2021.09.20

조건부 타입(condition Type) + infer

삼항 연사자처럼 타입도 조건에 따라 타입이 달라지게 프로그래밍 할 수는 없을까? Condition Type 타입도 삼항 연산자와 유사한 방식으로 조건부 타입을 타입핑할 수 있다. T extends U ? X : Y 이것을 간단히 리뷰해 보자면, "T가 U에 할당될 수 있는지를 확인하고 이것이 참이라면 X 타입을 사용하고 그렇지 않다면 Y 타입을 사용해라"라는 의미다. 예제를 통해 확인하면 이해가 될 것이다. interface IItem { id: number; } function getItems(id?: T): T extends number ? IItem : IItem[] { if (typeof id === "number") { return { id: 1 } as any; } return [{ id: 1..

Typescript 2021.09.20

싱글톤 (Singleton Pattern)

싱글톤 패턴 싱글톤 패턴이란 클래스의 인스턴스화를 하나의 객체로 제한하는 패턴이다. 싱글톤 패턴이 유용했는지 아닌지에 대한 논란은 계속 있어왔으니, 다른 글을 참고하면 좋을 거 같다. 일단 어떻게 만들면 좋을지 간단하게 만들어 보자. Object literal 이 자체로는 유용하진 않지만 객체 리터럴로 간단하게 만들 수 있다. var Person = { name: 'jacob', age: 30, greeting: function () { return `Hi! ${this.name}`; }, }; 유용하지 않은 이유는 이 코드가 불변성을 제공하지 않기 때문에 언제든지 재정의될 수 있기 때문이다. 조금만 더 개선해 보자. const Person = { name: 'jacob', age: 30, greetin..

Typescript 2021.09.19

[Typescript] 타입 가드(type guard)

기본적인 타입 가드 방법 타입스크립트를 사용하다 보면 커스텀한 타입을 만들고, 그것들을 조합해 하나의 유니온 타입으로 만들어 사용하는 경우가 많다. 그런데 그 다음에 어떻게 타입을 좁혀야 할지(type narrow)를 몰라 타입 캐스팅을 해버리는 경우를 코드 리뷰를 하다보면 종종 볼 수 있다. 어떻게 이를 해결할 수 있을까? typeof 타입 축소를 하는 가장 기본적인 방법이다. 단, 런타임에 값에 유형에 대한 가장 기본적인 정보(타입스크립트 내장 타입)만 제공할 수 있다. ※ "string:", "number", "bigint", "boolean", "symbol", "undefined", "object", "function" function print(char: string | string[] | n..

Typescript 2021.09.18

타입스크립트를 도입하며,

처음에 개발을 시작했을때는 자바스크립트만 배웠지만, 운이 좋게도(?) 첫 회사를 입사하고 부터는 줄곧 타입스크립트만 사용하고 있다. 물론 지금 회사는 기존 모든 프로젝트는 자바스크립트를 사용해서 타입스크립트로 전환중이긴 하다. 그래서 타입스크립트에 대한 간단한 내용과 타입스크립트를 중간에 도입하면서 겪은 내용에 대해 기록해 본다. 왜 타입스크립트를 써야하는가? 이유는 자바스크립트가 동적 프로그래밍 언어이기 때문이다. 동적 프로그래밍 언어는 런타임시 변수의 타입이 결정되기 때문에, 런타임 중 변수의 타입이 결정되면서 생기는 버그와 에러를 자바스크립트를 실행해 보지 않으면 알 수가 없다. 그래서 나온게 대안으로 나온게 flow와 typescript이다. ‌ Flow vs Typescript flow는 페이스..

Typescript 2021.08.07

웹 렌더링 방식에 대해.

아직 블로그를 옮길지 말지 확실히 정하진 않았지만, 개인적으로 UI가 깃북이 더 마음에 들어 깃북으로 보시는걸 추천드립니다. CSR vs SSR vs SSG 웹 페이지를 렌더링하는 방식에는 크게 클라이언트 사이드 렌더링과 서버 사이드 렌더링이 있다. 이 둘의 차이점을 살펴보며, 더 나아가 다른 방법에 대해서도 찾아보자. ajdkfl6445.gitbook.io Client Side Rendering (CSR) 말 그대로 클라이언트(브라우저)에서 웹 페이지를 렌더링하는 것이다. 모든 로직, 데이터 가져오기, 템플릿, 라우팅은 서버가 아닌 모두 클리이언트에서 처리된다. ‌ CSR의 경우 자바스크립트 번들의 크기의 영향을 많이 받기 때문에 적극적인 코드 분할(code splitting)을 고려해야 하며, "필요..

Algorithms/이론 2021.05.28

이젠 Modern JavaScript로 publish 하자

Modern Browser 흔히 Chrome, Safari, Edge, Firefox 같은 최신(modern) 웹 브라우저를 말한다. 특히 앞에서 언급한 4개의 브라우저의 경우 브라우저 시장의 90% 이상을 차지하며, 동일한 렌더링 엔진에 의존하는 다른 브라우저 5%를 추가하면, 전 세계 웹 트래픽의 95%가 위 브라우저이나, 위 브라우저 기반이라고 할 수 있다. Modern JavaScript 모던 자바스크립트란, 특정 ECMAScript 사양 버전으로 작성된 자바스크립트 코드를 의미하지 않으며, 최신 브라우저가 모두 지원하는 구문을 말한다. 아래의 기능은 구글에서 말하는 10년 동안 가장 널리 사용된 자바스크립트의 기능이다. Classes (ES2015) Arrow functions (ES2015) ..

Javascript 2021.05.22
반응형