알고리즘을 좋아하는 나

일단 Node.js를 사용하려면 어떤 것인지 이해를 하고 사용해야 될 것이다.

Node.js란?

공식 홈페이지에서 

Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 합니다.

Chrome V8 Javascript 엔진은 구글에서 개발된 오픈소스 JIT 가상 머신형식의 자바스크립트 엔진이다.

JIT는 실시간 컴파일 방식이다.

크롬 브러우저와 안드로이드 브라우저에 탑재되 있다.

ECMAScript(ES) 3rd Edtion 규격의 C++로 작성되어 있으며, 독립적 실행이 가능하다.

Node는 크롬이 망하지 않는이상 망하지 않을것으로 생각된다.

Node.js의 장점은 이벤트기반,논 블로킹 I/O 모델을 사용한다는 것인데,

빠른 속도로 처리를 가능하다.(단일 스레드사용)

이벤트란 프로그램에 의해 감지되고 처리될 수 잇는 동작이나 사건이다.

블로킹은 함수를 호출하고, 그 결과가 나올때까지 함수를 반환하지 않는것이다.

논 블로킹은 함수를 호출하고 기다리지 않고, 바로 함수를 반환하는 것이다.

위에 대한 내용은 코드를 작성하면서 설명할 따로 보충 설명하겠습니다.

설치는 검색하면 많이 나오니 알아서 해주세요.

오늘은 Hello World를 콘솔과 웹에 띄워 보겠습니다.

https://github.com/KSH-code/nodejs-tutorial/

에 코드를 올려놨습니다.

또 MS를 방문했다.

모임 기간 : 6월 25일 (일) 13시 00분 ~ 18시 00분

모임 장소 : [한국마이크로소프트] 서울 종로구 중학동 서울특별시 종로구 중학동 19 더케이트윈타워 A동 11층

ERD세션을 시작하기전 40분정도 위의 내용을 들었다.

ERD를 이용한 DB 모델링는 용영환님이 (옥션블루 CTO) 발표하셨다.

웃음소리가 특이했다.

--------------

발표 내용

--------------

프로그램의 본질은 데이터다.

데이터의 흐름을 제어하기위해 프로그램을 만든다.

소프트웨어를 해부하면 크게 동작과 데이터로 나눌 수 있다.

모델은 데이터의 관계 흐름등을 추상화한 모형이다.

소프트웨어 모델링은 객체나 DB를 그림으로 표현하는 것이다.

하면 좋은점은

• 만들고자 하는 바를 명확하게 알 수 있다.
• 조금 더 잘 만들 수 있다.
• 이해하고 소통하기 편하다.
• 면접을 볼 때 좋다. (UML이나 ERD를 그리면 좋음)
• 보여 줄 때 좋다. (일하는 티를 내기 좋음)
• 만들고나면 뿌듯?
• RDBMS의 설계가 쉬워진다.

툴은 대표적으로 ER-win, Mysql Workbench가 있다. (나는 workbench를 평소에 사용해봄)

ERD에는 식별자가 있다.

ERD Symbol을 검색하면 나온다.

모델링에서는 DB를 Schema라고 한다.

식별자

실선 : PK

점선 : FK

RDBMS는 테이블간의 관계를 가지고

Nosql은 저장만한다.

알아야 할 용어

Identifying Relationship 식별관계

Mandatory 필수

Cascade : 연쇄

Identifying Relationship

FK가 PK로 지정되어 있는가

Mandatory는 참고 대상의 존재 여부

Foreign key options

RESTRICT 참고 테이블의 값을 변경을 거부

CASCADE 같이 삭제 또는 수정

NO ACTION 액션은 하나 실제로 적용은 안됨

정규화

관계형 데이터베이스의 설계에서 중복을 최소화하게 데이터를 구조화하는 프로세스를 정규화라고 한다.(중복을 제거) 

다시 되 돌리는걸 역정규화라 한다.

varchar은 변경될 수 있는 값

char은 고정된 값

Synchronize Model을 누르면 양방향으로 동기화가 가능함. (서버에서 누가 수정한걸 내 workbench에서 불러올 수 있고 내가 수정한걸 서버에 적용시킬 수 있다.)

성능을 위해 나중에 인덱스를 모아놓은 테이블을 생성해도 될거같음.

밑에는 실습 사진이다.

Vue.js 는 선언적 렌더링 방식이다.

 <script src="https://unpkg.com/vue"></script>로 임포트 하면 바로 사용이 가능하다.

라이프사이클이 존재한다.

직관적이다. 그래서 속도가 빠르다.

선언적 렌더링

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

Vue의 간단한 템플릿 구문이다.

{{}}은 Vue의 보간자이다.  검색해보니 Mustache 템플릿 인거같다.

태그(앨리먼트) 속성을 바인딩 할 수 있다.

<div id="app-2">
  <span v-bind:title="message">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
  }
})

여기서 v-bind는 디렉티브라고 한다.

v는 vue의 줄임말이다.

조건문과 반복문

조건문과 반복문도 아주 쉽게 사용할 수 있다.

<div id="app-3">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

js부분의 seen을 false로 바꾸면 p 태그가 출력이 안된다.

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  }
})

foreach를 이용한것 같다.

todo는 todos안에 있는 JSON Data를 차례대로 넣어준다.

app4.todos.push({ text: 'New item' }) New item도 추가된다.

사용자 입력 핸들링

v-on 디렉티브를 이용해서 이벤트 리스너를 첨부한다.

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: '안녕하세요! Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

reverseMessage는 말 그대로 문자열을 뒤집는다.

이 메소드는 DOM을 건드리지 않고 앱의 상태를 업데이트 한다.

Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공합니다.

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: '안녕하세요 Vue!'
  }
})

input에 아무값을 입력하면 p태그안에 값이 입력된다.

작동 순서는 input 입력 -> data.message에 대입 -> p태그에 출력

컴포넌트를 사용한 작성방법

컴포넌트는 Vue에서 중요한 기능이라한다.

재사용을 가능하게 한다. (구조 -> 블럭화)

컴포넌트 생성 방법이다.

// todo-item 이름을 가진 컴포넌트를 정의합니다
Vue.component('todo-item', {
  template: '<li>할일 항목 하나입니다.</li>'
})

todo-item은 태그네임이다.

<ol>
  <!-- todo-item 컴포넌트의 인스턴스 만들기 -->
  <todo-item></todo-item>
</ol>

이런식으로 사용 가능하다.

props를 사용해서 하위 컴포넌트로 데이터를 전달도 가능하다.

Vue.component('todo-item', {
  // 이제 todo-item 컴포넌트는 "prop" 이라고 하는
  // 사용자 정의 속성 같은 것을 입력받을 수 있습니다.
  // 이 prop은 todo라는 이름으로 정의했습니다.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

<div id="app-7">
  <ol>
    <!-- 이제 각 todo-item 에 todo 객체를 제공합니다. -->
    <!-- 화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다. -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

groceryList를 나눠서 item으로 전달해주고 todo값에 item을 넣어준다.

그러면 script부분에서 props(todo)의 text를 불러와 적용시킨다.

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

템플릿을 사용하면 이런식으로 쪼갤 수 있다.

세미나 일정 : 2017년 6월 3일 토요일 13:00 ~ 18:00

이 세미나는 MSP 대학생 들이 진행했다.

진행 내용은  TypeScript를 사용해서 여러 가지 작업을 했는데,

나는 본 세미나에 참여한 목적은 아이오닉에 관한 세션이 있어서다.

제 1강 About Typescript

제 2강 Mobile Web Application with Ionic2 and Typescript

제 3강 Desktop Web Application with Electron and Typescript

--------------

발표 내용

--------------

1강에서 ppt를 사용해서 프리젠테이션을 했다.

MS관련이라 그런지 전체적으로 사용 색은 파란색이였다. (ppt 제작을 어떤식으로 하면 좋을지 생각됨)

일단 TS의 장점은 버그를 줄일 수 잇다.

Js는 Data Type을 정하지 않아서 혹시 모를 실수가 있을 수 있다.

TS는 var a:number 이런식으로 선언한다.

JS 를 조금 더 객체지향 적으로 짤 수 있다.

컴파일 하면 Js로 변환된다.

2강에서는 하이브리드 앱을 제작하는 세션이었는데, 진행하시는 분이 어차피 IOS 앱을 만드려면 맥북이 필요하다는 재밋는 이야기로 시작했다.

일단 ionic이란 cordova라는 프레임워크 위에서 작동하며 angualr2와 TS를 사용한다. 라고 했는데 TS는 선택인거 같다.

그리고 스마트폰에 최적화된 ui를 제공하고 html을 사용해서 개발이 가능하고 MVC패턴으로 분리해서 개발 가능하다.

단점은 느리다.

일단 npm을 이용해서 설치 가능하다.

인터넷 환경이 좋지 않고 시간이 없어서 모두 스킵함

강의를 어느정도 듣고,

ionic을 나중에 해봐야 된다는 생각이 들었다.

3강에서는 Angular2 with TS와 Electron으로  Desktop Application을 개발했다

Electron은 Chromium과 Node.js를 이용하여 데스크톱 앱을 HTML, CSS, JS(Typescript)로 쉽게 만들 수 있게 해주는 Framework입니다.

진행은 MS의 FaceAPI를 이용해서 얼굴인식 App을 제작했는데, 라이브 코딩이고 대학생이라 그런지 에러잡는데 시간을 거의 소비했다. (전날 코드를 수정했다고 함)

일단 Electron에 대해 처음 접했는데, 웹 개발자면 쉽게 접근이 가능한게 좋았다.

그리고 FaceAPI와 EmotionAPI라는게 있다는걸 알아서 좋았다.

ionic세션을 많이 기대했는데 생각했던 것보다 그렇게 좋지 않았다.

주최 : 본 행사는 Microsoft에서 운영하는 Microsoft Student Partners 대학생 단체에서 진행하는 행사로 Microsoft 본사에서 주최하는 공식적인 행사는 아닙니다.