위에 첨부한 사진은 머신 러닝이라는 용어를 처음으로 사용하고 주변 사람들에게 전파한 아서 사무엘(Arthur Samuel) 교수님이시다. 우선 인공지능이라는 분야에 대해 공부를 시작했기 때문에 시초에 머신러닝이라는 용어를 가장 처음 사용한 사람에 대해서는 상식적으로 알고 있어야겠다고 생각했다.

자, 그럼 이번 포스팅에서는 입문자를 위한 인공지능/머신러닝 관련 강의를 듣고 개인적으로 학습한 내용을 정리해보겠다.

머신러닝(Machine Learning) ?

기계학습이란 명시적인 규칙없이 데이터 간 관련성을 스스로 찾아낼 수 있는 컴퓨터 프로그램을 말한다. 이는 1959년에 Arthur Samuel 교수가 한 말이다. 1998년에 Tom Mitchell은 특정 Task가 특정 경험을 통해 Perfermance measure를 얻었다면, 이러한 데이터의 반복 축적을 통해 컴퓨터가 더 나은방향으로 개선해나가게 되는데, 여기서 컴퓨터는 경험을 통해 자동으로 증진해나감에 집중한다.

E - DATA, T - CLASSIFICATION, P - ACCURRACY(정확도를 높이기 위해서는 데이터의 갯수를 늘린다)

전통적인 프로그래밍과 머신러닝의 접근법 차이

전통적인 프로그래밍에서는 프로그래머가 명시적으로 INPUT 값과 PROGRAM(RULES/ALGORISM)을 명시하고 결과 값으로 OUTPUT(ANSWER)을 도출해낸다. 반면 머신러닝은 INPUT 값과 OUTPUT값의 DATASET들을 명시하고 이를 통해 새로운 함수(RULES/ALGORISM)을 도출해낸다. 새롭게 도출해낸 함수를 통해 다른 값들이 들어왔을 때 결과값으로 어떤 값이 도출되는지 예측할 수 있다.

머신러닝의 예시

그렇다면 머신러닝의 예시로는 어떤 것들이 있을까?
(1) 강아지 사진이 주어졌을 때, 해당 영상이 어떤 레이블인지 분류
(2) 자연어 텍스트의 평점 예측
ex) 너무 재미있어요 : 9.0/10.0
(3) vector값에 대한 영상 출력

위의 예시 모두 f:x → y 라는 관계가 성립된다. 여기서 x는 이미지, 자연어, vector가 될 수 있고, y는 레이블, continuous data, 영상이 될 수 있다.

머신러닝의 타입

머신러닝의 타입에는 크게 두 분류로 나뉠 수 있다. feedback이 필요한 경우와 그렇지 않은 경우, teacher가 존재하는 경우와 그렇지 않은 경우로 나뉠 수 있다.

(1) Teacher가 존재하지 않는 경우는 Unsupervised Learning으로, feedback의 유/무와 관계없이 주어진 data(X)만으로 학습을 해서 결과 값(Y)를 추론하는 것이다.
구체적인 방법으로는, Dimensionality Reduction(차원 축소)가 있는데, 이는 입력된 고차원의 데이터를 의미있게 표현하는 방법에 대한 구현 방법이다. 또 다른 방법으로는 Clustering이 있는데, 이는 Supervised Learning의 Classification과 유사한 방법(단, y값이 주어지지 않는다)이다.
케이크 모형으로 살펴보면, Unsupervised Learning은 케이크의 거의 전체를 포함하는 비중으로, 전체 머신러닝에서 상당한 비중과 난이도를 포함한다.
f(x)에서 값 x만으로 함수 f(x)의 결과 값 y를 도출해내야 하기 때문에 어렵다.

(2) Teacher가 존재하는 경우는 Supervised Learning과 Reinforcement Learning이 있다. Supervised Learing은 가장 많이 사용되는 형태의 머신 러닝으로, 직접적 피드백(Direct feedback)이 있다. (X,Y) PAIR 형태로 Labeling 작업된 데이터가 존재한다. 입력 데이터를 통해 결과 값을 추론하게 되므로 다른 방법에 비해 쉽게 해결될 수 있는 방법이다.
y = f(x) 구체적인 방법으로는 Classification과 Regression(회귀)이 있으며, pair로 존재하는 (X,Y) 데이터에서 Y데이터의 성격에 따라 그 방법을 달리한다.
데이터 Y가 Categorical한 성격을 가지고 있다면, Classification, Continuous한 성격을 가지고 있다면 Regression(회귀)의 방법을 택한다.
케이크 모형으로 살펴보면, Supervised Learning은 케익의 데코레이션 부분인 icing 부분으로, 머신러닝에서 매우 적은 부분을 차지하고 있음을 알 수 있다.

(3) 마지막으로 Teacher가 존재하는 경우 중 간접적인 피드백(Indirect feedback)을 주는 경우인 Reinforcement Learning은 여러번의 action을 수행하여 간접적으로 어떤 action이 더 나은지 판단하는 방법이다.
f(s,a) = r의 형태를 가지며, r(rewards)의 값이 최대화되는 a(action)을 도출해낸다. pair로 존재하는 (S,A) 데이터는 (입,출)을 담당하며, 강화학습의 주된 목적으로 사용된다.

Reward가 최대화 되는 방향으로 매 Step마다 Action을 선택해서 문제를 푸는 기법으로, Sequential data 환경에서 사용된다.
사용되는 분야로는 Game AI / Robot Navigation / Realtime decisions 등이 있다.

케이크 모형으로 살펴보면, Reinforcement Learning은 케이크의 데코로 올라간 체리와 같이 아주 작은 비중으로, 그 난이도는 가장 어렵다.
y = f(x) that maximizes r
Predict action y based on ob servation x to maximize a future reward r.

케이크를 통해 바라본 머신러닝의 타입

(2022/03/01) 작성

이번 포스팅에서는 이전에 궁금했지만 어려운 분야라서 선뜻 다가가기 어려웠던 인공지능이라는 분야에 대해 한 번 개념적인 부분을 공부해보면서 공부한 내용을 정리해보려고 한다.
완전 입문이기 때문에 생활코딩의 머신러닝 강의를 듣고 학습한 내용을 정리해보려고 한다.

머신러닝(Machine Learning) ?

인공지능이라는 말과 함께 빠지지 않고 나오는 말이 바로 이 머신러닝이라는 말이다. 한국말로는 기계학습인데, 왜 기계가 학습을 하는가 생각을 해보면, 인공지능이라는 것이 인간의 판단을 기계에 위임하기 위한 기술이기 때문이다. 전염병 판단이나 자율주행 등과 같이 무언가 인간을 대신해서 의사결정을 해야되는데, 이를 위해서는 이 머신러닝, 즉 기계학습이 필요하기 때문이다.

문제 + 공부 = 문제 의 밸런스

우리의 일상에는 많은 문제들이 존재하며, 이러한 문제들을 해결하기 위해 우리는 공부(학습)를 한다. 가장 이상적인 형태가 바로 해결하려는 문제에 비해 해야되는 공부의 양이 적고, 이를 통해 문제의 양의 줄어드는 것인데, 이러한 형태는 우리의 일상에서 일반적이지 않다. 이와 반대로 문제의 크기에 비해 공부하는 양의 크기가 크고, 공부한 양에 비해 문제는 해결되지 않고 오히려 문제의 크기가 더 커지는 부작용이 발생하기도 한다.
따라서 공부의 효용적 측면에서 우선 문제의 양적 측면을 최대한 부각시켜서 상대적으로 공부해야되는 양이 작게 보이도록 함으로써 공부의 양적 부담을 줄이는 방향으로 한 번 머신러닝이라는 분야에 접근해보도록 하겠다.

결정 = 비교 + 선택

결정은 비교와 선택의 합이다. 우리의 일상에는 다양성으로 인해 무언가를 선택함에 있어 비교해야되는 항목이 엄청나며, 이로인해 우리는 무언가 결정을 하는데 있어 어려움을 겪는다. 따라서 이러한 결정을 기계에게 부여함으로써 기계가 대신 결정할 수 있도록 할 수 있다. 여기서 오해가 있을 수 있는데, 망원경이 있다고 해서 눈이 필요없는 것이 아니고, 포크레인이 있다고 해서 손이 필요없는 것이 아니듯, ML이 있다고 해서 우리의 두뇌가 필요없는 것이 아니다. 우리의 두뇌가 더 나은 가치 판단 능력으로 확장시키기 위해 ML이 필요한 것이다.

소비자가 아닌 생산자의 입장에서 머신러닝 바라보기

이전에는 불가능하다고 했던 것들이 요즘 머신러닝을 통해 가능해지고 있다. 이러한 편안함을 느끼고 사용하는 단순 소비자에 그치지 않고, 우리의 일상에 잠재되어있는 각종 불편한 것들을 어떻게 해결할지 항상 궁리하는 습관을 가지고 해결하고자 노력하는 생산자의 입장에서 앞으로 머신러닝과 관련된 개념과 기술들을 학습해보도록 하겠다.

(2022/03/06) 작성

우선 스마트 폰의 사용자가 되어보고, 차후에 필요한 지식을 쌓아나가자.

머신러닝 이라는 분야를 공부하기 위해서는 원리 + 수학 + 코딩 이 세 가지 부분은 필수적으로 알아야 한다. 하지만 우리가 스마트폰을 처음 사용했을 때 스마트 폰의 원리에 대해서 전부 이해한 상태였는가? 아니다. 우리는 우선 사용자적 관점에서 스마트폰을 사용해보고 좀 더 심도있게 스마트 폰을 사용해보고자 개인적으로 원리나 코딩을 공부해본다.
요즘 수학을 몰라도 머신러닝 서비스를 사용해서 개발할 수 있도록 나온 Teachable machine https://teachablemachine.withgoogle.com/이라는 서비스가 있다. 이 서비스를 이용하면 이미지, 오디오, 포즈 등의 데이터를 컴퓨터에 학습시킬 수 있다.

예를들어 A 또는 B라는 포즈의 사진을 학습시키기 위해서는 학습력을 높이기 위해 여러개의 사진을 학습시켜야 한다.
각 각의 Class 사진들이 입력이 되었다면, Training 시켜주면 되고, Training 결과 판단력의 결과로 model이 출력된다.
좋은 model일수록 좋은 추측 결과를 도출하며, model을 만드는 과정이 학습의 과정이다.

(2022/03/07) 작성

모델(model), 머신러닝(machine learning)의 중요 열쇠

일반적으로 사람이 먹을 수 있는 것과 먹을 수 없는 것을 판단 할 때에는 겸험에 의해 판단을 한다. 경험해보지 못한 음식이어도 유사 경험을 통해 추측 및 예측을 통해 결정을 할 수 있다.
과학에 있어서도 특정 현상이 관찰되면, 일단 해당 현상에 대해서 추측 및 가설을 세우게 되고, 검증을 위해 실험을 하게 된다. 실험을 통해 해당 가설의 진위를 가리게 된다.

여기서 무언가를 최종적으로 결정하는데 있어 판단하는데 있어 판단력이라는 것이 필요한데, 이 판단력을 기계에 부여하는 것이 바로 기계학습이며, 여기서 판단력은 model이다.
좋은 model일수록 좋은 추측과 좋은 결정이라는 결과를 도출해낼 수 있다.

(2022/03/08) 작성

머신러닝으로 문제해결하고 싶은 일상의 문제 생각해보기

https://bit.ly/ml-other-plan

자영업자

• 환경

• 불만족

• 꿈

이번 포스팅에서는 현재 서비스 중인 Angular web app이 iOS 모바일 단말기에서 정상적으로 동작하지 않는 문제에 대해서 작성해보려고 한다.

[Issue]

브라우저에서 디버깅해본 결과, 위의 ERROR를 확인할 수 있었다.
현재 Promise polyfill과 zone.js가 로드되는 과정에서 문제가 되고 있다. 프로젝트 내에서는 zone.js가 로드된 다음에 Promise polyfill가 로드되고 있지만, 이 문제를 해결하기 위해서는 Promise polyfill이 로드된 다음에 zone.js가 로드되어야 한다.
그 이유는 Zone.js의 ZoneAwarePromise가 다음에 로드된 Promise polyfill에 의해 Overwritten되기 때문이다.

[Solution]

현재 프론트엔드 프로젝트의 src/polyfills.ts의 코드를 보면, import 'zone.js/dist/zone'; statement를 확인 할 수 있다. Promise polyfill 다음으로 zone.js를 로드하기 위해서는 앞서 언급한 statement를 main.js로 이전해서 작성해줘야 한다.

(위의 Solution을 적용한 뒤에 정상적으로 동작을 하는지 확인이 필요)

[Promise polyfills과 zone.js의 역할]

Promise polyfills

비동기 코드의 장점을 살리면서 콜백지옥(callback hell)을 피하기 위해 ES6 표준 spec에 포함되어있는 Promise 패턴을 사용한다. 이 Promise polyfill을 사용해서 Promise가 지원되지 않는 브라우저에서 사용될 수 있도록 해야한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

zone.js(Zones)

Zones는 Angular의 Change Detection을 위해 중요한 역할을 한다. Angular에서는 click, change, input, submit과 같은 사용자에 의한 이벤트와 XMLHttpRequest를 통한 원격 서버로부터의 데이터 취득, setTimeout과 setInterval을 통해 앱의 상태를 변화시키고 있다.
Angular에서는 화면을 업데이트하는데 위와 같은 비동기 처리를 사용하고, 로직이 작성되어있는 ts 파일의 변수가 HTML Template에 바인딩되어 ts파일내의 변수의 값이 업데이트되었을때 Template내의 값도 같이 업데이트된다.

이처럼 별도로 프레임워크에 변화가 일어났다는 작업을 하지 않아도 Angular는 알아서 처리를 해주게 되는데, 이때 중요한 역할을 해주는 것이 바로 Zones이다.
Angular의 Zones의 onTurnDone 이벤트가 발생할때마다 전체 어플리케이션에 대해 Change Detection을 수행하게 되고, onTurnDone 이벤트는 Angular의 NgZone이 발생을 시킨다.

ref. Zones를 이용하면, 해당 Zones(JavaScript Execution context)가 실행되는 시점에서 여러 이벤트들을 hooking할 수 있다.

(자바스크립트의 실행 영역을 직접 나누는 것을 도와주기 때문에 여러가지 이벤트들을 hooking하는 것이 가능)

이러한 변화감지는 Zones 덕분에 가능한 것이다.

이처럼 Zones는 Angular가 DOM을 언제 업데이트해야 하는지 쉽게 발견할 수 있게 도와주는 역할을 한다.

이번 포스팅에서는 실제 업무에서 master branch를 base로 hotfix branch를 끊어서 작업하면서 겪었던 문제에 대해서 작성해보려고 한다.

Hotfix branch에서의 작업

이번에 프로모션 페이지 컴포넌트 작업을 stage를 base branch로 두고 작업을 했었다. 이렇게 작업을 하게 되면, 개별 프로모션 페이지 컴포넌트 작업내용 뿐만 아니라 stage에서 여지까지 merge되었던 작업내용들까지 같이 master branch로 merge가 되기 때문에 master branch에서 개별 hotfix branch를 끊어서 작업을 해야했다.

그런데 local master branch에서 remote master branch를 pull해서 최신 상태로 업데이트를 한 뒤에 local master branch를 base로 새로운 hotfix branch를 끊어서 작업을 했는데, 여기서 문제가 발생했다.

local master branch와 remote master branch의 차이에 대한 이해

앞서 언급한 문제 상황에 대한 결론을 우선적으로 말하자면, local master branch는 현재 stage와 merged back된 상태이고, remote master branch는 stage에 merged back되지 않는 개별 branch 상태이다.
따라서 local master branch를 기반으로 hotfix branch를 끊게 되면, 작업 후에 remote master branch로 push를 하게 되면, merged back된 stage의 작업 내용들까지 같이 넘어가게 된다.

이러한 문제로 인해 hotfix branch는 반드시 origin/master branch를 base로 끊어서 작업을 해야한다.

origin/master를 base로 hotfix branch 작업

1
2

$ git checkout -b hotfix/promotion-page master (X)
$ git checkout -b hotfix/promotion-page origin/master (O)

Read More

프로모션 페이지 작업 회고

처음에는 금방 마무리될 줄 알았던 프로모션 페이지 작업이 생각보다 오래 걸렸다. 그래서 이번 포스팅에서는 오래걸린 이유와 코드리뷰를 통해서 배운점들을 위주로 정리를 해보려고 한다.
이번에 정리하는 포스팅은 정기적으로 코드를 작성할 때 참고하여 다음에 작성하게 될 코드에서는 같은 지적을 받지 않도록 해야겠다.

생각보다 작업이 오래걸린 이유

• 레이아웃 잡기

  이번에 작업이 오래걸린 이유 중에 하나는 레이아웃을 잡는데 시간이 많이 소요된 것이다.
  그렇게 복잡하지 않은 구조의 레이아웃이라 크게 고민을 하지 않고 마크업을 하고 스타일링을 했었는데, 예기치 못한 부분에서 레이아웃이 약간 어긋나버리는 경우가 생겼었다.
  이번을 계기로 레이아웃을 잡는 연습을 좀 해야겠다는 생각이 든다.

• 해상도에 따른 이미지 태그와 border 사이의 갭

  이전에 이미지 태그를 사용해서 작업을 했을 때 이미지 태그의 하단에 갭이 생겨서 vertical-align 속성을 활용해서 해결을 한 적이 있었는데, 이번에는 이미지 클릭시에 이미지 태그 주변에 border-line을 표시하는 이벤트를 처리하면서 또 다른 문제에 직면했다.

  그 문제는 border와 이미지 태그 사이에 약간의 갭이 표시되는 문제였다. 해상도에 따라 갭의 위치와 두께가 지속적으로 변해서 어떻게 해결을 해야하나 고민을 했었다.
  처음에 시도한 방법은 이미지 태그를 사용하지 않고 div 태그를 사용하는 것이었다. div태그의 배경으로 이미지를 처리하고 div에 border-line을 넣어주었는데 약간의 갭이 생기는 문제는 해결되었지만, 클릭하고 border가 생겼을때, 내부의 이미지가 좌측하단으로 살짝 밀리는 느낌이 있었다. 지금 생각해보면 배경을 설정할때 별도의 위치 속성에 center를 주었다면 해결 할 수 있었을 것이라고 생각한다.

  두 번째로 시도한 방법은 이미지 태그에 배경을 주는 것이었다. 기존의 코드에서 CSS로 이미지 태그에 배경을 넣어주었는데, 정말 거짓말처럼 이전에 생겼던 문제가 발생하지 않았다.
  정말 사소하지만 혹시나 다른 분이 작업을 하다가 나와 같은 문제가 생긴다면, 같이 공유해도 좋을 것 같다는 생각이 들었다.

• Angular 라이프 사이클 훅

  

  이번에 작업을 하면서 제플린 디자인 시안을 받아서 작업을 하였는데, 디자이너 분이 적어주신 개괄적인 디자인 시안에 대한 내용을 제대로 확인하지 않아서 금요일날 업무를 마무리하고 최종적으로 디자이너분에게 확인을 할 때 수정해야 되는 부분이 갑자기 생겨서 부랴부랴 수정을 했었다. (다음부터는 작업 전에 제대로 좀 확인해야 될 것 같다)

  수정해야되는 부분 중에 한 가지가 페이지가 초기에 로드되었을 때의 이벤트 처리를 하는 부분이었는데, Angular의 라이프사이클 훅 메서드에 대한 이해가 부족해서 해결을 하지 못했었다.

  페이지가 처음에 로드되었을 때 정적 페이지에 있는 비디오가 클릭이벤트를 통해서 자동으로 재생이 되도록 처리해야 되는데, 나는 처음에 ngOnInit 메서드 내에서 클릭해야 되는 DOM 요소를 클릭하도록 처리를 하였었다.
  하지만 클릭시에 호출되는 이벤트 함수 내에서 비디오 태그 DOM 객체가 사용되었는데, ngOnInit메서드 내에서는 아직 컴포넌트 뷰가 초기화되지 않은 상태여서 정상적으로 이벤트 함수가 실행되지 않았었다.

  (정돈님이 피드백 주신 내용)
  이외에도 muted가 적용되면, 별도의 interaction 없이 자동재생이 가능하도록 처리를 할 수 있다. muted가 속성으로 적용되지 않는 경우에는 직접 ts파일 내에서 muted 속성을 지정해줘야 하는 경우도 있다.

코드리뷰

이번 코드리뷰를 통해서 남들과 협업 할 때 어떻게 하면 코드를 좀 더 가독성있게 작성할 수 있을지에 대해서 배울 수 있었던 것 같다.

• index를 통해서 값을 표현하지 않기

  소제목만 보면 무슨 말인지 알기 힘들지만, 말 그대로 특정 배열에서 값을 가져올 때 단순히 index값으로 접근하지 않고, 기본 메서드나 정규표현식으로 필터를 해서 값을 추출하는 방식으로 코드를 작성하는 것이 가독성 측면에서 좋다는 피드백을 받았었다.

  정돈님이 업무할 때 말씀하신 내용 중에 하나가 주석을 달아야 할 정도의 코드라면 좋지 못한 코드라는 내용이 있었다. 생각해보면 가장 좋은 코드는 주석없이도 코드만 보더라도 깔끔하게 이해되는 코드인 것 같다.

  index를 통해서 값을 읽어오게 되면 처음 코드를 보는 개발자의 입장에서는 왜 이렇게 접근을 했는지 한 번 더 생각해야 되는 경우가 생긴다.
  하지만, 기본적으로 제공되는 메서드나 정규표현식을 사용한다면, 아마 다른 개발자 분들이 볼 때 직관적으로 이 코드가 왜 이렇게 작성이 되었는지 한 눈에 파악하기 쉬울 것이기 때문에 이 피드백은 다음에 코드작성시에도 유의하면 좋을 것 같다.

새로운 환경과 새로운 습관

뭐 예상했던 부분이지만, 일을 시작하고 나서 매일매일 자기개발을 하던 습관이 시들해지고 있다.
아직 새로운 환경에 적응하는 시기라는 이유로 합리화를 하고는 있지만, 그래도 경험상으로 비춰보면 이러한 자기 합리화가 또 다른 나 자신의 안일함 조장한다고 생각한다.

그래서 고정적으로 한 가지 습관을 만들고자 한다.
바로 매주 업무를 통해서 배웠고 느꼈던 점에 대해서 일요일마다 나의 블로그에 포스팅하는 것이다.

업무에 대한 구체적인 내용은 적을 수 없지만, 개괄적으로 어떤 업무를 맡게 되었고, 그 업무를 진행하면서 어떤 점을 배우게 되었는지, 그리고 향후에 그 업무를 처리하기 위해서 어떤 부분에 대한 추가 학습이 필요한지에 대해서 내용을 정리해보고자 한다.

위의 내용들을 정리해두면 평일에 업무가 종료된 후에 새롭게 학습한 내용에 대해서 정리를 할 수 있게 되고, 그 다음 피드백을 할 수 있게 되어 선 순환 구조가 될 수 있을 것이라고 생각한다.

업무 1주차 : 프로모션 페이지

• 새롭게 담당하게 된 업무

  입사 후에 처음으로 담당하게 된 업무는 프로모션 페이지를 만드는 작업이다.
  모바일이 아닌 데스크탑 기준의 레이아웃 작업만 하면 되기 때문에 별도의 반응형 작업을 할 필요가 없다.
  이후에 모바일에 대해서는 별도의 프로젝트가 진행될 예정이라고 하셨다.

  이번 프로모션 페이지에는 정적인 페이지에서 사용자의 외부입력을 통해 페이지에 동영상이나 음성을 재생하는 기능을 포함하고 있다.

  Read More

RxJS를 처음 접하는 나와 같은 사람도 정말 쉽게 이해할 수 있도록 설명을 해주셔서 너무 유익했다.

모든 어플리케이션은 궁극적으로 상태머신들의 집합

Input(입력값)이 들어오면 logic을 통해 state가 업데이트되고, 업데이트된 state는 logic을 통해 Output(결과값)이 나온다.

RxJS

RxJS는 비동기 처리를 원할하게 할 수 있도록 도와주는 데이터 스트림으로 정의할 수 있다.

RxJS를 학습하기 위해서는 여러 새로운 용어들이 등장한다.(개별적으로 정리해서 공부)

동기/비동기 방식의 사용

동기 방식은 흐름이 그대로 가기 때문에 흐름을 쉽게 파악할 수 있지만, 비동기 처리는 굉장히 느린 처리나 사용자로부터 빠르게 interaction을 받아와야 하는 경우 그리고 높은 퍼포먼스가 요구되는 상황에서 사용이 된다.

RxJS의 역할

RxJS이외에도 Callback, Promise, Generator, Async/Await과 같은 표준을 사용하여 비동기 처리를 할 수 있는데 왜 굳이 RxJS를 사용해야 될까?

Callback함수를 사용해서 비동기 처리를 하는 경우, 에러에 대한 처리가 어렵고, 콜백 헬등의 분제가 발생한다.
Promise를 사용하는 것이 좀 더 나은 방법이긴 하지만, 한 번에 하나의 데이터를 처리하기 때문에 연속성을 갖는 데이터를 처리할 수 없다는 점과 서버로 보낸 요청을 취소할 수 없다는 단점이 있기 때문에 Observable을 사용하여 위의 단점을 보안해서 비동기 처리를 할 수 있다.

그리고 RxJS는비동기 처리 영역, 데이터 전파, 데이터 처리를 담당하며, 일관된 방식으로 안전하게 데이터 흐름을 처리하는 라이브러리이다.
여기서 일관된 방식이란 입력된 값의 타입에 따라 각 각 따로 처리를 하지 않고 하나의 방식으로 처리를 할 수 있다는 말이다.

• [참고] 입력값에 따른 데이터 처리

  개발자가 처리하는 입력값에는 어떤 것들이 있을까?
  (1) 배열 데이터, 함수 반환값 : 동기 데이터를 처리하는 방식
  (2) 키보드/마우스 입력, 원격지 데이터, DB 데이터 : 비동기 데이터를 처리하는 방식

  위와 같이 RxJS이외의 Callback, Promise, Generator, Async/Await과 같은 표준을 사용하여 비동기 처리를 하게 되면, 데이터 처리 방식이 제각각이기 때문에 각기 다른 방식으로 처리를 해줘야 한다.

  하지만 RxJS는 동기/비동기와 관계없이 데이터를 시간축을 기준으로 연속적인 데이터 스트림으로 처리한다.

  Read More

이미 MERN(MongoDB,Express, React (+ Redux), NodeJS)의 구성으로 프로젝트를 진행해본 경험이 있기 때문에 Angular의 사용에 익숙해지면 좀 수월해질 것 같다.

그럼 Angular에 중점을 두고 MEAN의 구성으로 프로젝트를 만들어가면서 Angular의 사용에 익숙해지도록 해보자.

MEAN

M - MongoDB
E - ExpressJS
A - Angular
N - NodeJS

Angular에서 반복적으로 자주 사용되는 부분에 대해 복습을 하자.

컴포넌트의 selector는 snake case로 작성

template에서 커스텀 컴포넌트를 사용하는 경우, 각 컴포넌트에 정의되어있는 selector를 사용한다.
이 selector는 snake case로 작성하도록 한다.

@NgModule - declarations

상위 컴포넌트의 template 내에서 외부에서 작성한 커스텀 컴포넌트를 사용하기 위해서는 상위 컴포넌트가 정의되어있는 module decorator의 declarations에 정의해줘야 한다.
component가 아닌 moudle을 포함시키는 경우에는 imports에 module을 추가해준다.
exports는 외부에서 특정 컴포넌트를 사용하도록 해줄때 컴포넌트를 정의하는 부분이다. (확인필요)

@input() 데코레이터

상위 컴포넌트 템플릿에서 하위 커스텀 컴포넌트의 속성으로 상위 컴포넌트의 속성값을 넣어주는 경우,(React에서 부모 컴포넌트가 자식 컴포넌트에 props를 넘겨주는 것과 같은 경우) 하위 컴포넌트의 로직이 정의된 컴포넌트 클래스 내에 해당 속성의 변수를 정의하고 앞에 @input() 데코레이터를 사용해서 정의해준다.

@output() 데코레이터

자식 컴포넌트에서의 이벤트를 통해 부모 컴포넌트의 클래스에 정의된 속성값을 업데이트하는 경우,(React에서 자식 컴포넌트가 부모 컴포넌트로부터 이벤트 props를 전달받아 이벤트를 통해 부모 컴포넌트의 상태 데이터를 업데이트 하는 것과 같은 경우) React와 같이 부모 컴포넌트에서 속성에 대한 업데이트를 위한 함수를 자식 컴포넌트에 emitter를 통해 전달을 하고 있다. 자식 컴포넌트 클래스에서는 EventEmitter 인스턴스 변수를 @Output 데코레이터와 함께 선언하고 EventEmitter 인스턴스가 사용되는 함수를 정의한다.

Read More

2021/06/12 단방향 바인딩과 양방향 바인딩 ~ Update

Angular 프로젝트의 전체적인 실행흐름 이해하기

Angular는 정해진 틀 안에서 구조화되어있기 때문에 사용하기 위해서는 어떤 흐름으로 컴포넌트가 정의가 되고 실행되는지 이해가 필요하다.
ReactJS는 라이브러리로 개발자가 폴더를 만들어서 직접 구조화시켜줘야 되지만, Angular는 플랫폼으로 이미 구조화된 틀이 있다는 차이가 있다. 하지만 React와 Angular 모두 컴포넌트 기반의 개발을 한다는 점에서 같다.

• src/index.html
  React와 같이 Angular의 src 폴더에 정의된 index.html 파일을 보면, 별다른 script와 style을 로드하는 부분이 없고 webpack을 통해 번들링해서 index.html에 정의된 부분에 주입해서 보여준다.

• src/main.ts
  프로젝트를 실행하게 되면 가장 먼저 호출되는 script 파일이 main.ts 이다.
  이 파일에서 중요한 부분은 AppModule(root module)을 실행하는 부분인데, platformBrowserDynamic 메서드와 bootstrapModule 메서드가 호출되고 있음을 알 수 있다.

  paltformBrowserDynamic : Angular가 작성한 코드를 컴파일해서 실행할 수 있는 JS 코드로 만들어주는 메서드이다. (브라우저에서 동적으로 컴파일한다)
  Angular는 서버나 브라우저 등 다양한 환경에서 실행될 수 있도록 rendering과 compile 프로세스가 분리되어있다.

  –aot(ahead of time compilation) 옵션을 사용해서 실행을 하면, 메서드를 다르게 해서 실행할 수 있다.

• src/app/app.module.ts

  app.module.ts 파일은 앞서 살펴 본 main.ts에서 실행된 root module인 AppModule을 정의한 파일이다.
  class에 @NgModule 데코레이터로만 정의가 되어있는데, 이는 Angular module로 정의하는 데코레이터이다.

  데코레이터 내에 정의된 속성 중에 bootstrap을 살펴보면 root component인 AppComponent가 정의되어있음을 알 수 있다.

• src/app/app.component.ts
  app.module.ts에서 bootstrap에 정의된 컴포넌트는 index.html에 주입해주는 컴포넌트이다.
  컴포넌트 데코레이터를 보면 selector 속성에 app-root값으로 설정이 되어있다. 이는 index.html에 정의된 <app-root>에 주입되는 컴포넌트라는 것을 의미한다.

  Read More

Angular가 등장하게 된 배경

Angular가 등장하게 된 배경을 이해하기 위해서는 우선 웹 개발의 변화에 대한 이해가 필요하다.
변화는 Ajax - SPA(MVC) - Web Component 순으로 변화가 되었다.

Ajax를 사용하지 않는 웹 페이지의 경우, 브라우저에서 URL을 서버에 요청하게 되면 서버가 data(서버의 사용자 세션에 저장)를 사용해서 HTML 웹 페이지를 만들어서 응답으로 보내준다.

Ajax의 등장이후에는 한 번의 페이지를 받아온 이후에 ajax를 통해서 DOM element를 조작해서 페이지를 업데이트한다.

버튼 클릭과 같은 사용자 입력이 있는 경우, 데이터가 필요한 경우 ajax를 통해 서버로 요청을 보내고 서버로부터 json, xml 형태의 응답을 이용해서 DOM element를 업데이트하게 된다.

ajax를 이용하면, 화면이 바뀔때마다 서버로 요청을 보내는 것이 아니라, JavaScript를 사용해서 동적으로 브라우저에 올라가있는 데이터를 이용해서 DOM을 조작하게 된다.

장점으로는 서버에 요청이 줄어들기 때문에 좀 더 빠르고 서버쪽 부담이 줄어든다.

하지만 규모가 큰 웹 어플리케이션에서 코드가 복잡해지고, 재사용이 어려웠기 때문에 코드에 대한 구조화가 필요해졌고, 매번 새로운 페이지를 서버로부터 읽어오게 되면, 리소스를 서버로부터 다시 읽어오고, 브라우저 렌더링 다시 하기 때문에 성능저하가 문제되었다.

위와같은 문제를 해결하기 위해 등장하게 된 것이 SPA라는 개발패턴이다. Ajax의 확장판이라고 이해할 수 있다.

SPA 개발패턴은 URL 경로에 따라 자바스크립트로 화면을 동적으로 그리는 것을 말한다. 이때 웹 어플리케이션의 구조를 잡기 위한 프레임워크가 필요하게 되었는데, 이때 등장하게 된 프레임워크 중에 하나가 AngularJS이다.

* AngularJS : 단일 페이지 웹 어플리케이션 개발을 위한 자바스크립트 프레임워크

하지만, AngularJS는 규모가 큰 어플리케이션의 개발에 있어, 성능이슈를 보이고 복잡한 지시자 문법이 개발시에 큰 어려움을 줬다.
이러한 어려움을 해결하기 위해 등장하게 된 개념이 Web Component 기반의 개발이다.
이 Web Component는 Custom element, Shadow DOM, HTML Import, HTML template의 종합적인 개념으로, 웹 플랫폼 자체에서 재사용이 가능한 컴포넌트 기반으로 개발하는 것이 가능해졌다.

이를통해 기존의 성능이슈와 개발 생산성 문제를 해결할 수 있었다. 이때부터 기존의 프레임워크였던 AngularJS가 플랫폼인 Angular2 혹은 Angular4로 발전하게 되었다.

Read More