{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"e5e4b7ef-89b4-5d8f-8ebf-6cc233a00929","excerpt":"chatterbox 서버는 API(Application Programming Interface)를 클라이언트들이 사용할 수 있게 노출. 비동기 작업을 주로 하게 됨. 서버와의 통신시, 응답이 올때까지 기다릴 수밖에 없기 때문에. XSS(Cross-Site-Scripting) attacks. 공격기법을 어떻게 방지할 수 있는가? ES6로 작업할 것. 백그라운드에서 계속 리프레쉬 되면서 구현됨. Sever Client Model 서버와 접촉을 할때(엔드포인트)에 접근하기 위해 서버가 URL…","html":"<h2 id=\"chatterbox\"><a href=\"#chatterbox\" aria-label=\"chatterbox permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>chatterbox</h2>\n<p>서버는 API(Application Programming Interface)를 클라이언트들이 사용할 수 있게 노출. 비동기 작업을 주로 하게 됨. 서버와의 통신시, 응답이 올때까지 기다릴 수밖에 없기 때문에.</p>\n<p>XSS(Cross-Site-Scripting) attacks. 공격기법을 어떻게 방지할 수 있는가?</p>\n<p>ES6로 작업할 것.</p>\n<p>백그라운드에서 계속 리프레쉬 되면서 구현됨.</p>\n<h2 id=\"sever-client-model\"><a href=\"#sever-client-model\" aria-label=\"sever client model permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Sever Client Model</h2>\n<p>서버와 접촉을 할때(엔드포인트)에 접근하기 위해 서버가 URL을 제공하는데 HTTP API라고 함. 원격 서버에 요청(RPC; Remote Procedure Call 리모트 프로시저 콜)</p>\n<ul>\n<li>\n<p>MESSAGING PATTERNS</p>\n<ul>\n<li>Request - Response(순차적으로 하기 때문에 동기적이라고 함)</li>\n</ul>\n</li>\n<li>푸쉬는 요청이 없고 서버에서 일방적으로 보내는 것.</li>\n</ul>\n<h2 id=\"주소창에-주소를-입력하면-무슨-일이-일어나는가\"><a href=\"#%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-%EC%A3%BC%EC%86%8C%EB%A5%BC-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EB%AC%B4%EC%8A%A8-%EC%9D%BC%EC%9D%B4-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94%EA%B0%80\" aria-label=\"주소창에 주소를 입력하면 무슨 일이 일어나는가 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>주소창에 주소를 입력하면 무슨 일이 일어나는가?</h2>\n<ul>\n<li>\n<p>DNS(도메인 네임 서버)에 아이피를 요청하고, DNS 서버에서는 IP를 리턴함.</p>\n</li>\n<li>\n<p>라우팅? 한 서버에서도 갈림길이 있듯, 디테일한 주소를 적어주는 것. www.google.com/intl/ko_kr 이라면 intl 부분.</p>\n</li>\n<li>\n<p>구글에서 서치할 경우에 search는 비지니스 로직을 뜻함.</p>\n</li>\n</ul>\n<p>HTTP의 Status code</p>\n<ul>\n<li>404 (not found 리소스를 찾을 수 없을 경우)</li>\n</ul>\n<p>정상적인 응답일 경우에 200를 받음</p>\n<p>보낼때 GET, HTTP 200</p>\n<p>개발자도구 -> 네트워크 -> 새로고침(네트워크 보는 법에 익숙해져야 함. =)</p>\n<p>URL 창에 뭘 치는 건 모두 GET, 폼 제출은 post</p>\n<ul>\n<li>\n<p>HTTP FEATURES</p>\n<ul>\n<li>HTTP는 특정 상태를 갖지 않고, 이전 요청이나 다음 요청을 기억하지 않고 바로 끝.</li>\n</ul>\n</li>\n<li>\n<p>URI(Identifier) - HTTP 요청</p>\n</li>\n<li>\n<p>http status code (mdn) 중요</p>\n</li>\n<li>\n<p>400번대는 클라이언트 에러</p>\n</li>\n<li>\n<p>500번대는 서버 에러</p>\n</li>\n<li>\n<p>중요</p>\n</li>\n</ul>\n<p>get</p>\n<p>post</p>\n<p>Put - POST와 비슷하나 서버 자원 update 용도.</p>\n<p>Delete - 서버 자원 삭제</p>\n<p>라우팅은 주소의 개념</p>\n<p>포트는 연결 통로의 개념</p>\n<ul>\n<li>RESTFUL의 의미와 사용하는 방법</li>\n</ul>\n<p>payload : submit하는 input 하는 내용을 json에 넣어서 실어서 보내기 때문.</p>\n<p>REST API는 가이드라인이고, 너가 이런 식으로 요청하면, 내가 이런 식으로 던져줄게. 규약임.</p>\n<p><em>왜 REST라고 부르는가?</em></p>\n<p>REST는 일종의 Style</p>\n<p>목적에 맞게 정의되었을때, REsTFUL이라고 한다.</p>\n<p>![rest][http://www.dropbox.com/s/0feam39ml18qyn7/%ec%8a%a4%ed%81%ac%eb%a6%b0%ec%83%b7%202018-10-02%2011.36.35.png]</p>\n<p><a href=\"https://www.dropbox.com/s/0feam39ml18qyn7/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202018-10-02%2011.36.35.png?dl=0\">https://www.dropbox.com/s/0feam39ml18qyn7/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202018-10-02%2011.36.35.png?dl=0</a></p>\n<p>RestFUL API 테스트</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"></code></pre></div>\n<h2 id=\"보안\"><a href=\"#%EB%B3%B4%EC%95%88\" aria-label=\"보안 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>보안</h2>\n<p>iframes</p>","frontmatter":{"title":"Immersive Sprint - Brower apps and AJAX","date":"October 02, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20181002 IM08D10 Brower apps and AJAX/","previous":{"fields":{"slug":"/til/20180928 IM08D09, 20181001 IM08D10 N-Queens/"},"frontmatter":{"title":"Immersive Sprint - N-Queens","category":"TIL"}},"next":{"fields":{"slug":"/til/20181003 IM08D11/"},"frontmatter":{"title":"test function","category":"TIL"}}}}