해리의 데브로그

Web 01 - Introduction(Web service & Browser / Http Method / static & Dynamic web)

|

WEB

  • WWW(World Wide Web) : 인터넷이 연결된 컴퓨터들을 통해 사람들이 정보를 공유 할 수 있는 전 세계적 정보 공간
  • WEB: 컴퓨터와 컴퓨터 사이에 정보를 공유하는 공간

Web Service

  • WWW(인터넷 상)에서 두 객체(클라이언트와 서버) 간의 요청과 응답의 상호작용을 하게 해주는 서비스
  • 일반적으로 클라이언트와 서버는 多: 1 구조이므로, 다수의 서버를 보유해야 하며, 이를 서버 컴퓨터라고 함

[현실]

A: XXX를 주세요(요청) / B: 넵 (응답)

A: XXX를 처리해주세요(요청) / B: 넵(응답)

[WEB]

A: 요청(Request)하는 컴퓨터(고객, Client)

B: 해주는(응답: Response) 컴퓨터(서버, Server)

Web browser

  • 월드 와이드 웹에서 모든 정보를 볼 수 있도록 해주는 응용 프로그램임.
  • 웹상에서 요청을 보내기 위해서는 브라우저가 필요함 (익스플로러, 사파리, 크롬, 파이어 폭스 등)
  • 사용자 (Browser를 쓰는 사람; 유저)는 브라우저를 통해 요청을 보냄

HTTP Method(요청)의 종류

  1. Get(줘라)
    • “가져오는 것” / Select적인 성향을 갖고 있음.
    • 서버에서 어떤 데이터를 가져와 보여주는 용도. 서버의 값이나 상태등을 바꾸진 못함
      • 예) 게시판의 리스트 / 글보기 기능
  2. Post (받아라)
    • “수행하는 것”
    • 어떠한 정보를 서버에 전달(Post)하고, 서버는 부가적인 작업을 함.
    • 서버의 값이나 상태를 바꾸기 위한 용도로 사용
  • 요청: 실제로 컴퓨터를 쓰고 있는 사람(브라우저를 쓰고 있는 사람); 유저
  • 응답: 서버에서 동작하고 있는 프로그램
  • 웹서비스를 만든다? 서버컴퓨터에서 요청과 응답을 처리할 프로그램을 개발한다.

Static Web

정말 단순한 웹 서비스 이문서를 주세요 라고 요청하면, 어떠한 변형, 연산등도 없이, 단순히 문서를 보냄(응답) 서버의 파일이 도서관의 책처럼 적재되어 있고 클라이언트의 요청을 통해서해당 파일을 마치 책을 보는 것처럼 꺼 내 올 수만 있는 웹 서비스.

  • 크롬이 문서를 보내는방식
    • /dir1/dir2/../WantThis.file
    • 파일 & 폴더의 경로를 통해서 브라우져에서 파일을 열 수 있음.
  • 남의컴퓨터에서 파일을 여는 경우?
    • 남의컴퓨터 주소/dir1/dir2/../WantThis.file
    • 이때 남의 컴퓨터 주소란 IP 주소를 의미함. (예. 172.217.27.78; 구글의 실제 주소)
  • IP주소만으로는 사용자가 알아보기 힘들기 때문에, 도메인을 사용함
    • 예) 경북대학교 주소: 대구 북구 산격동 대학로 80
    • 주소만으로는 어느 장소인지를 알기 어려움. 따라서, 우리는 경북대학교라는 이름을 사용함
    • 여기서 주소는 IP 주소, 경북대학교는 도메인 이라 할 수 있음.

Dynamic Web

Dynamic Web (Web Application Program; Web APP) 예) Flask Static Web과 상반되는 개념. 동적으로파일을 생성하여 뿌려주는 Web. (예: http(s)://google.com/serach?q=하이)

  • 웹브라우저는 URI(URL) 을 통해 서버컴퓨터에 요청(request)을 보냄.
  • URL은 네트워크 상에서 자원이 어디에 있는지를 알려주는 고유 규약.
    • 흔히 웹사이트 주소로 알고 있지만, 웹사이트 주소 뿐만 아니라 컴퓨터 네트워크 상의 자원을 모두 나타낼 수 있음.
용어 정의
IP (Internal Protocol) 8비트(0~255)로 구성된 숫자의 집합으로, 각자가 가지고 있는 주소와 동일
도메인(Domain) 네트워크 상의 컴퓨터를 식별하는 호스트 명
URL 도메인 + 경로, 실제로 해당 서버에 저장된 자료의 위치

190217_TIL

|


  • Github 블로그의 style & layout을 조금씩 수정을 하고 있다. 크롬 개발자 도구를 십분 활용해서, 어떤 페이지에 관련 내용을 수정할 수 있는지 역으로 접근하고 있는데 많은 도움이 되고 있다.

  • 카테고리 별로 인덱스 페이지를 따로 만들고 싶은데 아직 까지 많은 시행착오를 겪고 있다. 맨땅의 헤딩하듯이 처음부터 블로그를 만들었다면, 튜토리얼이 많은 도움이 될듯 한데, 이미 많은 부분이 커스터마이징 되어있는 템플릿을 기본으로 수정을 하려하니, 이 분야에 인제 발을 들인 나에게는 내용물을 살피는게 오히려 더 어려운 느낌이다. 몇개월 뒤의 나는 조금더 나은 환경이겠지…?

  • 알고리즘 수업이 시작되었고 역시나 많이 어렵다. 문제를 보고, 어떤식으로 풀어야할지에 대한 접근방식과 알고리즘은 대략이나마 짤 수 있는데, 알고리즘을 코드로 쓰는 부분이 많이 어렵다. 이 부분을 개선하려면 역시 반복해서 노력하고 문제를 많이 푸는 수 밖에 없을 것 같다.

  • 내일은 Web / CSS 과목평가가 있는 날이라 하루종일 web & CSS & Bootstrap 을 공부했다. 공부를 하면서, 동시에 내용을 다시 정리하여 마크다운을 작성해서 블로그에 많은 포스팅을 할 수 있었다. CSS에서 가장 어려웠던 점은 역시 Position - relative & absolute를 이해하는 것이었다. 많은 시간동안 고민한 결과, absolute는 X,Y좌표가 아니라, Z축이 변하는 것이라고 결론을 내렸다.

  • 다음주는 알고리즘을 집중적으로 공부할 계획이다.

190213_TIL

|


  • Django를 이용하여, CSS & HTML & Bootstrap을 활용하여 프론트엔드 관련 웹페이지 화면을 구현하는 프로젝트를 진행하였다. Django 내에서 Bootstrap과 CSS를 다루려고 하다 보니 고려해야할 부분들이 너무 많고, 복잡하여 처음부터 많이 헤맨듯 하다. 이걸보면 백엔드와 프론트엔드를 전부 다루는 Full Stack 개발자분들이 다시 한번 대단하다고 느껴진다.

  • 내일이면 드디어 알고리즘 수업이 시작된다. Django나 웹 수업은 사실 복습과 반복을 통해서 수업을 어느정도 따라가는 게 가능한 듯 한데, 접해보지 못한 방식의 알고리즘 문제를 백준 같은 사이트에서 풀려고 하다보면 어떻게 접근해야할 지, 처음부터 막막한 부분이 정말 많았다. 이번 수업에서 답답한 부분이 많이 해소되었으면 좋겠다!

  • 인터넷으로 주문한 정보처리기사 문제집이 드디어 도착했다. 생각보다 시간이 많이 남지 않았는데, 계획을 잘 새워서 시험 준비를 잘 하고자 한다.

Django 03 - 요청 & 응답 (Django 내부 & 외부 웹)

|

django 내 정보 주고 받기

Throw와 Catch라는 함수를 정의하여 django 내에서 정보를 주고 받는 process를 살펴 보자

요청 보내기(Throw)

  • urls.py
    • 기본주소/throw 라는 주소를 요청받으면, views.py 내 throw 함수를 실행시키는 url 패턴을 작성
urlpatterns = [
    path('throw/',views.throw),
]
  • view.py
    • input 을 보낼 페이지에 연결하는 함수 throw view.py 작성
def throw(request):
    return render(request,'throw.html')
  • throw.html
    • input 태그를 사용하여 데이터를 입력함.
      • 입력되는 값은 dict와 유사한 형태로 저장되는데 여기서 dict의 key 값이 input 태그의 name 속성의 값임.
      • 아래의 예시의 경우, { name : 사용자 입력값} 의 형태를 띄게 되며, name이라는 key값을 통해 입력값에 접근 할 수 있게됨.
    • form 태그를 사용하여 입력된 값을 넘겨줄 경로와 HTTP method를 정의함
      • action : 입력값을 어디로 넘길건지를 설정(URL 경로 설정)
      • method : 어떠한 방식으로 보낼지를 설정 (POST/GET)
<body>
    <form action="/catch", method="get">
        <input type="text" name="message"/>
        <input type="submit" value="Submit"/>
    </form>
</body>

응답 하기(Catch)

  • urls.py
    • 기본주소/catch 라는 주소가 요청되면, views.py 내 catch 함수를 실행시킴.
    • 우리는 앞서, 위의 요청보내기에서 form 태그의 action 값으로 해당 경로를 이미 설정해놨음. 따라서, throw.html에서 내용을 작성하여 제출하면, 아래의 url pattern에 따라 catch 함수가 실행됨
urlpatterns = [
    path('catch/',views.catch),
]
  • view.py

    • throw.html에서 입력된 값이 dict의 형태로 저장되며, 여기서 key는 input 태그의 name 속성값임. 우리는 message라고 값을 지정하였음. message 라는 key를 통해 사용자가 입력한 value값에 접근한다.
    • 이때 사용하는 Django 문법은 ` request.GET.get(‘message’)` 임.
      • request: 정보/데이터를 요청함.
      • GET: throw.html - form 태그 - method 속성의 “get”을 의미함 (어떠한 방식으로 요청을 보낼건지?)
      • get(‘message’) : dict의 value값을 갖고오는 메서드. message로 정의된 name 속성의 내용(value)를 갖고옴. 여기서 value는 throw.html에서 사용자가 입력하는 input 내용임!
    • 최종적으로, throw.html에서부터 갖고온 사용자 입력값을 message라는 변수에 저장하고 템플릿 변수로 넘김
def catch(request):
    message = request.GET.get('message')
    return render(request, 'catch.html', {'message': message})
  • catch.html
    • 템플릿 변수 message 의 결과값으로 throw.html에서 사용자가 입력한 input 내용이 들어온다.
<body>
    <h1>Catch! </h1>
</body>


외부 웹으로 요청 주고 받기

내부에 요청을 보내고 응답하는것이 아니라, django 외부에 요청을 보내는 것을 해보자.

네이버에서 어떤 단어를 검색하면 주소창은 아래의 구조를 띄는데, 내부에서 요청을 보내고 응답을 했을 때와 매우 유사한 형태를 띄고 있는 것을 알 수 있다. 이러한 구조를 활용하여 외부 웹으로 요청을 주고받을 수 있음.

> #네이버 검색 결과 url
> https://search.naver.com/search.naver?query=python
> #Django 내 응답 결과 url    
> http://기본주소/catch/?message=안녕
  • urls.py
    • 기본주소/naver/ 로 요청이 들어오면 views.py 내 naver 함수를 호출
urlpatterns = [
    path('naver/',views.naver),
]
  • views.py
def naver(request):
    return render(request, 'naver.html')
  • naver.html

    • 내부에서 요청을 보내고 응답할 때는 form 태그의 값으로 "/catch" 처럼 기본주소 + 넘길 주소 url만 입력하엿으나, 외부로 보낼 때는 전체 주소를 넘겨야함.
    • 네이버 검색 결과 URL은 https://search.naver.com/search.naver + ?query= 검색어 의 구조를 띄므로, 이를 활용하면됨.
    • 이때, input 태그의 name 속성에는 반드시 query를 사용해야함. 이를 통해 input 태그로 들어오는 입력값이 네이버 검색 결과 URL https://search.naver.com/search.naver?query=입력값 과 동일해짐.
    • 이 URL을 GET 방식으로 요청을 보낸다는 의미.
<body>
    <form action="https://search.naver.com/search.naver", method="get">
        <input type="text" name="query"/>
        <input type="submit" value="Submit"/>
    </form>
</body>

190212_TIL

|


  • 오늘은 Django 수업에서 사용자 인증과 사용자 권한 관리에 대해 배웠다. Django에서 페이지를 구현할 때면 항상 어떠한 형태로든 정보가 넘겨지고 받아졌는데, 페이지와 관련없이 로그인 상태가 유지되는 것이 바로 세션에 정보가 저장되었다는 것을 알게되었다.

  • 오늘 수업에서는 Django에서 자체적으로 구현한 모델폼들 UserCreationForm, AuthenticationForm 등을 살펴보았는데, AuthenticationForm 의 인자로 requestrequest.POST가 둘다 들어오는 것이 사실 이해가 되지 않았다. 둘다 폼으로 입력하는 정보가 담기는 변수라고 생각했는데, 튜토리얼과 구글링으로 관련 정보를 찾아보니 두 인자에는 나름대로 차이가 있다는 것을 알 수 있었다. 이 부분에 대해서는 언제 한번 상세히 포스팅을 해봐야겠다.

  • 또다른 느낀점: 튜토리얼과 공식페이지에 있는 소스코드를 항상 보는 습관을 가지자!

  • 수업 내용을 복습하다보면 위의 예시처럼, 쓸데 없는데 궁금점이 생겨서 어느정도 수준까지 궁금점이 풀리지 않으면 그것에만 매달리는 버릇이 있는 것 같다. 어찌보면 우선 이해하려기보다는 눈으로 익히는 게 시간적으로 더 효율적일 것 같은데, 성격상 그러지 못하는 부분이 참 난감하다. 때로는 너무 많은 시간을 허비하는 느낌이다. 학습 방법에 대하여 언제한번 나만의 기준을 새우는 게 좋을 것 같다.

  • 시험이 약 3주 채 남지 않았다. 이제부터 정보처리기사 필기 시험 준비도 해야 할 시간이다. 공부해야할 내용이 태산같이 끝이없다. 한번 빠이팅 해보자!