⭐ 데이터 로딩 중

react는 csr방식을 사용합니다. 때문에 페이지에서 보여지는 데이터를 서버에서 주로 json형태로 불러온 다음 화면을 그립니다. 우리가 특정 페이지로 라우팅 될 때, 서버와 통신할 함수를 미리 만들어 놓고, 자동으로 데이터를 가져온다면 얼마나 편할까요?

react-router는 다음과 같은 모듈을 사용해 해당 기능을 구현했습니다.

• loader
• useLoaderData

두 모듈은 로더함수만들고 이를 경로에 연결합니다. 이게 무슨말이냐, 특정 URL “localhost:3000/a/b/c“ 와 같은 경로에 만들어둔 loader 함수를 연결하면 해당 URL에 방문할 때 자동으로 함수를 실행시키고 데이터를 불러옵니다.

개발자는 불러온데이터로 화면만 그리면 됩니다.

다음 코드를 살펴봅시다.

<Root/>컴포넌트가 연결되어있는 “/” url에 lodaer함수를 연결하도록 하겠습니다.

먼저 loader함수를 만들어 봅시다.

📎 로더로 내보내기

src/routes/root.jsx

import { Outlet, Link } from "react-router-dom";
import { getContacts } from "../contacts";

export async function loader() {   //데이터를 불러오는 함수 
  const contacts = await getContacts(); //비동기 통신
  return { contacts }; // 객체로 반환하는것은 불러오는데이터를 명확하게 하기 위함 => 나중에 객체 분해하려고
}

📎 경로에 로더 구성

src/index.js

import Root, { loader as rootLoader } from "./routes/root"; //생성한 로더함수 가져오기

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,  //해당 경로로 진입할 때 로더함수 실행됨
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);

📎 데이터 액세스 및 렌더링

src/routes/root.jsx

import {
  Outlet,
  Link,
  useLoaderData,
} from "react-router-dom";
import { getContacts } from "../contacts";

/* other code */

export default function Root() {
  const { contacts } = useLoaderData(); // 해당 훅을 사용해 loader함수를 통해 서버로 부터 가져온 데이터 사용
  return (
    <>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        {/* other code */}

        <nav> {/* 가져온 데이터 화면에 그리기! */}
          {contacts.length ? (
            <ul>
              {contacts.map((contact) => (
                <li key={contact.id}>
                  <Link to={`contacts/${contact.id}`}>
                    {contact.first || contact.last ? (
                      <>
                        {contact.first} {contact.last}
                      </>
                    ) : (
                      <i>No Name</i>
                    )}{" "}
                    {contact.favorite && <span>★</span>}
                  </Link>
                </li>
              ))}
            </ul>
          ) : (
            <p>
              <i>No contacts</i>
            </p>
          )}
        </nav>

        {/* other code */}
      </div>
    </>
  );
}

전체적인 흐름을 봅시다.

특정 url 라우팅 ⇒ loader 함수 실행 ⇒ useLoaderDate() 로 데이터 가져오기 ⇒ 화면 그리기

이게 React router는 해당 데이터를 UI와 자동으로 동기화 합니다. 아직은 데이터가 없기 때문에 다음과 같은 빈목록이 표시됩니다.

목록은 비어있지만 해당 페이지로 라우팅 될 때 loader에 있는 함수가 자동으로 실행됩니다.

⭐ 데이터 쓰기 + HTML 양식

📎 기존 데이터 전송방식

HTML에서 Form을 사용하면 입력한 데이터를 서버로 보내는 동작을 수행합니다. 이를 폼전송(Form Submisstion) 이라고 합니다. 즉 사용자가 품을 제출(submit)하면 입력한 데이터화 함께 서버로 요청(request)이 보내지는 것입니다.

폼을 제출하는 순간 브라우저는 내부적으로 서버로 요청을 보내기 위해 브라우저 창의 URL을 변경합니다. 이러한 변경은 브라우저의 주소 표시줄의 URL을 새로운 주소로 업데이트 하는 것을 의미합니다.

즉 사용자가 form을 제출하면 브라우저가 새로운 페이지로 이동하는것 처럼 보이게 되며 이때 URL이 변경됩니다. 이런동작을 네비게이션을 유발한다고 표현합니다.

새로고침이 된것처럼 보이지만 실제로 페이지 전체를 새로 로드하는것은 아니고 서버로 데이터를 전송하는것입니다.

📎 라우트 액션 사용하기

라우트 액션은 라우팅 과정에서 특정 동작을 의미합니다. Form에 의해 URL이 변경되면 해당 URL에 대한 라우트 액션(action)이 발생합니다.

라우트 액션을 사용하기 위해 <Form/>을 만들어 봅시다.

src/routes/root.jsx

import {
  Outlet,
  Link,
  useLoaderData,
  Form,
} from "react-router-dom";
import { getContacts, createContact } from "../contacts";

export async function action() {
  const contact = await createContact();
  return { contact };
}

/* other code */

export default function Root() {
  const { contacts } = useLoaderData();
  return (
    <>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        <div>
          {/* other code */}
          <Form method="post">
            <button type="submit">New</button>
          </Form>
        </div>

        {/* other code */}
      </div>
    </>
  );
}

src/index.jsx

/* other imports */

import Root, {
  loader as rootLoader,
  action as rootAction,
} from "./routes/root";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);

흐름

컴포넌트를 submit(제출) ⇒ action에 연결되어있는 함수 동작 ⇒ 컴포넌트를 리랜더링하면서 loader로 데이터 다시 불러옴

<Form/> 을 사용할 때와 <form/>을 사용할때 차이점이 있습니다. 위에서 설명했듯이 은 페이지를 새로고침하지 않는 클라이언트 라우팅을 이용한 동작입니다.

지금은 제대로된 경로로 요청을 보내는것이 아니기 때문에 에러가 발생하는데 어떤 차이가 있는지 확인해 봅시다.

<Form/>을 이용할 때

기본 <form/> 을 이용할 때

이처럼 라우팅을 이용한다는 특징 덕분에 잘못된 요청을 발생시켰을 때, 우리는 router에서 세팅했던 ErrorPage를 그대로 사용할 수 있습니다.

createContact()를 action에 연결시켜 주면 다음과 같이 NoName 리스트가 생성됩니다.

⭐ 로더의 URL 매개변수

아까 만들었던 path를 살펴봅시다.

[
  {
    path: "contacts/:contactId",
    element: <Contact />,
  },
];

:contactId 는 동적 세그먼트로 변환하는 특별한 의미를 가집니다. 이것을 URL Params 또는 params 라고 말합니다.

페이지를 동적으로 로딩할 때 많이 사용하는데, 이 값을 페이지 초기값을 로딩할 때 사용하는 loader에서 사용할 수는 없을까요?

📎 연락처 페이지에 로더를 추가하고 데이터 엑세스

src/routes/contact.jsx

import { Form, useLoaderData } from "react-router-dom";
import { getContact } from "../contacts";

export async function loader({ params }) { // 구조분해 해서 가져오기 
  const contact = await getContact(params.contactId);
  return { contact };
}

export default function Contact() {
  const { contact } = useLoaderData();
  // existing code
}

📎 경로에 로더 구성

src/index.jsx

/* existing code */
import Contact, {
  loader as contactLoader,
} from "./routes/contact";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
        loader: contactLoader,
      },
    ],
  },
]);

/* existing code */

loader에서 구조분해 한 뒤 파라미터값을 가져올 수 있습니다!

⭐ 데이터 업데이트

이제 을 활용할 때가 왔습니다.

📎 편집 페이지 UI추가

다음과 같은 컴포넌트를 생성해 줍니다.

src/routes/edit.jsx

import { Form, useLoaderData } from "react-router-dom";

export default function EditContact() {
  const { contact } = useLoaderData();

  return (
    <Form method="post" id="contact-form">
      <p>
        <span>Name</span>
        <input
          placeholder="First"
          aria-label="First name"
          type="text"
          name="first"
          defaultValue={contact.first}
        />
        <input
          placeholder="Last"
          aria-label="Last name"
          type="text"
          name="last"
          defaultValue={contact.last}
        />
      </p>
      <label>
        <span>Twitter</span>
        <input
          type="text"
          name="twitter"
          placeholder="@jack"
          defaultValue={contact.twitter}
        />
      </label>
      <label>
        <span>Avatar URL</span>
        <input
          placeholder="https://example.com/avatar.jpg"
          aria-label="Avatar URL"
          type="text"
          name="avatar"
          defaultValue={contact.avatar}
        />
      </label>
      <label>
        <span>Notes</span>
        <textarea
          name="notes"
          defaultValue={contact.notes}
          rows={6}
        />
      </label>
      <p>
        <button type="submit">Save</button>
        <button type="button">Cancel</button>
      </p>
    </Form>
  );
}

📎 새로운 편집 경로 추가

src/index.jsx

/* existing code */
import EditContact from "./routes/edit";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
        loader: contactLoader,
      },
      {
        path: "contacts/:contactId/edit",
        element: <EditContact />,
        loader: contactLoader,
      },
    ],
  },
]);

/* existing code */

코드를 보면 contactLoader를 재사용했음을 알 수 있습니다.

이제 edit을 누르면 다음과 같은 화면이 나오게 됩니다.

⭐ FormData로 연락처 업데이트

방금 만든 경로로 만든 양식을 랜더링 합니다. 해당 <Form/>을 action에 연결해서 데이터를 업데이트 해봅시다.

📎 편집 모듈에 작업 추가

src/routes/edit.jsx

import {
  Form,
  useLoaderData,
  redirect,
} from "react-router-dom";
import { updateContact } from "../contacts";

export async function action({ request, params }) {
  const formData = await request.formData(); //Form에서 데이터 추출
  const updates = Object.fromEntries(formData); //데이터 객체로 변환
  await updateContact(params.contactId, updates);
  return redirect(`/contacts/${params.contactId}`);
}

/* existing code */

📎 동작을 경로에 연결

src/index.jsx

/* existing code */
import EditContact, {
  action as editAction,
} from "./routes/edit";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
        loader: contactLoader,
      },
      {
        path: "contacts/:contactId/edit",
        element: <EditContact />,
        loader: contactLoader,
        action: editAction,  //Form에 연결할 action 추가하기
      },
    ],
  },
]);

/* existing code */

edit한 내용이 잘 반영되고 있습니다!

이게 어떻게 가능한 걸까요?

<input
  placeholder="First"
  aria-label="First name"
  type="text"
  name="first"
  defaultValue={contact.first}
/>

해당 코드에서 value의 이름은 first가 됩니다.

이러한 input이 담긴 form은 FormData 형식으로 작성 됩니다.

export async function action({ request, params }) {
  const formData = await request.formData();
  const firstName = formData.get("first");
  const lastName = formData.get("last");
  // ...
}

그래서 request(요청)을 열어보면 .get()으로 보낼 데이터의 이름을 매개변수로 입력해 꺼내볼 수가 있습니다.

또 추가적으로 Object.formEntries()를 사용해서 formdata를 객체로 표현할 수 있습니다.

const formData = await request.formData(); // Form데이터 받아오기
const updates = Object.fromEntries(formData); // 데이터를 객체로 변환하기
await updateContact(params.contactId, updates); // 요청 보내기

여기서 말하는 request, request.formData, Object.formEntries는 웹플랫폼에서 제공하는 API 입니다. react-router와는 상관없습니다.

데이터 처리를 마친후

return redirect(`/contacts/${params.contactId}`);

react-router가 제공하는 redirect() 으로 클라이언트 사이드로 페이지를 이동합니다. 근데 이상한 점이 하나있습니다. 이동한 페이지는 contacts/:contactId 인데 사이드바까지 모두 리랜더링 된다는 점입니다.

페이지를 redirect()하면서 사이드바까지 업데이트 되었습니다.

원래 클라이언트 측 라우팅이 없으면 post요청시 서버가 리디렉션 되면서 새로운 페이지를 다시가져오기 때문에 페이지 전체가 새로고침 되었습니다. react-router는 이 과정을 예뮬레이트하고 작업후에 페이지의 데이터를 자동으로 검증해서 마치 페이지를 새로 불러온것처럼 랜더링해버립니다.

⭐ 새 레코드를 편집 페이지로 리디렉션

새 연락처를 만드는 작업을 업데이트하고 편집 페이지로 리디렉션 해보겠습니다.

📎 편집 페이지로 리디렉션

src/routes/root.jsx

import {
  Outlet,
  Link,
  useLoaderData,
  Form,
  redirect,
} from "react-router-dom";
import { getContacts, createContact } from "../contacts";

export async function action() {
  const contact = await createContact();
  return redirect(`/contacts/${contact.id}/edit`);
}

이제 new 버튼을 누르면 페이지가 redirect가 되서 새로만든 후 편집 페이지로 이동합니다.

참고문서 : https://reactrouter.com/en/main/start/tutorial

React Router는 React 기반의 웹 애플리케이션에서 라우팅을 관리하기 위한 라이브러리 입니다. 라우팅은 사용자가 웹 내에서 다른 페이지로 이동하는 것을 말하며 React Router는 이를 쉽게 구현할 수 있도록 도와줍니다.

즉 SPA로 구성된 React 애플리케이션의 각컴포넌트를 URL 경로와 매핑시키는 방식으로 동작합니다.

설치

📎 npm 버전

npm install react-router-dom localforage match-sorter sort-by

npx create-react-app react-router-tutorial

react-router 공식문서에서 제공해주는 다음 코드를 넣으면 css나 비동기 서버통신을 미리 셋팅할 수 있습니다.

src/index.css

index.css file

src/contacts.js

contacts.js file

📎 최종 파일 구조

src
├── contacts.js
├── index.css
└── index.jsx

⭐ Router 추가하기

클라이언트 사이드 랜더링을 위해 다음코드를 추가해 줍시다.

📎 브라우저 라우터 생성 및 랜더링

src/index.js

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,<L
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

router변수에서 모든 라우팅을 세팅한다음 브라우저에 그리게 됩니다. 가장 기본적인 셋팅이기 때문에 처음에 이해가 가지 않는다면 우선은 받아들입시다.

해당 코드에서는 ‘/’라는 path에 element를 그리게 됩니다.

가장 기본적인 라우팅이라고 할 수 있다.

⭐ 루트경로

이 앱에서 전역 레이아웃을 추가해 봅시다.

다음경로에 파일을 추가적으로 만들어줍니다.

📎 루트 레이아웃 구성 요소 만들기

src/routes/root.jsx

export default function Root() {
  return (
    <>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        <div>
          <form id="search-form" role="search">
            <input
              id="q"
              aria-label="Search contacts"
              placeholder="Search"
              type="search"
              name="q"
            />
            <div
              id="search-spinner"
              aria-hidden
              hidden={true}
            />
            <div
              className="sr-only"
              aria-live="polite"
            ></div>
          </form>
          <form method="post">
            <button type="submit">New</button>
          </form>
        </div>
        <nav>
          <ul>
            <li>
              <a href={`/contacts/1`}>Your Name</a>
            </li>
            <li>
              <a href={`/contacts/2`}>Your Friend</a>
            </li>
          </ul>
        </nav>
      </div>
      <div id="detail"></div>
    </>
  );
}

다음과 같은 Root 컴포넌트를 만들고 아까 만든 “/”경로에 추가해 줍니다.

📎 루트경로 설정

scr/index.jsx

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Root from "./routes/Root";

// ahem
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root/>, //해당경로에 컴포넌트 추가
  },
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

‘/’경로가 아까 추가해둔 Root 컴포넌트로 변경되었습니다! 이제 라우팅을 어떻게 하면 좋을지 감이 오셨을 겁니다.

이번엔 your Name이라는 버튼을 한번 눌러봅시다.

http://localhost:3000/contacts/1 경로로 라우팅을 설정한적이 없기 때문에 에러가 발생합니다. 경고 메시지를 보니 errorElement나 ErrorBoundary를 설정하라고 나옵니다.

해당 에러를 처리하기 위해 기본적인 오류페이지를 만들어 봅시다.

⭐ 찾을 수 없음 오류 처리

📎 오류페이지 만들기

src/error-page.jsx

import { useRouteError } from "react-router-dom";

export default function ErrorPage() {
  const error = useRouteError(); // 에러 발생 여부를 가져옵니다.
  console.error(error);

  return (
    <div id="error-page">
      <h1>Oops!</h1>
      <p>Sorry, an unexpected error has occurred.</p>
      <p>
        <i>{error.statusText || error.message}</i>
      </p>
    </div>
  );
}

📎 루트 경로에서 오류컴포넌트 연결

root 경로에 에러페이지를 추가해 줍시다

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement : <ErrorPage/>
  },
]);

<Root/>에서 발생하는 모든에러는 <ErrorPage/>로 이동하게 됩니다.

이제 “/”경로에서 에러가 발생할 경우 다음과 같은 에러페이지가 화면에 나타나게 됩니다.

⭐ 연락처 경로 UI

이제 다른 페이지를 만들고 라우팅 해봅시다.

왼쪽 sidebar에 있는것이 연락처 목록입니다.

연락처 구성요소 UI 추가

src/routes/contact.jsx

import { Form } from "react-router-dom";

export default function Contact() {
  const contact = {
    first: "Your",
    last: "Name",
    avatar: "https://placekitten.com/g/200/200",
    twitter: "your_handle",
    notes: "Some notes",
    favorite: true,
  };

  return (
    <div id="contact">
      <div>
        <img
          key={contact.avatar}
          src={contact.avatar || null}
        />
      </div>

      <div>
        <h1>
          {contact.first || contact.last ? (
            <>
              {contact.first} {contact.last}
            </>
          ) : (
            <i>No Name</i>
          )}{" "}
          <Favorite contact={contact} />
        </h1>

        {contact.twitter && (
          <p>
            <a
              target="_blank"
              href={`https://twitter.com/${contact.twitter}`}
            >
              {contact.twitter}
            </a>
          </p>
        )}

        {contact.notes && <p>{contact.notes}</p>}

        <div>
          <Form action="edit">
            <button type="submit">Edit</button>
          </Form>
          <Form
            method="post"
            action="destroy"
            onSubmit={(event) => {
              if (
                // eslint-disable-next-line no-restricted-globals
                !confirm(
                  "Please confirm you want to delete this record."
                )
              ) {
                event.preventDefault();
              }
            }}
          >
            <button type="submit">Delete</button>
          </Form>
        </div>
      </div>
    </div>
  );
}

function Favorite({ contact }) {
  // yes, this is a `let` for later
  let favorite = contact.favorite;
  return (
    <Form method="post">
      <button
        name="favorite"
        value={favorite ? "false" : "true"}
        aria-label={
          favorite
            ? "Remove from favorites"
            : "Add to favorites"
        }
      >
        {favorite ? "★" : "☆"}
      </button>
    </Form>
  );
}

어떤 구조로 되어있는지는 화면으로 살펴보고 붙여넣기 합니다.

📎 연락처 구성 요소 가져오기 및 새 경로 만들기

라우팅을 추가해 줍니다.

import Contact from "./routes/contact";

// 라우팅
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement : <ErrorPage/>
  },
  {
    path: "contacts/:contactId",  //이경로로 이동하면 <Contact/> 가 보인다. 
    element: <Contact />,
  },
]);

해당 경로로 들어가면 귀여운 고양이가 보이게 됩니다.

여기서 :contactId는 파라미터가 됩니다. (1,2,3,”123”,…) 등 하나의 페이지에서 다양한 값이 필요할 때 사용됩니다. 자세한 내용은 뒤에 살펴봅시다.

이 페이지에는 하나의 문제점이 있습니다. Root컴포넌트 안에 존재하지 않는다는 것입니다. Root 컴포넌트와 경로가 다르기 때문에 sidebar는 더이상 보이지 않습니다. sidebar까지 함께 보이게 하기 위해 Root컴포넌트 안에 Contact를 넣어보도록 하겠습니다.

⭐ 중첩경로

연락처 경로를 루트경로의 자식으로 이동

코드를 다음과 같이 작성해 봅시다.

src/index.jsx

// 라우팅
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement : <ErrorPage/>,
    children:[
      {
        path:"contacts/:contactId",
        element:<Contact/>
      }
    ]
  },

]);

아까와 달리 <Root/> 컴포넌트의 ‘/’ 경로 밑에 <Contact/> 컴포넌트가 위치해 있습니다. 해당<Contact/> 컴포넌트를 사용하기 위해서는 <Outlet/>이라는 컴포넌트가 필요합니다.

📎 랜더링

src/routes/root.jsx

import { Outlet } from "react-router-dom";

export default function Root() {
  return (
    <>
      {/* all the other elements */}
      <div id="detail">
        <Outlet />   // <Contact/>는 이곳에 위치하게 됩니다. 
      </div>
    </>
  );
}

Root 컴포넌트의 children의 컴포넌트가 다음 Outlet 컴포넌트에 위치하게 됩니다. 이제 실제 화면을 살펴 봅시다.

다음 경로에 Root컴포넌트와 Contact 컴포넌트가 모두 포함된걸 볼수있습니다!

⭐ 클라이언트 측 라우팅

이제까지의 코드에서는 사이드바에서 링크를 클릭하면 브라우저가 React Routrer를 사용해서 클라언트 라우팅을 하는게 아닌 URL에 대한 전체 문서요청을 수행해서 페이지를 그렸습니다. 이는 html css javascript를 전부 불러와야하기 때문에 자원낭비 심합니다.

이러한 문제를 해결하기 위해서 앞으로는 <Link/>를 사용해 URL을 업데이트해서 UI를 즉시 랜더링 할 수 있게 해봅시다.

수정하기전

                    <ul>
              <li>
                <a href={`/contacts/1`}>Your Name</a>
              </li>
              <li>
                <a href={`/contacts/2`}>Your Friend</a>
              </li>
            </ul>

수정후

import { Outlet, Link } from "react-router-dom";

...
                        <ul>
              <li>
                <Link to={`/contacts/1`}>Your Name</Link>
              </li>
              <li>
                <Link to={`/contacts/2`}>Your Friend</Link>
              </li>
            </ul>

이제페이지를 이동하는 과정에서 새로고침이 발생하지 않습니다. 클라이언트측에서 url를 업데이트하고 html css javascript를 전부 다시 가져오는것이 아닌 이미 받아온 정적 파일들로 화면을 즉시 만드는것이기 때문에 새로고침이 발생하지 않고 부드러운 페이지 전환이 가능해집니다.

react-router를 설치하고 router를 세팅하는 방법에 대해 알아보았습니다. 모든 자료는 react-router-dom 공식홈페이지에서 제공합니다.

⭐ AJAX(Asynchronous Javascript And XML)

📖 Ajax는 javascript의 라이브러리중 하나이며, Asynchronous Javascript And XML의 약자로, 비동기적으로 서버와 통신하여 웹 페이지의 일부를 업데이트하거나 데이터를 동기적으로 불러오는 기술이다.

📖 페이지를 새로고침하지 않고도 데이터를 가져올 수 있어 사용자 경험을 향상시키고, 서버와의 통신을 더 효율적으로 만들 수 있다.

📖 이름 그대로 XML을 가져올수도 있지만 최근에는 JSON데이터를 더 많이 사용한다.

📌 AJAX의 필요성

AJAX를 사용하지 않는다면 어떤 불편한 점이 있을까?

1. 페이지 전체 새로고침 : 특정 부분만 업데이트 할 수 없기 때문에 새로운 데이터를 보려면 페이지 전체를 새로고침 해야한다. 이는 사용자경험 저하, 페이지의 로딩시간증가로 이어진다.
2. 서버 부하 증가 : 페이지 전체를 새로고침 해야하므로, 서버에 불필요한 요청이 증가한다. (html css javascript 전체를 다시 불러옴)
3. 네트워크 트레픽 증가 : 페이지 전체를 다시 로드해야 하므로 불필요한 네트워크 트래픽이 발생해 데이터 소모가 늘어난다.
4. 사용자 경험 저하 : 사용자가 특정 동작을 수행할 때마다 페이지 전체가 새로고침되면서 사용자 경험이 떨어진다. 특히 댓글이나 폼 제출과 같은 작업을 할 때 페이지가 다시 로드되어 사용자가 불편을 겪는다.

📌 AJAX 장점

• 비동기통신 : 페이지의 부분적인 업데이트
• 사용자 경험 향상 : 새로고침을 하지 않아 빠른 화면전환과 데이터로딩을 경험
• 서버 부하 감소 : 데이터만 가져오기 때문에 서버의 부하가 줄어든다.
• 자원 절약 : 데이터만 가져오기 때문에 리소스 전체를 로딩하는것보다 났다
• 동기적 UI 업데이트 : 실시간 검색결과나 채팅 기능 구현 가능

📌 AJAX 단점

• 브라우저 호환성 : 모든 부라우저가 동일하게 AJAX를 지원하지 않을 수 있다.
• 보안 문제 : javascript를 통해 서버와 데이터를 주고 받기 때문에 보안이슈가 발생할 수 있다.
• 검색 엔진 최적화(SEO) 어려움 : 검색 엔진은 javascript를 해석하는데 한계가 있어서 동적으로 로딩되는 컨텐츠를 인식하지 못할 수도 있다.
• 디버깅과 테스팅 어려움 : 비동기 코드의 흐름을 추적하기 어려울 수 있다.
• 코드 복잡성 : 코드의 복잡성으로 인해 유지보수가 어려울 수 있고, 콜백지옥과 같은 문제가 발생할 수 있다.

⭐ 동기와 비동기

📌 동기

작업이 순차적으로 진행되는것

어떤 작업이 시작되면 그작업이 완료되기 전까지는 다음작업이 시작되지 않는다. 이련의 작업들은 순차적으로 실행되며 하나의 작업이 끝나야 다음 작업이 시작된다.

공유 리소스 접근, 디버깅과 예외처리등 순차적으로 진행되어 작업 순서가 보장되어야 할 경우 사용된다.

📌 비동기

병렬적으로 여러작업을 동시에 진행할 수 있는것

작업 결과를 기다리지 않고 다음 작업을 실행할 수 있다. 작업이 완료되면 그 결과를 받아 처리할 수 있다.

예를 들면 네트워크 요청, 파일 입출력, 타이머 등과 같이 시간이 오래 거릴는 작업을 처리할 때 비동기 적으로 작성하면 시간이 오래걸리는 작업이 끝날 때까지 기다리지 않고 다른 작업을 수행할 수 있다.

📄 느낀점

ajax를 사용하지 않으면 정보를 업데이트하는 방법이 페이지를 처음부터 다시 로딩해야하는 끔찍한 방법 밖에는 없는걸 깨달았다. 없었다면 휴대폰 데이터가 몇배는 나가지 않았을까?

리액트에서는 최적화는 컴포넌트의 리랜더링을 줄이는 과정이라고해도 과언이 아니다. useCallback과 useMemo 그리고 React.memo를 사용하여 메모이제이션 기법으로 리랜더링을 줄이게 된다.

리액트의 렌더링은 Render Phase와 Commit Phase 크게 두가지 로 나뉜다.

📌 Render Phase

state 나 props 가 변하면 해당 컴포넌트를 불러서 React.createElement를 동작시켜 컴포넌트를 실행시킨다. 이과정을 리랜더링이라고 한다.

해당 리랜더링 과정을 통해 생성된 새로운 virtual DOM을 만들게 된다.

📌 재조정(Reconciliation)

이전에 만들어진 virtual DOM과 현재 만든 virtual DOM을 비교하여 실제 Real DOM에 반영할 목록들을 확인한다.

📌 Commit Phase

render phase에서 확인했던 변경이 필요한 목록들을 실제 Real DOM에 적용한다.

변경이 필요한 부분이 없다면 commit phase는 스킵된다.

이해를 돕기 위해 다음과 같은 예시코드를 준비했다

//부모 컴포넌트
const Parent = ()=>{
    const [value, setValue] = useState(null);

    const handleClick = () =>{};

    useEffect(()=>{
        setTimeout(()=>{
            setValue("changeValue");
        },3000);
    },[])

    return(
        <>
            <FirstChild value={value}/>
            <SecondChild onClick={handleClick}/>
        </>
    )
}

// 첫번째 자식 컴포넌트
const FirstChild = ({value})=>{
    return <div>{value}</div>
}

// 두번째 자식 컴포넌트
const SecondChild = ({ onClick })=>{
    <div onClick={onclick}>
        {Array.from({length:1000}).map((_,idx)=>(
            <GrandChild key={idx+1) order={idx}/>.    //오래걸리는 작업의 예시 
        ))}
    </div>
}

React의 리랜더링은 조건은 props와 state의 변경에 있다. Parent의 value의 값이 변경되면서 Parent는 리랜더링이 되고 그로인해 Firstchild도 리랜더링된다. 여기서 주의할 점은 SecondChild의 props값도 변경된다는 것이다 Parent가 리랜더링 되면서 handleClick은 재정의 되고 이전과는다른 handleClick함수가 생성되면서 자연스럽게 SecondChild의 props는 변경되게 된다. SecondChild는 불필요하게 리랜더링 작업을 수행하게 된다.

이 불필요한 과정을 최적화 할 순 없을까?

⭐ useCallback 사용

//부모 컴포넌트
const Parent = ()=>{
    const [value, setValue] = useState(null);

    const handleClick = useCallback(()=>{},[]);

    useEffect(()=>{
        setTimeout(()=>{
            setValue("changeValue");
        },3000);
    },[])

    return(
        <>
            <FirstChild value={value}/>
            <SecondChild onClick={handleClick}/>
        </>
    )
}

useCallback을 사용해서 handleClick을 메모이제이션 하였다. 의존성 배열이 변경되지 않는다면 handleClick의 참조값은 변경되지 않는다. 때문에 리랜더링의 조건중 하나인 props를 동일하게 만들었기 때문이다.

그렇다면 이제 리랜더링은 발생하지 않을까? 안타깝게도 여전히 리랜더링이 발생한다.

왜냐하면 Parent가 리랜더링되면서 React.createElement를 사용해 자식컴포넌트들을 재생성하기 때문이다. 그렇다고 useCallback을 사용하는게 아주의미없는것은 아니다. SecondChild는 리랜더링 되지만 render phase의 재조정과정에서 이전 virtual DOM과 변경된 점이 없기 때문에 commit phase를 생략할 수 있다!

그치만 여전히 render phase에서 불필요하게 리랜더링 되고 있다..

이때 React.memo를 사용하게 된다. React.memo를 사용한 컴포넌트는 props와 state가 변하지 않는다면 컴포넌트의 리랜더링을 막고 메모이제이션한 컴포넌트를 사용하여 render phase를 생략할 수 있다. !

⭐ 두번째 자식 컴포넌트에 React.memo 사용

// 두번째 자식 컴포넌트
const SecondChild = ({ onClick })=>(
    <div onClick={onclick}>
        {Array.from({length:1000}).map((_,idx)=>(
            <GrandChild key={idx+1) order={idx}/>.    //오래걸리는 작업의 예시 
        ))}
    </div>
)

export default React.memo(SecondChild); //리액트 메모의 사용

React.memo가 props를 이전과 비교할 때는 얕은비교를 사용한다. 얕은 비교란 원시타입은 값을 비교하고, 참조타입은 참조값이 같은지를 비교한다.

이제 React.memo를 통해 컴포넌트 전체를 메모이제이션 해주었다. React.memo는 props가 변경되지 않으면 해당 컴포넌트를 이전에 랜더링 했을 때 생성된 가상 DOM을 재사용하여 리랜더링을 방지한다.

이전에 useCallback을 사용해 handleClick을 재사용하여 props의 변경을 방지했기 때문에 Parent 컴포넌트가 리랜더링이 되어서 SecondChild는 더이상 리랜더링이 되지 않는다!

⭐ 불변하는 값을 props로 넘길때 useMemo

//부모 컴포넌트
const Parent = ()=>{
    const [value, setValue] = useState(null);

    const item = {
        name : "이순신",
        age : 45
        }

    useEffect(()=>{
        setTimeout(()=>{
            setValue("changeValue");
        },3000);
    },[])

    return(
        <>
            <FirstChild value={value}/>
            <SecondChild item={item}/>
        </>
    )
}

// 두번째 자식 컴포넌트
const SecondChild = ({ item })=>(
    <div>이름 : {item.name},  나이 : {item.age}</div>
)

export default React.memo(SecondChild); //리액트 메모의 사용

다음 코드에서 Parent는 3초후에 리랜더링되고 item 변수또한 재정의된다. item은 객체로 참조타입이기 때문에 React는 이전과 다른 객체로 판단하고 SecondChild props가 변경된것으로 판단하여 SecondChild 리랜더링 하게된다. 기껏한 React.memo가 소용없게 되버렸다.

⭐ useMemo 사용

이런경우에는 값을 저장하는 useMemo를 사용할 수 있다. 의존성 배열이 변경되지 않는다면 useMemo는 메모이제이션한 값을 반환한다.

//부모 컴포넌트
const Parent = ()=>{
    const [value, setValue] = useState(null);

    const item = {
        name : "이순신",
        age : 45
        }

    const memoizationItem = useMemo(()=> item, []);

    useEffect(()=>{
        setTimeout(()=>{
            setValue("changeValue");
        },3000);
    },[])

    return(
        <>
            <FirstChild value={value}/>
            <SecondChild item={memoizationItem}/>
        </>
    )
}

이로써 SecondChild의 item의 참조값은 유지되고 props는 변경되지 않아 리랜더링 되지 않고, 메모이제이션한 컴포넌트를 재사용할 수 있다.

⭐ “모든곳에서 useCallback, useMemo, React,memo 사용하면 좋을까?”

해당 함수들도 결국 코드이고 메모이제이션을 하기위한 작업이 필요하다. 때문에 props나 state가 자주 변경되는 컴포넌트에 사용하면 오히려 메모리의 낭비를 초례할 수 있다.

⭐ 최적화 도구들을 사용하기 전에 근본적인 코드를 개선

기본적으로 코드를 잘 작성해놓고 최적화 도구를 사용하도록하자

const Component = () =>{
    const forceUpdate = useForceUpdate(); // 강제 리랜더링하는 함수 

    return(
        <>
            <button onClick={forceUpdate}> force</button>
            <Consoler value="fixedValue"/>
        </>
    )
}

force라는 버튼을 누르면 강제로 리랜더링이 동작하는 컴포넌트이다. 여기서 Consoler의 value값은 변경되지 않았지만 버튼을 눌러 Component를 리랜더링하게 되면 React.createElement가 자동으로 내부 컴포넌트들을 리랜더링하게 된다.

이 코드를 근본적을 개선할 수 있는 방법은 무엇일까?

const Component = ({children}) =>{
    const forceUpdate = useForceUpdate();
    return(
        <>
            <button onClick={forceUpdate}> force</button>
            {children}
        </>
    )
}

function App(){
    <div>
        <Component>
            <Consoler value="fixedValue"/>
        </Component>
    </div>
}

다음과 같이 사용하면 Consoler는 Component 컴포넌트 안에 있는 것이 아니기 때문에 React.createElement로 리랜더링을 하지 않는다.

이처럼 메모이제이션을 사용하기 이전에 근본적으로 최적화를 먼저 해야한다.

“dont optimize rendering prematurely, do it when needed”

미리 최적화 하지 말자, 필요할 때 하자

Content Delivery Network의 약자로 전송 네트워크를 의미한다. CDN은 인터넷 상에서 웹 페이지, 이미지, 비디오 등 다양한 정적 컨텐츠를 더 빠르게 제공하기 위한 분산 네트워크 시스템이다.

결국 부하를 분산시키고 사용자에게 더 빠르게 컨텐츠를 제공하기 위한 기술이며, 웹사이트의 성능을 향상시키게 된다.

내가 만든 서버는 서울에 있는데 사용자는 유럽에 있다고 가정할 때 유럽에 있는 Cache 서버에 내가 만든 컨텐츠를 저장한다면 더 빠르게 접근할 수 있는 것이다

⭐ CDN 동작방식

CDN은 다음과 같은 방식으로 작동한다.

📌 컨텐츠 복제 및 캐싱

CDN은 원본 서버에 있는 컨텐츠를 여러 지역의 서버에 복제하고 캐싱한다. 이로써 사용자들은 가까운 지역의 서버에서 컨텐츠를 로드할 수 있어, 응답시간이 줄어든다.

📌 지리적 분산

CDN은 여러 지역에 있는 서버를 활용하여 컨텐츠를 제공하낟. 사용자가 원격 지역에 있더라도 더 가까운 서버의 컨텐츠를 로드할 수 있어 더 빠른 응답시간을 제공한다.

📌 로드 밸런싱

CDN은 트래픽을 여러 서버로 분산시켜 부하를 분담한다. 이로써 원본 서버의 부하를 줄이고 더 안정적인 서비스를 제공한다.

📌 보안 및 DDoS 방어

일부 CDN은 보안 기능과 DDoS(분산 서비스 거부 공격) 방어 기능을 포함하여 웹 사이트의 안전성을 강화한다.

⭐ 대표적인 CDN 서비스

• Cloudflare
• Akamai
• Amazon CloudFront

⭐ CDN 사용 예시

CDN은 주로 변경될 일 없는 정적 컨텐츠를 더 빠르게 제공하기 위해 사용되는 기술이다. 다음은 CDN활용한 예시이다.

📌 웹사이트 콘텐츠 제공

대규모 웹 사이트나 블로그는 이미지, 스타일시트, 스크립트 파일등 정적인 컨텐츠를 CDN을 통해 더 빠르게 제공하며, 이로써 사용자가 웹 페이지를 빠르게 로딩할 수 있다.

📌 미디어 스트리밍

동영상 및 오디오 스트리밍 서비스는 CDN을 사용하여 사용자에게 고품질의 미디어 컨텐츠를 신속하게 제공한다. 유튜브, Netflix 등의 서비스에서 CDN을 활용하여 스트리밍 성능을 개선한다.

📌 전자 상거래

온라인 쇼핑 웹 사이트에서 제품 이미지, 설명, 가격 정보등을 CDN을 통해 더 빠르게 제공하여 사용자들의 구매 경험을 최적화 한다.

📌 소셜 미디어

소셜 미디어 플랫폼은 이미지 및 비디오 공유를 위한 CDN을 사용하여 사용자들이 콘텐츠를 빠르게 업로드 하고 공유할 수 있도록 한다.

📌 게임 서비스

온라인 게임 플랫폼에서는 게임 컨턴츠를 CDN을 통해 제공하여 플레이어들이 더 빠르게 게임을 다운로드하고 플레이할 수 있도록 한다.

📌 애플리케이션 배포

소프트 웨어나 애플리케이션의 업데이트, 설치 파일등을 CDN을 통해 제공하여 사용자들이 빠르게 업데이트 받을 수 있게 한다.

📌 뉴스 및 미디어

뉴스 웹 사이트나 미디어 포털은 실시간으로 업데이트 되는 뉴스나 기사를 빠르게 제공하기 위해 CDN을 활용합니다.

⭐ CDN을 사용하려면 어떻게 해야할까?

1. CDN 제공업체 선택 : 다른나라에 있는 서버를 살순 없기 때문에 제공업체를 선택해야한다.
2. 도메인을 등록 및 설정 : CDN 엔드포인트로 트래픽을 보낼 수 있게 한다.
3. 콘텐츠 캐싱 및 배포 : CDN에서 제공할 정적 콘텐트를 업로드하고 캐싱한다.
4. DNS 레코드 설정 : CDN업체에서 제공하는 DNS 레코드를 도메인 설정에 추가한다. 그래야 웹사이트에 접근할 때 CDN을 통해 컨텐츠가 제공된다.
5. 테스트 및 최적화 : 테스트를 통해 로딩속도의 변화 트래픽 변화를 확인할 수 있다.
6. 보안 및 설정 : CDN제공업체에서 보안 설정을 확인하고 필요한 경우 SSL 인증 서를 적용할 수 있다.
7. 모니터링 및 유지보수 : CDN을 사용하면 뫼터링 도구를 통해 성능을 지속적으로 추적할 수 있다.

리액트의 메모이 제이션은 함수 컴포넌트 내에서 불필요한 재계산을 방지하고 컴포넌트의 성능을 최적화 하기 위한 기술이다.

• React.memo
• useMemo
• useCallback

다음과 같은 함수를 활용하여 메모이제이션을 구현할 수 있다.

⭐ Virtual DOM

먼저 메모이제이션이 왜 필요한지 알아보자

React의 랜더링 과정은 위 그림과 같다.

• 처음 랜더링시 React는 Virtual DOM을 생성한다.
• 이후 상태(state) 나 속성(props)이 변경될 때마다 새로운 Virtual DOM을 생성한다.
• 변경된 Virtual DOM 과 이전 Virtual DOM을 비교하여 변경된 부분을 찾아낸다
• 변경된 부분을 실제 DOM에 반영하며 이것을 확정(Commit) 이라고 한다.
• 실제 DOM을 직접 조작하는 대신 변경된 부분만 최소한의 작업으로 업데이트한다.
• 확정(Commit) 단계가 끝나면 브라우저는 실제 DOM을 업데이트하고 변경된 내용이 화면에 반영된다.

이처럼 virtual DOM을 사용하면 실제 DOM을 조작하는것 보다 효율적으로 화면을 랜더링 할 수 있다.

여기서 문제는 사소한 변경(state, props)이 생기기라도 하면 virtual DOM을 처음부터 다시 그린다는 것이다. 모든 컴포넌트가 변경될 일이 없기 때문에 , React에서는 컴포넌트를 메모이제이션 하여 불필요한 리랜더링을 방지 할 수 있다.

예를들어 부모컴포넌트의 사소한 변경에 자식컴포넌트들이 전부다 재 랜더링되는건 상당한 낭비라고 할 수 있다.

⭐ React.memo

const MyComponent = React.memo((props) => {
  // props를 이용한 컴포넌트 렌더링
});

// 사용법 예시
<MyComponent prop1={value1} prop2={value2} />

react.memo의 사용은 컴포넌트 전체를 감싸면서 시작된다. React.memo로 감싼 컴포넌트는 props가 변경되지 않는다면 해당컴포넌트는 다시 virtual DOM을 그릴 때 다시 만들지 않고 메모이제이션한 컴포넌트를 재 사용하게 된다.

⭐ useMemo

const memoizedValue = useMemo(() => {
  // 계산할 값 또는 함수
}, [dependency1, dependency2]);

useMemo는 특정 값의 계산을 메모이제이션하여 의존성이 변경되지 않는 한 이전에 계산한 결과를 재사용한다.

📌 불필요한 재계산 생략

useMemo는 주로 계산이 오래걸리는 작업의 결과를 보존할 때 사용한다. 그렇지 않으면 컴포넌트를 재 랜더링할 때마다 계산을 다시 해야하기 때문이다.

import React, { useState, useMemo } from 'react';

const SumCalculator = ({ n }) => {
  // 1부터 n까지의 합을 계산하는 함수
  const calculateSum = (n) => {
    console.log('Calculating sum...');
    let sum = 0;
    for (let i = 1; i <= n; i++) {
      sum += i;
    }
    return sum;
  };

  // useMemo를 사용하여 결과를 메모이제이션
  const sum = useMemo(() => calculateSum(n), [n]);

  return (
    <div>
      <p>1부터 {n}까지의 합: {sum}</p>
    </div>
  );
};

export default SumCalculator;

다음 코드는 1~n까지의 합을 계산하는 함수의 값을 메모이제이션을 사용하여 재사용하고 있다. 만약 useMemo를 사용하지 않는다면 해당 컴포넌트를 사용할 때마다 SumCalculator함수를 내부 로직이 다시 수행될 것이다.

위의 예시에서는 n의 값이 변경되지 않는이상 sum은 메모이제이션된 값을 사용하게 된다.

⭐ useCallback

const memoizedCallback = useCallback(() => {
  // 콜백 함수 로직
}, [dependency1, dependency2]);

React에서 컴포넌트가 리랜더링 될 때 , 함수 컴포넌트는 내부에 선언된 모든 함수를 새로 생성하게 된다.

📌 불필요한 리랜더링 방지

부모 컴포넌트가 리랜더링되면 자식 컴포넌트도 함께 리랜더링 된다. 이 때 자식컴포넌트의 함수가 불필요하게 리랜더링 되는것을 방지하기 위해 사용한다.

📌 자식 컴포넌트에 전달하는 콜백함수 재생성 방지

컴포넌트는 state나 props가 변경되면 리랜더링하게 되어있다.

그럴 때마다 컴포넌트에 모든 함수를 재생성하는데 만약 그 재생성 함수가 자식컴포넌트의 props로 전달하는 함수라면 이전 함수와 형태는 동일하지만 다른 객체로 판단하기 때문에 자식 컴포넌트는 불필요하게 리랜더링이 되고 만다.

다음 예시는 useCallback을 사용하는 방법을 보여주고 있다.

자식 컴포넌트

import React from 'react';

// React.memo를 통해 컴포넌트 전체를 메모이제이션 했다. 
const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');

  return (
    <button onClick={onClick}>Click me</button>
  );
});

export default ChildComponent;

자식 컴포넌트는 리랜더링하지 않기 위해 React.memo까지 사용했다.

useCallback을 사용하지 않은 부모 컴포넌트

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

// ParentComponent가 리랜더링 될때마다 handleClick은 재생성된다. 
  const handleClick = function(){
    setCount((prevCount) => prevCount + 1);
  }

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

export default ParentComponent;

다음은 useCallback을 사용하지 않은 부모 컴포넌트의 예시이다. 자식 컴포넌트에 있는 button을 누를 때마다 count의 값은 변경되고 ParentComponent는 리랜더링 된다. 이때 handleClick도 재생성하게 된다. 새로 생성된 함수는 이전함수와 형태는 같지만 다른함수로 취급하기 때문에 해당 handleClick 함수를 props로 전달 받은 ChildComponent는 똑같 형태의 함수를 내려받았음에도 재랜더링되는 참사가 발생한다.

useCallback을 사용한 부모 컴포넌트

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

 // 자식에게 넘겨줄 콜백함수를 useCallback을 사용해 메모이제이션 했다
  const handleClick = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

export default ParentComponent;

useCallback을 사용했기 때문에 부모컴포넌트가 재랜더링 되더라도 ChildComponent는 항상 같은 handleClick 함수를 받게 된다 때문에 ParentComponent가 리랜더링 되더라도 React.memo를 사용한 ChildComponent는 리랜더링 되지 않고 메모이제이션된 값을 사용할 수 있다.

이런 메모이제이션도 주의할 점이 있다. 자주 변경되는 컴포넌트나 함수에 메모이제이션을 사용하게 되면 계속해서 메모이제이션(캐싱)하는 비용이 발생하기 때문에 주의해야한다.

‘URL’은 우리에게 참 익숙한 용어이다. 흔히 [웹사이트 주소]로 많이 알고 있다. 그렇다면 URI는 무엇일까?

⭐ URI

Uniform Resource Identifier : 우리말로는 통합 자원 식별자 라고 한다.

• Uniform: 리소스를 식별하는 통일된 방식
• Resource: URL로 식별이 가능한 모든 종류의 자원
• Identifier: 다른 항목과 구분하기 위해 필요한 정보

즉 URI는 인터넷 상의 리소스 “자원 자체”를 식별하는 고유한 문자열 시퀀스다

고유하게 식별만 할 수 있으면 된다.

⭐ URL

Uniform Resource Locator : 네트워크상에서 통합 자원(리소스)의 위치를 나타내기 위한 규약

식별자와 위치를 동시에 보여준다.

웹 사이트 주소 + 컴퓨터 네트워크 상의 자원

이는 웹사이트 주소뿐만 아니라 컴퓨터 네트워크 상의 자원을 모두 나타내는 표기법이다.

특정 웹 페이지의 주소에 접속하기 위해서는 웹 사이트의 주소뿐만 아니라 프로토콜(https, http, sftp, smp 등)을 함께 알아야 접속이 가능한데, 이들을 모두 나타내는 것이 URL 이다.

⭐ URI와 URL의 차이점

URI = 식별자 URL= 식별자+위치

• example.com : URI 이다. 리소스 이름만 나타내기 때문이다. (고유하게 식별 가능하다)
• https://example.com : URL 이다. 이름과 더불어 어떻게 도달할 수 있는지 위치(프로토콜)까지 함께 나타내기 때문이다. (이 또한 고유하게 식별 가능하기 때문에 URI가 될 수 있다. )

✏️ URL은 일종의 URI이다.

URI가 좀 더 포괄적인 개념이며 URL은 이 안에 포함된다. 이 것은 URL가 URI로 불릴 수도 있다는 뜻이다.

✏️ URL은 프로토콜과 결합한 형태이다.

http://example.com => URL

즉, 어떻게 위치를 찾고 도달할 수 있는지까지 포함되어야 하기 때문에 URL은 프로토콜 + 이름(또는 번호)의 형태여야만 한다.

프로토콜(protocol)이란, 리소스에 접근하는 방법을 지정하는 방식이다. 서로다른 네트워크기기에서 정보를 주고 받기 위해서는 어떻게 정보를 주고 받을지 약속이 필요한데 이 약속을 프로토콜이라고 한다.

일반적으로 http, https, ftp등이 여기에 해당한다.

example.com ⇒ URI https;//example.com ⇒ URI, URL

URI는 그 자체로 이름(example.com) 이 거나, 이름 + 위치(https://example.com)를 나타낸 형태 모두 해당한다.

⭐ URL URI 구조

• Scheme : 리소스에 접근하는 데 사용할 프로토콜
• Host : 접근할 대상(서버)의 호스트 명
• Path : 접근할 대상(서버)의 경로에 대한 상세 정보

URN(Uniform Resource Name) 리소스의 위치, 프로토콜, 호스트 등과는 상관없이 각 자원에 이름을 부여한것, 즉 URL은 어떤 특정 서버에 있는 웹 문서를 가리키는 반면, URN은 웹 문서의 물리적인 위치와 상관없이 웹 문서 자체를 나타낸다.

⭐ 결론

URL : 프로토콜이 붙어 있는 주소! URI : 리소스를 식별할 수 있는 고유한 문자열!

참고 블로그 https://www.elancer.co.kr/blog/view?seq=74

평소에 너무 자연스럽게 브라우저를 키고 웹서핑을 해왔지만 그 과정이 어떻게 동작하는지는 자세하게 알아본적이 없는것 같다. frontend개발자를 꿈꾸는 취준생으로서 반드시 알아야 할 필요가 있다고 느꼈다.

⭐ 응답 파일 해석하기

브라우저는 웹페이지를 그리기위해 정적 리소스 (html,css,javascript)를 서버로 부터 가져온다. 해당 파일을 브라우저가 읽고 해석하는 과정을 알아보자

📌 DOM 생성하기

모든 브라우저는 서버에서 html파일을 받으면 브라우저가 이해할 수 있는 방식으로 변환한다. 이것을 파싱 이라고한다.

브라우저는 HTML을 쪼개서 DOM(Document Object Model)이라고 불리는 트리를 만든다. 줄여서 Dom Tree라고 부른다. DOM은 브라우저가 웹페이지를 표현하는 뼈대이며, javascript를 통해 동적으로 변경할 수 있는 API를 제공하기도 한다. (document.getElementById .. 등)

브라우저가 DOM을 다 만들었다면 DOMContentLoaded라는 이벤트를 발생시킨다. 이 이벤트를 최대한 빨리 발생시키는것이 좋은 웹성능을 위한 조건이다.

DOMContentLoaded : 브라우저가 DOM을 다 만들때 발생되는 이벤트이며, DOM이 만들어지기 전에 javascript가 동작하는것을 막기 위해 사용하는 이벤트이다.

📌 CSSOM 생성하기

이제 뼈대를 그렸으니 살을 붙일 차례이다. 웹페이지는 html파일로만 이루어져있지 않다. 디자인, 스타일, 반응형을 구현하기 위해서는 CSS가 필요하다.

CSS는 브라우저가 HTML을 파싱하면서 <link> 태그를 만나면 요청되는데, HTML과 마찬가지로 CSS도 브라우저가 이해할 수 있게 파싱해야한다.

브라우저는 CSS파싱하면서 CSSOM(SCC Object Model)이라고 불리는 트리를 만든다. 위에서 살펴본것과 동일하다.

각각의 DOM 노드에 색상 크기 위치 배치 방법등을 결정하는 정보들이 있으며, CSSOM 생성은 별개의 스레드에서 이루어지기 때문에 DOM 생성과정을 방해하지 는 않는다.

📌 JavaScript 실행하기

javascript는 브라우저가 HTML 파싱중<script> 태그를 만나면 요청된다. JS는 CSS와 다르게 코드를 해석하고 실행 완료가 될 때까지 DOM 생성을 멈춰버린다!

이는 document.write() 같은 함수로 DOM을 변경할 여지가 있기 때문이다.

JS가 너무 커서 실행이 오래걸린다면, 그만큼 HTML 파싱과 DOM 생성이 지연되고 성능에도 안좋은 영향을 끼친다.

때문에 늘 최적화 방법(async,defer 사용)을 고려해야한다.

보통 <script>태그를 제일 밑에 놔두는 이유도 바로 이때문이다.

📌 Render Tree로 합치기

HTML, CSS, JS를 잘 처리해서 DOM과 CSSOM을 만들었다면 최종적으로 어떤 요소를 어떻게 그릴지 결정해야한다.

Render Tree는 브라우저가 최종적으로 그릴 요소를 알려준다. 예를 들면 DOM의 script, meta 태그와 CSS의 display:none은 보이지 않는다.

따라서 최종적으로 그려야할 요소만 남게 된다.

CSS와 JS는render-blocking resources라고 한다. JS는 DOM의 생성 과정을 늦추고 CSS는 CSSOM이 모두 생성되어야 Render Tree를 만들수 있기 때문이다. 또 CSSOM생성은 JS의 실행을 멈추기도하고 JS가 너무 크면 Render Tree를 만드는 시점이 지연되기도 한다.

이를 최대한 제거하거나 최적화하는것이 웹성능을 위해 아주 중요한 작업이다.

⭐  웹 페이지 그리기

브라우저가 Render Tree를 그리는 과정은 Layout → Paint → Composite순서 대로 진행되며 이것을 렌더링 파이프라인 이라고 한다.

앞의 과정은 DOM을 만드는 과정이였다면 이제는 실제로 브라우저에 사이트를 그리는 작업이다. 때문에 시간도 많이 걸리게 된다.

이 과정을 잘 이해하고 있으면 웹 성능을 효과적으로 계선할 수 있다.

📌 크기와 위치 계산하기-Layout(Reflow)

layout은 웹 페이지를 기준으로 각 요소 위치와 크기를 결정한다. 윈도우의 크기, Render Tree에서 구했던 스타일등을 적용하게 된다.

이 과정이 처음 일어날 때는 Layout이라고 하지만 JS 등에 의해 재계산이 될 경우 Reflow라고 부른다.

Reflow 는 렌더링 파이프라인에서 Paint와 Composite까지 다시 진행하기 때문에 계산이 가장 많이 드는 작업이다.

📌 화면에 색칠하기-paint(repaint)

layout으로 요소들의 크기와 위치를 정했다. paint는 텍스트, 색상, 테두리, 그림자, 등 요소의 시각적인 부분을 그리는 작업이다. 브라우저는 paint 과정을 매우 빠르게 진행하기 때문에 성능에서 크게 중요하지 않다.

Reflow에 의해 Paint과정이 재계산된다면 Repaint라고 부른다.

📌 레이어 합치기-Composite

겹치는 레이어가 생길 때, 각 레이어를 하나로 합치는 과정을 Composite이라고 한다. paint과정은 단순히 색을 칠했다면 composite과정은 요소들을 정확한 순서로 화면에 그리는 작업을 하게 된다.

특히 요소들이 겹칠 때 이 과정은 매우 중요하다.

Composite이 끝나면 드디어 화면에 페이지가 렌더링 된다.

참고 블로그 https://blog.imqa.io/webpage_loading_process/

www.example.com 을 인터넷에 입력하게 되면 우리에게 친숙한 웹페이지 화면이 보이게 된다. 도대체 어떻게 우리에게 웹페이지가 전달 되는 것일까?

⭐ 전체적인 동작 방식

전체적으로 어떻게 동작하는지 알아보자

📌 1. DNS(Domain Name System) 조회

먼저 브라우저는 입력된 주소 [“www.example.com”]을 ip 주소로 변환해야 한다.

IP 주소는 인터넷 프로토콜(IP) 기반의 네트워크에서 장치들이 서로를 식별하고 통신할 수 있도록 사용되는 고유한 주소

이를 위해 브라우저는 DNS(Domain Name System) 서버에 해당 도메인 이름 [“www.example.com”] 을 ip 주소로 변환해 달라고 요청한다.

홈플러스(“www.example.com”) 전화번호(”93.184.216.34”)를 모를 때 114(DNS)에 전화해서 홈플러스(“www.example.com”) 전화번호(”93.184.216.34”)를 묻는다고 생각하면 된다.

📌 2. DNS 서버의 응답

DNS 서버는 도메인 이름에 해당하는 IP 주소를 가지고 있거나 다른 DNS 서버로 부터 정보를 찾아 응답한다. 이제 부라우저는 DNS 서버로 부터 받은 [”www.example.com”] 의 ip주소(”93.184.216.34”) 주소를 사용하여 웹사이트에 접속하게 된다.

📌 3. TCP 연결 설정

브라우저는 웹사이트의 IP 주소로 TCP 연결을 설정한다. 웹 사이트에 대한 HTTP 요청을 보내기 위해서는 TCP/IP 연결이 필요하기 때문이다.

TCP/IP : 네트워크 통신에 사용되는 프로토콜(약속, 규약)의 집합으로, 인터넷을 포함한 다양한 컴퓨터 네트워크에서 데이터를 주고받을 때 사용한다.

여기서 요청이란 너희 웹페이지를 보고 싶으니 정적 리소스(html,css,javascript)를 달라는 요청이라고 하자

TCP 프로토콜의 연결 설정은 그림과 같이 이루어진다. 3번 패킷을 주고 받기 때문에 three-way handshake 라고도 불린다.

이 과정을 통해 서버는 요청을 받을 준비(개방 : Passive open)를 하고 클라이언트는 서버와 연결을 할 준비(요청 : Active open)를 할 수 있게 된다.

📌 4. HTTP 요청

TCP 연결이 설정되면, 브라우저는 웹사이트 서버로 HTTP 요청을 보낸다. HTTP 요청에는 웹페이지를 가져오기 위한 정보가 포함되어있다.

📌 5. 서버의 응답

웹사이트를 제공하는 서버는 클라이언트(브라우저)에게 받은 HTTP요청에 대해 처리하고, 필요한 웹페이지 파일과 리소스(html, css, javascript)를 브라우저에 전송한다.

📌 6. 웹페이지 로딩

브라우저는 서버로 부터 받은 웹페이지 파일과 리소스(html, css, javascript)를 해석하고 웹페이지를 화면에 표시한다. 이후에 추가적인 리소스가 필요하다면 위와 같은 작업을 거쳐 다시한번 추가적으로 리소스를 다운로드한다.

📌 7 . 웹서핑 ㄱㄱ

이런 과정을 거쳐 우리는 웹페이지를 사용할 수 있게 된다.

참고 블로그

https://m.blog.naver.com/trvlnbh/222102617762

https://velog.io/@jaeyunn_15/Network-www.naver.com을-치면-일어나는-일

https://blog.imqa.io/webpage_loading_process/

tcp/ip는 두개의 주요 프로토콜인 TCP(Transmission Control Protocol)와 IP(Internet Protocol)의 이름을 합쳐서 부른것이다.

인터넷을 포함한 다양한 컴퓨터 네트워크에서 데이터를 주고 받을 때 사용하며, 가장 널리 사용되는 인터넷 표준으로 알려져있다.

⭐ 인터넷에서 데이터를 전송하는 방법

tcp/ip의 4계층 프로토콜을 구현하는 소프트웨어만 있으면 다른 종류의 호스트와도 통신을 할 수 있다.

클라이언트가 서버에게 서비스를 요청하면 클라이언트가 송신측이 되는거고, 서버가 데이터를 수신하는쪽이 된다. 반면 서버가 서비스를 제공하면 송신하는 쪽이 되고, 이때는 클라이언트가 수신측이 된다.

tcp/ip는 4개의 계층이 존재하는데 아래위로 인접한 계층과 데이터를 주고 받으면서 통신을 진행한다. 응용계층부터 네트워크 인터페이스까지 순서 대로 데이터가 거쳐가며 데이터가 전송된다.

⭐ 송신 호스트의 데이터 전송 과정

📌 헤더 추가와 캡슐화

각계층마다 처리할 프로토콜이 존재한다. 각자 맡은 역할이 있다는 뜻이다. 상위 계층으로 부터 받은 데이터에 헤더라는 정보를 붙여 하위계층으로 넘기게 된다. 헤더는 수신호스트의 해당 계층에서 데이터를 처리할 때 필요한 정보가 담겨있다. 예를 들면 물리주소, ip주소, mac주소, 포트번호, 등이 이에 해당한다.

그림처럼 각 계층을 지날 때마다 앞에 붙는 정보를 헤더라고 한다. 송신지 호스트에서 각 계층을 지날 때마다 해당 계층의 프로토콜(역할)을 수행하고 데이터에 해더를 추가하는것을 캡슐화 라고 한다.

수신자 호스트는 이 캡슐화한 데이터의 헤더 부분을 보고 데이터를 처리한다. 이를 통해 상대방과 동일한 프로토콜을 사용할 수 있는 것이다.

📌 캡슐화 후 데이터 전송

송신 호스트에서는 응용 → 전송 → 인터넷 → 네트워크 인터페이스 계층의 순서대로 데이터가 이동한다. 각 계층을 지날 때마다 헤더가 추가 된다. 한 계층을 지날 때마다 계속 캡슐화가 되는것이다. 최하위 계층(네트워크 인터페이스) 에서 이 디지털 데이터(캡슐화한 데이터)를 전기 신호로 변환해서 라우터 등 중간노드를 거쳐 수신호스트의 최하위 계층인 네트워크 인터페이스 계층으로 전달되게 된다.

⭐ 수신 호스트의 데이터 전송 과정

📌 헤더 제거와 역캡슐화

송신 호스트의 각 계층에서 맡은 역할에 따라 프로토콜을 처리한다. 이 때 헤더 부분의 정보를 사용하게 된다. 프로토콜에 사용된 헤더는 다음계층으로 올라갈 때 제거 된다. 데이터가 하위 계층에서 상위 계층으로 올라갈 수록 헤더가 제거되므로 최종적으로 송신측에서 보낸 데이터만 남게 된다. 이처럼 각 계층을 지날 때마다 해당 계층의 프로토콜을 처리하고 데이터의 헤더가 제거되는것을 역캡슐화 라고한다.

📌 역캡슐화와 데이터 전송

전송 매체를 통해 전기 신호를 받은 수신 호스트의 네트워크 인터페이스 계층은 이 전기 신호를 디지털 데이터로 변환한다.

수신 호스트에서 데이터는 네트워크 인터페이스 → 인터넷 → 전송 → 응용 계층 순서대로 이동한다. 각 계층을 지날 때마다 송신호스트가 추가한 헤더 정보를 읽고 해당 프로토콜을 수행한다음 사용한 헤더를 제거한 데이터를 상위 계층으로 넘긴다. 최종적으로는 여러개의 헤더를 삭제하고 송신호스트가 보낸 원본 데이터를 응용계층에서 사용하게 된다.

⭐ TCP / IP에 의한 데이터 전송

캡슐화에는 독특한 특성이 있다. 그 것은 한계층에서 추가된 헤더를 다른 계층에 볼 수 없게 할 수 있는 은닉 효과가 있다는 것이다. 다른 계층의 헤더를 볼 수 없기 때문에 헤더는 송신 호스트에서 추가된 헤더는 수신 호스트의 동일한 계층에서만 사용된다.

이렇게 되면 같은 계층끼리 직접 데이터를 주고 받은것 처럼 되는것이다.

같은 계층끼리 데이터를 사용하는 데이터를 구분해서 부르는 것을 PUD(Protocol Data Unit) 이라고 한다. 응용 계층에서는 메시지(Message), 전송 계층에서는 세그먼트(Segment), 인터넷 계층에서는 데이터그램(Datagram) 또는 패킷(Packet), 네트워크 인터페이스 계층에서는 프레임(Frame)이라고 부른다.

⭐ TCP/IP에 의한 데이터 처리 과정

각 계층마다 추가되는 헤더 정보는 다 다르지만 적어도 송신지와 수신지의 주소, 헤더에 이어지는 데이터의 종류를 알려주는 식별자 정보가 있습니다.

이더넷 헤더엔 MAC주소가, IP 헤더엔 IP 주소가, TCP 헤더엔 포트 번호라는 주소 정보가 포함되어있다. 응용 계층은 사용하는 프로토콜에 따라 다르지만 이메일의 메일 주소와 같은 주소가 사용되는 경우가 있다.

헤더에 이어지는 데이터의 종류를 알려주는 식별자는 상위층의 프로토콜의 종류를 알려주는 정보다. 이더넷 헤더에는 상위 계층의 프로토콜이 IP라는 정볼를, IP헤더에는 상위계층의 프로토콜이 TCP라는 정보를 , TCP 헤더에는 상위 계층이 애플리케이션이 사용하는 프로토콜에 대한 정보를 담고 있다.

⭐ 총정리

ip는 인터넷 전송 과정을 tcp는 데이터를 순서에 맞게 왔는지 중복인지 데이터에 변화는 없었는지 확인한다. 이러한 과정을 캡슐화 역캡슐화를 통해 알아봤다. 각 계층이 무슨일을 하는지 정확히 알수 있었다.

개쩌는 참고 블로그 https://better-together.tistory.com/89?category=887984

⭐ GET의 정의

GET은 HTTP 메서드 중 하나로, 서버로 부터 정보를 요청하기 위해 사용되는 메서드다. 주로 데이터를 가져오기 위해 사용되고, 요청하는 데이터는 URL의 쿼리 매개변수로 전달 된다.

📌 GET요청 예시

GET /api/data?id=123 HTTP/1.1
Host : www.example.com

위 예시에서 /api/data 는 요청하는 자원의 경로이다. id=123 은 쿼리 매개변수로 데이터를 전달하는 방법이다. = 을 기준으로 키벨류 쌍으로 주어진다.

📌 특징

• 보는것 처럼 GET 요청은 요청하는 데이터가 URL에 노출된다. 때문에 보안에 취약하다.
• 브라우저에서 캐싱될 수 있다. 동일한 요청이 여러 번 발생하더라도 실제로 서버로 요청이 가는게 아닌 캐싱된 데이터를 사용할 수도 있다.
• 데이터를 가져오는 용도로 사용되기 때문에 서버의 상태를 변경시키지 않는다.

⭐ POST의 정의

POST도 HTTP 메서드 중 하나로, 서버에 데이터를 전송하여 리소스를 생성하거나 수정하기 위해 사용되는 메서드다. POST 요청은 주로 데이터를 전달하기 위해 요청 본문(body)에 포함되어 전송된다.

📌 POST요청예시

POST /api/create_user HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
    "username": "john",
    "email" : "john@example.com"
}

위 예시에서 ‘api/create_user’ 는 새로운 사용자를 생성하는 API경로이며, 요청 본문에 JSON 형식의 데이터를 전달하고 있다.

📌 특징

• POST 요청은 요청 본문에 데이터가 포함되기 때문에 GET보다 보안적으로 더 안전하다. (눈으로 잘 안보임)
• 브라우저에서 캐싱이 되지 않아 동일한 요청이 여러번 발생하면 서버로의 요청이 항상 발생한다.
• 데이터를 생성하거나 수정하는 용도로 사용되기 때문에, 서버의 상태를 변경할 수 있다.

⭐ 총정리

HTTP 메서드인 GET과 POST의 차이점에 대해서 알아보았다. GET은 데이터를 가져오기 위해 사용되고, 캐싱될 수 있다. 반면 POST는 데이터를 생성 수정할 수 있고 보안적으로 안전하나 캐싱될 수 없다. 처음 HTTP메서드를 사용할 때 POST로도 충분히 데이터를 가져올 수 있는데 왜 그러지 않았는지 이번에 확실히 알 수 있었다.