gistfile1.txt

# Sync
- HTTP METHOD: GET
- HTTP METHOD: POST
-----------------------


0. 글쓰는 API ( posts, comments ) + jQuery AJAX ( 댓글 불러오기, 댓글 작성하기 )


1. ajax(async javascript and xml) - api + web client javascript
    - Request 의 주체: Client : 계속적으로 요청을 보내다가, 데이터 변동이 있으면 
    - Response 의 주체: Server

2. web socket - api + web clinet javascript => 서버 + 클라이언트
    - 실시간성( connection 이 항상 연결되어 있는 상태 )
    - Request/Response 를 양방향으로 줄 수 있다.
    - 채팅

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


1. 포스트 리스트 불러오는 API => GET /api/posts/                  title, content
2. 포스트 디테일 불러오는 API => GET /api/posts/:postId/
3. 댓글을 생성하는 API        => POST /api/posts/:postId/comments/    content

------

# RESTful API ( Representational State Transfer )

- Model == Data == Resource ( HTTP Method, API Endpoint, Data, Response Status Code )
- Resource Cycle => CRUD ( Create, Retrieve, Update, Destroy )

1. Create                   POST /api/posts/   => 201 Created ( 400 Bad Request )
2. Retrieve(List)           GET  /api/posts/   => 200 OK
3. Retrieve(Detail)         GET  /api/posts/:postId  => 200 OK ( 404 NOT FOUND )
4. Update                   PATCH  /api/posts/:postId  => 200 OK ( 204 NO CONTENT ), 400
5. Destroy                  DELETE  /api/posts/:postId => 200 OK, 204 NO CONTENT, 400

----

/api/posts/               => GET, POST
/api/posts/:postId        => GET, PATCH, DELETE

-----

# 데이터간의 관계 - Post, Comments ( 댓글 API )
- 댓글을 추가하는 API
- 댓글을 불러오는 API
- 댓글들 삭제/업데이트하는 API

1. Create             POST /api/comments/   { content: _____}               201 CREATED
1                     POST /api/posts/:postId/comments                      201 CREATED

2. Update             PATCH /api/posts/:postId/comments/:commentId          204 NO CONTENT
3. Destroy            DELETE /api/posts/:postId/comments/:commentId         204 NO CONTENT

---

# 중고차 O2O 서비스 ( 매물 = Item ) - "삽니다", "팝니다"

1. POST /api/items/ {type: "selling", title, content}, {type: "buying"}
1. POST /api/items/selling/
   POST /api/items/buying/

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

# Web Socket

- IE
- Google Chrome
- Firefox

     ======= ||| ========== |||| ========= |||| ========||| 향상된 기술(Web Socket 표준)


IE6  ====================== *************************************************************
IE7  ====================================== *********************************************
Chrome  =================================================================================
Firefox ===================================================== ***************************

// Polyfill
// Web Socket polyfill => socket.io


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

웹 클라이언트가 웹 서버로 요청
서버 수락 => 서버.on("connect") => io.emit("data", "Welcome to Socket.io");
클라이언트 수락 => 클라이언트.on("connect")

----

클라이언트가 "data" 라는 이벤트를 받아서 => "Welcome to Socket.io"

----

1. 페이지가 로딩되면, prompt 를 하나 띄어서, 이름이 무엇인가요? ( 채팅명 )
2. (client) 방문했다라는 이벤트 발생 socket.emit("enter")
    3. 웹 서버에서는 이걸 받아서 모든 유저한테 새로운 유저가 왔다고 알림 "enter"

3. (client) "chat" 이벤트를 발생시키면서 데이터를 서버로 전송
4. (server) "chat" 에 이벤트를 받아서
    모든 client 에게 "chat" 이벤트 전송

----

# emit => 주체
# on => 객


------

HTML, CSS
Javascript Core
Javascript Web Client, Web Server

-----

Node.js ( V8 Engine, 2008 ) 2009 => Server ==> ++++
Node.js => fs, http ( sync, async )
Node.js => cli ( node zigbang 123 )
Node.js => http.createServer
    - renderer
    - router

-----

Express.js == Middleware ( function(req, res, next) {...} )
    - Middleware ( loginRequired Middleware )
    - 설계 ( Model, View, Controller )
        - Model(Database) - mongodb, ( odm mongoose ) + Logic(authenticate)
        - View(사용자한테 보여주는 클라이언트) - template engine(pug)
        - Controller(Model + View) == Routes

-----

클라이언트 => 서버 ( GET: req.query, POST: body-parser, req.body )

----

# 회원가입, 로그인

- users.js => function authenticate(username, password, callback)

----

# passport -> Strategy

---

# API, Web Client => AJAX
# Web Socket ( socket.io ) => 실시간 채팅

----

- 전체적인 내용 복습
- 문제: 언어에 대한 이해 부족
    - 객체지향 자바스크립트 ( Object 를 생성하는 Constructor Function )
    - Class-based OOP (X) => Prototype Based OOP
    - ECMAScript5 ( 2009. 12. )
        - ECMAScript6 ( 2015. 06. )
- Backend + Client(React.js, Angular.js) == MVC
- Tools(grunt, gulp, webpack, yeoman, ...)


arr[0] => n * 0