URI 웹 브라우저 요청 흐름 URI(Uniform Resource Identifier) 리소스를 식별하는 통합된 방법 URI UR는 로케이터(Locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다. URL : Resource Locator 우상욱이 현재 어디 살고 있다. URN : Resource Name 우상욱 그 자체 중간에 어딘가 이름을 집어넣으면 나오는게 거의 url만 씁니다. URI 단어뜻 Uniform : 리소스 식별하는 통일된 방식 Resource : 자원, URI로 식별할 수 있는 모든 것(제한 없음) Identifier : 다른 항목과 구분하는데 필요한 정보 URL, URN 단어 뜻 URL - Locator : 리소스가 있는 위치를 지정 URN - Name : 리소스에 이..
DNS IP는 기억하기 어렵다. 그리고 문제는 IP는 변경이 될 수도 있다. 그래서 도메인 네임 시스템(Domain Name System)이 생겼다. DNS 서버에 도메인을 등록할 수 있다. DNS 서버에 google.com의 IP를 주세요라고 요청하면, IP를 준다. 그래서 google.com에서 IP가 바뀌면 DNS 서버에 이걸 바꿔놓으면, 전화번호부 처럼 사용할 수 있다. 정리 인터넷 통신 IP(Internet Protocol) TCP, UDP PORT DNS
PORT : 포트는 배가 도착하는 항구 IP는 서버를 찾는 것 PORT는 애플리케이션을 찾는 것 웹브라우저가 HTML을 만들어서, 100.100.100의 포트 10010번으로 보낸다. 서버에서 어떻게 포트를 알 수 있나? tcp/ip 패킷 만들 때 다 써서 보내니까, 반대로 써서 보내면 되니까 IP는 아파트고, 포트는 몇 동 몇 아파트를 하나의 서버나 PC로 보면 된다.
인터넷 프로토콜 스택의 4계층 IP의 단점을 TCP를 살짝 올려서 그걸 보완해주는 역할을 한다고 보면 된다. UDP는 비연결성, 비신뢰성, 순서을 보장해주진 않지만 장점이 있다. 프로토콜 계층 소켓 라이브러리라는 걸 보통 쓰는데, 소켓 라이브러리를 통해서 os 계층에다가 hello라는 메세지를 넘긴다. tcp에서 tcp 정보를 씌우고(녹색 씌우는 느낌) 그 밑에 ip와 관련된 데이터들을 씌웁니다. 이렇게 IP 패킷을 생성하고, 그 안에 IP 정보, TCP 정보, 메시지가 포함 되어있다. 그게 이더넷 프레임을 통해서 나간다. 패킷 : 진짜 패키지(수화물 + 덩어리(버킷)) -> 택배 박스에 데이터 넣듯이 해서 보내는 거랑 비슷 TCP 특징(신뢰할 수 있는 프로토콜) IP만으로 해결이 안됐던 전송 정보를 넣..
인터넷 네트워크 인터넷 통신 인터넷에서 컴퓨터 둘은 어떻게 통신할까? 내가 한국에 사는데 미국에 있는 친구한테 메시지를 보내야한다. 인터넷 망을 통해서 메시지를 보내야한다. IP(인터넷 프로토콜) 복잡한 인터넷망에서 미국에 있는 친구한테 보내려면 최소한의 규칙 필요 이는 IP 주소를 통해 가능하다. 클라이언트인 내가 IP 주소를 부여받아야한다. 지정한 IP 주소(IP Address)에 데이터 전달 패킷(Packet)이라는 통신 단위로 전달 IP 패킷 정보 그럼 친구가 메세지를 받았으면, 똑같이 한다. 출발지 IP를 넣고 목적지 IP를 넣고 던진다. 노드별로 주소 물어가면서 던지면서 최종적으로 클라이언트에게 다시 OK 메세지를 전달해준다. IP 프로토콜의 한계 비연결성 패킷을 받을 대상이 없거나 서비스 불..
HTTP를 배워야하는 이유 HTTP를 웹 기술과 관련된 개발을 오랫동안 하더라도 HTTP에 대해 고민을 많이하게 된다. HTTP 상태 코드는 어떻게 하고 싶을까? 잘못된 자료도 많고, HTTP 스펙을 보자니 실무에 도움이 될까 고민이 있다. 개발자는 평생 HTTP 기반 위에서 개발해야한다. 실무에 꼭 필요한 HTTP 지식 모바일 앱 웹 프론트엔드 백엔드 백엔드 개발자 분들에게 도움이 가장 많이 될 것
JAVASCRIPT 자바 스크립트는 설치 없이 가능했던 이유? 브라우저에 자체에서 실행이 가능했던 것 그런데, 이걸 내 컴퓨터 혹은 서버에서 돌리는 경우 node.js를 설치해야 자바스크립트 실행 가능 NPM npm(node package manager) 필요한 패키지가 있으면, npm에서 가져와서 쓰면 된다. npm install 패키지명 npm uninstall 패키지명 Install 하면 package.json, package-lock.json에 입력된다. package.json : 대략적인 내용 기록 dependencies에서 설치된 패키지 확인 가능 package-lock.json : 상세 내용 기록 node.modules : 설치한 모듈들이 전부 저장 Express Express는 웹 프레임워..
이번 미니 프로젝트는 SPOTIFY API 데이터로 음악 추천 웹을 개발하는 프로젝트입니다! 프로젝트 기간으로 주어진 5일 간은 웹에 집중하고, 이후엔 데이터 파이프라인을 체계적으로 구축해보려고 합니다. 지금은 프로젝트 기간 2일이 지난 상태고, 앞서 진행했던 SPOTIFY API 사용, 데이터 베이스 설계, AWS RDS 연동, 그리고 DJANGO의 간단한 검색 기능 구현 과정을 담은 포스팅입니다! SPOTIFY API 먼저 SPOTFIY API를 활용해서, 데이터를 받아오는 과정이 있었습니다. SPOTIFY DEVELOPERS에서 가입을 한 후에 KEY를 통해 데이터를 받을 수 있습니다. 다만, 토큰이 일정 시간이 지나면 초기화되고, 너무 많은 요청이 있을 때는 몇 분정도 기다려야하는 단점이 있습니다..
로그인 기능 구현 터미널 입력 django-admin startapp common settings.py에서 INSTALLED_APPS에 'common.apps.CommonConfig' 등록 config/urls.py에서 common.urls 추가 urlpatterns = [ path('admin/', admin.site.urls), path('pybo/', include('pybo.urls')), path('common/', include('common.urls')) ] common 디렉터리에서 urls.py 생성하고 from django.urls import path from django.contrib.auth import views as auth_views app_name = 'common' urlp..
shell 이용해서 게시글 넣기(DB 업데이트) 장고 쉘 접속 python manage.py shell from pybo.models import Question from django.utils import timezone for i in range(300): q = Question(subject="질문글의 제목입니다:[%03d]" % i, content = '내용은 없음', create_date = timezone.now()) q.save() 페이징 기능 구현하기 views.py javascript로도 가능합니다. 이번엔 django의 Paginator를 활용해서 만들어보겠습니다. from django.core.paginator import Paginator def index(request): page..
include base.html에서 layout.html 파일로 해당 코드를 분리합니다 메인페이지 로그인 body 사이에 해당 코드를 삽입합니다. {% include "layout.html" %} 해당 코드는 Django 템플릿 문법 중 하나인 include 태그를 사용한 것입니다. include 태그는 지정된 템플릿 파일을 현재 템플릿에 포함시켜주는 역할을 합니다. 위 코드에서는 "form_errors.html" 템플릿 파일을 현재 템플릿에 포함시켰습니다. 이 기능을 이용하면 반복적으로 사용되는 템플릿 코드를 별도의 파일로 분리하여 관리할 수 있으며, 코드의 재사용성과 유지보수성을 높일 수 있습니다. 이 방법을 응용해서 question_form.html, question_detail.html의 중복된 ..
웹페이지에 스타일시트 적용하기 1. 설정 파일에 스태틱 디렉터리 위치 추가하기 STATIC_URL = '/static/' STATICFILES_DIRS = [ BASE_DIR / 'static' ]2. 스태틱 디렉터리 만들고 스타일 시트 작성하기 mkdir statictext area{ width = 100%; } input[type=submit] { margin-top:10px; } 답변을 등록할 때 사용하는 text area를 100%로 넓히고, 버튼 위에 margin을 10px 추가했다. 3. 질문 상세 템플릿에 스타일 적용하기 {% load static %} {{ question.subject }} (..생략..) 스태틱 파일을 사용하기 위해서, 템플릿 맨 위에 {% ..
