Client and Server
http(Hypertext Transfer Protocol)는 인터넷에서 클라이언트와 서버 사이에 정보를 교환할수 있게 하는 프로토콜이다.
프로토콜도 메일을 보낼수 있는 프로토콜, 영상통화를 하기 위한 프로토콜 등등 다양한 프로토콜이 존재한다. http와 https 두개의 프로토콜이 있는데 https 는 보안을 조금 더 강화시켜서 나온 프로토콜이다.
client-server Architecture 에 주로 쓰이는 구조는 2 티어 아키텍쳐와 3티어 아키텍쳐이다. 2 티어 아키텍쳐는 client 와 server의 관계, 3티어 아키텍쳐는 client , server 와 database 의 구조관계이다.
client는 무엇일까? client는 정보를 요청하는 앱또는 웹 이라고 보면 될것같다. server는 갖고있는 정보를 보내주는 일을한다 client가 server에게 정보를 요청하면 server는 정보를 찾아서 client 에 전달해 준다. 커피숍에서 커피를 주문하려는 고객이 client, 고객이 주문한 커피를 만들어서 다시 고객에게 전달해 주는 바리스타가 server 이다. database는 server와 연결되어있는데 안전을 위해 요즘 데이터베이스를 따로 구축한다고한다.
client 가 server에게 자료를 요청할때는 get방식과 post방식이 있다. get는 server에게 정보를 요청하고, post 는 client가 server에게 새로운 정보를 저장할수 있게 보내준다. get은 주소창에 요청하는 자료의 정보가 그대로 노출이 되어 보안상 매우 위험하기때문에 post를 get 처럼 server에 정보를 요청하여 주소창에 중요한 정보를 노출시키지 않고 server에게 자료를 요구할수있다. 주로 server에게 새로운 자료를 보내는 역활을 주로 맡고있다.
.fetch(app.server, {
method: 'POST', //서버에 새로운 자료를보냄
body: JSON.stringify(data), // server에 string 타입으로 변형후 데이터를보냄
headers: {
'Content-Type': 'application/json' // json 타입의 자료형이라는것을 명시해줌
}
})
.then(resp => {
return resp.json(); // .json()는 json형식으로 받은 자료형에서 body부분을 data로 변형시켜준다.
})
// fetch 자체가 서버에게 자료를 요청하기때문에 method:'GET'을 따로 지정해주지 않아도 된다.
return fetch(app.server)
.then(json =>{ return json.json()})
cors / xss
일반적으로 웹서비스는 한가지 서버에게만 접근하고 자료를 요청할수있지만, 여러 서비스에서 자료를 요청하기 위해서는 cors 이라는 기술을 사용한다. client 가 server에게 접근 할수 있는지 물어보고 server가 허용해야 client에서 정보를 받을수 있는데 보안상 그렇다. xss 해킹은 사이트를 파괴할수 있는 기술인데 input창에 악성 태그를 입력하여 사용자가 모르게 실행시켜 해킹한다. 이런이유로 innerHTML 이 보안에 취약하다.
Ajax
Ajax는 페이지 전체를 새로 로드하지 않고 필요한 부분만 로드해준다. 나는 처음에 DOM처럼 동적으로 사용하는 거라고 생각했는데 AJAX 는 새로운 페이지 부분만 로드해주는 '기술' 이라고 할 수 있고, DOM은 javascript에 사용되는 '언어' 라고 한다.
