impact7608 님의 블로그

25/01/24 TIL(17주차 금요일)

impact7608 — Fri, 24 Jan 2025 21:52:56 +0900

비밀번호 변경 기능 Issue
1. 모든 요청에 대해 성공 상태(HTTP 200)가 반환됨: 성공과 실패를 구분하지 못함.
2. 기능 작동 실패: JSON 응답 처리 도중 비밀번호 변경이 제대로 작동하지 않음.
문제 원인 분석
- form_valid와 form_invalid 메서드에서 JSON 응답을 반환하며 Django 기본 PasswordChangeView의 처리 과정을 제대로 상속하지 않았음.
- form_valid에서 기본 구현을 호출하지 않아 비밀번호 변경 로직이 동작하지 않았음.
- 인증되지 않은 사용자의 요청을 처리하지 못함.
- 기본 Django의 비밀번호 변경기능을 불러오는 super()로직이 포함 되었어야함
해결 방안 및 코드 수정
- form_valid와 form_invalid에서 Django 기본 구현을 호출한 뒤, 적절한 JSON 응답을 반환하도록 수정.
2. 인증 상태 확인 및 처리
- dispatch 메서드를 오버라이드하여 인증되지 않은 사용자 요청에 대해 명확한 HTTP 401 상태와 메시지 반환.
3. HTTP 상태 코드 사용
- 성공(200)과 실패(400)에 적절한 HTTP 상태 코드를 설정.
4. 기본 Django의 비밀번호 변경기능 불러오기
- super()로직 포함
<코드 변천사>
1. 기존 코드 : 비밀번호 변경기능은 동작하나 여러가지 실패상황에 대한 상태도 200성공 상태가 반환 되는 문제가 있었음.
```
class CustomPasswordChangeView(PasswordChangeView):
    template_name = 'profile.html'
    success_url = reverse_lazy('login')  # 로그인 페이지로 리디렉션

    def form_valid(self, form):
        # 성공 메시지 추가
        messages.success(self.request, "비밀번호가 성공적으로 변경되었습니다. 다시 로그인해주세요.")
        return super().form_valid(form)

    def form_invalid(self, form):
        # 실패 메시지 추가
        messages.error(self.request, "비밀번호 변경에 실패했습니다. 입력 정보를 확인해주세요.")
        return super().form_invalid(form)
```
1. 수정 코드 : CustomPasswordChangeView의 초기 구현은 Django 기본 PasswordChangeView를 상속하여 비밀번호 변경 성공 및 실패 시 메시지를 추가하는 단순한 구조였습니다. 이후 JSON 형태로 클라이언트에 응답을 반환하기 위해 수정했지만, 비밀번호 변경 기능 자체가 작동하지 않는 문제가 발생했습니다.
원인 분석
1. Django 기본 로직 호출 누락
2. form_valid와 form_invalid 메서드에서 Django의 기본 PasswordChangeView 로직을 호출하는 super()가 생략되었습니다. 이로 인해 실제 비밀번호 변경이 이루어지지 않았습니다.
```
class CustomPasswordChangeView(PasswordChangeView):
    template_name = 'profile.html'
    success_url = reverse_lazy('login')

    def form_valid(self, form):
        messages.success(self.request, "비밀번호가 성공적으로 변경되었습니다. 다시 로그인해주세요.")
        return JsonResponse({"success": True, "message": "비밀번호가 성공적으로 변경되었습니다."})

    def form_invalid(self, form):
        errors = form.errors.as_json()
        return JsonResponse({"success": False, "errors": errors}, status=400)
```
1. 최종 코드 :
기본 로직 유지
```
PasswordChangeView
```
가 비밀번호 변경을 처리하도록를 호출하며, 이를 바탕으로 추가적인 JSON 응답을 구현.트러블슈팅 결과
1. 비밀번호 변경 로직 복원
2. super().form_valid() 및 super().form_invalid() 호출로 Django 기본 기능이 정상적으로 작동.
3. JSON 응답과 HTTP 상태 코드 개선
4. 클라이언트가 서버 응답을 명확히 이해할 수 있도록 JSON 메시지와 HTTP 상태 코드를 통합.
5. 유연하고 유지보수 가능한 코드
6. 확장 가능성이 높은 구조로 작성되어 추가 요구사항에도 쉽게 대응 가능.
교훈
- 기존 로직 보존의 중요성: 기본 동작을 무조건 대체하기보다는 필요한 부분만 확장하거나 덮어쓰는 방식이 안전함.
- 명확한 통신 규약: 클라이언트와 서버 간의 의사소통을 위해 HTTP 상태 코드와 메시지를 활용하는 것이 중요.
- 테스트의 필요성: 코드 수정 후 발생할 수 있는 예기치 않은 오류를 방지하기 위해 유닛 테스트와 통합 테스트가 필수
- 대부분의 실수가 urls.py에서 발생했었음. urls.py의 기본 구조 학습이 더 필요함.
class CustomPasswordChangeView(PasswordChangeView): template_name = 'profile.html' success_url = reverse_lazy('login') # 로그인 페이지로 리디렉션 def form_valid(self, form): # 비밀번호 변경 성공 시 기본 동작 유지 response = super().form_valid(form) # 추가: 상태 코드와 JSON 응답 반환 return JsonResponse({"message": "비밀번호가 성공적으로 변경되었습니다."}, status=200) def form_invalid(self, form): # 비밀번호 변경 실패 시 기본 동작 유지 super().form_invalid(form) # 추가: 상태 코드와 JSON 응답 반환 return JsonResponse( {"message": "비밀번호 변경에 실패했습니다. 입력 정보를 확인해주세요."}, status=400, ) def dispatch(self, request, *args, **kwargs): # 인증되지 않은 사용자 처리 if not request.user.is_authenticated: return JsonResponse({"message": "인증되지 않은 사용자입니다."}, status=401) return super().dispatch(request, *args, **kwargs)
super()
Django의
1. 기본 동작 유지하면서 JSON 응답 추가
기존 CustomPasswordChangeView 구현은 비밀번호 변경 성공 또는 실패 여부를 사용자에게 JSON 형태로 명확히 전달하여 상태에 따라 다른 동작을 구현할 계획이었습니다. 그러나 아래와 같은 문제가 발생했습니다:

24/01/23 TIL(17주차 목요일)

impact7608 — Thu, 23 Jan 2025 21:53:13 +0900

<!DOCTYPE html>

<head>

</head>

<body>

{% if user.is_authenticated %}

{% if messages %}

<div>

{% for message in messages %}

</div>

{% endfor %}

</div>

{% endif %}

<p class="card-text">아이디: {{ request.user.username }}</p>

<p class="card-text">이메일: {{ request.user.email }}</p>

</div>

{% csrf_token %}

<button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y"

onclick="togglePasswordVisibility('id_old_password')"> ️</button>

</div>

<button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y"

onclick="togglePasswordVisibility('id_new_password1')"> ️</button>

</div>

<button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y"

onclick="togglePasswordVisibility('id_new_password2')"> ️</button>

</div>

</form>

</div>

// 비밀번호 가시성 토글 기능

function togglePasswordVisibility(id) {

const input = document.getElementById(id);

if (input.type === "password") {

input.type = "text";

} else {

input.type = "password";

}

// 비밀번호 변경 요청 처리

document.getElementById("password-change-form").addEventListener("submit", async function (event) {

event.preventDefault(); // 기본 폼 제출 방지

const form = event.target;

try {

const response = await fetch(form.action, {

method: "POST",

headers: {

"X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,

body: new FormData(form),

});

if (response.ok) {

// 성공 시 alert 표시 후 로그아웃

alert("비밀번호가 성공적으로 변경되었습니다. 자동 로그아웃됩니다.");

setTimeout(() => {

window.location.href = "{% url 'login' %}"; // 로그아웃 후 로그인 페이지로 이동

}, 2000);

} else {

// 실패 시 alert 표시

alert("비밀번호 변경에 실패했습니다. 다시 시도해주세요.");

}

} catch (error) {

console.error("Fetch error:", error);

alert("서버와의 통신 중 문제가 발생했습니다.");

}

});

</script>

{% csrf_token %}

</form>

</div>

document.getElementById("logout-form").addEventListener("submit", async function (event) {

event.preventDefault(); // 기본 폼 제출 방지

const form = event.target;

try {

const response = await fetch(form.action, {

method: "POST",

headers: {

"X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,

});

if (response.ok) {

alert("로그아웃이 완료되었습니다."); // 팝업 메시지

window.location.href = "{% url 'login' %}"; // 로그인 페이지로 리다이렉트

} else {

alert("로그아웃 중 문제가 발생했습니다. 다시 시도해주세요.");

}

} catch (error) {

console.error("Fetch error:", error);

alert("서버와의 통신 중 문제가 발생했습니다.");

}

});

</script>

{% csrf_token %}

</form>

</div>

document.getElementById("delete-account-form").addEventListener("submit", async function (event) {

event.preventDefault();

const form = event.target;

try {

const response = await fetch(form.action, {

method: "POST",

headers: {

"X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,

});

const contentType = response.headers.get("content-type");

if (contentType && contentType.includes("application/json")) {

const data = await response.json();

alert(data.message);

window.location.href = "/login/";

} else {

alert("서버 응답 형식이 올바르지 않습니다.");

}

} catch (error) {

console.error("Fetch error:", error);

alert("서버와의 통신 중 문제가 발생했습니다.");

}

});

</script>

{% else %}

window.location.href = "{% url 'login' %}";

</script>

{% endif %}

document.getElementById('id_new_password1').addEventListener('input', function () {

const password = this.value;

const message = password.length >= 8 ? "사용 가능한 비밀번호입니다." : "비밀번호는 최소 8자 이상이어야 합니다.";

document.getElementById('password-feedback').textContent = message;

});

</script>

</body>

</html>

24/01/22 TIL(17주차 수요일) - html

impact7608 — Wed, 22 Jan 2025 22:51:09 +0900

<!DOCTYPE html>

<head>

</head>

<body>

{% if user.is_authenticated %}

{% if messages %}

<div>

{% for message in messages %}

</div>

{% endfor %}

</div>

{% endif %}

<p class="card-text">아이디: {{ request.user.username }}</p>

<p class="card-text">이메일: {{ request.user.email }}</p>

</div>

{% csrf_token %}

</div>

<button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y"

onclick="togglePasswordVisibility('id_new_password1')"> ️</button>

</div>

<button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y"

onclick="togglePasswordVisibility('id_new_password2')"> ️</button>

</div>

</form>

</div>

document.getElementById("password-change-form").addEventListener("submit", function (event) {

event.preventDefault(); // 기본 폼 제출 방지

const form = event.target;

const formData = new FormData(form);

fetch("{% url 'password_change' %}", {

method: "POST",

headers: {

"X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,

body: formData,

})

.then(response => {

if (!response.ok) {

// 응답 상태가 실패일 경우 에러 처리

return response.json().then(errorData => {

throw new Error(JSON.stringify(errorData.errors));

});

}

return response.json(); // JSON 응답 처리

})

.then(data => {

if (data.success) {

alert(data.message); // 성공 메시지

window.location.href = "{% url 'profile' %}"; // 성공 시 리다이렉트

} else {

alert("비밀번호 변경에 실패했습니다. 다시 시도해 주세요.");

console.error("Errors:", data.errors); // 서버에서 반환된 에러 로그

}

})

.catch(error => {

console.error("Error details:", error);

alert("서버와의 통신 중 문제가 발생했습니다. 다시 시도해 주세요."); // 실패 시 표시할 메시지

});

</script>

{% csrf_token %}

</form>

</div>

{% csrf_token %}

<button type="submit" class="btn btn-danger"

onclick="return confirm('정말 탈퇴하시겠습니까? 이 작업은 되돌릴 수 없습니다.')">

회원 탈퇴

</button>

</form>

</div>

{% else %}

window.location.href = "{% url 'login' %}";

</script>

{% endif %}

// 비밀번호 가시성 토글 기능

function togglePasswordVisibility(inputId) {

const passwordField = document.getElementById(inputId);

passwordField.type = passwordField.type === "password" ? "text" : "password";

}

</script>

document.getElementById('id_new_password1').addEventListener('input', function () {

const password = this.value;

const message = password.length >= 8 ? "사용 가능한 비밀번호입니다." : "비밀번호는 최소 8자 이상이어야 합니다.";

document.getElementById('password-feedback').textContent = message;

});

</script>

</body>

</html>

24/01/21 TIL(17주차 화요일) - react

impact7608 — Tue, 21 Jan 2025 23:19:31 +0900

리액트(React)는 웹 사이트나 웹 애플리케이션을 만들 때 사용하는 JavaScript 라이브러리입니다. 리액트는 사용자 인터페이스(UI)를 쉽게 만들고, 관리할 수 있게 도와줍니다.

위 코드는 리액트를 사용하여 웹 페이지에 텍스트와 제목을 표시하는 예시입니다. 그럼 하나씩 설명해볼게요!

1. 리액트 컴포넌트(React Component)

리액트에서 웹 페이지는 **컴포넌트(Component)**라는 작은 조각들로 이루어집니다. 컴포넌트는 HTML을 작성하는 템플릿 같은 역할을 합니다. 예를 들어, 위 코드에서 App은 하나의 컴포넌트입니다.

2. import (컴포넌트 가져오기)

리액트에서는 다른 파일에 있는 기능을 사용하려면 import 키워드를 사용해야 합니다. 예를 들어:

import { MantineProvider, Flex, Text, Title } from '@mantine/core';

이 코드는 @mantine/core라는 외부 라이브러리에서 **MantineProvider, Flex, Text, Title**이라는 컴포넌트를 가져오는 코드입니다. 이 컴포넌트들은 웹 페이지를 꾸미는 데 유용합니다.

3. MantineProvider (전역 설정)

MantineProvider는 Mantine 라이브러리의 기본 스타일이나 설정을 전체 페이지에 적용할 수 있게 해주는 컴포넌트입니다. 예를 들어, 글씨의 색이나 크기 같은 스타일을 일괄적으로 적용할 수 있습니다.

4. Flex (배치 방법 설정)

Flex는 자식 컴포넌트들을 배치할 때 사용하는 컴포넌트입니다. 이 코드는 Flex dir="column"이라고 설정되어 있는데, dir="column"은 자식 컴포넌트들이 세로로 정렬되도록 만든다는 뜻입니다. 기본적으로는 가로로 정렬되는데, 이 코드는 세로로 쌓이게 만듭니다.

5. Text (텍스트 표시)

Text는 화면에 텍스트를 표시할 때 사용하는 컴포넌트입니다. 위 코드에서는 Text 안에 "This is my example"이라는 문구가 들어가 있습니다. 이 부분은 화면에 보이는 글씨가 될 것입니다.

6. Title (제목 표시)

Title은 제목을 표시하는 컴포넌트입니다. 예를 들어, 페이지의 제목을 크고 굵게 표시할 때 사용됩니다. order={1}은 제목의 크기를 지정하는데, 1은 가장 큰 제목을 의미합니다.

코드 수정 내용

원래 코드에서는 Title을 가져오지 않았기 때문에 오류가 나고, Flex와 Text가 제대로 닫히지 않아서 문제가 있었습니다. 그래서 올바르게 고친 코드는 다음과 같습니다:

import logo from './logo.svg';
import './App.css';
import { MantineProvider, Flex, Text, Title } from '@mantine/core';  // Title도 추가해야 함

function App() {
  return (
    <MantineProvider>
      {/* dir='column' -> 위에서 아래로 정렬 */}
      <Flex dir="column">
        {/* Text -> 일반 글씨 */}
        <Text>This is my example</Text>
        {/* Title 추가 예시 */}
        <Title order={1}>This is a title</Title> {/* Title 컴포넌트도 예시로 추가 */}
      </Flex>
    </MantineProvider>
  );
}

export default App;

중요한 부분:

import: 다른 파일이나 라이브러리에서 컴포넌트를 가져오는 명령어입니다.
MantineProvider: Mantine 라이브러리의 스타일과 설정을 적용하는 컴포넌트입니다.
Flex: 자식 컴포넌트들이 세로로 정렬되도록 해주는 컴포넌트입니다.
Text: 화면에 텍스트를 표시하는 컴포넌트입니다.
Title: 제목을 표시하는 컴포넌트입니다.

리액트 기본 개념 정리

컴포넌트(Component): 리액트 앱에서 화면을 만드는 작은 단위입니다. 컴포넌트는 HTML처럼 보이지만, 동적이고 재사용 가능한 코드 조각입니다.
JSX: 리액트에서 HTML을 JavaScript처럼 사용하도록 도와주는 문법입니다. <Text>This is my example</Text> 같은 코드는 JSX입니다.
상태(State): 리액트에서는 데이터를 상태(state)로 관리합니다. 상태가 변경되면 리액트는 자동으로 화면을 업데이트합니다.
props: 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용하는 방법입니다.

리액트는 이렇게 작은 컴포넌트들을 조합하여 더 큰 웹 애플리케이션을 만드는 데 아주 유용한 도구입니다!

24/01/16 TIL(16주차 목요일) - 브랜치 pull시 주의사항

impact7608 — Thu, 16 Jan 2025 11:29:01 +0900

develop 브랜치를 최신화하고 Chan 브랜치와 동기화하려면 먼저 develop 브랜치로 이동한 후, git fetch origin으로 원격에서 최신 코드를 가져오고 git pull origin develop으로 브랜치를 최신 상태로 만든다. 이후 Chan 브랜치로 체크아웃하고, git merge develop을 실행하여 develop 브랜치의 내용을 병합하거나, git rebase develop을 사용하여 리베이스할 수 있다. 만약 충돌이 발생하면 충돌 파일을 수정하고 git add . 후, 병합 시에는 git commit을, 리베이스 시에는 git rebase --continue를 실행하여 충돌을 해결한다. 마지막으로, 병합 결과를 원격 저장소로 푸시하려면 git push origin Chan을 사용하고, 리베이스를 한 경우에는 git push origin Chan --force로 강제 푸시를 해야 한다. 이렇게 하면 develop 브랜치의 최신 상태를 반영한 Chan 브랜치가 완성된다.

1. develop 브랜치 최신화
develop 브랜치로 이동하여 최신 상태로 만든다.

git checkout develop          # develop 브랜치로 체크아웃
git fetch origin              # 원격에서 최신 코드 가져오기
git pull origin develop       # 최신 상태로 병합

2. Chan 브랜치로 이동 및 동기화
Chan 브랜치로 이동하여 develop 브랜치 내용을 병합하거나 리베이스한다.

병합:

git checkout Chan             # Chan 브랜치로 이동
git merge develop             # develop 브랜치 병합

리베이스:

git checkout Chan             # Chan 브랜치로 이동
git rebase develop            # develop 브랜치 리베이스

3. 충돌 해결(필요 시)
충돌이 발생하면 충돌 파일을 수정한 후:

병합일 경우:

git add .
git commit

리베이스일 경우:

git rebase --continue

4.원격 저장소로 푸시
동기화한 내용을 원격 저장소로 푸시한다.

병합 : git push origin Chan

리베이스: git push origin Chan --force

requirements.txt에 있는 패키지들을 설치하려면 먼저 현재 디렉토리에 requirements.txt 파일이 있는지 확인한다. 파일이 있다면, 패키지 설치 전에 가상 환경(virtual environment)을 생성하고 활성화하는 것이 좋다. 가상 환경은 python -m venv venv 명령으로 생성할 수 있으며, Windows에서는 venv\Scripts\activate, macOS/Linux에서는 source venv/bin/activate로 활성화한다. 가상 환경 활성화 후, pip install -r requirements.txt 명령을 실행하면 파일에 명시된 패키지들이 설치된다. 설치가 완료되면 pip freeze 명령으로 설치된 패키지 목록을 확인할 수 있다. 만약 설치 중 에러가 발생하면 Python 버전을 확인하거나(python --version), pip를 최신 버전으로 업데이트(pip install --upgrade pip), 혹은 의존성 문제를 해결하여 에러를 처리한다.

24/01/15 TIL(16주차 수요일)

impact7608 — Wed, 15 Jan 2025 20:53:53 +0900

from django.shortcuts import render
from django.http import JsonResponse, HttpResponse
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from .serializers import UserSerializer
from rest_framework_simplejwt.views import TokenObtainPairView
from django.shortcuts import redirect
from django.views import View
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import json
from .llm import generate_chat_response
from langchain_openai import OpenAIEmbeddings




# Create your views here.

def index(request):
    return JsonResponse({'message': 'Hello, this is accounts app!'})


class RegisterView(APIView):
    def post(self, request):
        serializer = UserSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response({'message': 'User created successfully!'}, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)


class LoginView(TokenObtainPairView):
    pass

class InitialSetupPage(View):
    def get(self, request):
        return HttpResponse("Initial setup page loaded.")
    
def login_page(request):
    return render(request, 'login.html')

def login_redirect(request):
    return redirect('chatbot_page')

def register_page(request):
    return render(request, 'register.html')

def index(request):
    # 기본 경로에서 JSON 응답 반환
    return JsonResponse({'message': 'Hello, this is accounts app!'})

def chatbot_page(request):
    # /chatbot/ 경로에서 chatbot.html 템플릿 렌더링
    return render(request, 'chatbot.html')

@csrf_exempt
def chatbot_api(request):
    if request.method == "POST":
        data = json.loads(request.body)
        user_message = data.get("message", "")

        # 간단한 봇 응답 로직
        bot_response = f"You said: {user_message}"
        return JsonResponse({"response": bot_response})
    return JsonResponse({"error": "Invalid request method"}, status=400)

def friends_selection(request):
    # 등장인물 선택 화면 렌더링
    return render(request, 'friends_selection.html')

def chatbot_page(request):
    # URL 쿼리 파라미터에서 캐릭터 이름 가져오기
    character = request.GET.get('character', 'Default')
    return render(request, 'chatbot.html', {'character': character})

# 캐릭터 정보 (예제)
characters = {
    "Rachel": "I'm Rachel Green, your fashion guru!",
    "Ross": "Hi, I'm Ross Geller. Let's talk about science and love!",
    "Monica": "I'm Monica Geller, the perfectionist chef. Need tips?",
    "Chandler": "Chandler Bing here! Ready for some sarcasm?",
    "Joey": "Joey Tribbiani! 'How you doin'?'",
    "Phoebe": "Phoebe Buffay, quirky musician at your service.",
}

@csrf_exempt
def chatbot_api(request):
    if request.method == "POST":
        data = json.loads(request.body)
        character_name = data.get("character", "Default")  # 요청에서 캐릭터 이름 가져오기
        user_query = data.get("message", "")  # 요청에서 사용자 메시지 가져오기

        try:
            # LLM의 generate_chat_response 호출 (캐릭터 이름과 메시지 전달)
            response = generate_chat_response(character_name, user_query)
            return JsonResponse({"response": response})  # JSON 응답 반환
        except Exception as e:
            return JsonResponse({"error": str(e)}, status=500)  # 예외 처리
    return JsonResponse({"error": "Invalid request method"}, status=400)  # POST가 아닌 경우 처리

24/01/14 TIL(16주차 화요일) - Merge

impact7608 — Tue, 14 Jan 2025 21:06:24 +0900

1. 로컬 저장소 상태 확인

git stauts

현재 변경사항이 없도록 클린 상태인지 확인해줘.

2. develop 브랜치로 전환

git checkout develop

병합할 대상 브랜치로 이동.

3. 최신상태로 업데이트

git pull origin develop

develop 브랜치를 최신 상태로 업데이트.

4. Chan 브랜치를 병합

git merge Chan

Chan 브랜치의 변경사항을 develop 브랜치에 병합.

5. 병합 충돌 확인 및 해결

만약 충돌이 발생하면, 충돌 파일들을 수정한 뒤 아래 명령어를 실행해

git add <파일명>
git commit

6. 병합 결과 푸시

git push origin develop

병합된 develop 브랜치를 원격 저장소로 푸시.

24/01/13 TIL(16주차 월요일)

impact7608 — Tue, 14 Jan 2025 00:52:01 +0900

import os
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from langchain.schema import Document
from langchain_openai import OpenAIEmbeddings
from langchain_community.vectorstores import FAISS
from langchain.text_splitter import CharacterTextSplitter
from django.conf import settings
import json



# .env 파일에서 환경 변수 로드
load_dotenv()
api_key = os.getenv("OPENAI_API_KEY")
if not api_key:
    raise ValueError("API 키가 .env 파일에 설정되어 있지 않습니다.")

embeddings = OpenAIEmbeddings()


def format_character_name(character_name):
    """캐릭터 이름을 파일명에 맞게 포맷팅"""
    return character_name.strip().lower().replace(" ", "_") + "_prompt.txt"


def load_character_prompt(character_name):
    """캐릭터에 맞는 프롬프트를 파일에서 읽어오거나 기본값 반환"""
    try:
        file_path = os.path.join(
            os.path.dirname(os.path.abspath(__file__)),
            "prompts",
            format_character_name(character_name),
        )
        with open(file_path, "r", encoding="utf-8") as file:
            return file.read().strip()
    except FileNotFoundError:
        return f"Hi, I am {character_name.capitalize()}. Let's talk!"


def load_scripts(folder):
    """폴더 내 텍스트 파일을 Document 리스트로 로드"""
    documents = []
    for root, _, files in os.walk(folder):
        for file in files:
            if file.endswith(".txt"):
                with open(os.path.join(root, file), 'r', encoding='utf-8') as f:
                    content = f.read()
                    documents.append(Document(page_content=content))
    return documents


def prepare_vectorstore(documents):
    """벡터스토어 준비"""
    splitter = CharacterTextSplitter(chunk_size=900, chunk_overlap=90)
    split_docs = splitter.split_documents(documents)
    vectorstore = FAISS.from_documents(split_docs, embeddings)
    return vectorstore.as_retriever(search_type="similarity", search_kwargs={"k": 3})


# 캐릭터 클래스 정의
class Character:
    def __init__(self, name, age, job, hobbies, skills, personality, catchphrases, conversation_patterns, intro=None, relationships=None):
        self.name = name
        self.age = age
        self.job = job
        self.hobbies = hobbies
        self.skills = skills
        self.personality = personality
        self.catchphrases = catchphrases
        self.conversation_patterns = conversation_patterns
        self.intro = intro if intro else f"Hello, I'm {name}!"
        self.relationships = relationships if relationships else {}


def create_characters():
    return [
        Character(
            name="Rachel",
            age=28,
            job="Fashion Consultant",
            hobbies=["Shopping", "Socializing", "Traveling"],
            skills=["Fashion sense", "Styling", "Branding"],
            personality="Charming, fashionable, loyal, sometimes naive, and optimistic.",
            catchphrases=["'Could I BE any more...?'"],
            conversation_patterns=["Gossipy", "Supportive", "Slightly dramatic"],
            intro="Hey! I'm Rachel Green. I love fashion and shopping. Want to tell me your story?",
            relationships={"Monica": "Best friend", "Ross": "Romantic interest"}
        ),
        Character(
        name="Monica",
        age=28,
        job="Chef",
        hobbies=["Cooking", "Organizing", "Playing with her nephews"],
        skills=["Cooking", "Cleaning", "Organization"],
        personality="Competitive, Organized, Caring, Slightly neurotic, and loves control.",
        catchphrases=["'Welcome to the real world! It sucks. You’re gonna love it!'"],
        conversation_patterns=["Perfectionistic", "Caring", "Occasionally bossy"],
        intro="Hey! I'm Monica Geller. I love cooking and cleaning. Creating a perfect world is my life's goal!",
        relationships={"Rachel": "Best friend", "Chandler": "Husband"}
        ),
        Character(
        name="Chandler",
        age=28,
        job="Statistical Analysis and Data Reconfiguration",
        hobbies=["Sarcasm", "Humor", "Making jokes"],
        skills=["Quick wit", "Sarcasm", "Self-deprecating humor"],
        personality="Sarcastic, Witty, Self-deprecating, Slightly awkward, Endearing",
        catchphrases=["'Could I BE any more...?'"],
        conversation_patterns=["Dry humor", "Sarcastic", "Joking", "Self-criticism"],
        intro="Could I BE any more excited to meet you? Nah, I didn’t think so.",
        relationships={"Monica": "Wife", "Joey": "Close friend"}
        ),
        Character(
        name="Ross",
        age=29,
        job="Paleontologist",
        hobbies=["Dinosaurs", "Science", "Reading"],
        skills=["Scientific knowledge", "Teaching", "Paleontology"],
        personality="Intelligent, Sensitive, Often socially awkward, Can be jealous",
        catchphrases=["'We were on a break!'"],
        conversation_patterns=["Analytical", "Clumsy", "Sometimes serious but also passionate"],
        intro="Hi, I’m Ross. I’m a paleontologist... and yes, I love dinosaurs!",
        relationships={"Rachel": "Romantic interest", "Monica": "Sister", "Chandler": "Close friend"}
        ),
        Character(
        name="Joey",
        age=27,
        job="Actor",
        hobbies=["Acting", "Eating", "Dating"],
        skills=["Acting", "Charm", "Having a good time"],
        personality="Fun-loving, Charming, Sometimes naive, a bit of a ladies' man",
        catchphrases=["'How you doin'?'"],
        conversation_patterns=["Confident", "Playful", "Naive"],
        intro="Hey! Joey Tribbiani here. I’m an actor... and I know how to have a good time!",
        relationships={"Chandler": "Best friend", "Rachel": "Ex-girlfriend"}
        ),
        Character(
        name="Phoebe",
        age=28,
        job="Masseuse, Musician",
        hobbies=["Playing guitar", "Singing", "Yoga"],
        skills=["Music", "Singing", "Positive energy"],
        personality="Eccentric, Free-spirited, Optimistic, Kind-hearted",
        catchphrases=["'Smelly Cat, Smelly Cat, what are they feeding you?'"],
        conversation_patterns=["Quirky", "Optimistic", "Often sings or makes strange comments"],
        intro="Hi, I’m Phoebe Buffay. I play the guitar and I’m a total free spirit!",
        relationships={"Monica": "Best friend", "Mike": "Husband"}
        )
]


def generate_chat_response(character_name, user_query, summary_threshold=500):
    """챗봇 응답을 생성하는 함수"""
    # 캐릭터 생성 및 선택
    characters = create_characters()
    selected_character = next(
        (char for char in characters if char.name.lower() == character_name.lower()), None
    )
    if not selected_character:
        return f"Character '{character_name}' not found."

    # 캐릭터 프롬프트 로드
    character_prompt = load_character_prompt(selected_character.name)

    # 캐릭터 프롬프트 생성 (캐릭터 클래스 포함)
    character_prompt = f"""
    You are {selected_character.name}, a {selected_character.job}. 
    Your personality: {selected_character.personality}.
    Your catchphrases: {" | ".join(selected_character.catchphrases)}.
    Your hobbies: {", ".join(selected_character.hobbies)}.
    You are having a conversation with a friend. Be {", ".join(selected_character.conversation_patterns)}.
    """

    # 대본 데이터 로드
    script_docs = load_scripts(os.path.join(settings.BASE_DIR, "whatsup", "Friends_Scripts"))

    # 벡터스토어 생성
    documents = [Document(page_content=character_prompt)] + script_docs
    vectorstore = prepare_vectorstore(documents)

    # 벡터스토어 검색
    search_results = vectorstore.get_relevant_documents(user_query)[:2]
    context = character_prompt + "\n" + "\n".join(doc.page_content for doc in search_results)

    # ChatOpenAI 모델 생성 및 호출
    model = ChatOpenAI(model="gpt-4", openai_api_key=api_key, max_tokens=200,temperature=0,)
    messages = [{"role": "system", "content": context}, {"role": "user", "content": user_query}]
    response = model.invoke(messages)

    return response.content

24/01/07 TIL(15주차 수요일) - 커밋

impact7608 — Wed, 8 Jan 2025 23:40:46 +0900

git log --oneline

예제 출력:

코드 복사

git cherry-pick <커밋 해시>

7. 작업 확인 후 원래 상태로 복원하기

특정 커밋으로 이동한 후 원래 상태로 돌아오고 싶다면:

bash

코드 복사

git checkout <브랜치 이름>

원래 작업하던 브랜치로 돌아가.

요약

커밋 확인만 → git checkout <커밋 해시>
커밋 기반으로 새 브랜치 생성 → git checkout -b <브랜치 이름> <커밋 해시>
브랜치 되돌리기 → git reset --hard <커밋 해시>
안전하게 되돌리기 → git revert <커밋 해시>

24/01/07 TIL(15주차 화요일)

impact7608 — Tue, 7 Jan 2025 23:27:10 +0900

<aside> 또다시 HTTP 이야기

Hyper Text Transfer Protocol
⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
요청(Request)
- 클라이언트 → 서버로 전송되는 메세지
응답(Response)
- 서버 → 클라이언트로 전송되는 메세지
특성
- Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
- → 서버가 클라이언트의 상태를 보존하지 않습니다.
- Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
- → 이후 HTTP1.1이 등장하면서 개선되었습니다.
- → 요청 받고 응답을 주고나면 연결을 종료합니다.
⇒ 단순하며 확장성이 용이한 구조

</aside>

HTTP Message

요청(Request)

클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.

응답(Response)

요청에 대한 서버의 답변을 의미합니다.

Http Message의 구조

요청과 응답은 구조가 비슷합니다.
시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
HTTP Header - 요청에 대한 설명, 본문에 대한 설명
빈줄(Blank Line) - 메타 정보의 끝을 알림
HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서

<aside> 예시

출처 : MDN

요청(Request)

Start Line
- Method, Traget, HTTP Version
Headers
- 요청에 필요한 여러가지 메타 정보
Body
- 요청에 필요한 여러가지 데이터

응답(Response)

Start Line
- HTTP Version, Status Code, Status Message
Headers
- 응답에 대한 열가지 메타 정보
Body
- 요청을 처리한 여러가지 데이터 </aside>

HTTP Request Methods

<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods

</aside>

요청 자원에 대한 행위를 나타냅니다.
- 어떤 동작을 하려고 하는지를 나타내요!
GET, POST, PUT, DELETE, …

→ REST 이야기할 때 조금 더 알아보아요!

HTTP Status Code

<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status

</aside>

HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
크게 5개의 그룹으로 나누어집니다.
- 1XX : Informational Response
- 2XX : Successful Response
  - 성공 - 에러없이 요청이 성공.
  - 요청이 성공했고 새로운 데이터가 만들어짐.
  - 요청은 정상적이나 아직 처리가 완료되지 않음.
  - 요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
- 출처 http.cat
- → 204 No Content
- 출처 http.cat
- → 202 Accepted
- 출처 http.cat
- → 201 Created
- 출처 http.cat
- → 200 OK
- 3XX : Redirection Message
- 4XX : Client Error Response
  - 클라이언트의 요청이 잘못되었음.
  - 서버는 해당 요청을 처리하지 않음.
  - 클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
  - 서버에서 요청을 이해했으나 금지된 요청.
  - 요청에 대한 자원이 있으나 수행할 권한이 없음.
  - 요청한 자원을 찾을 수 없음.
- 출처 http.cat
- → 404 Not Found
- 출처 http.cat
- → 403 Forbidden
- http.cat
- → 401 Unauthorized
- 출처 http.cat
- → 400 Bad Request
- 5XX : Server Error Response
  - 요청에 대해 서버가 수행하지 못하는 상황.
  - 서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
  - 서버가 요청을 처리할 준비가 되지 않았음.
  - 서버가 다운되었거나 일시적으로 중단된 상태.
- 출처 http.cat
- → 503 Service Unavailable
- 출처 http.cat
- → 500 Internal Server Error

02. URL

<aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?

</aside>

<aside> 웹에서의 자원의 식별

우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
→ 문서, 사진, 영상 등이 바로 자원이에요!
이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>

URI (Uniform Resource Identifier)

통합 자원 식별자입니다.
인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
하위 개념 - URN, URL

⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!

URL(Uniform Resource Locator)

**통합 자원 위치(Location)**를 의미합니다.
웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
→ 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
흔히 말하는 웹 주소, 링크입니다.

URN(Uniform Resource Name)

**통합 자원 이름(Name)**을 의미합니다.
위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
리소스를 특정하는 이름입니다.
- ISBN(국제표준도서번호)

URI의 구조

<aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs

</aside>

https://
- Scheme(Protocol)
  - 브라우저가 사용하는 프로토콜입니다.
  - http, https, ftp, file, …
www.aidenlim.dev
- Host(Domain name)
  - 요청을 처리하는 웹 서버입니다.
  - IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
:80
- Port
  - 리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
  - HTTP: 80 / HTTPS: 443이 표준 포트입니다.
/path/to/resource/
- Path
  - 웹 서버에서의 리소스 경로입니다.
  - 웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
?key=value
- Query(Identifier)
  - 웹 서버에 제공하는 추가적인 변수입니다.
  - &로 구분되는 Key=Value 형태의 데이터입니다.
#docs
- Fragment(Anchor)
  - 해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
  - HTML 문서의 특정 부분을 보여주기 위한 방법입니다.<aside> 또다시 HTTP 이야기
    - Hyper Text Transfer Protocol
    - ⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
    - 요청(Request)
      - 클라이언트 → 서버로 전송되는 메세지
    - 응답(Response)
      - 서버 → 클라이언트로 전송되는 메세지
    - 특성
      - Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
      - → 서버가 클라이언트의 상태를 보존하지 않습니다.
      - Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
      - → 이후 HTTP1.1이 등장하면서 개선되었습니다.
      - → 요청 받고 응답을 주고나면 연결을 종료합니다.
      ⇒ 단순하며 확장성이 용이한 구조
    </aside>요청(Request)
    - 클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.
    응답(Response)
    - 요청에 대한 서버의 답변을 의미합니다.
    Http Message의 구조
    - 요청과 응답은 구조가 비슷합니다.
    - 시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
    - HTTP Header - 요청에 대한 설명, 본문에 대한 설명
    - 빈줄(Blank Line) - 메타 정보의 끝을 알림
    - HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서
    <aside> 예시출처 : MDN
    - Start Line
      - Method, Traget, HTTP Version
    - Headers
      - 요청에 필요한 여러가지 메타 정보
    - Body
      - 요청에 필요한 여러가지 데이터
    응답(Response)
    - Start Line
      - HTTP Version, Status Code, Status Message
    - Headers
      - 응답에 대한 열가지 메타 정보
    - Body
      - 요청을 처리한 여러가지 데이터 </aside>
    HTTP Request Methods</aside>
    - 요청 자원에 대한 행위를 나타냅니다.
      - 어떤 동작을 하려고 하는지를 나타내요!
    - GET, POST, PUT, DELETE, …
    → REST 이야기할 때 조금 더 알아보아요!<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status
    - HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
    - 크게 5개의 그룹으로 나누어집니다.
      - 1XX : Informational Response
      - 2XX : Successful Response
        
        성공 - 에러없이 요청이 성공.
        
        요청이 성공했고 새로운 데이터가 만들어짐.
        
        요청은 정상적이나 아직 처리가 완료되지 않음.
        
        요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
      - 출처 http.cat
      - → 204 No Content
      - 출처 http.cat
      - → 202 Accepted
      - 출처 http.cat
      - → 201 Created
      - 출처 http.cat
      - → 200 OK
      - 3XX : Redirection Message
      - 4XX : Client Error Response
        
        클라이언트의 요청이 잘못되었음.
        
        서버는 해당 요청을 처리하지 않음.
        
        클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
        
        서버에서 요청을 이해했으나 금지된 요청.
        
        요청에 대한 자원이 있으나 수행할 권한이 없음.
        
        요청한 자원을 찾을 수 없음.
      - 출처 http.cat
      - → 404 Not Found
      - 출처 http.cat
      - → 403 Forbidden
      - http.cat
      - → 401 Unauthorized
      - 출처 http.cat
      - → 400 Bad Request
      - 5XX : Server Error Response
        
        요청에 대해 서버가 수행하지 못하는 상황.
        
        서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
        
        서버가 요청을 처리할 준비가 되지 않았음.
        
        서버가 다운되었거나 일시적으로 중단된 상태.
      - 출처 http.cat
      - → 503 Service Unavailable
      - 출처 http.cat
      - → 500 Internal Server Error
    02. URL</aside>
    - 우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
    - → 문서, 사진, 영상 등이 바로 자원이에요!
    - 이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>
    URI (Uniform Resource Identifier)
    - 통합 자원 식별자입니다.
    - 인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
    - 하위 개념 - URN, URL
    ⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!
    - **통합 자원 위치(Location)**를 의미합니다.
    - 웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
    - → 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
    - 흔히 말하는 웹 주소, 링크입니다.
    URN(Uniform Resource Name)
    - **통합 자원 이름(Name)**을 의미합니다.
    - 위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
    - 리소스를 특정하는 이름입니다.
      - ISBN(국제표준도서번호)
    URI의 구조</aside>
    - https://
      - Scheme(Protocol)
        
        브라우저가 사용하는 프로토콜입니다.
        
        http, https, ftp, file, …
    - www.aidenlim.dev
      - Host(Domain name)
        
        요청을 처리하는 웹 서버입니다.
        
        IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
    - :80
      - Port
        
        리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
        
        HTTP: 80 / HTTPS: 443이 표준 포트입니다.
    - /path/to/resource/
      - Path
        
        웹 서버에서의 리소스 경로입니다.
        
        웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
    - ?key=value
      - Query(Identifier)
        
        웹 서버에 제공하는 추가적인 변수입니다.
        
        &로 구분되는 Key=Value 형태의 데이터입니다.
    - #docs
      - Fragment(Anchor)
        
        해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
        
        HTML 문서의 특정 부분을 보여주기 위한 방법입니다.<aside> 또다시 HTTP 이야기
        
        Hyper Text Transfer Protocol
        
        ⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
        
        요청(Request)
        
        클라이언트 → 서버로 전송되는 메세지
        
        응답(Response)
        
        서버 → 클라이언트로 전송되는 메세지
        
        특성
        
        Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
        
        → 서버가 클라이언트의 상태를 보존하지 않습니다.
        
        Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
        
        → 이후 HTTP1.1이 등장하면서 개선되었습니다.
        
        → 요청 받고 응답을 주고나면 연결을 종료합니다.
        
        ⇒ 단순하며 확장성이 용이한 구조
        
        </aside>요청(Request)
        
        클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.
        
        응답(Response)
        
        요청에 대한 서버의 답변을 의미합니다.
        
        Http Message의 구조
        
        요청과 응답은 구조가 비슷합니다.
        
        시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
        
        HTTP Header - 요청에 대한 설명, 본문에 대한 설명
        
        빈줄(Blank Line) - 메타 정보의 끝을 알림
        
        HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서
        
        <aside> 예시출처 : MDN
        
        Start Line
        
        Method, Traget, HTTP Version
        
        Headers
        
        요청에 필요한 여러가지 메타 정보
        
        Body
        
        요청에 필요한 여러가지 데이터
        
        응답(Response)
        
        Start Line
        
        HTTP Version, Status Code, Status Message
        
        Headers
        
        응답에 대한 열가지 메타 정보
        
        Body
        
        요청을 처리한 여러가지 데이터 </aside>
        
        HTTP Request Methods</aside>
        
        요청 자원에 대한 행위를 나타냅니다.
        
        어떤 동작을 하려고 하는지를 나타내요!
        
        GET, POST, PUT, DELETE, …
        
        → REST 이야기할 때 조금 더 알아보아요!<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status
        
        HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
        
        크게 5개의 그룹으로 나누어집니다.
        
        1XX : Informational Response
        
        2XX : Successful Response
        
        성공 - 에러없이 요청이 성공.
        
        요청이 성공했고 새로운 데이터가 만들어짐.
        
        요청은 정상적이나 아직 처리가 완료되지 않음.
        
        요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
        
        출처 http.cat
        
        → 204 No Content
        
        출처 http.cat
        
        → 202 Accepted
        
        출처 http.cat
        
        → 201 Created
        
        출처 http.cat
        
        → 200 OK
        
        3XX : Redirection Message
        
        4XX : Client Error Response
        
        클라이언트의 요청이 잘못되었음.
        
        서버는 해당 요청을 처리하지 않음.
        
        클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
        
        서버에서 요청을 이해했으나 금지된 요청.
        
        요청에 대한 자원이 있으나 수행할 권한이 없음.
        
        요청한 자원을 찾을 수 없음.
        
        출처 http.cat
        
        → 404 Not Found
        
        출처 http.cat
        
        → 403 Forbidden
        
        http.cat
        
        → 401 Unauthorized
        
        출처 http.cat
        
        → 400 Bad Request
        
        5XX : Server Error Response
        
        요청에 대해 서버가 수행하지 못하는 상황.
        
        서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
        
        서버가 요청을 처리할 준비가 되지 않았음.
        
        서버가 다운되었거나 일시적으로 중단된 상태.
        
        출처 http.cat
        
        → 503 Service Unavailable
        
        출처 http.cat
        
        → 500 Internal Server Error
        
        02. URL</aside>
        
        우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
        
        → 문서, 사진, 영상 등이 바로 자원이에요!
        
        이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>
        
        URI (Uniform Resource Identifier)
        
        통합 자원 식별자입니다.
        
        인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
        
        하위 개념 - URN, URL
        
        ⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!
        
        **통합 자원 위치(Location)**를 의미합니다.
        
        웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
        
        → 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
        
        흔히 말하는 웹 주소, 링크입니다.
        
        URN(Uniform Resource Name)
        
        **통합 자원 이름(Name)**을 의미합니다.
        
        위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
        
        리소스를 특정하는 이름입니다.
        
        ISBN(국제표준도서번호)
        
        URI의 구조</aside>
        
        https://
        
        Scheme(Protocol)
        
        브라우저가 사용하는 프로토콜입니다.
        
        http, https, ftp, file, …
        
        www.aidenlim.dev
        
        Host(Domain name)
        
        요청을 처리하는 웹 서버입니다.
        
        IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
        
        :80
        
        Port
        
        리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
        
        HTTP: 80 / HTTPS: 443이 표준 포트입니다.
        
        /path/to/resource/
        
        Path
        
        웹 서버에서의 리소스 경로입니다.
        
        웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
        
        ?key=value
        
        Query(Identifier)
        
        웹 서버에 제공하는 추가적인 변수입니다.
        
        &로 구분되는 Key=Value 형태의 데이터입니다.
        
        #docs
        
        Fragment(Anchor)
        
        해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
        
        HTML 문서의 특정 부분을 보여주기 위한 방법입니다.<aside> 또다시 HTTP 이야기
        
        Hyper Text Transfer Protocol
        
        ⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
        
        요청(Request)
        
        클라이언트 → 서버로 전송되는 메세지
        
        응답(Response)
        
        서버 → 클라이언트로 전송되는 메세지
        
        특성
        
        Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
        
        → 서버가 클라이언트의 상태를 보존하지 않습니다.
        
        Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
        
        → 이후 HTTP1.1이 등장하면서 개선되었습니다.
        
        → 요청 받고 응답을 주고나면 연결을 종료합니다.
        
        ⇒ 단순하며 확장성이 용이한 구조
        
        </aside>요청(Request)
        
        클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.
        
        응답(Response)
        
        요청에 대한 서버의 답변을 의미합니다.
        
        Http Message의 구조
        
        요청과 응답은 구조가 비슷합니다.
        
        시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
        
        HTTP Header - 요청에 대한 설명, 본문에 대한 설명
        
        빈줄(Blank Line) - 메타 정보의 끝을 알림
        
        HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서
        
        <aside> 예시출처 : MDN
        
        Start Line
        
        Method, Traget, HTTP Version
        
        Headers
        
        요청에 필요한 여러가지 메타 정보
        
        Body
        
        요청에 필요한 여러가지 데이터
        
        응답(Response)
        
        Start Line
        
        HTTP Version, Status Code, Status Message
        
        Headers
        
        응답에 대한 열가지 메타 정보
        
        Body
        
        요청을 처리한 여러가지 데이터 </aside>
        
        HTTP Request Methods</aside>
        
        요청 자원에 대한 행위를 나타냅니다.
        
        어떤 동작을 하려고 하는지를 나타내요!
        
        GET, POST, PUT, DELETE, …
        
        → REST 이야기할 때 조금 더 알아보아요!<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status
        
        HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
        
        크게 5개의 그룹으로 나누어집니다.
        
        1XX : Informational Response
        
        2XX : Successful Response
        
        성공 - 에러없이 요청이 성공.
        
        요청이 성공했고 새로운 데이터가 만들어짐.
        
        요청은 정상적이나 아직 처리가 완료되지 않음.
        
        요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
        
        출처 http.cat
        
        → 204 No Content
        
        출처 http.cat
        
        → 202 Accepted
        
        출처 http.cat
        
        → 201 Created
        
        출처 http.cat
        
        → 200 OK
        
        3XX : Redirection Message
        
        4XX : Client Error Response
        
        클라이언트의 요청이 잘못되었음.
        
        서버는 해당 요청을 처리하지 않음.
        
        클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
        
        서버에서 요청을 이해했으나 금지된 요청.
        
        요청에 대한 자원이 있으나 수행할 권한이 없음.
        
        요청한 자원을 찾을 수 없음.
        
        출처 http.cat
        
        → 404 Not Found
        
        출처 http.cat
        
        → 403 Forbidden
        
        http.cat
        
        → 401 Unauthorized
        
        출처 http.cat
        
        → 400 Bad Request
        
        5XX : Server Error Response
        
        요청에 대해 서버가 수행하지 못하는 상황.
        
        서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
        
        서버가 요청을 처리할 준비가 되지 않았음.
        
        서버가 다운되었거나 일시적으로 중단된 상태.
        
        출처 http.cat
        
        → 503 Service Unavailable
        
        출처 http.cat
        
        → 500 Internal Server Error
        
        02. URL</aside>
        
        우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
        
        → 문서, 사진, 영상 등이 바로 자원이에요!
        
        이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>
        
        URI (Uniform Resource Identifier)
        
        통합 자원 식별자입니다.
        
        인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
        
        하위 개념 - URN, URL
        
        ⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!
        
        **통합 자원 위치(Location)**를 의미합니다.
        
        웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
        
        → 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
        
        흔히 말하는 웹 주소, 링크입니다.
        
        URN(Uniform Resource Name)
        
        **통합 자원 이름(Name)**을 의미합니다.
        
        위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
        
        리소스를 특정하는 이름입니다.
        
        ISBN(국제표준도서번호)
        
        URI의 구조</aside>
        
        https://
        
        Scheme(Protocol)
        
        브라우저가 사용하는 프로토콜입니다.
        
        http, https, ftp, file, …
        
        www.aidenlim.dev
        
        Host(Domain name)
        
        요청을 처리하는 웹 서버입니다.
        
        IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
        
        :80
        
        Port
        
        리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
        
        HTTP: 80 / HTTPS: 443이 표준 포트입니다.
        
        /path/to/resource/
        
        Path
        
        웹 서버에서의 리소스 경로입니다.
        
        웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
        
        ?key=value
        
        Query(Identifier)
        
        웹 서버에 제공하는 추가적인 변수입니다.
        
        &로 구분되는 Key=Value 형태의 데이터입니다.
        
        #docs
        
        Fragment(Anchor)
        
        해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
        
        HTML 문서의 특정 부분을 보여주기 위한 방법입니다.<aside> 또다시 HTTP 이야기
        
        Hyper Text Transfer Protocol
        
        ⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
        
        요청(Request)
        
        클라이언트 → 서버로 전송되는 메세지
        
        응답(Response)
        
        서버 → 클라이언트로 전송되는 메세지
        
        특성
        
        Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
        
        → 서버가 클라이언트의 상태를 보존하지 않습니다.
        
        Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
        
        → 이후 HTTP1.1이 등장하면서 개선되었습니다.
        
        → 요청 받고 응답을 주고나면 연결을 종료합니다.
        
        ⇒ 단순하며 확장성이 용이한 구조
        
        </aside>요청(Request)
        
        클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.
        
        응답(Response)
        
        요청에 대한 서버의 답변을 의미합니다.
        
        Http Message의 구조
        
        요청과 응답은 구조가 비슷합니다.
        
        시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
        
        HTTP Header - 요청에 대한 설명, 본문에 대한 설명
        
        빈줄(Blank Line) - 메타 정보의 끝을 알림
        
        HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서
        
        <aside> 예시출처 : MDN
        
        Start Line
        
        Method, Traget, HTTP Version
        
        Headers
        
        요청에 필요한 여러가지 메타 정보
        
        Body
        
        요청에 필요한 여러가지 데이터
        
        응답(Response)
        
        Start Line
        
        HTTP Version, Status Code, Status Message
        
        Headers
        
        응답에 대한 열가지 메타 정보
        
        Body
        
        요청을 처리한 여러가지 데이터 </aside>
        
        HTTP Request Methods</aside>
        
        요청 자원에 대한 행위를 나타냅니다.
        
        어떤 동작을 하려고 하는지를 나타내요!
        
        GET, POST, PUT, DELETE, …
        
        → REST 이야기할 때 조금 더 알아보아요!<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status
        
        HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
        
        크게 5개의 그룹으로 나누어집니다.
        
        1XX : Informational Response
        
        2XX : Successful Response
        
        성공 - 에러없이 요청이 성공.
        
        요청이 성공했고 새로운 데이터가 만들어짐.
        
        요청은 정상적이나 아직 처리가 완료되지 않음.
        
        요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
        
        출처 http.cat
        
        → 204 No Content
        
        출처 http.cat
        
        → 202 Accepted
        
        출처 http.cat
        
        → 201 Created
        
        출처 http.cat
        
        → 200 OK
        
        3XX : Redirection Message
        
        4XX : Client Error Response
        
        클라이언트의 요청이 잘못되었음.
        
        서버는 해당 요청을 처리하지 않음.
        
        클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
        
        서버에서 요청을 이해했으나 금지된 요청.
        
        요청에 대한 자원이 있으나 수행할 권한이 없음.
        
        요청한 자원을 찾을 수 없음.
        
        출처 http.cat
        
        → 404 Not Found
        
        출처 http.cat
        
        → 403 Forbidden
        
        http.cat
        
        → 401 Unauthorized
        
        출처 http.cat
        
        → 400 Bad Request
        
        5XX : Server Error Response
        
        요청에 대해 서버가 수행하지 못하는 상황.
        
        서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
        
        서버가 요청을 처리할 준비가 되지 않았음.
        
        서버가 다운되었거나 일시적으로 중단된 상태.
        
        출처 http.cat
        
        → 503 Service Unavailable
        
        출처 http.cat
        
        → 500 Internal Server Error
        
        02. URL</aside>
        
        우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
        
        → 문서, 사진, 영상 등이 바로 자원이에요!
        
        이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>
        
        URI (Uniform Resource Identifier)
        
        통합 자원 식별자입니다.
        
        인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
        
        하위 개념 - URN, URL
        
        ⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!
        
        **통합 자원 위치(Location)**를 의미합니다.
        
        웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
        
        → 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
        
        흔히 말하는 웹 주소, 링크입니다.
        
        URN(Uniform Resource Name)
        
        **통합 자원 이름(Name)**을 의미합니다.
        
        위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
        
        리소스를 특정하는 이름입니다.
        
        ISBN(국제표준도서번호)
        
        URI의 구조</aside>
        
        https://
        
        Scheme(Protocol)
        
        브라우저가 사용하는 프로토콜입니다.
        
        http, https, ftp, file, …
        
        www.aidenlim.dev
        
        Host(Domain name)
        
        요청을 처리하는 웹 서버입니다.
        
        IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
        
        :80
        
        Port
        
        리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
        
        HTTP: 80 / HTTPS: 443이 표준 포트입니다.
        
        /path/to/resource/
        
        Path
        
        웹 서버에서의 리소스 경로입니다.
        
        웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
        
        ?key=value
        
        Query(Identifier)
        
        웹 서버에 제공하는 추가적인 변수입니다.
        
        &로 구분되는 Key=Value 형태의 데이터입니다.
        
        #docs
        
        Fragment(Anchor)
        
        해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
        
        HTML 문서의 특정 부분을 보여주기 위한 방법입니다.<aside> 또다시 HTTP 이야기
        
        Hyper Text Transfer Protocol
        
        ⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
        
        요청(Request)
        
        클라이언트 → 서버로 전송되는 메세지
        
        응답(Response)
        
        서버 → 클라이언트로 전송되는 메세지
        
        특성
        
        Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
        
        → 서버가 클라이언트의 상태를 보존하지 않습니다.
        
        Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
        
        → 이후 HTTP1.1이 등장하면서 개선되었습니다.
        
        → 요청 받고 응답을 주고나면 연결을 종료합니다.
        
        ⇒ 단순하며 확장성이 용이한 구조
        
        </aside>요청(Request)
        
        클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.
        
        응답(Response)
        
        요청에 대한 서버의 답변을 의미합니다.
        
        Http Message의 구조
        
        요청과 응답은 구조가 비슷합니다.
        
        시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
        
        HTTP Header - 요청에 대한 설명, 본문에 대한 설명
        
        빈줄(Blank Line) - 메타 정보의 끝을 알림
        
        HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서
        
        <aside> 예시출처 : MDN
        
        Start Line
        
        Method, Traget, HTTP Version
        
        Headers
        
        요청에 필요한 여러가지 메타 정보
        
        Body
        
        요청에 필요한 여러가지 데이터
        
        응답(Response)
        
        Start Line
        
        HTTP Version, Status Code, Status Message
        
        Headers
        
        응답에 대한 열가지 메타 정보
        
        Body
        
        요청을 처리한 여러가지 데이터 </aside>
        
        HTTP Request Methods</aside>
        
        요청 자원에 대한 행위를 나타냅니다.
        
        어떤 동작을 하려고 하는지를 나타내요!
        
        GET, POST, PUT, DELETE, …
        
        → REST 이야기할 때 조금 더 알아보아요!<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status
        
        HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
        
        크게 5개의 그룹으로 나누어집니다.
        
        1XX : Informational Response
        
        2XX : Successful Response
        
        성공 - 에러없이 요청이 성공.
        
        요청이 성공했고 새로운 데이터가 만들어짐.
        
        요청은 정상적이나 아직 처리가 완료되지 않음.
        
        요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
        
        출처 http.cat
        
        → 204 No Content
        
        출처 http.cat
        
        → 202 Accepted
        
        출처 http.cat
        
        → 201 Created
        
        출처 http.cat
        
        → 200 OK
        
        3XX : Redirection Message
        
        4XX : Client Error Response
        
        클라이언트의 요청이 잘못되었음.
        
        서버는 해당 요청을 처리하지 않음.
        
        클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
        
        서버에서 요청을 이해했으나 금지된 요청.
        
        요청에 대한 자원이 있으나 수행할 권한이 없음.
        
        요청한 자원을 찾을 수 없음.
        
        출처 http.cat
        
        → 404 Not Found
        
        출처 http.cat
        
        → 403 Forbidden
        
        http.cat
        
        → 401 Unauthorized
        
        출처 http.cat
        
        → 400 Bad Request
        
        5XX : Server Error Response
        
        요청에 대해 서버가 수행하지 못하는 상황.
        
        서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
        
        서버가 요청을 처리할 준비가 되지 않았음.
        
        서버가 다운되었거나 일시적으로 중단된 상태.
        
        출처 http.cat
        
        → 503 Service Unavailable
        
        출처 http.cat
        
        → 500 Internal Server Error
        
        02. URL</aside>
        
        우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
        
        → 문서, 사진, 영상 등이 바로 자원이에요!
        
        이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>
        
        URI (Uniform Resource Identifier)
        
        통합 자원 식별자입니다.
        
        인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
        
        하위 개념 - URN, URL
        
        ⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!
        
        **통합 자원 위치(Location)**를 의미합니다.
        
        웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
        
        → 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
        
        흔히 말하는 웹 주소, 링크입니다.
        
        URN(Uniform Resource Name)
        
        **통합 자원 이름(Name)**을 의미합니다.
        
        위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
        
        리소스를 특정하는 이름입니다.
        
        ISBN(국제표준도서번호)
        
        URI의 구조</aside>
        
        https://
        
        Scheme(Protocol)
        
        브라우저가 사용하는 프로토콜입니다.
        
        http, https, ftp, file, …
        
        www.aidenlim.dev
        
        Host(Domain name)
        
        요청을 처리하는 웹 서버입니다.
        
        IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
        
        :80
        
        Port
        
        리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
        
        HTTP: 80 / HTTPS: 443이 표준 포트입니다.
        
        /path/to/resource/
        
        Path
        
        웹 서버에서의 리소스 경로입니다.
        
        웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
        
        ?key=value
        
        Query(Identifier)
        
        웹 서버에 제공하는 추가적인 변수입니다.
        
        &로 구분되는 Key=Value 형태의 데이터입니다.
        
        #docs
        
        Fragment(Anchor)
        
        해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
        
        HTML 문서의 특정 부분을 보여주기 위한 방법입니다.<aside> 또다시 HTTP 이야기
        
        Hyper Text Transfer Protocol
        
        ⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
        
        요청(Request)
        
        클라이언트 → 서버로 전송되는 메세지
        
        응답(Response)
        
        서버 → 클라이언트로 전송되는 메세지
        
        특성
        
        Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
        
        → 서버가 클라이언트의 상태를 보존하지 않습니다.
        
        Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
        
        → 이후 HTTP1.1이 등장하면서 개선되었습니다.
        
        → 요청 받고 응답을 주고나면 연결을 종료합니다.
        
        ⇒ 단순하며 확장성이 용이한 구조
        
        </aside>요청(Request)
        
        클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.
        
        응답(Response)
        
        요청에 대한 서버의 답변을 의미합니다.
        
        Http Message의 구조
        
        요청과 응답은 구조가 비슷합니다.
        
        시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
        
        HTTP Header - 요청에 대한 설명, 본문에 대한 설명
        
        빈줄(Blank Line) - 메타 정보의 끝을 알림
        
        HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서
        
        <aside> 예시출처 : MDN
        
        Start Line
        
        Method, Traget, HTTP Version
        
        Headers
        
        요청에 필요한 여러가지 메타 정보
        
        Body
        
        요청에 필요한 여러가지 데이터
        
        응답(Response)
        
        Start Line
        
        HTTP Version, Status Code, Status Message
        
        Headers
        
        응답에 대한 열가지 메타 정보
        
        Body
        
        요청을 처리한 여러가지 데이터 </aside>
        
        HTTP Request Methods</aside>
        
        요청 자원에 대한 행위를 나타냅니다.
        
        어떤 동작을 하려고 하는지를 나타내요!
        
        GET, POST, PUT, DELETE, …
        
        → REST 이야기할 때 조금 더 알아보아요!<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status
        
        HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
        
        크게 5개의 그룹으로 나누어집니다.
        
        1XX : Informational Response
        
        2XX : Successful Response
        
        성공 - 에러없이 요청이 성공.
        
        요청이 성공했고 새로운 데이터가 만들어짐.
        
        요청은 정상적이나 아직 처리가 완료되지 않음.
        
        요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
        
        출처 http.cat
        
        → 204 No Content
        
        출처 http.cat
        
        → 202 Accepted
        
        출처 http.cat
        
        → 201 Created
        
        출처 http.cat
        
        → 200 OK
        
        3XX : Redirection Message
        
        4XX : Client Error Response
        
        클라이언트의 요청이 잘못되었음.
        
        서버는 해당 요청을 처리하지 않음.
        
        클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
        
        서버에서 요청을 이해했으나 금지된 요청.
        
        요청에 대한 자원이 있으나 수행할 권한이 없음.
        
        요청한 자원을 찾을 수 없음.
        
        출처 http.cat
        
        → 404 Not Found
        
        출처 http.cat
        
        → 403 Forbidden
        
        http.cat
        
        → 401 Unauthorized
        
        출처 http.cat
        
        → 400 Bad Request
        
        5XX : Server Error Response
        
        요청에 대해 서버가 수행하지 못하는 상황.
        
        서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
        
        서버가 요청을 처리할 준비가 되지 않았음.
        
        서버가 다운되었거나 일시적으로 중단된 상태.
        
        출처 http.cat
        
        → 503 Service Unavailable
        
        출처 http.cat
        
        → 500 Internal Server Error
        
        02. URL</aside>
        
        우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
        
        → 문서, 사진, 영상 등이 바로 자원이에요!
        
        이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>
        
        URI (Uniform Resource Identifier)
        
        통합 자원 식별자입니다.
        
        인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
        
        하위 개념 - URN, URL
        
        ⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!
        
        **통합 자원 위치(Location)**를 의미합니다.
        
        웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
        
        → 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
        
        흔히 말하는 웹 주소, 링크입니다.
        
        URN(Uniform Resource Name)
        
        **통합 자원 이름(Name)**을 의미합니다.
        
        위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
        
        리소스를 특정하는 이름입니다.
        
        ISBN(국제표준도서번호)
        
        URI의 구조</aside>
        
        https://
        
        Scheme(Protocol)
        
        브라우저가 사용하는 프로토콜입니다.
        
        http, https, ftp, file, …
        
        www.aidenlim.dev
        
        Host(Domain name)
        
        요청을 처리하는 웹 서버입니다.
        
        IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
        
        :80
        
        Port
        
        리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
        
        HTTP: 80 / HTTPS: 443이 표준 포트입니다.
        
        /path/to/resource/
        
        Path
        
        웹 서버에서의 리소스 경로입니다.
        
        웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
        
        ?key=value
        
        Query(Identifier)
        
        웹 서버에 제공하는 추가적인 변수입니다.
        
        &로 구분되는 Key=Value 형태의 데이터입니다.
        
        #docs
        
        Fragment(Anchor)
        
        해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
        
        HTML 문서의 특정 부분을 보여주기 위한 방법입니다.<aside> 또다시 HTTP 이야기
        
        Hyper Text Transfer Protocol
        
        ⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
        
        요청(Request)
        
        클라이언트 → 서버로 전송되는 메세지
        
        응답(Response)
        
        서버 → 클라이언트로 전송되는 메세지
        
        특성
        
        Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
        
        → 서버가 클라이언트의 상태를 보존하지 않습니다.
        
        Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
        
        → 이후 HTTP1.1이 등장하면서 개선되었습니다.
        
        → 요청 받고 응답을 주고나면 연결을 종료합니다.
        
        ⇒ 단순하며 확장성이 용이한 구조
        
        </aside>요청(Request)
        
        클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.
        
        응답(Response)
        
        요청에 대한 서버의 답변을 의미합니다.
        
        Http Message의 구조
        
        요청과 응답은 구조가 비슷합니다.
        
        시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
        
        HTTP Header - 요청에 대한 설명, 본문에 대한 설명
        
        빈줄(Blank Line) - 메타 정보의 끝을 알림
        
        HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서
        
        <aside> 예시출처 : MDN
        
        Start Line
        
        Method, Traget, HTTP Version
        
        Headers
        
        요청에 필요한 여러가지 메타 정보
        
        Body
        
        요청에 필요한 여러가지 데이터
        
        응답(Response)
        
        Start Line
        
        HTTP Version, Status Code, Status Message
        
        Headers
        
        응답에 대한 열가지 메타 정보
        
        Body
        
        요청을 처리한 여러가지 데이터 </aside>
        
        HTTP Request Methods</aside>
        
        요청 자원에 대한 행위를 나타냅니다.
        
        어떤 동작을 하려고 하는지를 나타내요!
        
        GET, POST, PUT, DELETE, …
        
        → REST 이야기할 때 조금 더 알아보아요!<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status
        
        HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
        
        크게 5개의 그룹으로 나누어집니다.
        
        1XX : Informational Response
        
        2XX : Successful Response
        
        성공 - 에러없이 요청이 성공.
        
        요청이 성공했고 새로운 데이터가 만들어짐.
        
        요청은 정상적이나 아직 처리가 완료되지 않음.
        
        요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
        
        출처 http.cat
        
        → 204 No Content
        
        출처 http.cat
        
        → 202 Accepted
        
        출처 http.cat
        
        → 201 Created
        
        출처 http.cat
        
        → 200 OK
        
        3XX : Redirection Message
        
        4XX : Client Error Response
        
        클라이언트의 요청이 잘못되었음.
        
        서버는 해당 요청을 처리하지 않음.
        
        클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
        
        서버에서 요청을 이해했으나 금지된 요청.
        
        요청에 대한 자원이 있으나 수행할 권한이 없음.
        
        요청한 자원을 찾을 수 없음.
        
        출처 http.cat
        
        → 404 Not Found
        
        출처 http.cat
        
        → 403 Forbidden
        
        http.cat
        
        → 401 Unauthorized
        
        출처 http.cat
        
        → 400 Bad Request
        
        5XX : Server Error Response
        
        요청에 대해 서버가 수행하지 못하는 상황.
        
        서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
        
        서버가 요청을 처리할 준비가 되지 않았음.
        
        서버가 다운되었거나 일시적으로 중단된 상태.
        
        출처 http.cat
        
        → 503 Service Unavailable
        
        출처 http.cat
        
        → 500 Internal Server Error
        
        02. URL</aside>
        
        우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
        
        → 문서, 사진, 영상 등이 바로 자원이에요!
        
        이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>
        
        URI (Uniform Resource Identifier)
        
        통합 자원 식별자입니다.
        
        인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
        
        하위 개념 - URN, URL
        
        ⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!
        
        **통합 자원 위치(Location)**를 의미합니다.
        
        웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
        
        → 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
        
        흔히 말하는 웹 주소, 링크입니다.
        
        URN(Uniform Resource Name)
        
        **통합 자원 이름(Name)**을 의미합니다.
        
        위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
        
        리소스를 특정하는 이름입니다.
        
        ISBN(국제표준도서번호)
        
        URI의 구조</aside>
        
        https://
        
        Scheme(Protocol)
        
        브라우저가 사용하는 프로토콜입니다.
        
        http, https, ftp, file, …
        
        www.aidenlim.dev
        
        Host(Domain name)
        
        요청을 처리하는 웹 서버입니다.
        
        IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
        
        :80
        
        Port
        
        리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
        
        HTTP: 80 / HTTPS: 443이 표준 포트입니다.
        
        /path/to/resource/
        
        Path
        
        웹 서버에서의 리소스 경로입니다.
        
        웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
        
        ?key=value
        
        Query(Identifier)
        
        웹 서버에 제공하는 추가적인 변수입니다.
        
        &로 구분되는 Key=Value 형태의 데이터입니다.
        
        #docs
        
        Fragment(Anchor)
        
        해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
        
        HTML 문서의 특정 부분을 보여주기 위한 방법입니다.<aside> 또다시 HTTP 이야기
        
        Hyper Text Transfer Protocol
        
        ⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
        
        요청(Request)
        
        클라이언트 → 서버로 전송되는 메세지
        
        응답(Response)
        
        서버 → 클라이언트로 전송되는 메세지
        
        특성
        
        Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
        
        → 서버가 클라이언트의 상태를 보존하지 않습니다.
        
        Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
        
        → 이후 HTTP1.1이 등장하면서 개선되었습니다.
        
        → 요청 받고 응답을 주고나면 연결을 종료합니다.
        
        ⇒ 단순하며 확장성이 용이한 구조
        
        </aside>요청(Request)
        
        클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.
        
        응답(Response)
        
        요청에 대한 서버의 답변을 의미합니다.
        
        Http Message의 구조
        
        요청과 응답은 구조가 비슷합니다.
        
        시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
        
        HTTP Header - 요청에 대한 설명, 본문에 대한 설명
        
        빈줄(Blank Line) - 메타 정보의 끝을 알림
        
        HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서
        
        <aside> 예시출처 : MDN
        
        Start Line
        
        Method, Traget, HTTP Version
        
        Headers
        
        요청에 필요한 여러가지 메타 정보
        
        Body
        
        요청에 필요한 여러가지 데이터
        
        응답(Response)
        
        Start Line
        
        HTTP Version, Status Code, Status Message
        
        Headers
        
        응답에 대한 열가지 메타 정보
        
        Body
        
        요청을 처리한 여러가지 데이터 </aside>
        
        HTTP Request Methods</aside>
        
        요청 자원에 대한 행위를 나타냅니다.
        
        어떤 동작을 하려고 하는지를 나타내요!
        
        GET, POST, PUT, DELETE, …
        
        → REST 이야기할 때 조금 더 알아보아요!<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status
        
        HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
        
        크게 5개의 그룹으로 나누어집니다.
        
        1XX : Informational Response
        
        2XX : Successful Response
        
        성공 - 에러없이 요청이 성공.
        
        요청이 성공했고 새로운 데이터가 만들어짐.
        
        요청은 정상적이나 아직 처리가 완료되지 않음.
        
        요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
        
        출처 http.cat
        
        → 204 No Content
        
        출처 http.cat
        
        → 202 Accepted
        
        출처 http.cat
        
        → 201 Created
        
        출처 http.cat
        
        → 200 OK
        
        3XX : Redirection Message
        
        4XX : Client Error Response
        
        클라이언트의 요청이 잘못되었음.
        
        서버는 해당 요청을 처리하지 않음.
        
        클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
        
        서버에서 요청을 이해했으나 금지된 요청.
        
        요청에 대한 자원이 있으나 수행할 권한이 없음.
        
        요청한 자원을 찾을 수 없음.
        
        출처 http.cat
        
        → 404 Not Found
        
        출처 http.cat
        
        → 403 Forbidden
        
        http.cat
        
        → 401 Unauthorized
        
        출처 http.cat
        
        → 400 Bad Request
        
        5XX : Server Error Response
        
        요청에 대해 서버가 수행하지 못하는 상황.
        
        서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
        
        서버가 요청을 처리할 준비가 되지 않았음.
        
        서버가 다운되었거나 일시적으로 중단된 상태.
        
        출처 http.cat
        
        → 503 Service Unavailable
        
        출처 http.cat
        
        → 500 Internal Server Error
        
        02. URL</aside>
        
        우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
        
        → 문서, 사진, 영상 등이 바로 자원이에요!
        
        이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>
        
        URI (Uniform Resource Identifier)
        
        통합 자원 식별자입니다.
        
        인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
        
        하위 개념 - URN, URL
        
        ⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!
        
        **통합 자원 위치(Location)**를 의미합니다.
        
        웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
        
        → 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
        
        흔히 말하는 웹 주소, 링크입니다.
        
        URN(Uniform Resource Name)
        
        **통합 자원 이름(Name)**을 의미합니다.
        
        위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
        
        리소스를 특정하는 이름입니다.
        
        ISBN(국제표준도서번호)
        
        URI의 구조</aside>
        
        https://
        
        Scheme(Protocol)
        
        브라우저가 사용하는 프로토콜입니다.
        
        http, https, ftp, file, …
        
        www.aidenlim.dev
        
        Host(Domain name)
        
        요청을 처리하는 웹 서버입니다.
        
        IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
        
        :80
        
        Port
        
        리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
        
        HTTP: 80 / HTTPS: 443이 표준 포트입니다.
        
        /path/to/resource/
        
        Path
        
        웹 서버에서의 리소스 경로입니다.
        
        웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
        
        ?key=value
        
        Query(Identifier)
        
        웹 서버에 제공하는 추가적인 변수입니다.
        
        &로 구분되는 Key=Value 형태의 데이터입니다.
        
        #docs
        
        Fragment(Anchor)
        
        해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
        
        HTML 문서의 특정 부분을 보여주기 위한 방법입니다.<aside> 또다시 HTTP 이야기
        
        Hyper Text Transfer Protocol
        
        ⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
        
        요청(Request)
        
        클라이언트 → 서버로 전송되는 메세지
        
        응답(Response)
        
        서버 → 클라이언트로 전송되는 메세지
        
        특성
        
        Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
        
        → 서버가 클라이언트의 상태를 보존하지 않습니다.
        
        Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
        
        → 이후 HTTP1.1이 등장하면서 개선되었습니다.
        
        → 요청 받고 응답을 주고나면 연결을 종료합니다.
        
        ⇒ 단순하며 확장성이 용이한 구조
        
        </aside>요청(Request)
        
        클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.
        
        응답(Response)
        
        요청에 대한 서버의 답변을 의미합니다.
        
        Http Message의 구조
        
        요청과 응답은 구조가 비슷합니다.
        
        시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
        
        HTTP Header - 요청에 대한 설명, 본문에 대한 설명
        
        빈줄(Blank Line) - 메타 정보의 끝을 알림
        
        HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서
        
        <aside> 예시출처 : MDN
        
        Start Line
        
        Method, Traget, HTTP Version
        
        Headers
        
        요청에 필요한 여러가지 메타 정보
        
        Body
        
        요청에 필요한 여러가지 데이터
        
        응답(Response)
        
        Start Line
        
        HTTP Version, Status Code, Status Message
        
        Headers
        
        응답에 대한 열가지 메타 정보
        
        Body
        
        요청을 처리한 여러가지 데이터 </aside>
        
        HTTP Request Methods</aside>
        
        요청 자원에 대한 행위를 나타냅니다.
        
        어떤 동작을 하려고 하는지를 나타내요!
        
        GET, POST, PUT, DELETE, …
        
        → REST 이야기할 때 조금 더 알아보아요!<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status
        
        HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
        
        크게 5개의 그룹으로 나누어집니다.
        
        1XX : Informational Response
        
        2XX : Successful Response
        
        성공 - 에러없이 요청이 성공.
        
        요청이 성공했고 새로운 데이터가 만들어짐.
        
        요청은 정상적이나 아직 처리가 완료되지 않음.
        
        요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
        
        출처 http.cat
        
        → 204 No Content
        
        출처 http.cat
        
        → 202 Accepted
        
        출처 http.cat
        
        → 201 Created
        
        출처 http.cat
        
        → 200 OK
        
        3XX : Redirection Message
        
        4XX : Client Error Response
        
        클라이언트의 요청이 잘못되었음.
        
        서버는 해당 요청을 처리하지 않음.
        
        클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
        
        서버에서 요청을 이해했으나 금지된 요청.
        
        요청에 대한 자원이 있으나 수행할 권한이 없음.
        
        요청한 자원을 찾을 수 없음.
        
        출처 http.cat
        
        → 404 Not Found
        
        출처 http.cat
        
        → 403 Forbidden
        
        http.cat
        
        → 401 Unauthorized
        
        출처 http.cat
        
        → 400 Bad Request
        
        5XX : Server Error Response
        
        요청에 대해 서버가 수행하지 못하는 상황.
        
        서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
        
        서버가 요청을 처리할 준비가 되지 않았음.
        
        서버가 다운되었거나 일시적으로 중단된 상태.
        
        출처 http.cat
        
        → 503 Service Unavailable
        
        출처 http.cat
        
        → 500 Internal Server Error
        
        02. URL</aside>
        
        우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
        
        → 문서, 사진, 영상 등이 바로 자원이에요!
        
        이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>
        
        URI (Uniform Resource Identifier)
        
        통합 자원 식별자입니다.
        
        인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
        
        하위 개념 - URN, URL
        
        ⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!
        
        **통합 자원 위치(Location)**를 의미합니다.
        
        웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
        
        → 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
        
        흔히 말하는 웹 주소, 링크입니다.
        
        URN(Uniform Resource Name)
        
        **통합 자원 이름(Name)**을 의미합니다.
        
        위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
        
        리소스를 특정하는 이름입니다.
        
        ISBN(국제표준도서번호)
        
        URI의 구조</aside>
        
        https://
        
        Scheme(Protocol)
        
        브라우저가 사용하는 프로토콜입니다.
        
        http, https, ftp, file, …
        
        www.aidenlim.dev
        
        Host(Domain name)
        
        요청을 처리하는 웹 서버입니다.
        
        IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
        
        :80
        
        Port
        
        리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
        
        HTTP: 80 / HTTPS: 443이 표준 포트입니다.
        
        /path/to/resource/
        
        Path
        
        웹 서버에서의 리소스 경로입니다.
        
        웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
        
        ?key=value
        
        Query(Identifier)
        
        웹 서버에 제공하는 추가적인 변수입니다.
        
        &로 구분되는 Key=Value 형태의 데이터입니다.
        
        #docs
        
        Fragment(Anchor)
        
        해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
        
        HTML 문서의 특정 부분을 보여주기 위한 방법입니다.<aside> 또다시 HTTP 이야기
        
        Hyper Text Transfer Protocol
        
        ⇒ Web에서 이루어지는 **데이터 교환의 기초(**약속)입니다.
        
        요청(Request)
        
        클라이언트 → 서버로 전송되는 메세지
        
        응답(Response)
        
        서버 → 클라이언트로 전송되는 메세지
        
        특성
        
        Stateless (무상태)→ 모든 응답과 요청은 독립적입니다.
        
        → 서버가 클라이언트의 상태를 보존하지 않습니다.
        
        Connectless (비연결성)→ 연결을 유지하지 않으므로 서버 자원을 효율적으로 사용 가능합니다.
        
        → 이후 HTTP1.1이 등장하면서 개선되었습니다.
        
        → 요청 받고 응답을 주고나면 연결을 종료합니다.
        
        ⇒ 단순하며 확장성이 용이한 구조
        
        </aside>요청(Request)
        
        클라이언트가 서버로 전달해서 서버의 어떤 행동(action)이 일어나게 하는 것을 의미합니다.
        
        응답(Response)
        
        요청에 대한 서버의 답변을 의미합니다.
        
        Http Message의 구조
        
        요청과 응답은 구조가 비슷합니다.
        
        시작(Start Line) - 실행되어야할 요청, 요청에 대한 성공 또는 실패
        
        HTTP Header - 요청에 대한 설명, 본문에 대한 설명
        
        빈줄(Blank Line) - 메타 정보의 끝을 알림
        
        HTTP Body - 요청과 관련된 내용, 응답과 관련된 문서
        
        <aside> 예시출처 : MDN
        
        Start Line
        
        Method, Traget, HTTP Version
        
        Headers
        
        요청에 필요한 여러가지 메타 정보
        
        Body
        
        요청에 필요한 여러가지 데이터
        
        응답(Response)
        
        Start Line
        
        HTTP Version, Status Code, Status Message
        
        Headers
        
        응답에 대한 열가지 메타 정보
        
        Body
        
        요청을 처리한 여러가지 데이터 </aside>
        
        HTTP Request Methods</aside>
        
        요청 자원에 대한 행위를 나타냅니다.
        
        어떤 동작을 하려고 하는지를 나타내요!
        
        GET, POST, PUT, DELETE, …
        
        → REST 이야기할 때 조금 더 알아보아요!<aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식 문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Status
        
        HTTP 요청에 대해 성공 여부를 나타내는 코드값입니다.
        
        크게 5개의 그룹으로 나누어집니다.
        
        1XX : Informational Response
        
        2XX : Successful Response
        
        성공 - 에러없이 요청이 성공.
        
        요청이 성공했고 새로운 데이터가 만들어짐.
        
        요청은 정상적이나 아직 처리가 완료되지 않음.
        
        요청은 성공적으로 처리했으나 전송할 데이터(Response Body)가 없음.
        
        출처 http.cat
        
        → 204 No Content
        
        출처 http.cat
        
        → 202 Accepted
        
        출처 http.cat
        
        → 201 Created
        
        출처 http.cat
        
        → 200 OK
        
        3XX : Redirection Message
        
        4XX : Client Error Response
        
        클라이언트의 요청이 잘못되었음.
        
        서버는 해당 요청을 처리하지 않음.
        
        클라이언트가 인증이 되지 않았거나 인증정보가 유효하지 않음.
        
        서버에서 요청을 이해했으나 금지된 요청.
        
        요청에 대한 자원이 있으나 수행할 권한이 없음.
        
        요청한 자원을 찾을 수 없음.
        
        출처 http.cat
        
        → 404 Not Found
        
        출처 http.cat
        
        → 403 Forbidden
        
        http.cat
        
        → 401 Unauthorized
        
        출처 http.cat
        
        → 400 Bad Request
        
        5XX : Server Error Response
        
        요청에 대해 서버가 수행하지 못하는 상황.
        
        서버가 동작하지 않는다는 포괄적인 의미가 내포됨.
        
        서버가 요청을 처리할 준비가 되지 않았음.
        
        서버가 다운되었거나 일시적으로 중단된 상태.
        
        출처 http.cat
        
        → 503 Service Unavailable
        
        출처 http.cat
        
        → 500 Internal Server Error
        
        02. URL</aside>
        
        우리가 어떤 요청을 하는 대상을 자원(Resource)이라고 합니다.
        
        → 문서, 사진, 영상 등이 바로 자원이에요!
        
        이러한 자원을 식별하기 위해 **URI(Uniform Resource Identifier)**를 사용합니다. </aside>
        
        URI (Uniform Resource Identifier)
        
        통합 자원 식별자입니다.
        
        인터넷의 자원을 식별할 수 있는 유일한 문자열입니다.
        
        하위 개념 - URN, URL
        
        ⇒ 일반적으로 URN을 사용하는 비중이 낮기때문에 URI와 URL을 같은 의미로 사용하기도 해요!
        
        **통합 자원 위치(Location)**를 의미합니다.
        
        웹상에 자원이 어디 있는지 나타내기 위한 문자열입니다.
        
        → 어디에서 어떻게 리소스를 가져와야 하는지 나타내는 문자열이에요!
        
        흔히 말하는 웹 주소, 링크입니다.
        
        URN(Uniform Resource Name)
        
        **통합 자원 이름(Name)**을 의미합니다.
        
        위치에 독립적인 자원을 위한 유일한 이름 역할을 합니다.
        
        리소스를 특정하는 이름입니다.
        
        ISBN(국제표준도서번호)
        
        URI의 구조</aside>
        
        https://
        
        Scheme(Protocol)
        
        브라우저가 사용하는 프로토콜입니다.
        
        http, https, ftp, file, …
        
        www.aidenlim.dev
        
        Host(Domain name)
        
        요청을 처리하는 웹 서버입니다.
        
        IP 주소를 바로 사용할 수 있지만 도메인 이름을 받아서 사용하는 것이 일반적입니다.
        
        :80
        
        Port
        
        리소스에 접근할 때 사용되는 일종의 문(게이트)입니다.
        
        HTTP: 80 / HTTPS: 443이 표준 포트입니다.
        
        /path/to/resource/
        
        Path
        
        웹 서버에서의 리소스 경로입니다.
        
        웹 초기에는 실제 물리적인 위치를 나타냈으나 현재는 추상화된 형태를 표현합니다.
        
        ?key=value
        
        Query(Identifier)
        
        웹 서버에 제공하는 추가적인 변수입니다.
        
        &로 구분되는 Key=Value 형태의 데이터입니다.
        
        #docs
        
        Fragment(Anchor)
        
        해당 자원 안에서의 특정 위치 (북마크)를 나타냅니다.
        
        HTML 문서의 특정 부분을 보여주기 위한 방법입니다.
        
        <aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs
        
        URL(Uniform Resource Locator)
        
        <aside> 웹에서의 자원의 식별
        
        <aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?
        
        </aside>
        
        HTTP Status Code
        
        <aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
        
        요청(Request)
        
        HTTP Message
        
        <aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs
        
        URL(Uniform Resource Locator)
        
        <aside> 웹에서의 자원의 식별
        
        <aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?
        
        </aside>
        
        HTTP Status Code
        
        <aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
        
        요청(Request)
        
        HTTP Message
        
        <aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs
        
        URL(Uniform Resource Locator)
        
        <aside> 웹에서의 자원의 식별
        
        <aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?
        
        </aside>
        
        HTTP Status Code
        
        <aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
        
        요청(Request)
        
        HTTP Message
        
        <aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs
        
        URL(Uniform Resource Locator)
        
        <aside> 웹에서의 자원의 식별
        
        <aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?
        
        </aside>
        
        HTTP Status Code
        
        <aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
        
        요청(Request)
        
        HTTP Message
        
        <aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs
        
        URL(Uniform Resource Locator)
        
        <aside> 웹에서의 자원의 식별
        
        <aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?
        
        </aside>
        
        HTTP Status Code
        
        <aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
        
        요청(Request)
        
        HTTP Message
        
        <aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs
        
        URL(Uniform Resource Locator)
        
        <aside> 웹에서의 자원의 식별
        
        <aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?
        
        </aside>
        
        HTTP Status Code
        
        <aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
        
        요청(Request)
        
        HTTP Message
        
        <aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs
        
        URL(Uniform Resource Locator)
        
        <aside> 웹에서의 자원의 식별
        
        <aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?
        
        </aside>
        
        HTTP Status Code
        
        <aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
        
        요청(Request)
        
        HTTP Message
        
        <aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs
        
        URL(Uniform Resource Locator)
        
        <aside> 웹에서의 자원의 식별
        
        <aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?
        
        </aside>
        
        HTTP Status Code
        
        <aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
        
        요청(Request)
        
        HTTP Message
        
        <aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs
        
        URL(Uniform Resource Locator)
        
        <aside> 웹에서의 자원의 식별
        
        <aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?
        
        </aside>
        
        HTTP Status Code
        
        <aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
        
        요청(Request)
        
        HTTP Message
  - <aside> ☝ https://www.aidenlim.dev:80/path/to/resource/?key=value#docs
  - URL(Uniform Resource Locator)
  - <aside> 웹에서의 자원의 식별
  - <aside> ✔️ 자원을 식별하기 위해 사용하는 URL에 대해 알아볼까요?
  - </aside>
  - HTTP Status Code
  - <aside> <img src="/icons/checkmark-square_red.svg" alt="/icons/checkmark-square_red.svg" width="40px" /> MDN 공식문서 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
  - 요청(Request)
  - HTTP Message