- Browser
- Server
- API
- HTTP
- Ajax (XHR, jquery, fetch)
- Browser Security
- CORS
- Injection
- CSRF
- XSS
@@ 어제부터 드디어 서버 파트에 진입을 했다. 우선 클라이언트와 서버에 대한 개념을 학습하고, 클라이언트의 대표적 예인 브라우저에 대해서 학습했다. 또 클라이언트와 서버와의 통신을 알아보면서 통신할 때 필요한 규약인 http에 대해서 학습했고, 서버와의 통신에 필요한 메뉴판, 및 사용설명서인 API(App programming Interface)에 대해서 학습했다.
또한 페이지 리다이렉팅 없이도 서버와 통신하며 화면의 일부분만을 변경할 수 있는 기술인, Ajax에 대해서 학습했다.(Asynchronouse Javascript and XML). Ajax를 알아보며 Ajax의 기술 변천사인 XHR부터 해서 jqeury를 이용한 Ajax 방식, 그리고 최근들어 사용하는 fetch API 까지 살펴보았다.
fetch를 이용해 서버와 통신하며 채터박스 클라이언트 부분을 구현하는 스프린트를 진행했는데 확실히 fetch 를 사용하니 비교적 코드 가독성도 뛰어나고, 간결한 코드로 데이터를 주고 받을 수 있다는 것을 확인했다.
특히 처음엔 then() 메소드 체이닝을 하면서 어떤 데이터를 반환하고 콜백함수 인자로 받는지, response.json()은 또 어떤 값을 반환하는지 헷갈려서 많이 헤맸는데 스프린트 진행하면서 결국 fetch 는 어쨌든 Promise 의 syntax sugar 이고, 똑같이 Promise를 then에 전달하고, then 에서 콜백함수의 인자로 받은 값은 해당 받은 프로미스의 data value 값을 받을 수 있다는 것을 확인했다. 메소드 체이닝 안에서 단계 단계 진입하면서 return 빼먹고 날려주지 않거나, json()같은 비동기 함수를 then 을 이용해서 받지 않아서 값을 전달받지 못하는 것을 경험하면서 비동기 코드 제어하는 법을 익힐 수 있는 시간이었다.
오늘은 본격적 http 통신에 대한 더 자세한 개념 레슨과 브라우저 보안 정책 중 하나인 CORS를 알아봤고, simple request, preflighted request의 차이 그리고 쿠키 사용을 허가해주는 credential request 까지 얕지만 학습을 해보았고, 자바스크립트로 구동되는 브라우저의 주요 공격인 XSS, CSRF 에 대해서도 학습을 해보았다.
아직은 너무 낯선 개념들이고 자료가 너무 방대하여, 간략하게 레퍼런스들을 쭉 훑어보는데도 시간이 꽤 걸린 것 같다. 그런데도... 아직 못 본 페이지들이 너무 많고, 용어들도 너무 생소하여서 읽어도 레퍼런스들은 반도 채 이해하지 못했다. 더 시간을 할애하고 여러 자료들을 참고하는 수밖에 방법이 없을 것 같다.
