memi

flutter 강의 제작중...

새로운 강의는 이제 https://memi.dev 에서 진행합니다.
memi가 Vue & Firebase로 직접 만든 새로운 사이트를 소개합니다.

바로가기

NEMV 1 - 소개

1 분 소요

이 강좌는 종료되었습니다.
새로운 강좌로 시작하세요~
모던웹(NEMV) 제작 강좌

NEMV란? NEMV(Node.js, Express, MongoDB, Vue.js) 란 것이다..

괜히 구글링하지 말길 바란다.. 내 작명임 :<

현재 까지 NEM(Node.js, Express, MongoDB) 로 잘 운영을 해왔지만.

MEAN(MongoDB, Express, Angular.js, Node.js) 스택이 있다길래 나도 front-end 엔진을 탑재해보기로 했다..

바로 vue.js를 추가하고 vue-cli, webpack, e2e test가 가능한 개발환경을 갖춰보도록 하겠다..

기존엔 그냥 개발환경 없이 js 덕덕 긁은 프론트 넣었음

웹서버가 단순히 브라우저에 html 파일을 전송하던 시대는 간 것 같다.

언젠가부터 디바이스도 tcp socket이 아닌 http api(주로 post)를 통해 데이터 송수신을 하는 추세다.

과거에는 여건이 안되었는데 그 이유는

  • tcp를 http로 감싸는 패킷 오버헤드(데이터량)
    ‘abcd’ 4바이트만 보내려해도 경우에 따라 100바이트 가량의 헤더가 추가 된다.(거기에 json화까지 시키면..)
  • OS기반 필요
    non-os(쌩펌)로 https 패킷 만들기는 쉽지 않다.

현재는 경량의 디바이스(라즈베리등)에 linux가 포팅되어 있고 통신은 wifi, lte등의 빠른 네트워크 속도와 각 통신사의 IoT요금제가 나오고 있어서 가능하다.

매번 다른 서버, 디바이스에서 하던 약속(protocol)은 구구절절한 사연이 되어버린 요즘이다.

트렌드에 맞는 통신, 데이터를 이용해 유지관리와 가독성이 좋은 웹으로 바꿔보도록 하겠다.

설계 방향

이 작업을 시작하며 최소한 알아야할 사전정보는 아래와 같다.

  1. RESTful API

    Representational State Transfer의 약자, REST 서버는 클라이언트가 HTTP 프로토콜을 사용해 서버의 데이터에 조회&변경을 하는 것이다.
    데이터는 json,xml,text 등이 가능하지만, 당연히 트렌드인 json으로 간다.

    http method는 4개가 있다.

    • GET
    • POST
    • PUT
    • DELETE

    이 4개의 method를 아래 CRUD의 규칙에 맞게 사용하도록 한다.

    이전엔 get, post 두개만 써왔는데 이유는 절대적인 규칙이 아닌 식별로 쓰이기 때문에 사실 급한데 아무거나 써도 무방하다고 봤다.
    무엇보다 ajax get call을 해서 화면 리프레쉬를 한적이 있는데 IE8에서는 오동작을 한적이 있다.(post로 바꾸면 해결.)
    put, delete를 사용해 restful의 느낌을 살리는 웹을 실제로는 본적이 없다..

    참고) POST, PUT 비교 : https://1ambda.github.io/javascripts/rest-api-put-vs-post/

  2. CRUD

    name desc. db http
    Create 생성 INSERT POST
    Read(또는 Retrieve) 읽기(또는 인출) SELECT GET
    Update 갱신 UPDATE PUT
    Delete(또는 Destroy) 삭제(또는 파괴) DELETE DELETE

    데이터 처리에 대한 정리라고 보면 된다.

    데이터 처리 관련 많은 어플리케이션을 만들었지만 결국 기본 4개의 의미를 벗어날 수가 없다.

  3. json

    json은 문서규격이지만 사실 javascript 변수라고 봐도 된다.
    웹은 javascript가 없으면 그냥 정적인 껍데기일 뿐..
    웹이 진화하고 보편화 되면서 http protocol이 웹이 아닌 곳에 쓰이게 되며 결국 웹이 잘 알아들을 수 있는 문서이자 변수인 대동단결 json을 써야하는 것이다.

    • mongoDB : json형태로 조회,수정 모든 행위가 가능(내부적으론 bson형태로 자료를 저장하기 때문에 반복적인 데이터 오버헤드에서 해방)
    • nodejs : body-parser를 사용하면 알아서 json으로 알아들음

  4. html5

    대부분이 html5는 뭔가 대단한 새로운 플랫폼이라고 생각하는데 그건 오해다.
    표준준수에 더 가까운 개념이라고 생각한다. 즉 룰을 잘 지키며 작성해보기로 한다. 더 자세한건 참조 https://ko.wikipedia.org/wiki/HTML5

댓글남기기

참고