웹 개발 기초지식

YoonA Kim·2024년 11월 10일

01 웹의 기본 요소

서버와 클라이언트

서버: 클라이언트의 요청을 받아 처리하고 응답하는 시스템/컴퓨터/브라우저/데이터베이스...
클라이언트: 서버에 요청을 보내고 응답을 받아 사용자에게 보여주는 시스템/컴퓨터/브라우저/앱...
*서버와 클라이언트는 절대적인게 아니다. 나의 컴퓨터도 어떨때는 서버가, 어떨때는 클라이언트가 될 수 있다.

웹브라우저와 웹 표준

웹브라우저: 사용자가 인터넷에 접속하여 웹 페이지를 탐색하고 상호작용할 수 있게 도와주는 소프트웨어 애플리케이션입니다. 웹 브라우저는 서버에서 HTML, CSS, JavaScript 등의 파일을 받아와 사용자가 볼 수 있는 형태로 렌더링합니다.
예) 크롬, 엣지, 사파리...

웹 표준: 웹에서 콘텐츠를 작성하고 표시하는 데 사용되는 일련의 규칙과 가이드라인입니다. 이러한 표준은 웹의 상호 운용성을 보장하고, 웹 페이지가 다양한 브라우저와 장치에서 일관되게 표시되도록 도와줍니다. > 그 덕에 '웹'방식이 다양한 서비스와 비즈니스의 포맷이 된 것!

웹사이트의 대표적인 세가지 언어
HTML은 웹 페이지의 구조를 정의하는 언어입니다. 웹 페이지의 제목, 단락, 링크, 이미지, 표 등 다양한 요소를 작성하는 데 사용됩니다.

CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 언어입니다. HTML로 작성된 요소들의 색상, 글꼴, 크기, 배치 등을 지정하여 시각적으로 아름답게 만듭니다.

JavaScript는 웹 페이지에 동적 기능을 추가하는 프로그래밍 언어입니다. 사용자의 동작에 반응하여 페이지의 내용을 변경하거나, 데이터를 서버와 주고받는 등의 작업을 수행합니다.

크롬개발자 도구 활용하기

02 서버와 클라이언트의 소통

IP(네트워크 주소)와 DNS

IP(Internet Protocol) 주소는 네트워크 상에서 장치를 식별하기 위해 사용되는 고유한 주소입니다.
(예: 192.168.0.1).

DNS(Domain Name System) 는 인간이 이해하기 쉬운 도메인 이름(예: www.google.com)을 IP 주소(예: 93.184.216.34)로 변환하는 시스템입니다. DNS는 전화번호부와 비슷하게 도메인 이름을 IP 주소로 매핑하여, 사용자가 도메인 이름을 입력하면 해당 IP 주소로 연결될 수 있도록 합니다.

IP와 DNS이 작동과정
1) 사용자가 웹 브라우저에 www.example.com을 입력합니다.
2) 브라우저는 DNS 서버에 도메인 이름을 IP 주소로 변환해달라고 요청합니다.
3) DNS 서버는 www.example.com의 IP 주소를 찾아 브라우저에 반환합니다.
4) 브라우저는 IP 주소를 사용하여 해당 서버에 연결하고, 웹 페이지를 로드합니다.

비유) IP를 찾는 것은 친구에게 전화걸때 번호를 전부 외워서 쳐서 거는 방법인데... 이게 비효율적이니 홍길동을 치면 해당 전화번호로 전화가 걸리게끔 하는 것

참고) DNS도 클라이언트의 요청으로 도메인과 상응하는 IP주소를 클라이언트에게 전달하는 것으로서 일종의 '서버'다.

IP 주소의 2 종류
IPv4 (Internet Protocol Version 4): 32비트 주소로, 0에서 255 사이의 숫자 4개로 구성됩니다.
예: 192.168.1.1

약 43억 개의 주소를 제공하지만, 인터넷 사용의 급증으로 인해 주소가 부족한 상황에 직면

IPv6 (Internet Protocol Version 6): 128비트 주소로, 16진수 8개 그룹으로 구성됩니다. 훨씬 더 많은 주소를 제공하여, 사실상 무한에 가까운 주소를 사용할 수 있습니다. 이는 IPv4의 주소 부족 문제를 해결합니다.
예: 2001:0db8:85a3:0000:0000:8a2e:0370:7334

궁금증) 내 컴퓨터의 IP는 계속 바뀌나요?
개인의 IP 주소는 여러 가지 이유로 변경될 수 있습니다: 대부분의 가정용 네트워크는 ISP(인터넷 서비스 제공자)로부터 유동 IP 주소를 할당받습니다. 이는 일정 기간이 지나면 변경될 수 있습니다. 네트워크 관리 효율성을 높이기 위해, ISP는 IP 주소를 필요에 따라 재할당합니다. 그래서 컴퓨터나 라우터를 재부팅하거나, ISP가 주기적으로 IP를 갱신할 때마다 IP 주소가 변경될 수 있습니다.

이와 반대로 고정 IP를 사용하는 경우, IP 주소가 변경되지 않습니다. 고정 IP는 특정 요구 사항이 있는 경우, 예를 들어 서버 운영, 원격 접속 등을 위해 사용됩니다. 웹 서비스 사업자들은 고정된 IP 주소를 사용하는 경우가 많습니다. 이렇게 하면 웹사이트나 서버에 대한 접근이 일관되게 유지되고, 도메인 이름이 항상 동일한 IP 주소로 매핑될 수 있습니다. 고정 IP는 특히 웹 호스팅, 메일 서버, VPN 서버, 원격 데스크탑 서비스 등에서 많이 사용됩니다.

URL

URL 정의

URL(Uniform Resource Locator)은 인터넷 상에서 특정 자원을 가리키기 위해 사용하는 주소 체계입니다. 웹 페이지, 이미지, 동영상 등 다양한 자원을 식별하고 접근하는 데 사용됩니다. LOCATOR = 위치를 알려주는 역할

URL의 구성 요소

http:// www.example.com:80/path/to/resource?key1=value1&key2=value2#section1

  1. 프로토콜 (Scheme)
    웹 자원에 접근하는 방법을 정의합니다.
    예: http://, https://, ftp://

  2. 도메인 이름 (Host)
    자원이 위치한 서버의 이름입니다. 서버의 주인 이름. IP주소로도 대체 가능
    예: www.example.com
    subdomain : www가 해당 서버의 메인페이지, 이게 바뀌면 해당 서버의 부속 페이지들. www.naver.com / blog.naver.com / mail.naver.com
    secondary domain: 주인의 진짜 이름
    Top-Level Domain: 주인의 성격을 알려줌 .ac .uk .kr .co

  3. 포트 번호 (Port)
    서버의 특정 서비스를 가리키는 번호입니다. 일반적으로 생략 가능하며, 기본값은 http의 경우 80, https의 경우 443입니다.
    예: :80, :443

  4. 경로 (Path)
    서버 내에서 자원의 위치를 가리킵니다.
    예: /path/to/resource

  5. 쿼리 문자열 (Query)
    자원에 대한 추가적인 매개변수를 전달합니다.
    예: ?key1=value1&key2=value2

  6. 프래그먼트 (Fragment)
    자원의 특정 부분을 가리킵니다. 주로 웹 페이지 내의 특정 섹션으로 이동할 때 사용됩니다.
    예: #section1

프로토콜

정의
프로토콜은 컴퓨터 네트워크에서 데이터를 전송하고 받는 규칙이나 절차를 정의한 것입니다. 프로토콜은 네트워크 통신의 언어라고 생각할 수 있습니다. 이 규칙 덕분에 서로 다른 시스템과 장치들이 원활하게 통신할 수 있습니다.

주요 종류
1. HTTP (HyperText Transfer Protocol)
설명: 웹 브라우저와 웹 서버 간에 데이터를 주고받기 위해 사용하는 프로토콜입니다.
역할: 웹 페이지, 이미지, 동영상 등 다양한 웹 콘텐츠를 전송합니다.
예시: http://www.example.com

  1. HTTPS (HyperText Transfer Protocol Secure)
    설명: HTTP의 보안 버전으로, 데이터를 암호화하여 안전하게 전송합니다.
    역할: 민감한 정보(예: 로그인 정보, 결제 정보)를 안전하게 전송합니다.
    예시: https://www.example.com

  2. FTP (File Transfer Protocol)
    설명: 파일을 전송하기 위한 프로토콜입니다.
    역할: 컴퓨터 간에 파일을 업로드하거나 다운로드합니다.
    예시: ftp://ftp.example.com

  3. SMTP (Simple Mail Transfer Protocol)
    설명: 이메일을 전송하기 위한 프로토콜입니다.
    역할: 이메일 서버 간에 메일을 전송합니다.
    예시: 이메일 서버 간 메일 전송

  4. SSH (Secure Shell)
    설명: SSH는 네트워크를 통해 두 컴퓨터 간에 보안된 연결을 확립하기 위한 프로토콜입니다. 주로 원격 로그인과 명령어 실행을 위해 사용됩니다.
    역할: 네트워크를 통해 안전하게 원격 서버에 접속하고, 명령을 실행하거나 파일을 전송할 수 있습니다.
    예시: ssh user@remote_server

  5. IMAP/POP3 (Internet Message Access Protocol/Post Office Protocol)
    설명: 이메일 클라이언트가 이메일 서버에서 메일을 가져오기 위한 프로토콜입니다.
    역할: 이메일을 읽고, 가져오고, 삭제합니다.
    예시: 이메일 클라이언트와 서버 간 메일 읽기

과정
1. 클라이언트 요청: 클라이언트가 URL을 통해 HTTP 요청을 보냅니다. 예를 들어, http://www.example.com에 대한 요청입니다.
2. 서버 수신: 서버는 이 요청을 수신하고, HTTP 요청임을 인식합니다.
3. 요청 처리: 서버는 HTTP 프로토콜에 맞춰 요청을 처리합니다. 이는 요청된 자원(예: HTML 파일, 이미지 등)을 준비하는 과정입니다.
4. 응답 반환: 서버는 준비된 자원을 HTTP 응답 형식으로 클라이언트에게 보냅니다. 이 응답에는 상태 코드, 헤더, 바디가 포함됩니다.

HTTP

HTTP의 주요 구성 요소

  1. HTTP 매서드
    명령어!

  2. HTTP 엔드포인트
    엔드포인트는 클라이언트가 서버에 요청을 보낼 때 대사을 지칭하는 URL의 끝자락 값입니다. 이는 서버의 특정 리소스나 기능을 가리킵니다.

전체: https://api.example.com/users
클라이언트가 이 URL을 통해 서버에 요청을 보내면, 서버는 /users 엔드포인트에 해당하는 리소스를 처리하여 응답합니다.

  1. HTTP 코드 (Status Code)
    HTTP 상태 코드는 클라이언트의 요청에 대한 서버의 응답 상태를 나타냅니다. 상태 코드는 3자리 숫자로 구성됩니다.
    200 OK: 요청이 성공적으로 처리되었음을 나타냅니다.
    404 Not Found: 요청한 리소스를 찾을 수 없음을 나타냅니다.
    500 Internal Server Error: 서버 내부에서 오류가 발생했음을 나타냅니다.

  2. HTTP 헤더 (Header)
    HTTP 헤더는 요청 및 응답에 대한 추가 정보를 제공합니다. 헤더는 키-값 쌍으로 구성됩니다.
    예시:
    Content-Type: 요청 또는 응답의 콘텐츠 유형을 나타냅니다 (예: application/json).
    Authorization: 인증 정보를 포함합니다 (예: Bearer token).
    User-Agent: 요청을 보낸 클라이언트의 정보입니다 (예: 브라우저 정보).

  3. HTTP 바디 (Body)
    HTTP 바디는 요청 또는 응답의 실제 데이터를 포함합니다. 바디는 HTML, JSON, XML, 텍스트 등의 형식일 수 있습니다.

즉, 바디는 데이터 그 자체, 헤더는 그 데이터들의 다양한 옵션들...

HTTP 매서드

  1. GET
    설명: 서버에서 자원을 요청할 때 사용됩니다.
    역할: 데이터를 조회합니다. 요청에 대한 응답으로 서버는 요청된 자원을 반환합니다.
    예시: GET /items/1 (아이디가 1인 아이템을 조회해줘!)

  2. POST
    설명: 서버에 데이터를 제출할 때 사용됩니다.
    역할: 새로운 자원을 생성합니다. 서버는 요청의 결과로 생성된 자원에 대한 정보를 반환합니다.
    예시: POST /items (새로운 아이템을 생성해줘!)

  3. PUT
    설명: 서버의 기존 자원을 업데이트할 때 사용됩니다.
    역할: 자원을 전체적으로 갱신합니다. 요청된 자원 전체를 바꾸며, 서버는 갱신된 자원을 반환합니다.
    예시: PUT /items/1 (아이디가 1인 아이템을 업데이트해줘!)

  4. PATCH
    설명: 서버의 기존 자원을 부분적으로 업데이트할 때 사용됩니다.
    역할: 자원의 일부를 수정합니다. PUT과 달리 전체 자원이 아닌 부분적인 업데이트를 수행합니다.
    예시: PATCH /items/1 (아이디가 1인 아이템의 일부를 수정해줘!)

  5. DELETE
    설명: 서버에서 자원을 삭제할 때 사용됩니다.
    역할: 요청된 자원을 삭제합니다. 서버는 삭제가 성공적으로 완료되었음을 나타내는 응답을 반환합니다.
    예시: DELETE /items/1 (아이디가 1인 아이템을 삭제해줘!)

  6. HEAD
    설명: GET 요청과 유사하지만, 서버는 응답 본문을 반환하지 않습니다.
    역할: 서버의 상태나 자원의 메타데이터를 확인합니다.
    예시: HEAD /items/1 (아이디가 1인 아이템의 헤더 정보를 조회해줘!)

  7. OPTIONS
    설명: 서버에서 허용되는 메서드를 확인할 때 사용됩니다.
    역할: 특정 자원에 대해 서버가 지원하는 HTTP 메서드를 확인합니다.
    예시: OPTIONS /items (이 아이템에대해서 내가 쓸수 있는 메서드를 조회해줘!)

포트

포트는 네트워크 통신에서 특정 서비스를 식별하기 위해 사용되는 논리적 번호입니다. 포트는 IP 주소와 함께 사용되어 데이터가 적절한 애플리케이션으로 전달되도록 합니다.

IP: 그 데이터를 김윤아에게 가져와!
포트: 김윤아가 들고 있는 바구니 중에서 A바구니에 넣어!

포트의 역할
식별: 동일한 IP 주소에서 여러 애플리케이션이 실행될 수 있는데, 포트 번호를 사용하여 특정 애플리케이션을 식별합니다.
통신: 클라이언트와 서버 간의 통신이 이루어지는 엔드포인트를 정의합니다.

포트 번호

  • 0-1023 (Well-Known Ports): 범용 서비스와 프로토콜에 예약된 포트입니다.
    80: HTTP
    443: HTTPS
    22: SSH
    21: FTP

  • 1024-49151 (Registered Ports): 특정 애플리케이션에 등록된 포트입니다.

  • 49152-65535 (Dynamic/Private Ports): 임시 또는 개인용으로 사용되는 포트입니다. 동적으로 할당될 수 있습니다.

주의) 포트충돌시 오류 발생 - 포트를 바꿔줘야한다!

정적 웹사이트 / 동적 웹사이트

정적 웹사이트 (Static Website)
정적 웹사이트는 HTML 파일로 구성된 웹사이트로, 서버에서 클라이언트로 그대로 전송됩니다. 이러한 웹사이트는 변경되지 않는 콘텐츠를 제공합니다.

  • 특징:
    고정된 콘텐츠: 콘텐츠가 고정되어 있으며, 페이지의 내용이 자주 변경되지 않습니다.
    빠른 로딩 속도: 서버에서 클라이언트로 파일을 바로 전송하므로 로딩 속도가 빠릅니다.
    유지보수 용이: 서버 측에서 복잡한 처리가 필요하지 않으므로 관리가 쉽습니다.
    예시: 개인 블로그, 포트폴리오 사이트, 회사 소개 사이트 등

동적 웹사이트 (Dynamic Website)
동적 웹사이트는 서버에서 클라이언트의 요청에 따라 콘텐츠가 동적으로 생성되는 웹사이트입니다. 이러한 웹사이트는 사용자 인터랙션에 따라 페이지의 내용이 변경됩니다.

  • 특징:
    변경 가능한 콘텐츠: 사용자 입력, 데이터베이스 정보 등을 기반으로 페이지의 내용이 변경됩니다.
    복잡한 처리: 서버 측에서 데이터를 처리하고 결과를 생성하여 클라이언트에 전송합니다.
    유연성: 사용자 맞춤형 콘텐츠 제공이 가능합니다.
    예시: 페이지의 틀만 같고 유저의 요청/데이터에 따라 서로 다른 내요들로 채워지는 ... 소셜 미디어, 전자 상거래 사이트, 뉴스 사이트

동적 웹사이트의 두 종류

1. 서버 사이드 렌더링 (Server-Side Rendering, SSR)

  • 설명: 서버에서 HTML을 동적으로 생성하여 클라이언트에 전송합니다. 클라이언트는 완성된 HTML을 수신하여 렌더링합니다.
    장점: 초기 로딩 속도가 빠르고, 사용자별 맞춤형 내용 제공에 유리합니다.
    예시: 전통적인 웹 애플리케이션(예: PHP, ASP.NET), 일부 Node.js 프레임워크(예: Next.js)

2. 클라이언트 사이드 렌더링 (Client-Side Rendering, CSR)

  • 설명: 서버에서 기본 HTML을 전송하고, JavaScript를 통해 클라이언트 측에서 동적으로 콘텐츠를 생성 및 렌더링합니다.
    장점: 사용자 경험이 매끄럽고, 클라이언트 측에서 빠른 인터랙션이 가능합니다.
    예시: 모던 웹 애플리케이션(예: React, Vue.js, Angular)

03 데이터베이스

관계형 데이터베이스 (Relational Database)

관계형 데이터베이스는 데이터를 테이블 형식으로 저장하며, 각 테이블은 행과 열로 구성됩니다. 테이블 간의 관계는 외래 키(foreign key)를 통해 정의됩니다.

  • 특징:
    구조화된 데이터: 데이터는 테이블 형식으로 저장되며, 각 테이블은 고유한 스키마를 가집니다. 즉 심혈을 기울여 구조를 기획하고, 활용시에도 엄격하고 고정된 활용도를 가지게 된다.
    관계: 테이블 간의 관계를 통해 데이터의 정합성을 유지합니다.
    SQL: 데이터 쿼리 및 조작을 위해 구조적 질의 언어(SQL)를 사용합니다.
    트랜잭션 지원: ACID(Atomicity, Consistency, Isolation, Durability) 특성을 지원하여 데이터의 일관성과 신뢰성을 보장합니다.
  • 예시:
    MySQL: 오픈 소스 관계형 데이터베이스 관리 시스템.
    PostgreSQL: 객체 관계형 데이터베이스 시스템.
    Oracle DB: 상업용 관계형 데이터베이스 관리 시스템.


비관계형(NoSQL) 데이터베이스 (NoSQL Database)

비관계형(NoSQL) 데이터베이스는 테이블 형식이 아닌 다양한 데이터 모델을 지원합니다. 이는 주로 대용량 데이터와 높은 성능 요구 사항을 충족시키기 위해 사용됩니다.

  • 특징:
    유연한 데이터 모델: 키-값, 문서, 그래프, 칼럼 패밀리 등 다양한 데이터 모델을 지원합니다.
    수평 확장성: 데이터를 분산된 방식으로 저장하며, 수평 확장을 통해 성능을 향상시킵니다.
    스키마 없음: 데이터 구조가 고정되어 있지 않아 유연한 스키마를 가질 수 있습니다.
    고성능: 대규모 데이터를 빠르게 처리할 수 있습니다.
  • 예시:
    MongoDB: 문서 지향 데이터베이스로, JSON과 유사한 BSON 형식을 사용합니다.
    Cassandra: 분산형 칼럼 패밀리 데이터베이스로, 높은 확장성과 가용성을 제공합니다.
    Redis: 인메모리 키-값 저장소로, 빠른 데이터 접근을 지원합니다.
    Neo4j: 그래프 데이터베이스로, 복잡한 관계를 저장하고 쿼리하는 데 최적화되어 있습니다.

참고) 좋고 나쁜 건 없다! 상황에 맞게 사용하기
비관계형이 늘어나는 추세지만, 관계형이 주되게 사용된다
비관계형은 그냥 일단 데이터를 저장해두는 경우에도 사용된다 (예: 우리 웹사이트에서 고객들이 어디를 클릭하는지 로그기록 일단 다 저장해두기)

04 API

API(Application Programming Interface)소프트웨어 애플리케이션 간의 상호작용을 가능하게 하는 인터페이스(규칙, 도구의 집합)입니다. 이를 통해 서로 다른 소프트웨어 시스템이 데이터를 주고받고 기능을 호출할 수 있습니다.

클라이언트: API를 호출하여 데이터를 요청하거나 기능을 수행하는 애플리케이션.
서버: API 요청을 받아들이고, 요청된 작업을 수행하여 클라이언트에 응답하는 시스템.

동작순서
1. 클라이언트 요청 (Request)
클라이언트 애플리케이션이 서버의 API에 요청을 보냅니다. 요청에는 필요한 데이터와 원하는 작업을 지정합니다.
예: HTTP 요청 (GET, POST, PUT, DELETE 등)을 통해 API 호출.

  1. 서버 처리 (Processing)
    서버는 클라이언트로부터 받은 요청을 처리합니다. 요청된 데이터나 기능에 따라 작업을 수행합니다.
    예: 데이터베이스 조회, 데이터 생성/수정/삭제, 외부 API 호출 등.

  2. 서버 응답 (Response)
    서버는 요청된 작업을 완료한 후, 결과를 클라이언트에 응답합니다. 응답에는 상태 코드, 헤더, 바디가 포함됩니다.
    예: JSON 형식의 데이터, 상태 코드(200 OK, 404 Not Found 등).

API의 구성 요소

  • 엔드포인트 (Endpoint): API가 제공하는 리소스나 기능을 가리키는 URL 경로입니다.
  • 메서드 (Method): API 요청의 종류를 나타냅니다. 주로 HTTP 메서드를 사용합니다 (GET, POST, PUT, DELETE 등).
  • 헤더 (Header): 요청이나 응답에 대한 메타데이터를 포함합니다 (예: Content-Type, Authorization).
  • 바디 (Body): 요청 또는 응답의 실제 데이터를 포함합니다. 주로 JSON, XML 등의 형식을 사용합니다.
    JSON

HTTP와 API 똑같은데?
HTTP : 서버간의 통신
API : 어플리케이션 간의 통
사실 역할이 같음! 그래서 똑같음!
그리고 대부분의 API가 가장 안정적이고 표준화된 HTTP를 기반으로 만들어진거임

JSON (JavaScript Object Notation)
JSON (JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 경량 데이터 형식입니다. JSON은 사람이 읽기 쉬운 텍스트 형식으로, 구조화된 데이터를 표현하는 데 사용됩니다. 주로 웹 애플리케이션에서 서버와 클라이언트 간의 데이터 교환에 많이 사용됩니다. 간결 / 유연 / 호환

JSON의 사용예시
1. API: 클라이언트가 요청한 내용을 서버가 JSON 형태로 반환한다 예) 사용자정보, 상품 목록 정보

  1. 앱/도커의 설정값: 각 설정항목에 대응되는 설정값을 JSON상태로 저장해서 사용한다.

요약

서버와 클라이언트
IP와 도메인 : 서버 이름, 서버 식별
URL : 서버 내 자원 위치 , 자원 식별
프로토콜 : 서버와 클라이언트 간의 통신 언어
포트 : 서버/클라이언트 내 애플리케이션 식별
브라우저

HTTP 매서드 : 명령어
HTTP 엔드포인트 : 대상 지칭
HTTP 코드 : 명령어 상태
HTTP 헤드 : 바디의 옵션들
HTTP 바디 : 내용물 그 자체
GET POST PUT PATCH DELETE

정적 웹사이트 / 동적 웹사이트 / 서버 사이드 / 클라이언트 사이드

관계형 데이터베이스 / 비관계형 데이터 베이스

API : 어플리케이션 간의 소통을 위한 인터페이스

05 FastAPI와 포스트맨

툴 정의

FastAPI: Python으로 작성된 고성능 웹 프레임워크로, RESTful API를 쉽고 빠르게 개발할 수 있도록 도와줍니다. 즉 API 잘만들어주는 툴!

Postman: API 개발, 테스트, 문서화, 모니터링을 위한 도구로, FastAPI로 개발한 API를 테스트하고 디버깅하는 데 유용합니다

Uvicorn: ASGI 서버로, FastAPI 애플리케이션을 실행하는 데 사용됩니다. pip으로 같이 깔아야한다.

FastAPI 시작하기 : GET 서버의 값 가져오기

1) FastAPI와 Uvicorn을 설치
pip install fastapi uvicorn

확인 : pip list

2) 작업하고 싶은 폴더로 가서 파이썬 파일 하나 만들기

3) FastAPI 애플리케이션 작성하기 


##FastAPI 클래스 가져오기     
from fastapi import FastAPI

##FastAPI 클래스의 인스턴스를 생성하여 app이라는 변수에 할당
app = FastAPI()

##초기 데이터 설정 
items = {
    1: {"이름":"김윤아", "나이":"30", "직업":"회사원", "특이사항":"화가 많음"}, 
    2: {"이름":"한요한", "나이":"29", "직업":"회사원", "특이사항":"너무 침착함"}
}

##"/"경로로 GET요청이 들어오면, JSON 형식의 응답인 "message": "Hello, World!"을 반환하라. 
@app.get("/")
def read_root():
    return {"message": "Hello, let me introduce my friends"}

##'items/아이템키(위의 1, 2..)'로 들어오면 해당값을 보여줘라. 
@app.get("/items/{item_id}")
def read_item(item_id: int): 
    item = items.get(item_id)   #이부분 모르겠음.. 
    if item:    
        return item 
    return {"error": "Item not found"}

##'/items/ 경로로 들어오면 아이템들 전부 보여줘라.
@app.get("/items") 
def read_items(): 
    return items

  • 인스턴스: 클래스(Class)라는 청사진을 기반으로 생성된 구체적인 객체(Object)를 말합니다. 객체 지향 프로그래밍에서 클래스는 특정 종류의 객체를 정의하는 템플릿이며, 인스턴스는 그 템플릿을 바탕으로 생성된 실제 객체입니다.
    클래스: 설계도. 예를 들어, 자동차를 만드는 설계도라고 생각할 수 있습니다.
    인스턴스: 설계도를 바탕으로 실제로 만들어진 자동차 한 대.

  • 데코레이터: 데코레이터는 기존의 함수나 메서드에 기능을 추가하거나 수정하는 데 사용되는 Python의 고급 기능입니다. 데코레이터는 함수나 메서드의 앞에 @데코레이터이름을 붙여 사용하며, 주로 반복적인 코드의 중복을 줄이고 기능을 확장하는 데 유용합니다.

  • 엔드포인트 : 위의 API에서 엔드포인트는 '/'와 '/items/{item_id}' 두개가정의되었다.

4. API 테스트
브라우저 또는 Postman을 사용하여 API를 테스트해볼 수 있습니다.

질문) 왜 127.0.0.1:8000인가??
Uvicorn은 FastAPI 애플리케이션을 실행할 때 기본적으로 127.0.0.1 (로컬 호스트)와 포트 8000을 사용합니다.
127.0.0.1은 로컬 호스트 주소로, 현재 컴퓨터에서만 접근할 수 있는 서버 주소입니다. 포트 8000은 Uvicorn이 기본적으로 사용하는 포트 번호입니다.

참고) URL 다르게 설정하기
기본 설정이 아닌 다른 주소나 포트를 사용하고 싶다면 Uvicorn 명령어에 옵션을 추가할 수 있습니다:

uvicorn main:app --host 0.0.0.0 --port 8080 --reload

결과: 애플리케이션이 http://0.0.0.0:8080에서 실행됩니다.
참고로 host 0.0.0.0는 모든 네트워크 인터페이스에서 접근 가능하게 설정하는 겁니다.

FastAPI 시작하기 : POST 서버에 값 추가하기

최종 전체 코드 

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class Item(BaseModel):
    이름: str
    나이: int
    직업: str
    특이사항: str = None

items = {
    1: {"이름":"김윤아", "나이":"30", "직업":"회사원", "특이사항":"화가 많음"}, 
    2: {"이름":"한요한", "나이":"29", "직업":"회사원", "특이사항":"너무 침착함"}
}

@app.get("/")
def read_root():
    return {"message": "Hello, let me introduce my friends"}

@app.get("/items/{item_id}")
def read_item(item_id: int):
    item = items.get(item_id)
    if item:
        return item
    return {"error": "Item not found"}

@app.get("/items")
def read_items():
    return items

@app.post("/items/")
def create_item(item: Item):
    item_id = len(items) + 1
    items[item_id] = item.dict()
    return {"item_id": item_id, "item": item}

1. 데이터 모델 정의
먼저, 아이템의 데이터 모델을 정의할 필요가 있습니다. 즉 데이터의 틀을 정의내리기! Pydantic을 사용하여 데이터 검증과 직렬화를 처리할 수 있습니다.

우선 Pydantic 깔기:
pip install pydantic

다음 아래의 코드 추가

from pydantic import BaseModel

class Item(BaseModel):
    이름: str
    나이: int
    직업: str
    특이사항: str = None

2. POST 엔드포인트 추가
이제 새로운 아이템을 추가하는 POST 엔드포인트를 추가해봅시다.

@app.post("/items/")
def create_item(item: Item):
    item_id = len(items) + 1
    items[item_id] = item.dict()
    return {"item_id": item_id, "item": item}

3. 실행 및 테스트
이제 FastAPI 애플리케이션을 실행하고, POST 요청을 통해 새로운 아이템을 추가해볼 수 있습니다. 예를 들어, Postman을 사용하여 다음과 같이 요청을 보낼 수 있습니다:

포스트맨 앱 사용방법 : https://hyunki99.tistory.com/93

문제: 브라우저에서 무한로디엥 빠졌다.

uvicorn main:app --port 9000 --reload
포트번호 바꿔보자!

문제: 포트를 바꿔도 몇분 후면 또 api가 안됨

uvicorn main:app --reload --log-level debug

자주 발생하는 문제

pip install을 했는가?
import된 클래스 명령어인가?
변수의 철자가 다르지 않은가?
api 위치에 오타는 없는가? s나 / 여부확인!

HTTPException이 필요한 이유

500 Internal Server Error는 서버에서 발생한 예외가 원인일 수 있습니다. 로그에 "Exception in ASGI application" 메시지가 표시된다면, 애플리케이션 코드에서 예외가 발생하고 있다는 의미입니다. 구체적인 원인을 파악하려면, 예외 메시지와 스택 트레이스를 확인하는 것이 중요합니다.

# 임포트하기 
from fastapi import FastAPI, File, UploadFile, HTTPException

# 사용하기 
	except Exception as e: 
		raise HTTPException(status_code=500, detail=str
profile
YoonA Kim
코딩 배우는 중
이전 포스트

Docker 101

다음 포스트

DEV CONTAINER 101

0개의 댓글