오늘은 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 |