실무에서 사용하는 자바스크립트의 기초적인 문법들을 차근차근 정리해보려고 합니다.
// 실무에서 어떻게 사용하고 있나?

클래스

class ?!

클래스는 templete (틀) 이고 메모리에 올라가지 않고… 등등의 이야기는 뒤쪽에 정리하도록 하겠습니다.

먼저.. class 는 언제 쓰는 가?

중요한 건, 어떤 경우에 class를 쓰는 가 / 왜 쓰는 가 가 class 문법이 만들어진 중요한 포인트인 것 같습니다.

class 는 1. “연관” 있는 데이터 / 함수 들을 한 덩어리로 2. “묶어” (그 묶은 데이터를 field (속성 - 데이터) 이라고 하고, 함수를 method (행동)라고 합니다) 3. “틀” 을 만들어 데이터 마다 다른 결과물을 만들고 싶을 때 사용할 수 있습니다.

예를 들어, 삼각형의 가로, 삼각형의 세로, 삼각형의 넓이를 구하는 함수, 사각형의 가로, 사각형의 세로, 사각형의 넓이를 구하는 함수 등등의 데이터 / 함수들이 있다고 가정해 봅니다. 당연히 삼각형은 삼각형끼리 사각형은 사각형끼리 묶어서 관리하면 편리 할 것 입니다. 추가로 실제 값을 가지지 않은 삼각형 / 사각형의 틀을 가지고 있다면, 여러가지 값들을 가진 삼각형 / 사각형을 만들기 편할 것 입니다.

코드로 확인해 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class 사각형 {
  // you can pass data to 삼각형 as creating 삼각형 object
  constructor(width, height, color){
    // fields
    this.width = width;
    this.height = height;
    this.color = color;
  }

  // methods
  printArea() {
    console.log(this.width * this height);
  }
}

이제 삼각형이라는 틀을 완성했습니다.
그럼 이 틀을 이용해 가로 10, 세로 10, 빨간색 이라는 데이터를 넣은 사각형을 만들어 보겠습니다.

1

const rectangle = new 사각형(10, 10, 'red');

원하는 데이터를 이 틀(class)에 넣어서 다양한 결과물을 만들어 낼 수 있습니다.

• 빨간(데이터) 사각형
• 파란(데이터) 사각형
• 가로, 세로 길이가 같은 (데이터) 사각형

(클래스를 붕어빵틀, 그리고 그 결과물을 팥 붕어빵, 크림 붕어빵 이라는 유명한 예시들이 있습니다….)

그리고, 그 결과물을 조금더 전문 용어로 표현 하면, 이것을 class 의 instance 또는 object 라고 합니다.

class 정의

• 연관된 데이터와 함수를 묶는 틀
• 묶인 데이터를 field(속성), 묶인 함수를 method (행동) 이라 함
• 그 틀에 의해 실제 데이터로 만들어진 결과물을 인스턴스 라고 함

class 특징

• 클래스는 한번만 선언 됨 - https://developer.cdn.mozilla.net/en-US/docs/Web/JavaScript/Reference/Classes#re-running_a_class_definition

• 안에 실제 데이터가 들어있지 않은 단순한 틀이기 때문에 메모리에 올라가지 않음 <- 조금 더 확인해보아야

Hexo 블로그를 깃헙에 연결하고 관리하는 방법에 대해 정리하려고 합니다.
블로그를 연결하고 관리하기 위해서는 2가지 레포지토리가 필요합니다. deploy 하여 깃헙 페이지가 될 레포 하나 와 소스들의 버젼관리를 위한 레포하나가 필요합니다.

1. deploy 하여 깃헙 페이지가 될 레포 설정

• 깃헙 페이지용 레포 만들기 (Page를 이용해야함으로 public)
• _config.yml 파일에서 아래 코드를 추가하기

1
2
3
4
5
6
7
8
9
10
11
12

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
Plugins:
- hexo-deployer-git
theme: icarus

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: {깃헙 페이지용 레포 이름}.git

• hexo-deployer-git 플러그인 설치하기
  npm install ~
• hexo generate 업데이트한 파일들을 빌드하기 (public 폴더에 대입)
• hexo deploy 다음 명령어를 입력하면 블로그가 deploy!

2. 깃헙으로 관리할 레포 설정

• 깃헙 관리용 레포 만들기
• 깃헙 레포를 설정 할때와 동일,
  git remote set-url origin https://github.com/letsdoyi/{블로그 버젼관리용 레포}.git

타입스크립트에 대해 정리해 보도록 하겠습니다.
타입스크립트는 “어떤 문제를 해결하기 위해” 등장한 언어이며, 타입스크립트를 “사용하는 이유” 에 대해 여러 블로그를 읽고 정리한 글 입니다.
제 생각이 아닌 단순히 정리한 글이기 때문에 평어체를 쓰도록 하겠습니다.

모듈 A가 최신버전으로 설치되는 데, 왜 이전 버전이 왜 추가로 설치되는 거지?

개발을 하던 도중 어떤 모듈의 버전을 올리면서 각 모듈들의 의존성에 대해 이해해야 했고, 그것을 정리해여 글로 남기려고 합니다.

Node packaged Magager(npm)를 사용해 저희는 개발에 필요한 모듈 패키지들을 편리하게 설치하고 제거하여 개발하고 있습니다. 하지만 때로는 각각의 패키지들이 연결 되어있는 경우가 있습니다. 그것을 “모듈 의존성” 이라고 합니다. 예를 들어, 모듈 A를 사용하기 위해서는 모듈 B 1.0 버전을 설치해야 합니다. 이때 “모듈 A는 모듈 B에 의존한다” 라고 말합니다.

소프트웨어 엔지니어링에서 디자인 패턴은,

• 일반적이며(general) 재사용이 가능한
• 소프트웨어 설계의 상황에서 흔히 일어나는 문제에 대한

솔루션이다.

이것은 설계에서 끝나지 않으며, scoure와 machine code로 전환가능 하다.
by wikipedia

한마디로, 소프트웨어 설계에서 문제들을 해결하기 위해 고안되었고, 실용적이며, 재사용 가능한 설계 패턴입니다.

디자인 패턴을 익히면서 저의 코드 전체 구조에 대한 이해가 점점 높아지고, 패턴 간의 장단점을 익혀 적용해 볼 수 있기를 기대합니다.
많은 디자인 패턴 중에서, 구조 패턴에 대해 정리해 보려고 합니다.

Structural Patterns

1. Adapter
2. Bridge
3. Composite
4. Decorator
5. Facade
6. Flyweight
7. Proxy

“우리가 정말 매일매일 함께 자랄 수 있을까”

1편에 이어서,
Circular Progres Bar 구현에 대해 설명해보겠습니다.

Circular Progress Bar를 구현하는 방법에 대해 정리해보려고 합니다.
Apple Watch activat ring, Donot 그래프, iPhone Timer, 음악앱에서 많이 보이는 재생시간 progress bar 등의 많은 곳에서 사용되고 있습니다.

책을 읽고 인상깊었던 부분, 느낀점들을 기록해놓으려고 합니다.
이 기록들이 저의 이상과 현실을 연결해주는 데 도움이 되었으면 합니다.

회사가 결정된 후, 일을 하기 시작 전 남는 시간동안, 블로그를 정리하고 이전하고 있습니다.
이전 포스팅들을 하나씩 보다 보니 많은 생각들이 교차합니다.
프로그래밍을 공부하기 시작하며 배운 기술, 용어에 대해 단순히 정리한 포스팅도 있고, 그 개념들을 나름대로 해석하여 나만의 경험을 넣어 쓴 글도 있습니다.
사실은 블로그 이전 작업을 하며, 단순 내용 정리나 너무 기초적인 내용을 다룬 포스팅들은 걸러내려고 했습니다.
하지만, 그 부분들도 저의 히스토리를 볼 수 있다는 점에서 조금은 부끄럽지만 남겨두기로 하였습니다. (몇 개는 지워야 할 것 같습니다🤫)

• 이제는 단순 내용정리 보다는 내 생각과 해석이 담긴 글의 비중을 높이려고 합니다.
• 단순히 어떻게 구현했는 지 보다는 구조를 파악하여 어떻게 작동하는 지에 대해 설명하는 글을 쓰려고 노력할 것입니다. (아직은 너무 부족하지만 구조파악을 연습하면 나아질 것이라고 생각합니다.)
• 문장도 조금 더 깔끔하게 쓰도록 노력할 것입니다.
• 아직은 포스팅 하나 쓰는 시간이 많이 걸리지만 조금씩 줄일 수 있을 거라고 기대합니다.
• 구직 동안, 면접과 과제, 코딩 테스트를 통해 여러 개발자 분들의 피드백을 받으며, 그동안 배운 개념들이 명료해졌습니다. 그 개념들을 블로그에 정리해 나가려고 합니다.

2020년 3월, 코로나 바이러스로 인해 마스크를 쓰고 다니는 요즘, 건강에 감사하며.