웹 클라이언트

• 사용자가 웹에 접근할 때 사용하는 프로그램
• 크롬, 사파리, 엣지 등의 웹 브라우저

웹 서버

• 웹 클라이언트로부터 HTTP 요청을 받아 데이터를 전달하는 프로그램
• 아파치 웹 서버, IIS(Internet Information Services), 엔진엑스(Nginx) 등

WAS(Web Application Server)

• 웹 서버로부터 주로 동적 콘텐츠를 받아 이를 처리한 뒤, 그 결과를 다시 웹 서버에 전달하는 중간자 역할
• 웹 서버가 해야 하는 일을 나눠 가지며 서버의 부담을 줄이고 전체 웹 통신의 효율을 높이는 조력자 역할
• 톰캣, 제우스, IBM 웹스피어 등

데이터베이스(DB)

• 웹 서비스에 필요한 다양한 데이터를 체계적으로 저장하는 곳이며 WAS에서 동적 콘텐츠를 제공하기 위해 접근하는 장소
• MySQL, 오라클, MongoDB 등

📌 HTTP란?

HTTP(Hypertext Transfer Protocol) 란 웹 브라우저와 웹 서버 간에 데이터를 주고 받기 위해 사용하는 클라이언트/서버 모델을 따르는 프로토콜이다.

특징

• 한 번 통신을 주고받으면 연결을 끊는 비연결성 프로토콜이다.

• 헤더 · '헤더명: 헤더값'의 형식으로 작성하며 대소문자를 구분하지 않는다. · 헤더 종류

   ㄴ 공통 헤더 : Date / Cache-control
   ㄴ 요청 헤더 : Host / User-Agent
   ㄴ 응답 헤더 : Server / Location
   ㄴ 엔티티 헤더(메시지 본문에 대한 정보를 포함하는 헤더) : Content-Length / Content-Type
   ![](https://velog.velcdn.com/images/ssooo_kk_77/post/486e0b01-ddfd-488c-9d35-2b82f7aa828a/image.png)

• 한계 ㄴ 정보를 암호화하지 않은 상태로 보내기 때문에 정보 유출의 위험에 노출될 가능성이 높다. ㄴ 통신 상대를 확인하지 않기 때문에 누가 요청을 보냈는지, 통신 중인 상대가 허가된 상대인지 파악할 방법이 없다.

• 상태 코드 1️⃣XX : 웹 서버가 현재 요청을 받았으며 작업을 진행하고 있다. 100(Continue) : 서버가 요청을 받았으며 추가 요청을 기다리고 있음.

  2️⃣XX : 클라이언트가 요청한 작업을 서버가 성공적으로 처리했다. 200(Ok) : 요청이 성공적으로 되었습니다. 201(Created) : 요청이 성공적이었으며 그 결과로 새로운 리소스가 생성되었습니다. 204(No Content) : 요청은 성공적으로 처리되었지만 응답 본문이 없습니다.

  3️⃣XX : 리다이렉션 완료 응답으로 요청을 완료하기 위해 재전송이 필요하다. 301(Moved Permanently) : 추가로 요청한 페이지로 영구 이동되었습니다. 302(Found) : 추가로 요청한 페이지로 일시적으로 이동되었습니다. 304(Not Modified) : 리소스가 수정되지 않았으므로 캐시된 데이터를 사용해도 됩니다.

  4️⃣XX : 클라이언트측에 오류가 있다. 400(Bad Request) : 클라이언트의 요청 내용에 문제가 있습니다. 401(Unauthorized) : 인증되지 않은 사용자입니다. 404(Not Found) : 요청에는 문제가 없으나 요청한 데이터가 없습니다.

  5️⃣XX : 서버가 요청을 수행하지 못했음. 500(Internal Server Error) : 서버 내부적으로 오류가 발생해 응답에 실패했습니다. 502(Bad Gateway) : 서버가 다른 서버로부터 잘못된 응답을 받는 등 서버간의 네트워크에 문제가 생겨 통신이 제대로 되지 않습니다. 503(Service Unavailable) : 서버가 일시적으로 과부하 상태이거나 유지보수 중입니다. 504(Gateway Timeout) : 게이트웨이 또는 프록시 서버가 응답을 기다리다 시간이 초과되었습니다.

📌 HTTPS란?

HTTP 계층 아래 SSL이라는 보안 계층이 추가된 프로토콜이다.

🔆 SSL의 동작 과정 SSL은 공개키 기법과 대칭키 기법이라는 두 암호화 기법을 함께 사용한다. (관련 포스팅 보기) SSL은 크게 핸드셰이크, 세션, 세션 종료의 세 단계로 이루어진다.

1단계 : 클라이언트가 랜덤한 데이터와 함께 현재 지원할 수 있는 암호화 방식을 서버에 전달한다. 2단계 : 서버가 클라이언트에게 랜덤 데이터와 지원 가능한 암호화 방식, 인증서(서버가 공식적으로 인증된 기관인 CA에서 발급받은 문서)를 전달한다. 3단계 : 인증서를 발급받은 클라이언트는 이 인증서가 제대로 된 문서인지 검증하기 위해 CA가 발급한 인증서 목록 중에서 서버가 전달한 인증서가 있는지 확인한다. 인증서가 목록에 있다면 한 번 더 확인하기 위해 CA에서 공유하는 공개키를 가지고 인증서를 복호화한다. 복호화에 성공한다면 이 인증서는 서버가 자신의 비밀키로 암호화했다는 것이 검증되니 서버를 신뢰할 수 있게 된다. 4단계 : 본격적으로 키를 주고받기 위해 클라이언트는 실제 데이터 통신에서 사용할 대칭키를 임시로 만든다.(이 때 대칭키는 클라이언트와 서버가 서로 주고받은 랜덤한 데이터를 조합한 임시키이다.)임시키는 대칭키이기 때문에 앞서 갖고 있던 공개키로 암호화해 서버에 전달한다. 5단계 : 키를 받은 서버는 자신이 갖고 있던 비밀키로 암호를 해독해 임시 키를 전달받는다. 6단계 : 클라이언트와 서버의 임시 키는 일련의 과정을 거쳐 세션 키로 바뀌고 이 세션키를 이용해 본격적으로 클라이언트와 서버가 통신을 할 수 있게 된다.

[출처] - 그림으로 쉽게 이해하는 웹/HTTP/네트워크

1. UI가 깔끔하고
2. React를 지원하며
3. 문서화가 잘 되어있는

DHTMLX(공식문서) 라이브러리를 사용하기로 했다.

주요 기능들과 커스텀한 내용을 소개해보자면

1️⃣ 커스텀 스크롤

원래 기본 스크롤은 왼쪽 그리드 영역은 고정이고 오른쪽 차트 영역을 스크롤하는 것이었다. 하지만 위와같이 그리드 영역이 좁아질 경우 데이터를 제대로 보여주지 못하는 문제가 있어 그리드 영역과 차트 영역 각각에 스크롤을 설정해 컨트롤할 수 있게 개선이 필요했다.

          gantt.config.layout = {
                css: "gantt_container",
                cols: [
                    {
                        width: 400,
                        min_width: 400,
                        rows: [
                            {view: "grid", scrollable: true, scrollX: "gridScrollHor", scrollY: "scrollVer"},
                            {view: "scrollbar", id: "gridScrollHor", height: 20},
                        ],
                    },
                    {
                        rows: [
                            {view: "timeline", scrollable: true, scrollX: "timelineScrollHor", scrollY: "scrollVer", width: 1},
                            {view: "scrollbar", scroll: "x", id: "timelineScrollHor", height: 20},
                        ],
                    },
                    {view: "scrollbar", id: "scrollVer"},
                ],
            };

왼쪽 그리드 영역은 width를 400px로 고정하고 그 외의 영역은 timeline이 차지하도록 width : 1을 설정했다.

2️⃣ locale ko로 수정

gantt.locale = {
                date: {
                    month_full: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
                    month_short: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
                    day_full: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
                    day_short: ["일", "월", "화", "수", "목", "금", "토"],
                },
                labels: {
                    new_task: "새일정",
                    dhx_cal_today_button: "오늘",
                    day_tab: "일",
                    week_tab: "주",
                    month_tab: "월",
 ...

한국어로 date 표시 및 ui 요소(버튼명, 폼 필드명 등)에 표시되는 라벨명 수정

++ 라벨 추가는

gantt.locale.labels.section_modification_reason = "일정 변경 사유";

3️⃣ date 순서 변경

기본 date format은 dd-mm-yy 순

✔️ yy-mm-dd순으로 변경

 gantt.config.date_format = "%Y-%m-%d %H:%i";

4️⃣ onBeforeLightbox

일정 등록/수정/삭제를 위한 모달을 lightbox라고 하는데 이 모달이 열리기전에 하고자 하는 작업을 설정할때 사용하는 함수이다.

gantt.attachEvent("onBeforeLightbox", function(id) {
    const task = gantt.getTask(id);
    task.my_template = `<span id='title1'>Holders: </span>${task.users}
    <span id='title2'>Progress: </span>${task.progress*100}%`;
    return true;
});

나는 여기에 따로 외부에서 만든 셀렉트 박스 컴포넌트를 주입하기 위해

gantt.config.buttons_right = ["dhx_delete_btn"];
gantt.config.lightbox.sections = [
                                {
                                    name: "food", 
                                    height: 35,
                                    map_to: "food",
                                    type: "textarea",
                                },
                                {
                                    name: "drink", 
                                    height: 20,
                                    map_to: "drink",
                                    type: "custom",
                                },

lightbox.sections의 type을 custom으로 설정하고

 const addMuntoContainer: LightboxControl = {
                render: function (sns: any) {
                    return `<div class='custom_muntno_container' style="width: 100%;"></div>`;
                },

                set_value: function (node: HTMLElement, value: string, task: any, section: any) {
                    ...
                },

                get_value: function (node: HTMLElement, task: any, section: any) {
                    return task.muntno || "";
                },
            };

  gantt.form_blocks["custom"] = addMuntoContainer;

form_blocks의 type이 custom인 영역에 div태그를 추가해주었다.

5️⃣ onLightbox

모달이 열렸을 때 실행하는 함수로 onBeforeLightbox에서 생성한 div 태그를 찾아 외부에서 만든 컴포넌트를 렌더링 해주었다.

            gantt.attachEvent("onLightbox", function (id: number) {
                const task = gantt.getTask(id);

                const lightbox = document.querySelector(".custom_muntno_container");

                if (lightbox) {
                    if (rootInstance) {
                        rootInstance.unmount();
                    }

                    rootInstance = createRoot(lightbox);
                    rootInstance.render(
                        <CutomComponents
                        />,
                    );
                }
            });

6️⃣ onLightboxSave

모달에서 save 버튼 클릭 시 실행되는 함수로 api 연동이나 validation check 로직을 정의했다.

gantt.attachEvent("onLightboxSave", function(id, task, is_new){
    //any custom logic here
    return true;
})

7️⃣ lightbox header name 설정

 gantt.templates.lightbox_header = function (start: Date, end: Date, task: GanttTask) {
                let headerName;
                if (currentLevelRef.current === 1) {
                    if (task.text !== "새 일감") {
                        headerName = "일감 수정";
                    } else {
                        headerName = "일감 등록";
                    }
                }
                return headerName;
            };

8️⃣ timeline 영역 헤더 커스텀

  // timeline 헤더 설정
            gantt.config.scales = [
                {
                    unit: "day",
                    step: 1,
                    format: function (date: Date) {
                        const monthNames = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
                        const day = date.getDate();
                        const month = date.getMonth();
                        const dayString = day < 10 ? `0${day}` : day;
                        return `${monthNames[month]}.${dayString}`;
                    },
                },
            ];

기본 timeline 헤더 커스텀한 timeline 헤더

9️⃣ 레벨에 따라 일감을 스타일링하고 싶을 때

 gantt.templates.task_class = function (start: Date, end: Date, task: GanttTask) {
                // 최상위 일감
                if (!task.parent) {
                    return "highlight-parent-task";
                }

                // 하위 일감
                const parentTask = gantt.getTask(task.parent);
                if (parentTask) {
                    return "highlight-child-task";
                }
                return "";
            };

클래스를 다르게 주어

부모일감과 하위일감의 색을 커스텀할 수 있다.

🔟 onLightboxDelete

lightbox에서 삭제 버튼을 클릭했을때 실행되는 함수이다. true를 return하면 정상정으로 삭제를 진행, false를 return하면 삭제가 진행되지 않는다.

gantt.attachEvent("onLightboxDelete", function(id){
    const task = gantt.getTask(id);
    if (task.duration > 60){
        alert("The duration is too long. Please, try again");
        return false;
    }
    return true;
})

1️⃣1️⃣ onAfterTaskUpdate

일감이 수정된 후 실행되는 함수

gantt.attachEvent("onAfterTaskUpdate", function(id,task){
    //any custom logic here
});

1️⃣2️⃣ 드래그 관련 함수

• onTaskDrag : 드래그할 때 실행되는 함수

  gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
    //any custom logic here
  });

• onAfterTaskDrag : 드래그 완료 후 실행되는 함수

  gantt.attachEvent("onAfterTaskDrag", function(id, mode, e){
    //any custom logic here
  });

• onBeforeTaskDrag : autoScehduling을 직접 구현하다보니 최상위 일감의 드래그를 막는 로직이 추가로 필요했다.(최상위 일감은 하위 일감들의 일정에 따라 계산되는 일정) 일정을 드래그하여 조정하기 전 최상위 일감인지 먼저 판단 후 최상위면 false를 return하여 드래그를 방지했다.

    gantt.attachEvent("onBeforeTaskDrag", function (id: string, mode: string, e: MouseEvent) {
                const task = gantt.getTask(id);

                // 부모 Task 드래그 방지
                if (task.type === "project" || gantt.hasChild(id)) {
                    return false;
                }

                return true;
            });

➕ 이 외에도 다양한 커스텀 가능한 이벤트들이 정의되어 있고 설명과 예시도 문서화로 잘 구성되어 있어서 다음에도 간트 차트를 구현한다면 dhtmlx 라이브러리를 사용할 것 같다. 🧷 이벤트 문서

전체적인 프로세스는 다음과 같다. 1️⃣ 투표를 익명으로 생성 시 db에서 추적이 불가능하게 하기 위해 먼저 사용자 id를 해시하고 2️⃣ 이 값의 일부로 고유한 AES키를 생성해 서버에 전달한다. 3️⃣ 이를 해당 투표의 고유 id로 정의하고 4️⃣ 사용자가 투표 답변, 수정, 삭제 시 동일한 방법으로 서버에 고유한 키를 보내면 5️⃣ 서버에 저장되어 있던 암호화된 투표 고유 id와 비교해 자신이 생성한 투표인지 아닌지를 판단할 수 있게 하였다.

따라서 사용자의 원래 id를 서버에 전달하지 않고 db에는 사용자를 식별할 수 있는 정보가 없으므로 익명성이 보장된다.

코드를 살펴보자면

import forge from "node-forge";

function getSignature(publicKey: string, content: string): string {
  const md = forge.md.sha256.create();
  md.update(publicKey);
  const key = md.digest().getBytes(16); // AES-128 사용

먼저 사용자 ID를 해시하여 AES 키를 생성하고

  const iv = "0000000000000000";

동일키에 동일 암호문이 나와야 하기 때문에 IV (초기화 벡터)를 고정시킨다.

const cipher = forge.cipher.createCipher("AES-CBC", key);
cipher.start({ iv: iv });
cipher.update(forge.util.createBuffer(content));
cipher.finish();

const encrypted = cipher.output.getBytes();

forge 라이브러리를 사용하여 AES-CBC 암호화 객체를 생성하고 위에서 만든 AES 키를 설정한다. 이 후 암호화된 데이터를 바이트 배열로 변환하여 저장한다.

 return forge.util.encode64(encrypted);

최종으로 IV와 암호화된 데이터를 Base64로 인코딩하여 반환하는 함수를 만들었다.

이후 테스트를 진행하였는데 url로 이 키를 전달할 시 기호(?*^% 등)가 빈 문자열로 들어가는 이슈로 인해 투표를 생성한 사람과 동일함에도 매칭이 안되는 문제가 생겼다.

url-safe 문자열로 변환하기 위해 encodURIComponent로 한번 감싸서 보내 해결할 수 있었다.

 return encodeURIComponent(forge.util.encode64(encrypted));

➕ 추가로 알게 된 것 ➕

AES는 대칭 키 암호화 방식으로 고정된 키와 초기화 벡터(IV)를 사용해 데이터를 암호화한다.

여기서 대칭키 암호 알고리즘과 비대칭키 암호 알고리즘을 비교하며 좀 더 알아보자면 다음과 같은 특징이 있다.

✔️ 대칭키 암호 알고리즘

• 하나의 키로 암호화/복호화를 모두 수행하는 알고리즘
• 암호화하는 암호키와 복호화하는 해독키가 같다.
• 따라서 이 키는 절대 외부에 노출되면 안되고 해당 키를 Secret Key라고 부른다.
• 프론트엔드와 백엔드 간의 동일한 키를 공유해야하기 때문에 키 관리에 대한 어려움이 있고, 잦은 키 변경이 있는 경우에는 불편함을 초래할 가능성이 있다.
• 비대칭키 암호 알고리즘보다 속도가 빠르다.
• 키가 노출되면 암호화된 데이터를 복호화할 수 있다는 취약성이 있다.

✔️ 비대칭키 암호 알고리즘

- 암호화/복호화 시의 키가 서로 다른 키를 의미한다.

• 공개키와 개인키를 사용한다.
• 한 쌍의 키가 존재하며 하나는 특정 사람만이 가지는 개인키이며 하나는 누구나 가질 수 있는 공개키이다.
• 예를들어 공개키로 암호화한 데이터는 개인키로만 복호화할 수 있고 반대로 개인키로 암호화한 데이터는 공개키로만 복호화할 수 있다.
• 누군가 공개키를 가로채더라도 개인키를 모르기 때문에 데이터를 온전히 복호화할 수 없다.
• 주로 키 교환이나 인증에 사용한다.
• 대칭키 암호 알고리즘에 비해 느리다.

참고

처음 간트차트를 구현할 때 다른 라이브러리들 처럼 상단에 import를 해서 useEffect 내에서 초기화 후 렌더링하는 방식으로 로직을 짰다.

const GanttChart: React.FC = () => {
    const ganttContainer = useRef<HTMLDivElement>(null);

 useEffect(() => {
        // Gantt 초기화
        if (ganttContainer.current) {

        ...

        gantt.init(ganttContainer.current);

          return () => {
          gantt.clearAll();
       };
    }
}, []);

return (
        <div>
            <div ref={ganttContainer} style={{width: "100%", height: "400px"}} />

로컬에서는 문제가 없었는데 빌드를 하니 다음과 같은 에러가 발생하였다.

❓ 에러 원인

해당 프로젝트는 Next 프레임워크를 사용하고 있다.

dhtmlx-gantt는 DOM을 직접 조작하는 라이브러리이고 Next는 서버사이드 렌더링(SSR)을 수행하므로 DOM이 없는 서버에서 dhtmlx-gantt를 실행하려고 했던 것이 원인이었다.

❗에러 해결

1️⃣ useEffect와 typeof window를 사용하여 클라이언트 환경에서만 실행되도록 한다. 2️⃣ Next는 import 구문을 SSR 단계에서 처리하므로 클라이언트 환경에서 동적으로 로드하기 위해 required를 사용한다.

최종 코드

import React, { useEffect, useRef } from "react";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

const GanttChart: React.FC = () => {
    const ganttContainer = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (typeof window !== "undefined" && ganttContainer.current) {
            const gantt = require("dhtmlx-gantt");
            if (ganttContainer.current) {
                gantt.init(ganttContainer.current);
                gantt.parse({
                    data: [
                        { id: 1, text: "Task #1", start_date: "01-04-2023", duration: 5, progress: 0.6 },
                        { id: 2, text: "Task #2", start_date: "06-04-2023", duration: 3, progress: 0.4, parent: 1 },
                    ],
                });
            }
        }
    }, []);

    return <div ref={ganttContainer} style={{ width: "100%", height: "400px" }} />;
};

export default GanttChart;

수정 후 다시 시도하니 빌드가 자알 된다!😊

📌 쿠키

• 사용자의 브라우저에 저장되는 작은 데이터 조각으로 필요할 때 쉽게 데이터를 받아 사용 가능하다.

• 만료 기간이 정해져 있지 않은 쿠키인 세션 쿠키(Session cookie)와 만료 기간이 존재하는 영구 쿠키(persistent cookie)가 있다. (위 사진에서 theme 세션이 세션 쿠키, refresh_token이 영구 쿠키에 해당한다.)

• 세션 쿠키는 브라우저가 종료될 때 함께 사라지는 반면, 영구 쿠키는 만료기간이 끝나면 삭제된다.

• 동작 1️⃣ 클라이언트가 서버에 웹 페이지를 요청하면 서버는 요청에 대한 응답과 함께 쿠키정보를 전송한다. 2️⃣ 응답을 받은 클라이언트는 메시지 안에 있던 쿠키 정보를 브라우저 공간에 저장한다. 3️⃣ 이후부터 클라이언트에서 서버로 보내는 모든 요청에 쿠키 정보를 담아 전달한다. 4️⃣ 서버는 이러한 요청 메시지의 쿠키 정보를 확인해 사용자를 식별하거나 적절한 데이터를 보내준다.

• 단점

  • 누구나 쉽게 접근이 가능하고 조작할 수 있기 때문에 탈취되거나 변조될 위험이 크다.
  • 요청마다 메시지에 쿠키 정보가 함께 전송되기 때문에 오가는 데이터의 양도 더 커져 웹 통신의 성능이 떨어지는 원인이 될 수 있다.
  • 사용자가 방문한 웹 사이트에서 직접 발행하는 퍼스트 파티 쿠키와 제삼자가 발행한 서드 파티 쿠키로 구분할 수 있다.
  • 서드파티 쿠키는 사용자로부터 충분한 동의를 받지 않고 웹 브라우징 활동을 추적해 표적 광고에 이용하기 때문에 개인 정보 침해의 소지가 있다.
  • 개인 정보와 같은 민감한 데이터보다는 팝업 다시 보지 않기, 다크 모드 여부 등의 용도로 쿠키를 사용할 수 있다.

📌 로컬 스토리지 vs 세션 스토리지

• 로컬 스토리지

  • 한 번 브라우저에 저장되면 의도적으로 삭제하지 않는 이상 데이터가 유지된다.
  • 자동 로그인 등의 용도로 사용할 수 있다.

• 세션 스토리지

  • 브라우저 탭이 닫힐 때 데이터도 함께 삭제된다.
  • 일회성 정보의 데이터 저장 용도로 활용할 수 있다.

📌 쿠키와 웹 스토리지 비교

📌 Index DB

• 데이터의 형태가 문자열로 한정된 쿠키나 웹 스토리지에 반해, Key Value 한 쌍을 저장하며 , File/Blob 포함 다양한 자바스크립트 데이터 타입 지원한다.
• 용량 제한이 특별히 없다.
• 복잡한 구조의 데이터나 큰 규모의 데이터를 괸리해야할 때 유용하게 사용할 수 있다.
• same origin policy 를 따르며 온라인/오프라인 환경 모두에서 쿼리 지원한다.

서버 기반 데이터 저장 방식

📌 세션

• 정보를 서버에서 관리하기 때문에 보안이 우수하다.
• 클라이언트별로 고유 ID를 부여해 관리하기 때문에 각 클라이언트의 요구에 맞는 맞춤형 서비스를 제공할 수 있다.
• 사용자가 많아지거나 관리해야 하는 데이터의 양이 많아지면 서버의 부담이 커진다는 단점이 있다.
• 브라우저에서 값을 보여주는 것보다 상대적으로 데이터 제공 속도가 느릴 수 있다.
• 동작 1️⃣ 로그인한 사용자의 정보를 서버에 전달한다. 2️⃣ 서버는 요청을 보낸 클라이언트가 이전에 접근한 적이 있는지 확인하고 없다면 고유한 값인 세션 ID를 발급해 자신의 메모리에 저장하고 요청에 대한 응답과 함께 세션 ID를 클라이언트에 전달한다. 3️⃣ 클라이언트는 전달받은 세션 ID를 쿠키에 저장한다. 4️⃣ 가령 사용자가 장바구니 api를 요청하면 클라이언트는 요청과 함께 쿠키 안의 세션ID를 함께 전달한다. 5️⃣ 요청을 받은 서버는 메모리에서 자신이 받은 세션ID에 해당하는 클라이언트가 있는지 확인하고 있다면 장바구니 정보를 조회해 응답 데이터로 전송한다.

이미지 출처

먼저 input을 정의해주고 onChange 함수 작성

<input type="file" accept=".xlsx, .xls" onChange={handleFileChange} />

const uploadedFileRefPut = useRef<File | null>(null);

const handleFileChange = useCallback(async (event, fileRef) => {
    const selectedFile = event.target.files?.[0];

    if (selectedFile) {
       fileRef.current = selectedFile;
       const reader = new FileReader();
       reader.onload = async (e: ProgressEvent<FileReader>) => {
           if (e.target && e.target.result) {
              const data = new Uint8Array(e.target.result as ArrayBuffer);
              const workbook = XLSX.read(data, { type: "array", bookVBA: true });
              const worksheet = workbook.Sheets[workbook.SheetNames[0]];
              const jsonData: ExcelData[] = XLSX.utils.sheet_to_json(worksheet);
          }
      };

        reader.readAsArrayBuffer(selectedFile);
   }
}, []);

버튼 클릭 시 업로드를 수행 할 함수 작성

// 엑셀 파일로 일괄 수정
    const handlePutExcel = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        if (!uploadedFileRefPut.current) {
            toast.error("엑셀 파일을 업로드 해주세요.");
            return;
        }

        const formData = new FormData();

        formData.append("file", uploadedFileRefPut.current);
        uploadUserExcelPut(formData);
    };

최종 구현된 코드는 위와 같지만 초기에 upload할 파일을 useState로 상태를 관리하고 있었다.

const [uploadedFile, setUploadedFile] = useState<File | null>(null);

  const jsonData: ExcelData[] = XLSX.utils.sheet_to_json(worksheet);
  setUploadedFile(jsonData);
}

이렇게 onChange 됐을 때 setUploadedFile로 상태를 업데이트 해 주었음에도 업로드 버튼을 클릭하면 계속 엑셀 파일이 없다는 toast 에러가 뜨는 문제가 발생했다.

디버깅을 해보니 uploadedFile이 null로 찍히고 있었다... 왜 null이지? 나는 분명 setUploadedFile로 업데이트를 해주었는데...

한참 헤맨 끝에 찾은 원인은 uploadedFile이 클로저이기 때문이었다.

❔ 원인 엑셀 파일 업로드라는 버튼을 클릭하면 input이 있는 모달이 뜨는데 모달이 열린 시점에는 uploadedFile 상태를 클로저로 기억하고 있어서 상태가 업데이트된 이후에도 null 값을 유지하고 있었다.

두 가지의 해결 방법이 있다.

❕방법 1

uploadedFile 상태가 변경될 때마다 handleUpload 함수를 새로 정의하기 위해 useCallback으로 감싸고 의존성 배열에 uploadedFile을 추가하기

    const handleUpload = useCallback(async () => {
        if (!uploadedFile) {
            toast.error("엑셀 파일을 업로드 해주세요.");
            return;
        }

        const formData = new FormData();
        formData.append("file", uploadedFile);

        await uploadUserExcel(formData);
    }, [uploadedFile]);

❕방법 2

useRef를 사용하여 파일 상태를 저장하고 이를 참조하여 항상 최신 상태를 유지하는 방법

위의 최종 코드와 동일

두 방법 모두 상태가 변경될 때마다 handleUpload 함수가 최신 상태를 참조하게 되어 uploadedFile 상태의 동기화를 유지할 수 있게 된다!

나는 상태변경 이후 추가적인 UI의 변경이 없고 리렌더링이 필요하지 않았기 때문에 두 번째 방법으로 구현하기로 했다!

자바스크립트의 기본기가 중요하다는 것을 다시금 느끼게 된 과정이었다.

🧷 참고

처음 구현하는 기능은 언제나 떨리고 조금 설렌다🤓

프론트엔드에서 흔하게 접할 수 있는 Drag and Drop 기능과 새로 정렬된 리스트의 순서를 서버에 바로 반영해 새로고침해도 정렬이 유지되는 기능 구현해보자!

내가 사용한 라이브러리는 react-sortablejs이다.

1️⃣ 설치

npm i react-sortablejs

2️⃣ Drag and Drop 구현

깃헙 공식 문서에 나와있는 기본형은 아래와 같다.

import React, { FC, useState } from "react";
import { ReactSortable } from "react-sortablejs";

interface ItemType {
  id: number;
  name: string;
}

export const BasicFunction: FC = (props) => {
  const [state, setState] = useState<ItemType[]>([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
  ]);

  return (
    <ReactSortable list={state} setList={setState}>
      {state.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </ReactSortable>
  );
};

오 생각보다 단순하다..!

import { ReactSortable } from "react-sortablejs";

const [list, setList] = useState(lists);

<ReactSortable tag={"ul"} animation={100} list={list.map((item) => ({ ...item, id: item.tid }))} setList={setList} className="flex list-none flex-col gap-[20px]" onEnd={handleDragEnd}>
            {list?.map((item, index) => (
                <TopicList
                    index={index}
                />
            ))}
</ReactSortable>

전체 리스트 목록을 ReactSortable 컴포넌트로 감싸고 필요한 속성 값을 지정해주면 끝!

다양한 옵션을 제공하는데 그 중 사용한 것에 대해 간략히 정리를 하자면

• tag ReactSortable 컴포넌트가 어떤 HTML 태그나 컴포넌트로 렌더링될지를 지정하는 속성이다. 나는 TopicList가 li태그이기 때문에 ul로 지정해주었다.

• animation 항목을 정렬할 때 이동하는 애니메이션의 속도를 밀리초(ms) 단위로 설정. 만약 animation={0}으로 설정하면 애니메이션 없이 즉시 이동된다.

• list ReactSortable에서 사용할 항목 배열로 필수로 지정해주어야 하는 속성이다.

• setList 항목 목록의 상태를 설정하는 함수로 정렬된 후의 새로운 상태를 받아 컴포넌트의 상태를 업데이트해준다. list와 마찬가지로 필수로 지정해주어야 한다.

• onEnd onEnd?: ((evt: Sortable.SortableEvent, sortable: Sortable | null, store: Store) => void)

  ReactSortable 컴포넌트에서 드래그 앤 드롭 작업이 끝났을 때 호출되는 콜백 함수를 지정하고자 할 때 사용하는 속성이다. 이 콜백 함수는 SortableEvent 객체를 매개변수로 받아 드래그된 항목과 그 위치 변경에 대한 정보를 제공한다.

  나는 드래그가 끝나고 변경된 위치를 서버에 반영해 새로고침해도 정렬이 유지되도록 구현하고 싶었기 때문에 handleDragEnd라는 콜백 함수를 지정해주었다.

3️⃣ 정렬 구현

const handleDragEnd = (event) => {
    const updatedList = [...list];
    const movedItem = updatedList.splice(event.oldIndex, 1);
    updatedList.splice(event.newIndex, 0, movedItem);
    setList(updatedList);
};

SortableEvent 객체의 주요 속성은 다음과 같다.

• item : 드래그된 DOM 요소

• from : 드래그 시작 위치의 DOM 요소

• to : 드롭된 위치의 DOM 요소

• oldIndex : 드래그 시작 전의 요소 인덱스

• newIndex : 드래그 후의 요소 인덱스

  1. 먼저 리스트 배열의 복사본을 만들고
  2. 복사본을 splice메소드를 사용해 oldIndex 속성으로 드래그 한 요소를 제거한다.
  3. 복사본을 다시 splice 메소드로 드래그한 후 인덱스 위치에 제거한 요소를 삽입한 후 setList로 상태를 업데이트 해준다.

4️⃣ 최종

새로 정렬된 리스트를 서버에 반영하면 새로고침해도 정렬된 리스트가 유지된다!

🧷 참고

• react-sortablejs

1. DOM 트리 빌드

이전 단계에서 통신을 통해 받아온 html 파일들은 바이트 형태로 전달된다. 바이트 > 문자 > 토큰 > 노드 > 객체 모델로 전환하는 작업이 수행되고 최종 트리 형태의 DOM이 출력된다. + 만약 html 파싱 중 link 태그나 style 태그를 만날 경우 블로킹되어 CSSOM 생성으로 넘어간다.

2. CSSOM 트리 빌드

css 파일도 html 파일과 마찬가지로 트리 형태의 객체 모델로 전환하는 과정을 거친다. css 파싱이 완료되면 html 파싱이 중단된 시점으로 돌아가 다시 html을 파싱한다.

3. Render Tree 생성

기존에 제작된 DOM과 CSSOM을 결합하여 Render Tree를 생성한다. + 화면에 렌더링되는 노드만으로 구성된다. (display : none이나 meta 태그 등은 렌더트리를 구성하지 않음)

4. JS 파싱 후 AST 생성

html 파싱 중 js 즉, script 태그를 만나게 되면 blocking되어 제어권을 JS엔진에게 넘겨주어 JS 파싱으로 넘어간다. 소스코드를 토큰으로 분해하고 파싱해 AST라는 추상적 구문 트리로 생성한 뒤 인터프리터가 읽을 수 있도록 바이트코드를 생성하여 실행한다.

이후 js 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권이 넘어가 html 파싱이 중단된 시점부터 다시 시작하여 dom 생성을 재개한다.

5. Layout

Render Tree의 노드들의 위치와 크기를 계산하는 단계

6. Paint

계산된 값들을 기반으로 화면에 필요한 요소들을 실제로 그리는 작업을 실행한다.

7. Reflow & Repaint

아래 3가지의 경우와 같이 html 요소의 크기나 위치를 변경해야 하는 경우가 발생하면 렌더링 트리의 요소의 크기와 위치를 다시 계산하는 reflow 과정을 거쳐 다시 페인팅하는 repaint 가 발생한다. + 리렌더링 조건 1. 자바스크립트에 의한 노드 추가 또는 삭제 2. 브라우저 창 리사이징에 의한 뷰포트의 크기 변경 3. html 요소의 레이아웃에 변경을 발생시키는 width, height 등의 스타일 변경

++ Composition

레아아웃과 페인트를 수행하지 않고 레이어의 합성만 실행시키는 단계 Transform, opacity와 같은 요소들을 의미한다.

1. 주소창에 url을 입력하면 DNS서버(domain name system의 약자로 도메인 이름과 IP 주소를 매핑해주는 서버)에 요청하기 전에 먼저 CDN에 캐싱된 dns 기록들을 확인한다.

   • CDN : 콘텐츠 전송 네트워크로 여러 개의 서버를 이용해 웹 콘텐츠를 사용자와 가까운 서버에서 전송함으로써 전송 속도를 높인다는 장점을 가진다. AWS나 SK브로드밴드, KT 등의 예가 있다.

2. 만약 캐싱된 기록이 있으면 요청을 보내지 않고 바로 ip 주소를 반환하고 없으면 dns 서버 요청으로 넘어간다.

3. 가장 가까운 dns 서버에서 도메인 이름에 해당하는 IP 주소를 찾기 위해 dns query를 전달한다.

4. dns query는 현재 dns 서버에서 원하는 ip 주소가 존재하지 않으면 다른 dns 서버를 방문하는 과정을 원하는 IP 주소를 찾을 때까지 반복한다.

5. 찾던 IP 주소를 전달 받으면 이 IP 주소를 이용하여 웹 브라우저는 웹 서버에게 해당 웹 사이트에 맞는 html 문서를 요청한다.

6. 해당 HTTP 요청 메세지는 TCP/IP 프로토콜을 사용하여 서버로 전송된다.

7. 전송 제어 프로토콜인 TCP는 데이터의 전송을 제어하고 데이터를 어떻게 보낼지 어떻게 맞출지? 정한다.

8. IP의 특징인 비신뢰성과 비연결성으로 인해 IP 프로토콜 만으로는 통신을 할 수 없기 때문에 신뢰성과 연결성을 책임지는 TCP를 활용하여 통신한다.

9. TCP는 3-웨이 핸드셰이크라는 작업을 진행하면서 연결 및 데이터를 수신받는다.

   1. SYN단계 : 클라이언트는 서버에 클라이언트의 ISN을 담아 SYN을 보낸다.
   2. SYN + ACK 단계 : 서버는 클라이언트의 SYN을 수신하고 서버의 ISN을 보내며 승인번호로 클라이언트의 ISN + 1을 보낸다.
   3. ACK 단계 : 클라이언트는 서버의 ISN + 1한 값인 승인번호를 담아 ACK를 서버에 보낸다. 이렇게 3-웨이 핸드셰이킹 과정 이후 신뢰성이 구축되고 데이터 전송을 시작한다.

   • SYN : SYNchronization의 약자, 연결 요청 플래그
     • ACK : Acknowledgement의 약자, 응답 플래그
     • ISN : Initial Sequence Numbers의 약자로 초기 네트워크 연결을 할 때 할당된 32비트의 고유 시퀀스 번호

10. 4-웨이 핸드셰이크라는 과정을 통해 연결을 종료한다.

    1. 클라이언트가 연결을 닫으려고 할 때 FIN으로 설정된 세그먼트를 보낸다.
    2. 서버는 클라이언트로 ACK라는 승인 세그먼트를 보내고 자신의 통신이 끝날 때까지 기다린다.
    3. 서버는 일정 시간 이후 클라이언트에 FIN이라는 세그먼트를 보낸다.
    4. 클라이언트는 확인했다는 메세지인 ACK를 보내고 서버는 CLOSED 상태가 된다. 이후 클라이언트는 어느 정도의 시간을 대기한 후 연결이 닫히고 클라이언트와 서버의 모든 자원의 연결이 해제된다.

11. 특정 데이터 요청을 브라우저로부터 받게되면 웹 서버는 페이지의 로직이나 데이터베이스 연동을 위해 WAS에게 이들의 처리를 요청한다. 웹 서버의 과부하 방지를 위한 WAS(사용자의 컴퓨터나 장치에 웹 어플리케이션을 수행해주는 미들웨어)는 해당 요청을 통해 동적인 페이지 처리를 담당하고 DB에서 필요한 데이터 정보를 받아 그에 맞는 파일을 생성한다.

    웹 서버 : 정적인 파일(HTML, CSS, 이미지 파일)을 처리 WAS : 동적인 파일(JS, TS)을 처리

12. WAS에서의 작업 처리 결과들을 웹 서버로 전송하고, 웹 서버는 웹 브라우저에게 html 문서 결과를 전달한다. 전달 과정에서 status code를 통해 서버 요청에 따른 결과 및 상태를 전달한다.

• 1xx : 정보가 담긴 메세지
• 2xx : response 성공
• 3xx : 클라이언트를 다른 URL로 리다이렉트
• 4xx : 클라이언트 측에서 에러 발생
• 5xx : 서버 측에서 에러 발생

💡

• 참고
• 참고
• 참고

첫 번째, 두 번째 막대는 각각 setInterval과 requestAnimationFrame을 이용해서 너비값을 증가시키는 애니메이션이다.

setInterval을 이용한 막대 그래프는 requestAnimationFrame을 이용한 막대 그래프에 비해 일정한 간격으로 실행이 되지 않고 프레임이 유연하지 못한 것을 확인할 수 있다.

• setInterval을 사용한 애니메이션

  const startInterval = () => {
    const interval = document.querySelector('#interval') as HTMLDivElement;
  
    const id = setInterval(() => {
      interval.style.width = `${intervalWidth}px`;
      intervalWidth += 1;
  
      if (intervalWidth > window.innerWidth) clearInterval(id);
    }, 1000 / 60);
  };

• requestAnimationFrame을 사용한 애니메이션

  const startAnimationFrame = () => {
    const animationFrame = document.querySelector(
      '#animationFrame'
    ) as HTMLDivElement;
  
    animationFrame.style.width = `${requestWidth}px`;
    requestWidth += 1;
    const id = requestAnimationFrame(startAnimationFrame);
    if (requestWidth > window.innerWidth) cancelAnimationFrame(id);
  };

이렇게 다르게 동작하는 이유는 setInterval로 width를 자주 변경하게 되면 자바스크립트가 실행되는 동안(브라우저에서 다른 작업이 처리되는 동안) 레이아웃 변경이 지정된 간격보다 더 늦게 또는 더 빠르게 실행될 수 있다. 즉 간격이 일정하지 못하게 되고 실제 화면에 렌더링 되는 프레임의 수가 줄어드는 frame drop 현상으로 이어지게 된다. 이로인해 버벅이는 듯한 애니메이션으로 이어지게 되는 것이다.

반면 requestAnimationFrame은 브라우저의 렌더링 주기와 동기화 돼서 실행이된다. requestAnimationFrame 콜백에 DOM을 변경하는 함수를 넣어주면 해당 변경은 브라우저의 렌더링 주기에 최적화된 방식으로 반영이 되기 때문에 setInterval보다 requestAnimation을 사용할 때 더 유연한 애니메이션을 제공할 수 있게된다.

✔️ requsetAnimationFrame으로 scroll에 따른 progessBar 구현하기

비용이 많이 드는 레이아웃 변경 대신 transform의 scaleX로 progressBar의 너비값이 변하도록 적용했다.

• 전체 코드

  function ScrollProgressBar() {
    const [progess, setProgress] = useState(0);
    const rafRef = useRef<number | null>(null);
  
    useEffect(() => {
        const scroll = () => { 
            const scrollTop = document.documentElement.scrollTop
            // 문서 전체 높이 - 뷰포트 높이 값
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight
  
            // 중복된 작업이 반복적으로 일어나지 않도록 방지코드
            if (rafRef.current) {
                cancelAnimationFrame(rafRef.current)    
            }
  
            rafRef.current = requestAnimationFrame(() => {
                setProgress(scrollTop / height)
            })
        }
  
        window.addEventListener('scroll', scroll)
  
        return () => {
            if (rafRef.current) {
                cancelAnimationFrame(rafRef.current)    
            }
  
            window.removeEventListener('scroll', scroll)
        }
    },[])
    return (
        <div style={{ transform : `scaleX(${progess})`, transformOrigin : 'left', 
        backgroundColor:'', height : 8, position :'sticky', 
        top : 62,  zIndex:999, background: 'rgb(255 196 35)'}}>
  
        </div>
    )
  }

  💡

• 참고

: 커다란 번들을 작은 여러개의 청크로 나누는 과정으로 코드 스플리팅을 통해 유저가 필요하지 않은 코드들을 다운 받지 않도록 할 수 있다.

➕ 코드 스플리팅 적용 시 이점

: 어플리케이션 규모가 커질수록 번들 사이즈는 증가하게 되고 초기 로딩 속도가 증가할수 밖에 없다. 이때 코드 스플리팅을 적용하면 현재 필요한 코드만 다운 받을 수 있게 되어 첫 페이지 랜딩 속도를 더 빠르게 향상시켜 사용자 경험을 향상시킬 수 있다.

<공식 문서> 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다.

➕ React.lazy 적용하기

1️⃣ import 하기

import {lazy, Suspense} from "react"

2️⃣ const 컴포넌트명(변수명) = lazy(() => import('@componenets/auth/PrivateRoute'))

const OtherComponent = React.lazy(() => import('./OtherComponent'));

3️⃣ Suspense로 컴포넌트들 감싸주기

: lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 한다.

     <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>

4️⃣ fallback 옵션 지정하기

: Suspense는 컴포넌트가 lazy loading되는 동안 보여줄 ui를 만드는 fallback props를 제공한다.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

5️⃣ 프로젝트에 적용해보기

lazy 적용 전 유저가 첫 페이지를 만나기까지 걸리는 시간 > 1.27s

lazy 적용 후 유저가 첫 페이지를 만나기까지 걸리는 시간 > 407.17ms

대략 0.87s가 더 빨라진 것을 확인할 수 있다!!

💡

• 참고
• 참고

• lazy loading : 이미지 로드하는 시점을 지연시키는 기능을 제공한다. 따라서 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 최적화 할 수 있다. (우선적으로 로딩 시키고 싶다면 priority 속성을 추가하면 된다!)

• *이미지 사이즈 최적화 *

  • 사용자의 디바이스에 맞는 이미지 사이즈를 만들어 다운로드 할 수 있게 제공
  • webp와 같은 용량이 작은 포맷으로 변환하여 제공(이미지에 대한 최초 요청 시에 Next.js 서버에서 진행)
  • 이후 요청에는 캐시가 만료될 때까지 캐시 된 이미지가 제공되기 때문에 첫 번째 요청보다 훨씬 빠르게 이미지를 보여줄 수 있게 된다.

• *placeholder 제공 *: 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder를 제공 해 이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 할 수 있다.

import logoImg from '@/assets/logo.png'

export default function Header() {
    return(
        <header className={classes.header}>
           <img src={logoImg.src} alt="logoImg" />

                ▽ ▽ ▽ ▽ ▽ ▽ ▽

import logoImg from '@/assets/logo.png'
import Image from "next/image";

export default function Header() {
    return(
        <header className={classes.header}>
            <Image src={logoImg} alt="logo image" width={80} height={100} priority />

Network/Headers/Content-Type에서 확인 가능

💡

• 참고

• React 애플리케이션 상태 관리를 위한 라이브러리

• Facebook에서 개발한 상태 관리 라이브러리로 atom 이라는 단위로 상태를 정의하고 이를 이용해 컴포넌트 사이에서 데이터를 공유하며 상태를 업데이트한다.

❗Recoil 사용시 장점

• 간편한 상태관리: 간편하게 상태를 정의하고 관리할 수 있다.

• 최적화된 리렌더링: 내부적으로 최적화되어 있기 때문에 필요한 경우에만 리렌더링된다.

  서로 다른 selector가 같은 atom을 참조하고 setter의 결과로 원본 atom에 변화가 있더라도, 또다른 selector가 참조하고 있는 필드가 변경되지 않았다면 recoil이 이를 판단해서 영리하게 리렌더링을 일으키지 않는다.

• 복잡한 애플리케이션에 적합: 복잡한 상태 관리를 효과적으로 다루는데 적합하다.

📌 Atom과 Selector

• Atom

  : 앱의 상태를 정의하는 단위로 atom 함수를 통해 생성한다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독하기 때문에 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트가 재 렌더링 되는 결과가 발생한다.

  기본형

  function atom<T>({
      key: string, // 내부적으로 atom을 식별하는데 사용되는 고유한 문자열
      default: T | Promise<T> | RecoilValue<T>, // atom의 초깃값 또는 Promise 또는 동일한 타입의 값을 나타내는 다른 atom이나 selector
  }): RecoilState<T>

  ex)

  import { atom } from "recoil";
  
  const userState = atom({
      key : 'userState',
      default : null,
  })

• Selector

  : 상태 변화를 만들어 내는 함수로 다른 atom이나 selector로부터 값을 계산한다.

  기본형

    function selector<T>({
      key: string, // 내부적으로 atom을 식별하는데 사용되는 고유한 문자열
      get: ({
        get: GetRecoilValue // selector는 읽기만 가능한 상태를 반환한다.
      }) => T | Promise<T> | RecoilValue<T>,
      set?: ( // selector는 쓰기 가능한 상태를 반환한다.
        {
          get: GetRecoilValue,
          set: SetRecoilState,
          reset: ResetRecoilState,
        },
        newValue: T | DefaultValue,
      ) => void,
    })

  ex)

  import { selector } from "recoil";
  
  const userNameState = selector({
      key : 'userNameState',
      get : ({get}) => {
          const user = get(userState);
          return user ? user.name : 'Guest';
      }
  })

📌 Recoil에서 자주 사용하는 Hook

• useRecoilState(state)

  • Atom 값을 읽고 업데이트하는데 사용되는 훅으로 useState과 비슷한 구조이지만 전역 상태를 다룬다는 점에서 차이가 있다. 상태가 업데이트 되었을 때 리렌더링을 하도록 컴포넌트를 구독한다.

    import {atom, useRecoilState, RecoilRoot} from "recoil";
    

  const countState = atom({

  key : 'countState',
  default : 0,

  });

  function Counter() {

  const [count, setCount] = useRecoilState(countState);
  
  return(
      <div>
          <p>Count : {count} </p>
          <button onClick={() => setCount(count + 1)}>Increment</button>
          <button onClick={() => setCount(count - 1)}>Decrement</button>
      </div> 
  );

  }

• useRecoilValue(state)

  • 단순히 Atom 값을 읽는데에 사용되며 상태 업데이트를 트리거하지 않는다.

    import {selector, useRecoilValue, RecoilRoot} from 'recoil';
    

  const userNameState = selector({

  key : 'userNameState',
  get : ({get}) => {
      const user = get(userState);
      return user ? user.name : 'Guest';
  },

  });

  function UserInfo() {

  const userName = useRecoilValue(userNameState);
  
  return <p>Welcome, {userName}!</p>

  }

• useSetRecoilState(state)

  • Atom 값을 업데이트하는 setter 함수를 반환한다.

  import {atom, useSetRecoilState, RecoilRoot} from 'recoil';
  
  const countState = atom({
      key : 'countState',
      default : 0,
  });
  
  function Counter() {
      const setCount = useSetRecoilState(countState);
  
      return(
          <div>
              <button onClick={() => setCount((prevCount) => prevCount + 1)}>Increment</button>
          </div>
      );
  }

• useResetRecoilState

  • Atom 값을 초기값으로 리셋하는 함수를 반환한다.

    import {atom, useResetRecoilState, RecoilRoot} from 'recoil';
    

  const countState = atom({

  key : 'countState',
  default : 0,

  });

  function ResetButton() {

  const resetCount = useResetRecoilState(countState);
  
  return(
      <div>
          <button onClick={resetCount}>Reset Count</button>
      </div>
  );

  }

📌 그렇다면 프로젝트에 적용해보자!

1️⃣ 설치

npm install recoil
yarn add recoil

2️⃣ RecoilRoot로 컴포넌트 감싸기

export const NextProvider = ({ children }: Props) => {
  return (
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        ...
      </QueryClientProvider>
    </RecoilRoot>
  );
};

3️⃣ 지도 전역 상태 설계

: 기존 Map, Marker에 전달하던 상태 및 상태 관리 함수는 모두 삭제 후 전역으로 상태 관리하도록 적용

• mapState : 지도의 기본 상태를 저장 • currentStoreState : 현재 선택한 맛집 상태를 저장 • locationState : 현재 위치 및 zoom 상태를 저장

• Atom 값 설계

  // atom/index
  

export const mapState = atom({ key: "map", default: null, dangerouslyAllowMutability: true, });

export const currentStoreState = atom<StoreType | null>({ key: "store", default: null, });

export const locationState = atom({ key: "location", default: { lat: DEFAULT_LAT, lng: DEFAULT_LNG, zoom: DEFAULT_ZOOM, }, });

- #### Map 컴포넌트에 적용

// components/map export default function Map({ lat, lng, zoom }: MapProps) { const setMap = useSetRecoilState(mapState); const location = useRecoilValue(locationState);

- #### Marker 컴포넌트에 적용

export default function Marker({ store }: MarkerProps) { const map = useRecoilValue(mapState);

- #### Markers 컴포넌트에 적용

// components/markers export default function Markers({ stores }: MarkerProps) { const map = useRecoilValue(mapState); const setCurrentStore = useSetRecoilState(currentStoreState); const [location, setLocation] = useRecoilState(locationState);

<br />

### 4️⃣ 검색 기능 전역 상태 설계
: 기존 SearchFilter에 전달하던 상태 및 상태 관리 함수는 모두 삭제 후 전역으로 상태 관리하도록 적용

> searchState : 검색 상태를 저장

- ####  Atom 값 설계

// atom/index

export const searchState = atom<SearchType | null>({ key: "search", default: null, });

- ####  SearchFilter 컴포넌트에 적용

export default function SearchFilter() { const [search, setSearch] = useRecoilState(searchState);

return ( ... <input type="search" onChange={(e) => setSearch({ ...search, q: e.target.value })} ... /> <select onChange={(e) => setSearch({ ...search, district: e.target.value })} ... >

````

💡

• 참고
• 참고

• app 디렉토리 안에 page.js 파일을 만들어서 공개적으로 접근 가능한 URL 경로를 만든다. (app router는 page router보다 우선시 되며 디렉토리 간에 라우팅이 겹칠 경우 충돌을 방지하기 위해 빌드 시 에러를 발생시킨다.)
• 기본적으로 app 디렉토리 내부의 컴포넌트는 리액트의 서버 컴포넌트로 동작한다.(성능 최적화 적용 가능)
  • 클라이언트 컴포넌트로 사용하고 싶다면 최상단에 "use client"로 정의하면 된다.

📝 파일 규칙

페이지와 레이아웃

• Page.js : Route의 유일하게 UI를 보여줄 수 있는 페이지
  • 기본적으로 서버 컴포넌트로 구성되며 따로 클라이언트 컴포넌트 설정이 가능하다.
• Layouts : 여러 pages 간에 공유되는 UI
  • 상태 보존, 인터렉티브 유지, 리렌더링 되지 않는다.
  • 모든 페이지에 공유되는 Root Layout는 필수로 생성해야 한다.
  • child layout이나 child page가 있는 경우에는 항상 children props를 설정해주어야 한다.
• Templates : 템플릿은 레이아웃과 비슷하게 layout, page를 감싸지만 상태 유지는 안됨.(새로운 인스턴스 생성)
  • 특별한 상황이 아닌 경우 , Layout 사용이 권장된다.
• layout.js와 page.js 파일은 같은 폴더에 정의 가능하며, layout.js는 항상 page.js를 감싸는 구조

  export default function RootLayout({
  children,
  }: {
  children: React.ReactNode
  }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
  }

라우트 그룹

• 사이트의 목적별로 또는 기능별로 경로를 구성하고 싶은데 URL 경로에는 포함되지 않도록 하고자 할 때 폴더를 Route 그룹으로 표시하여 사용한다.
• 레이아웃만 다르게 적용하고 url은 변경하고 싶지 않은 경우에 사용한다.
• 컨벤션 : 폴더 이름을 괄호로 묶음으로써 생성(name)
  • 각각의 Route Group 마다 같은 URL 계층을 가져도 다른 layout을 적용
• (marketing), (shop)은 app 하단의 최상위 루트지만 Route Group을 이용해서 별개의 레이아웃 구성

프로젝트에 적용하기

그렇다면 이제 제 프로젝트를 app router로 마이그레이션 해보겠습니다!

1. node.js와 next.js 최신 버전으로 업그레이드하기

    > yarn add next@latest

2. src 폴더 하위에 app 디렉토리 생성

3. app 디렉토리 하위에 Root Layout.tsx 파일 생성

  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <body>
          <GoogleAnalytics GA_TRACKING_ID={process.env.NEXT_PUBLIC_GA_ID} />
          <NextProvider>
            <NextLayout>{children}</NextLayout>
          </NextProvider>
        </body>
      </html>
    );
  }

4. _document.tsx 파일을 마이그레이션 해주기 위해 Metadata 정의

  import { Metadata } from "next";

   export const metadata: Metadata = {
     title: "Hole in the wall",
     description: "Next.js 13 로컬 맛집 앱",
   }; 

5. 기존 _app.tsx 파일과 _docuemnt.tsx 파일 삭제

6. 기존 index 파일을 app의 page.tsx 파일로 변경

7. 데이터 패칭 변경

    // 기존 getServersideProps로 하던 패칭 방법
    export async function getServerSideProps() {
    const stores = await axios(`${process.env.NEXT_PUBLIC_API_URL}/api/stores`);

    return {
      props: { stores: stores.data },
    };
  }

⬇⬇⬇ ⬇⬇⬇ ⬇⬇⬇ ⬇⬇⬇ ⬇⬇⬇

  // fetch api를 사용한 패칭 방법
  // Home 내부에서 호출
  const stores: StoreType[] = await getData();

  async function getData() {
    try {
      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/stores`, {
        cache: "no-store",
      });

      if (!res.ok) {
        throw new Error("Failed to fetch data");
      }

      return res.json();
    } catch (e) {
      console.log(e);
    }
  }

8. 서버 컴포넌트로 작동하는 app 폴더 내에서 useState나 useEffect와 같은 훅을 사용하는 컴포넌트를 작동시키기 위해 클라이언트 사이드에서 "use client" 명시

// Markers.tsx

"use client";
import { currentStoreState, locationState, mapState } from "@/atom";
import { StoreType } from "@/interface";
import { useCallback, useEffect } from "react";
import { useSetRecoilState, useRecoilValue, useRecoilState } from "recoil";

9. useRouter(), usePathname(), useSearchParams() 변경

• 기존에 next/router에서 import하던 useRouter 훅을 next/navigation으로 변경
• 새로운 useRouter는 더이상 문자열 pathname을 반환하지 않기 때문에 usePathname 훅으로 변경
• 새로운 useRouter는 쿼리를 반환하지 않기 때문에 useSearchParams 훅으로 변경

'use client'

import { useRouter, usePathname, useSearchParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()

  // ...
}

  // 기존의 useRouter를 사용해 url로 쿼리를 받음.
  const router = useRouter();
  const { page = "1" }: any = router.query;

  // 새로운 useSearchParams 훅으로 parameters를 받음.
  const searchParams = useSearchParams();
  const page: any = searchParams?.get("page") || "1";

10. URL 경로에 따라 폴더 생성하고 page.tsx 파일로 변환

11. global-error 파일 생성

  "use client";

  export default function GlobalError({
    reset,
  }: {
    error: Error & { digest?: string };
    reset: () => void;
  }) {
    return (
      <html>
        <body>
          <div>
            다시 시도해주세요.
            <button
              onClick={() => reset()}>
              Try again
            </button>
          </div>
        </body>
      </html>
    );
  }

12. app 디렉토리 내에 api/auth/[...nextauth]/route.ts 파일 생성

/app/api/auth/[...nextauth]/route.ts

import NextAuth from "next-auth"

const handler = NextAuth({
  ...
})

export { handler as GET, handler as POST }

💥 해당 과정 중 생긴 오류

오류 해결 포스팅

13. 기존 pages 폴더 안의 [...nextauth]/route.ts 삭제

14. stores의 route HTTP 메서드에 따라 함수화

// 기존의 POST 메서드

import type { NextApiRequest, NextApiResponse } from "next";
import { StoreApiResponse, StoreType } from "@/interface";
import prisma from "@/db";
import axios from "axios";

import { getServerSession } from "next-auth";
import { authOptions } from "./auth/[...nextauth]";

interface Responsetype {
  page?: string;
  limit?: string;
  q?: string;
  district?: string;
  id?: string;
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<StoreApiResponse | StoreType[] | StoreType | null>
) {
  const { page = "", limit = "", q, district, id }: Responsetype = req.query;
  const session = await getServerSession(req, res, authOptions);

  if (req.method === "POST") {
    const formData = req.body;
    const headers = {
      Authorization: `KakaoAK ${process.env.KAKAO_CLIENT_ID}`,
    };

    ...


    return res.status(200).json(result);

⬇⬇⬇ ⬇⬇⬇ ⬇⬇⬇ ⬇⬇⬇ ⬇⬇⬇

// NextResponse로 변경한 POST 메서드

import { NextResponse } from "next/server";
import prisma from "@/db";
import axios from "axios";

import { getServerSession } from "next-auth";
import { authOptions } from "@/app/utils/authOptions";

export async function POST(req: Request) {
  // 데이터 생성을 처리한다.
  const formData = await req.json();

  const headers = {
    Authorization: `KakaoAK ${process.env.KAKAO_CLIENT_ID}`,
  };

 ...


  return NextResponse.json(result, { status: 200 });
}

💡

• 공식 문서 참고
• next auth route handler

웹 사이트 및 앱의 트래픽, 사용자의 행동을 분석하는 데 사용되는 google의 무료 웹 분석 도구(https://analytics.google.com/)

❕ Google analytics를 사용했을 때 장점

• 트래픽 소스, 사용자의 경로, 전환률 등을 상세하게 분석할 수 있어 웹 사이트나 앱의 성능 향상에 도움을 준다.
• 사용자가 웹 사이트나 앱에서 어떻게 상호 작용하는지 이해할 수 있고 이를 바탕으로 사용자 경험을 개선할 수 있다.
• 트래픽 분석 : 웹 사이트나 앱에 어떤 트래픽 소스에서 사용자가 유입되는지 추적할 수 있다,
• 페이지 분석 : 어떤 페이지나 화면이 사용자에게 가장 많이 방문되는지 어떤 컨텐츠가 인기 있는지 파악할 수 있다.
• 전환률 분석 : 원하는 동작(가입, 다운로드 등)을 완료한 사용자의 비율을 계산하고 개선 방법을 고려할 수 있다.

❕ 세팅

1. 관리 > 만들기 > 계정

https://analytics.google.com/analytics

2. 계정 이름 설정

3. 속성 이름, 보고 시간대, 통화 설정

4. 업종 카테고리, 비지니스 규모 선택

5. 비지니스 목표 선택

6. 약관 동의 후 플랫폼 선택

7. 배포한 URL과 스트림 이름 설정

8. 측정 ID를 .env 파일에 NEXT_PUBLIC_GA_ID로 저장

❕ 적용

1. 설치

yarn add -D @types/gtag.js

2. tsconfig.json에 gtag 추가해 타입 선언 파일 지정

  "types": ["@types/gtag.js"],

3. 이전 페이지에서 저장한 측정 ID를 .env 파일에 저장

4. /src/lib/gtag.ts 파일 생성 후 구글 애널리틱스 관련 타입 및 함수 정의

• pageview 함수

  • page path를 넘겨받아 사용자가 페이지를 이동할 때마다 해당 path를 저장

• event 함수

  • 사용자가 찜 버튼을 누를 때마다 해당 이벤트가 감지되도록 정의

    export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
    

export const pageview = (url: URL | string) => { if (process.env.NODE_ENV !== "development") { window.gtag("config", GA_TRACKING_ID as string, { page_path: url, }); } };

type gtagEvent = { action: string; category: string; label: string; value: number; };

export const event = ({ action, category, label, value }: gtagEvent) => { if (process.env.NODE_ENV !== "development") { window.gtag("event", action, { event_category: category, event_label: label, value: value, }); } };

#### 5. src/app/googleAnalytics.tsx 파일 생성 후 구글 스크립트 로드
- pathname이 변경될 때 마다 pageview 함수 호출

import { pageview } from "@/lib/gtag"; import Script from "next/script"; import { useEffect } from "react"; import { usePathname } from "next/navigation";

function GoogleAnalytics({ GA_TRACKING_ID }: { GA_TRACKING_ID?: string }) { const pathname = usePathname();

useEffect(() => { if (pathname) { pageview(pathname); } }, [pathname]);

if (process.env.NODE_ENV !== "production") { return null; } return (