새로운 경험

[TIL] 2022-11-10 웹 구동방식 특강. 최원장. 스파르타코딩클럽 내일배움캠프(aka 항해99의 국비ver)

시바카오 2022. 11. 10.

내일배움캠프 4기 참여 솔직후기

짤방 하나로 요약.

 

1.
 
server : 내가 웹사이트에 뭔가를 요청(request)를 보내면 그에 대한 응답을 주는 것. 인터넷에 연결되어 있다.

client : 나 + 브라우저. 네트워크로 연결된 서버로부터 정보를 제공받는 컴퓨터. ↔(서버).

route : 길을 안내해 주는 것. 요청이 들어오면 이리로 가세요 안내해주는 역할. - 그냥 그정도로만 알아두자.

 

서버 사이드 = 리퀘스트를 받을 준비가 되어있는 컴퓨터! - > 이게 핵심이라신다 !!

 

localhost : 내 컴퓨터를 가르키는 호스트이름. 주소는 127.0.0.1

왜 127.0.0.1일까? 궁금하니까 이따 알아봐야지.

 

frameWork: 개발에만 집중할 수 있도록 제공해주는것.
어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조며,

소프트웨어 개발에 있어 하나의 뼈대 역할을 한다. - 프레임워크가 뭔지 감이 잘 안 잡혔는데 알게됨.

 

localhost:5000에서 5000이란?

내 컴퓨터가 열려있다면 모두에게 노출되므로 난 이 컴퓨터의 모든 걸 열어놓고 어떤 요청들만 막을거야 보다는

모든 걸 막아놓고 조금씩만 열어주는게 보안상 좋다.

그래서 port를 사용한다. -익숙한 부분이었지만 딱히 사용 목적을 생각해본적은 없었는데 알게됨.

 

port = 항구

 
port !? 항구 ? 서버가 한반도?
 
한반도(DB)로 들어올수있는 항구 !
 
항상 열어두면 리스크가 있기 때문에 필요할때만 열어주는 게 효율적 !
 
항구의 이름을 구분하기위한 구분자! port!
그것을 숫자로 표현한것.
 
 
def = definition 정의. // def의 결과는 return !
 
 
venv = 가상의 환경
render = 준다
template = 템플릿
 
-> server가 telplate을 client에게 rendering 한다! = render_template.
 
flask라는 도구에서 render_template이라는 행위를 해줌 !
로직이 등록되어있기 때문에 활용만 하면 되는것.
 

서버가 클라이언트에게 음식을 주는 역할을 한다.

flask 프레임워크로부터 render_template을 import했기 때문에 사용할 수 있다.

render_template 함수를 통해 index.html을 찾아서 서버에게 제공한다.

 

그게 사실이야?

 

확인하기 위해 log를 찍어보자.

log = 일지. 모든 것을 기록한다.
 
 
2.
터미널 명령어(필수적인것만)
 
clear 깔끔하게 지움
ls 폴더 안에 어떤 파일들이 있는지 보여줌
pwd 현재의 경로를 확인하는 명령어
cd 경로입력해주면 그 하위폴더로 이동.
cd.. 하면 상위폴더로 이동. cd가 뭐냐? change directory!
 
ajax의 대체재? axios ! 이것에 관한 설명은 추후에 해주실예정.
index.html의 역할은 ? 주소창에 주소를 입력하고 엔터를 치는일을 대신 해주는것 !
 
3.
url, 메써드, 경로와 방법이 맞아야 definition('def')로 들어가는것.
 
Get 방식과 Post방식의 가장 큰 차이점? Get 노출 ! -> 파라미터를 노출o
 
Post 노출 x ->파라미터를 노출x
 
 
파라미터는 뭔가요?
 
Id,pw를 입력해서 누르면 서버에서는 그것이 매칭하는 사람을 db에서 찾아야함.
 
Id,pw가 클라이언트로부터 서버로 전송되어야함.
 
이게 바로 파라미터. 정의, 매개변수.
 
이 예시에서 매개변수란? ID와 PW가 담긴 요청값. 즉, 그것이 파라미터 ! 변수이름. 

 

 

 
서버에서 매개변수(파라미터)를 받는코드.
 
Get, Post에서 파라미터 노출이라는 표현을 쓴 이유?
 
Get -> 127.0.0.1:5000/id='wonjang',password="testpassword" 이런식으로 노출된다는 말.
그러나 이건 노출되면 안됨.
 
그런 경우에 !!! Post방식을 이용함. 대부분 post를 사용함.
 
간단한 랜더링을 할때만 Get을 활용함.
 
대부분의 DB통신을 할 땐 Post !!
 
비동기? 동기?
synchronism ! 같은 시기.
자막 싱크로를 맞춘다라는 표현 들어봄 !!
자막이 뜨는 시점과 요청하는 시점이 일치!
 
 
비동기의 개념.
빠름. 동시에 처리함.
 
 
동기는?
 
오래걸림.
 
ex)서버한테 요청을함
1.'젓가락주세요'
2.'숟가락주세요'
3.'에피타이저 주세요' 젓가락을 갖다주고, 숟가락을 갖다주고, 에피타이저를 갖다주고. 순차적으로 갖다줌.
 
UX는 사용자 편의를 위한것. Skeleton UI 비동기방식을 구현한 좋은 예시.

 

댓글

💲 추천 글