Ionic, angularjs 를 이용한 웹소켓(WebSocket) 예제

웹

요즘 부쩍 웹 기술에 관심이 많아지고 있습니다.

웹 개발자가 너무 많아서 웹 하면 개발자로

롱런 못한다는 이야기도 들었지만 일을 해볼수록

웹 기술을 익혀 놓으면 써 먹을 때가 많다라는

생각이 계속 듭니다~ 특히나 웹-앱 간 하이브리드 웹앱이

참 매력적인 분야인 거 같습니다~

물론 제가 요즘 회사에서 웹 작업 위주로 하고

있어서 섣부른 판단일 수도 있지만 웹 관련 된

새로운 기술을 접할 때마다 놀라곤 합니다~

특히나 요즘은 AngularJS를 이용한 작업을

하고 있는데 애초에 제가 웹 개발을 해본적이

많이 없어서 절대적인 비교는 할 수 없지만

AngularJS 를 통한 화면 작업은 참 재미 있으면서도

좋은 예제도 많고,그 예제들만 잘 이용해도

어지간한 어플리케이션은 다 만들 수 있을거 같습니다

물론 아직 우리나라에서는 생소한 기술이지만

구글에서 AngularJS 예제를 검색해 보면

정말 많은 예제들이 있어서 작업하는데 많은

도움이 되는게 사실입니다~

Ionic

그리고 계속 작업을 하다 보니 역시나

제가 생각했던 기술이 있더라구요

바로 Ionic 인데 Ionic을 통해서 AngularJS 프로젝트를

생성할 수 있으며, 작업한 AngularJS 프로젝트를

안드로이드, 아이폰 어플로도 변환할 수도 있습니다.

아이폰 변환까지는 못해 봤지만 안드로이드 변환은

해봤습니다. 변환 작업을 하면 APK 파일이 생성되며

해당 파일을 안드로이드 스마트폰에서 실행하면

핸드폰에 설치가 되더라구요~~~

참 대단한 세상이고 대단한 개발자,

대단한 기술이거 같습니다 ㅎㅎㅎ

Ionic은 우연찮게 찾은 기술인데

앞으로 Ionic을 이용해서 개인적인

작업도 해 볼 생각입니다~

웹소켓

해당 작업을 위해서는 자바 서버와

웹 클라이언트가 필요합니다.

웹 클라이언트는 AngularJS를 통해서 구현했습니다.

자바로 구현한 웹소켓 서버입니다.

원래는 자바를 사용하지 않고

AngularJS로만 작업을 하려고

했는데 작업을 하다가 CORS

라는 엄청난 문제에 봉착했습니다.

CrossDomain 문제라고도 하던데..

간단하게 내용을 말씀드리자면 ㅠ

프로토콜이나 IP, 포트가 다른 서버 간

JavaScript 통신은 막는다... 

뭐 대충 이런 내용이더라구요..

예를 들면 제 로컬에서 JavaScript

함수를 이용해서 웹 페이지를 읽어오거나

로딩해 오려고 하면 그럴 수 없게 막아

막는다는 거죠... 해결 방법은 서버 쪽에서

응답 헤더에 뭔가 설정을 해줘야 된다고

하는데... 전 계속 client 작업을 해서

결국 결국.. 포기했었습니다. 그런데

생각해 보니 동일한 작업을 javascript만

사용하지 않으면 되더라구요... 그래서

제가 자바 서버를 구현해서 angularjs

client에서 자바 서버로 작업을 요청하면

자바 서버에서 해당 작업을 수행하는

형태로 구현하려고 웹소켓을 이용하게

됐습니다^^;;;;;;;;; 참 이렇게 하기까지

길고 기 여정이었습니다 ㅠㅠㅠ

AngularJS에서 ElasticSearch 데이터 조회(Select)하는 예제

AngularJS

회사에 오면 매일매일 앵귤러JS라는 놈과

싸우고 있습니다 ㅎ 네이버에서는 필요한

예제는 거의 찾을 수 없지만 구글에서는

넘쳐나고 있기 때문에 엄청난 구글링이

수반되는 작업이지요 ㅎ 요즘에는 저장된

Data를 읽어 와서 웹 화면에 뿌려주는

작업을 하고 있는데 서버나 DB에

저장된 data가 아니라 엘라스틱서치라는

놈에 저장된 data를 읽어와서 화면에

뿌려주어야 합니다~

ElasticSearch

해외에서는 AngularJS가 국내보다

훨씬 활성화 되어 있다고 느끼는게

아직 대중화 되지 않고 검증 중인

단계에 프레임워크나 오픈소스들도

어지간하면 다 AngularJS와 연동되는

예제는 있다는 것을 보면서 느낍니다.

아래 링크된 글은 제가 예전에 작성한

AngularJS와 ElasticSearch 관련

포스팅입니다~ 참고해 보세요

AngularJS에서 ElasticSearch 사용하기

앵귤러JS와 엘라스틱서치 연동 및 예제

계속 이야기를 하자면 naver에서 자바나

안드로이드를 검색하면 엄청나게 많은

자료가 조회되는 것처럼 구글에서

AngularJS나 ElasticSearch를 검색하면

정말 많은 결과들이 검색됩니다.

현재 대중화 되어 있고, 여기저기서 널리

사용되는 기술에 대해서는 네이버만

사용해도 원하는 결과를 쉽게 얻을 수 있지만

(Java나 Android 같은....)

제가 지금 다루고 있는 AngularJS나

ElasticSearch와 같이 아직 국내에서

널리 사용되고 있지 않은 기술에 대해서는

네이버에 자료가 거의 없다고 봐도

무방합니다 ㅠㅠㅠㅠ

말이 좀 샜네요 ㅎㅎ

여튼 AngularJS와 ElasticSearch 연동을 통해

data를 조회해온 화면부터 올려보겠습니다.

 

화면만 좋고 보면 크게 대단할 것도

없는 내용입니다 ㅎ 위에 검색된

데이터에 대한 설명을 하도록

하겠습니다. 일단 조회된 데이터는

우리나라 포탈에 뜬 최신 뉴스기사를

수집해온 결과들입니다. 제목과

기사내용, 기사작성일, 해당 기사의

URL 주소, 기사 제목, 카테고리 등의

내용들이 있겠지요~ 실제 위에 

화면에서도 보실 수 있습니다. 

 

그런데 해당 data의 총 크기는 위에서

보시는 것처럼 20g가 넘습니다.

그럴 수 밖에요 하루동안에만 나오는

뉴스만 해도 얼마나 많은데요 ㅎㅎ

여튼 저렇게 많은 data를 저장하는

건 기본이고 특정 조건에 대한

검색/분석 등이 가능해야 되는

상황입니다

(왜냐하면 빅데이터 프로젝트라서)

그러다 보니 기존에 널리 사용되고 있는

RDB(오라클, MySQL, MsSQL 등)로는

도저히 성능이 나올 수가 없습니다.

그래서 나온 대안이 저희는 엘라스틱서치

입니다~

일단 엘라스틱서치는 저장된 data의

대해서 자체적으로 Indexing 기능을

처리해 줍니다. 여기서 Indexing이란

저장된 Data에 대해 ElasticSearch

고유에 태깅이나 기법을 통해 사전에

미리 Data에 대한 정보를 가지고

있는 겁니다. 이렇게 함으로써

저와 같은 사용자 입장에서는 엄청나게

큰 Data에 대해서도 빠른 속도로

데이터의 조회 및 질의가 가능합니다.

물론 그냥 가져다 사용한다고

무조건 성능이 좋은 건 아니지만

방법을 찾고, 튜닝을 해가면 기존에

RDB에서는 나올 수 없는 퍼포먼스를

ElasticSearch에서 끌어낼 수 있습니다.

시작하세요! 엘라스틱서치 라는 책과

ElasticSearch 홈페이지에 나와 있는

설명을 기반으로 열심히 원하는 기능들을

구현하고 있습니다. 다양한 질의(오라클로

따지면 쿼리의 where절)를 AngularJS에서

날려 ElasticSearch에서 원하는 data를

가지고 와야 되는데 이 질의를 날리는

방법을 위주로 열심히 구글링 & 스터디

중입니다 ㅎㅎ 기본적인건 됐고, 이제

AngularJS로 멋지게 화면을 구성도

해야 됩니다~

AngularJS와 NodeJS간 HTTP 통신 예제(GET/POST 방식)

HTTP

얼마 전에 AngularJS와 NodeJS 간 통신하는

예제에 관한 포스팅을 했었습니다. 단순히

AngularJS 기반으로 개발된 HTML 페이지

에서 NodeJS를 호출하는 예제였는데

앵귤러JS의 $http를 이용한 HTTP 통신

예제였습니다. 단순히 호출만 하는 예제였지요

>AngularJS와 Node 간 통신<

오늘도 이 작업을 계속 했는데

작업을 하다 보니 HTML 페이지에서

NodeJS로 단순히 호출하는 것에서

끝나지 않고 파라미터를 보내야 되는

상황이 생겨서 또 이 거에 대해 오늘

하루종일 삽질 했습니다.

웹 페이지에서 노드JS로 호출할 때

파라미터를 줄 수 있을 거라 생각하고

찾아 봤지만 생각처럼 쉽게 방법을

찾지는 못했지만 결국은 찾았습니다.

HTML

화면 소스입니다.

CreateTopic 버튼을 누르면

createTopic() 함수가 호출되는 부분이

제가 작업한 부분에 해당합니다.

Controller

그럼 해당 페이지의 controller에 선언된

createTopic 함수가 호출됩니다.

위에 캡처 화면을 보시면 제일 마지막 라인에

$http.get('create', {params: parameters});

이 부분이 있는데 이 라인에서 NodeJS의

함수를 create라는 값을 key로 호출하게

됩니다. 그리고 그 뒤에 있는

{params: parameters} 가 NodeJS로

보내려는 파라미터에 해당합니다.

params라는 키고 parameters 라는

변수가 값으로 Json 형태로 노드JS로

파라미터를 보내주고 있습니다.

이 때 Parameters 라는 변수의 값은

그 위에 선언된 것처럼 amount와

description 이라는 키 값으로 각각

123,l 'test' 값이 json 형태로 선언

되어 있습니다. AngularJS나 json

형태에 익숙하지 않으신 분들은

이해 하기가 좀 난해할 거란 생각이 드네요

NodeJS

그리고 최종적으로 호출을 받는

노드JS 소스입니다.

위에 controller에서 create 라는 키로

요청을 보냈고, 위에 보시는 것처럼

NodeJS에 create라는 값을 받아

화면의 요청을 받게 됩니다.

그리고 안에 내용은 화면으로부터

받은 parameter의 값을 빼오는 부분입니다.

req 변수에 요청에 대한 정보가 담겨있고,

당연히 그 안에 파라미터도 담겨 있는데

가지고 올 때 req.query 를 통해 파라미터

전체를 받아온 후 화면에서 설정해준

키 값으로 amount와 descript 값을

읽어 왔습니다. 그 후 확인을 위해

console로 찍은 거구요~

이렇게 화면 화면에서 보내준 값을

받아왔구요 res.send 함수를 통해

화면에 응답을 보내주고 있습니다.

아직도 할 게 많지만 일단 또 어렵게

어렵게 한 고비를 넘었습니다. 물론

아직 남은 고비가 훨씬 많습니다 ㅋ

AngularJS에서 ElasticSearch 사용하기(데이터 검색 및 저장)

ElasticSearch

현재 참여하고 있는 빅데이터 프로젝트에서

수집된 data를 DB에 저장하지 않고

엘라스틱서치에 저장하고 있습니다.

수집된 data를 elasticsearch에 저장하면

어느 정도 선까지는 자동으로 indexing을

해주고 그럼으로 인해 검색에도 유리하다고

합니다. 그리고 무엇보다 좋았던 건 저희가

사용하고 있던 다른 오픈소스보다 설치나

실행이 쉬웠습니다 ㅎㅎㅎ

하지만 역시 문제는 사용 방법을 알아야

되고, 최종적으로는 ElasticSearch에서

제공되는 기능을 AngularJS에서 사용해서

화면에 결과로 보여줘야 한다는 점입니다.

위에 책을 보면서 study를 하고 있는데

어제 ElasticSearch에 data가 저장되는

구조에 대해 이해하는데 결정적인 역할을

해서 올려 봤습니다 ㅎㅎ 필요한 내용 딱

두 장만 읽은게 다입니다 ㅎㅎ

앞으로도 많이 참고해야겠지요~

그리고 구글링을 통해 찾은 AngularJS

예제를 통해 웹 화면에서 ElasticSearch에

붙어 data를 저장하고 검색하는 예제도

수행을 해봤습니다~ ElasticSearch

명령어 체계를 좀 더 이해할 필요가

있을 거 같습니다.

AngularJS

앵귤러JS에서 ElasticSearch를

호출할 때 사용하는 함수입니다.

검색과 data 저장하는 함수입니다.

data를 엘라스틱서치에 저장하는

함수입니다. 일단 하드코딩으로

했지만 최종적으로 웹 화면에서

해당 값들을 입력 받을 겁니다.

그리고 위에 저장된 값을 조회하는

함수는 아래에 있습니다.

먼저 위에 예제는 EalsticSearch에

저장된 data를 조회할 때 특정 조건을

주는 예제입니다. ElasticSearch에

데이터가 저장되면 index, type, id의

값들이 생성되는데 사용자가 직접

입력할 수도 있고, 저장할 때 입력해 주지

않으면 엘라스틱서치에서 자동으로

생성을 해줍니다. 그럼 이 때 생성된

값들로 data를 조회하려고 할 때

AngularJS에서는 위의 주석처리된

내용들처럼 index를 조회할 때는

index : 조회하려는 index값

​타입으로 조회를 하시려면

type : 조회하려는 type 값

형식으로 지정을 해줘야 됩니다.

그리고 실질적인 data는 _source

키 밑에 저장이 되는데 이 값으로

data 조회를 하기 위해서는

q: 검색어

형태로 주면 _source 키 밑에

data를 대상으로 검색이 됩니다.

그리고 최종 결관는 위에 소스

에서 정상처리 기준으로 

resp.hits.hits 로 접근하면 됩니다~

위에 화면이 elasticsearch에

저장된 data를 조회한 결과입니다.

indexrk 값이 2014-12-31 인 값이

처음에 저장한 data입니다~

[빅데이터프로젝트] AngularJS + ElasticSearch 연동 방법 및 검색 예제

빅데이터

여전히 빅데이터 프로젝트에 참여 중입니다.

그리고 여전히 이 기술, 저 기술 설치해 보고

구동해 보고, 예제 실행해 보고 있습니다.

하지만 이제 시간이 지나감에 따라 결과도

내야 되는 시점이 오고 있다는 걸 느낍니다

점점 압박이 들어 오네요 ㅠㅠㅠㅠ

요 며칠 계속 붙자고 있었던

ElasticSearch

형태소 분석기를 조사해 보니 수집, 인덱싱,

분석 등의 단계를 거치는데 각각의 단계를

어떻게 처리할 것인가 영어이냐 한글이냐에

따라 다양한 방법들이 존재했습니다.

그런데 형태소 분석을 함에 있어서

한글을 분석해 주는 api는 영어에

비해 맞지 않았고, 정확도도 떨어지는

거 같았습니다. 그래도 다행히

방법이 전혀 없지는 않았습니다.

카이스트에서 만든 java/python/R

버전에의 형태소 분석기가 일단

1차 후보로 뽑혔었는데 하둡을 통한

분산처리와 인덱싱 작업을 고려하면서

ElasticSearch 쪽으로 많이 기운 상태입니다.

ElasticSearch 자체에서 인덱싱을 해주고

검색 기능까지 제공을 해주더라구요

그리고 무엇보다 ElasticSearch 전용

한글 형태소 분석기도 있었구요~

무엇보다 현재 R언어는 되도록 사용하지

않으려고 하고 있고, 현재까지 정해진

아키텍처에서도 ElasticSearch가

잘 맞는 걸로 생각되고 있습니다.

엘라스틱서치 다운

위에 링크된 사이트로 가면 엘라스틱서치를

내려 받을 수 있습니다. 압축 풀고 bin 디렉토리에

있는 ealasticsearch.bat를 실행하니 윈도우에서도

바로 실행 됐습니다!!!! 리눅스에서도 tar 압축을 푸니

리눅스에서도 한 번에 정상적으로 실행됐습니다!!!

이렇게 고마울 수가 ㅠㅠㅠㅠ

하지만 전 한글 형태소 분석기인 은전한닢을

엘라스틱서치에 연동해야 되서 좀 더 추가적인

작업을 했습니다.

링크1

링크2

참고한 사이트 두 개 입니다.

위의 내용대로 설치한 후

bin 디렉토리에 가서

./elasticsearch -Djava.library.path=/usr/local/lib

위에 명령어를 쳐주면 정상 구동 됩니다~

정상적으로 구동되면 위와 같은 내용이 뜨고,

엘라스틱서치 서버가 하나 뜨는데 9200 포트를

사용합니다! 9300 포트도 있는 거 같은데

정확한 기능은 아직은 모르겠습니다 ㅠㅠ

참고로 전 elasticsearch 1.6 버전을 설치했습니다.

(현재 최신 버전은 2.x.x)

이유는 한글형태소분석기 은전한닢이 엘라스틱서치

1.6에서 돌아가는 거 같더라구요...

굳이 은전한닢을 설치하지 않아도 엘라스틱서치

내부적인 명령어로 한글 저장이나 검색은 되지만

여러 제약사항이 있어서 깔끔하게 은전한닢

설치했습니다~

Angular JS

리눅스 터미널 상에서 엘라스틱서치 명령어가

정상적으로 돌아가는 것까지 확인은 했지만

저희는 이 기능을 웹 화면에서 서버에 호출해야

됩니다~! 그리고 더 문제는 이 화면 개발 작업을

기존에는 사용하지 않던 AngularJS라는 놈을

사용해서 개발해야 됩니다.

그래서 요즘 좀 공부하고 있는 녀석이죠...

저는 자바스크립트를 이용해서 개발해 본적이

없어서 이 angularJS라는 놈의 장점을

확연하게 느낄 순 없지만 JavaScript 를 사용했던

분한테 물어보니 이 AngularJS라는 놈이 좀

신기한 놈이긴 한 거 같습니다 ㅎㅎㅎ

AngularJS를 공부해 보셨던 분이라면 아시겠지만

scope, controller, 지시자, directives, module 등

새로운 개념들이 많이 나옵니다.

위에 사진이 현재 저희의 AngularJS

프로젝트의 구성입니다.

확실하게 MVC 패턴으로 나뉘어 있고,

HTML5과 JavaScript 언어를 사용하고

이클립스가 아닌 인텔리J라는 IDE를

사용하고 있습니다.

완전히 저희 회사에서 저희 프로젝트만

이단아가 되어 가고 있습니다 ㅎㅎㅎ

하지만 분명히 신기하고 배울 가치가

있는 녀석입니다!!!!

확실히 기술이란 건 대단한 거 같습니다!

어찌 되었든 위에 캡처한 사진이 서버에 떠있는

ElasticSearch 서버와 웹이 통신해서

얻어낸 결과를 화면에 출력한 결과입니다.

이틀 동안 삽질해서 얻은 결과입니다 ㅠㅠ

전체적으로 두 개의 단락이 있는데 

첫 번째 단락은 ElasticSearch에

저장되어 있는 내용을 출력한 결과이고

마지막 한 줄은 웹과 엘라스틱서치 서버가

최초 연결 시 통신한 결과입니다~~~

이제 과제는 은전한닢의 결과도 얻어오는

겁니다... 그리고 화면에서 데이터를 저장하고

더 나아가서는 HDFS에 저장된 내용을 읽어와

동일한 작업을 수행한 후 화면에 결과를

보여주는 겁니다... 정말 끝이 없네요 ㅎㅎ

그러다 보니 벌써 이번 주도 끝이 나고

있습니다 ㅎㄷㄷㄷㄷㄷ

디테일한 내용은 다음에 시간이 되면

올려 보도록 하겠습니다!

일단 퇴근 ㅋㅋㅋㅋㅋ

[HTML5] 웹소켓(WebSocket), AngularJS, Jetty 서버를 이용한 동적 웹 페이지 개발

요즘 프로젝트를 하면서 부쩍 동적인 화면 구성에

관심이 많이 생겼습니다. 정확히는 관심이 생겼다기

프로젝트여서 관심을 가질 수 밖에 없는 상황이지만

이게 할 수록 재미가 생기네요~ 웹 소켓이나

AngularJS라는 전에는 해보지 않았던 것들도

새로 알게 됐습니다! 웹소켓은 HTML5가 나오면서

웹 브라우저를 통해 양방향 소켓 통신이 가능한

기술이다란 이야기는 들어 봤지만 실제로 해보니

신기하기도 하지만 아직도 잘 모르겠네요 ㅎ

아 그런데 위에서 말한 웹 페이지의 동적화면 구성에

있어서는 AngularJS를 사용했습니다.

JavaScript를 이용해서 웹 화면을 작업하는데

있어서 인력, 시간을 확연히 줄이게 해주는

기술이라고 합니다~ 아직 간단한 예제만

해봤지만 몇 줄 만으로 동적인 화면 구성이

가능한데 웹 개발을 해보신 분이 AngularJS를

사용해보니 신기하기도 하고 편하기도 하답니다.

일단 확실한 건 전에 비해 코드량을 엄청

줄일 수 있다고 하네요~

아 그리고 결정적으로 구글이 만든 기술입니다!

일단 기존에 웹 페이지 제작에 있어서 문제점은

화면 갱신을 위해서는 화면을 다시 리프레쉬 해야 된다.

어설프게 들은 얘기를 꺼내자면 예전에 AJAX나

아이프레임 등을 통해 전체 화면이 아닌 필요한

부분만 갱신하는 기술이 있었다고 들었습니다.

(정확히는 모릅니다 ㅠㅠ)

그런데 이 것도 어찌 되었든 뭔가 문제가 있었고,

그런 문제/단점 등을 보완해서 나온 것이

AngularJS 입니다. 철저한 MVC의 분리와

데이터와 화면에 binding을 통해 모델 값이

바뀌면 바로 View에도 적용이 됩니다.

정말 간단한 예제를 하나 올려 봅니다.

기존 HTML 언어와 큰 차이는 보이지 않습니다.

하지만 차이는 있습니다~!

ng-controller나 ng-click, 그리고 {{xx}} 형태의

중괄호, ng-model 이 보입니다. 이게 AngularJS의

모든 건 아니고, 기존에는 없던 개념들 중에 일부입니다.

위와 같이 화면을 구성하고 WebsocketClientController.js를

구성해주면 동적 화면 구성이 가능합니다. 물론

WebsocketClientController.js 개발을 위해서는

AngularJS를 좀 공부하셔야겠죠~! 

모니터링 그래프 데이터를 얻기 위해 요청/응답의 무한 반복

아 당연히 응답을 받기 위해서는 요청을 보내야겠죠!

접속하고 싶은 인터넷 주소를 쳐야(요청)

해당 주소의 웹 페이지(응답)를 받는 거니깐요!

하지만 상황에 따라서는 굳이 요청이 필요없는

경우도 있을 수 있습니다. 무조건 데이터를 받는

경우나 계속 값을 확인하고 최신의 값을

화면에 보여주는 경우는 요청 없이 서버 쪽에서

바로 화면으로 값을 보내줘도 되는 겁니다.

요청이라는 단계를 생략하니 당연히 부하도

덜 할 것이고, 속도도 빨라질 겁니다.

이러한 방식을 구현하기 위해 사용한 것이

웹 소켓(WebSocket)입니다.

간단히 말하면 요청 없이 서버에서 클라이언트로

바로 데이터를 보내줄 수 있으며, 당연히 클라이언트에서

서버로도 데이터를 보낼 수 있습니다.

즉 양방향 통신이 가능해 집니다.

웹 소켓을 이용한 자바 서버 예제입니다.

웹 소켓을 이용해서 서버를 띄우는 방법은

여러가지가 있는 듯 합니다.

그 중에 전 제티를 이용해서 서버를

띄웠습니다. 예제를 찾다가 구동되는 걸

찾은게 jetty 예제입니다 ㅎㅎㅎㅎ

위의 자바 예제로 웹소켓 서버를 띄우고,

AngularJS로 웹 페이지로 클라이언트로

접속해서, client의 요청이 없이 제티 서버 쪽에서

웹으로 데이터를 주는 간단한 예제를 구성해

봤습니다. 여러 웹 페이지를 띄워

하나의 제티 서버로 붙어서 서버로부터

데이터를 받는 동안 다른 웹 페이지에서는

요청을 보내 응답을 받아 보기도 했습니다.

정말 나와 있는 기술들을 보면 놀라울 뿐입니다!

있는 기술 잘만 사용해도 괜찮은 거 하나는

만들 수 있을 거 같고, 정말 실력 좋으면

요즘 트렌드인 1인 기업도 가능하지 않을까요?ㅎ

좀 오버하긴 했지만 어찌 되었든 요즘 프로젝트를

하면서 정말 세상에는 기술들이 많구나라는 걸

매일 매일 깨닫고 있습니다.

따라가기 벅차네요 ㅠㅠㅠㅠ