본문 바로가기
HTML,CSS,JavaScript

클라이언트 서버

by 픠버 2022. 11. 11.

 오늘은 HTML 과 CSS 관련하여 공부를 더 했다. 미니프로젝트가 끝나고 자바스크립트를 배우는 지금 배우면서도 앞에 html css 부분이 부족하다고 많이 생각이나서 지나칠 수가 없었다. 개인적으로 개발에 있어서 중요한거는 아무리 기본이라고 생각해도 기본이 탄탄하지 않으면 앞으로 나아갈 수 없다고 생각한다 .

 

 내가 배우고 있는것이 프론트 엔드인데 자바스크립트만 잘한다는게 너무 말이 안되기도 했고 프로젝트때 나의 부족함을 너무 많이 자각해서 지나칠 수가 없었다. 기본적인 뼈대와 ( html ) 근육 (css) 를 구성도 못하는데 자바스크립트 ( 뇌) 를 아무리 한다해도 소용이 없다고 생각한다. 

 

 오늘은 아침에 미니프로젝트때 다뤘던 서버와 클라이언트에 관하여 한번 더 수업을 들었다. 

강의는 진짜 영광스럽게 우리 조가 만든 미니프로젝트를 바탕으로 강의를 진행 하였다 . 사실상 우리조가 엄청 잘해서 예시를 든것은 아니고, 기본적인 코드를 가지고 쓸거는 쓰고 지울껀 지우면서 깔끔하게 코드들을 잘 정리하였고 주석처리를 이용하여 프로젝트를 하는 사람들과 보기 쉽게 공유했던 것들이 인상 깊어서 가져오셨다고 하셨다 !

팀원들의 화려한 실력으로 이런 소리도 들어보고 기분이 너무 좋았다 그렇게 강의는 시작했다. 일단 클라이언트와 서버 관계를 가볍게 설명 하셨고 AWS에 관하여 설명 해주셨다 .

AWS 는 서버를 열려고 컴퓨터를 다 살 수는 없으니 컴퓨터를 가상으로 열어 서버를 여는거라고 설명을 잘 해주셨다.

 

 서버와 클라이언트 관계는  간단하게는 클라이언트에서 서버로 요청을 하면 서버에서 클라이언트에 온 요청을 보고 서버에서 응답하여 클라이언트에서 보내는 관계였다. 정리하자면 사용자가 URL을 브라우저 주소창에 작성하고 엔터를 누르면 원하는 웹페이지가 나온다. 사용자는 웹페이지를 보기위해 단순한 일을 한 것 이지만,
특정 웹페이지를 사용자 웹브라우저에게 보여주기 위해서는 내부적인 처리들이 있다.

 

 그 내부적인 처리에서, 클라이언트가 서버에게 웹페이지를 보여달라고 말하는 것을

우리는 요청 이라 부르고, 서버가 클라이언트에게 요청받은 것에 대한 대답으로,

웹페이지 내용을 표현하기 위해 html문서로 주는것을 응답  이라 부른다. 

 

 

       요청.(url로)       응답

클라 —>     서버        —>    클라  

 

get요청으로 들어왔고 서버에서 render 응답값을 준다

 

아이디와 패스워드를 url 에 담아 post방식으로

서버에 보낸다,

 

서버에서는 로그인이라는 요청이 들어오고,

 

아이디 패스워드 일치하는게 있는지 확인

 

있다 없다  응답값을 브라우저한테 보낸다

 

브라우저는 판단해서 열어 주냐 마냐 정해지는 것이다.

 

-localhost : 내 컴퓨터를 가르키는 호스트이름

 

port 5000

port = 항구라는 뜻을 가지고 있음

서버가 한반도로 치고 한반도로 들어올 수 있는 항구가 여러개 있다 .서버에서 항구를 번호로 구분하고 여기서 포트 5000 은 항구이름을 뜻한다.

 

localhost 자체를 다 오픈해버리면 보안상 위험하니깐 5000으로 지정해둔 항구로만 들어오는 것을 허락해준다. 여기서 5000은 서버로 들어갈 수있는 고유번호이다. 이것또한 내가 지정 할 수 있다!

port = 5000이 내가 지정한 항구이다!!

 

여기서 route 길을 안내해 주는 것. 요청이 들어오면 이리로 가세요 안내해주는 역할을 한다.

 

@app.route(‘/’). << 경로를 넣게끔 되어있음 클라이언트가 보낸 경로를 뜻함!

 

definition : (정의) 홈이란 주소를 입력 하면    return : 홈까지 경로 안내를 시작한다!

GET 과 POST 차이점

GET: 파라미터 노출.     파라미터란 ? 아이디와패스워드를 입력해서 누르면 서버로 요청되는 아이디와 패스워드가 담겨있어야하는데 이 안에 있는 아이디와 비밀번호가 파라미터이다 매개변수라고 부름// 매개 변수 

POST: 파라미터 미노출

 

비동기?//synchronism

 

동기는 동시에 일어나지 않는다를 의미

 

서버한테

 

1.젓가락 주세요 부탁함

2.숟가락주세요

3.애피타이저 주세요.  3가지를 동시에 

비동기 5개 요청보내면 5가지 요청을 따라락

앞에 있는거 끝날때 까지 기다리지 않는다 !

'HTML,CSS,JavaScript' 카테고리의 다른 글

HTML,CSS 웹 페이지 구현  (0) 2022.11.15
Animation,Transformation, Transition  (0) 2022.11.13
CSS 복습 2  (0) 2022.11.13
HTML CSS 복습  (0) 2022.11.12
HTML,CSS,JavaScript를 이용한 나만의 팬명록 만들기  (0) 2022.10.20