스파르타코딩클럽 내일배움캠프 TIL9

특강

• 원장님 말씀
  처음 시작할 때 모르는 게 당연하다. 원장님도 과거에는 그러셨다고 함.
  지금 코딩테스트를 하기 보다는 더 중요한 것이 있다. 물론 코테도 중요하다~

자신감을 주는 말씀이 너무 와닿았고 힘이 되었다. 감사합니다 원장님.

• 웹 서비스를 개발하고 사용자가 이용할 수 있도록 서비스 제공을 하는 것이 개발자이다.

  • 웹 서비스란?
    식당에 갔을 때 많은 것을 제공해주는 '서버'가 있다.
    우리가 '요청'을 하면 어떤 것들을 갖다준다.
    주문을 하면 레시피에 맞게 음식을 만들어서 '제공'을 해준다.
    요청을 하면 응답을 받고 제공을 해준다 > 서버가 돌아가는 원리

  • 웹 서버는 웹이라는 서비스를 제공해주는 것

• 사용자가 요청할 때 브라우저(매개체)라는 도구를 이용해서 웹서버에 어떠한 것을 요청하고 요청에 응답(리턴)해준다.

  • 요청이란? url로 하는것
    클라리언트 = 브라우저 + 사용자
    서버 = 컴퓨터, 인터넷에 연결되어 있다.

• 꿀팁 : 처음에는 프로젝트를 파악하는 것이 중요한데 로깅(로그)이 가장 중요하다.

  • 로그란? 무슨 일이 일어나는지 적는 일지

• venv : 가상환경, 가상의 컴퓨터 셋팅을 만들어 놓았다.

• 내 컴퓨터 = localhost이다. (127.0.0.1)
  내 컴퓨터도 서버가 될 수 있다. 내 컴퓨터를 서버로 만든다!
  내 컴퓨터에서 프로그램이 계속해서 돌고 있다. = 리퀘스트를 기다리고 있다.

• flask는 프레임워크이다.

  • 프레임워크는 우리가 개발에 집중할 수 있게 모든 것들을 해주는 것

• app.py

  • @app.route('/') 에서 route는 어디로 가게끔 하는 것 (경로, 루트) : 클라이언트로부터 요청이 들어오면 어디로 가게지 정해주고 가게끔 하는 것이 route이다.
    ('/')은 클라이언트가 요청을 보낸 경로이다.
    
  • localhost:5000에서 5000은 포트이다.
    • 포트(항구)란 ? 항구에 번호를 매긴것 여기서는 5000이고 5000을 입력하면 열린 항구로 들어갈 수 있다.
    • 컴퓨터에 모든걸 오픈해서 어떤 것들을 막는 것 보다는 모든 것을 막아놓고 조금조금 오픈하는 방법이 더 좋다.
    • app.py의 가장 밑에서 port=5000이라고 지정해 놓았다.

• def : definition(정의) - 이런것들을 할 수 있게 정의해 놓고 그것을 리턴해주는 것이 def의 역할이다.(코드로 정의한다.)

• render_template : 클라이언트에게 템플릿을 주다.

• flask라는 프레임워크로부터 4개의 모듈을 프로그램안으로 import(가져오다)가지고 온다.

• 터미널 용어 : 쉽게 외우려면 왜인지 검색해보는 것이 좋다.

  • clear: 다 지워줌
  • ls : 안에 무슨 파일들이 있는지 보여줌
  • pwd : 현재 경로를 확인
  • cd(change directory) + 경로 : 경로로 이동한다.
  • cd .. : 상위 폴더로 간다.

• ajax는 비동기 호출을 하는 하나의 방법이구나라고 알아두면 좋음

• GET방식과 POST방식의 차이

  • GET : 파라미터를 노출한다.
    ex) 127.0.0.1:5000/id='홍길동','password='1234567890'
  • POST : 파라미터를 노출하지 않는다.
  • 파라미터 : 로그인할 때 아이디와 패스워드를 가지고 로그인 버튼을 누르면 버튼을 눌렀을 때 서버로 요청되는데 그 요청에는 아이디와 패스워드가 담겨있어야 서버에서 판단할 수 있음. 담겨있을 이 값들을 매개변수 즉 파라미터라고 한다.
    ex) 로그인 할 때
    id = request.form['id']
    password = request.form['password']
    괄호 안에 있는 것이 파라미터이다.
    단순한 렌더링을 할 때는 get를 쓰고 대부분은 post를 쓴다.

• main.js에서 ajax 안에 있는 코드들은 클라이언트 사이드에서 서버 사이드로 보내라는 것이다.

  • data: {id : "홍길동} 이라고 클라이언트 사이드에서 보내면 id = request.form['id']를 통해 받는다.

• request.form['name_give']는 'name_give'를 가지고 있는 파마리터가 전달이 된다.

• methods의 값이 없으면 디폴트 값은 GET이다.

• main.js가 하는 일은 우리가 주소창에 주소를 입력하고 엔터를 치는 일을 대신해주는 것이다.
  ajax를 호출할때도 type이 post인지 get인지 알려주고 있다.
  경로와 방법이 맞아야 def의 코드로 들어가는 것이다.

• 동기와 비동기

  • 1) 젓가락 주세요
  • 2) 숟가락 주세요
  • 3) 에피타이저 주세요

• 동기(synchronism) : 1,2,3 순으로 요청을 하나하나 한개씩 한다.

• 비동기 : 요청을 하나하나 하지 않고 기다리지 않고 한번에 한다. ex) 스켈레톤 ui