Docker로 프로젝트를 띄우려면 가장 최상단의 폴더에서 docker-compose.yml 이 있어야 한다. 이걸로 띄울 프로젝트에 연관되어 있는 정보를 주어야 한다. 나의 프로젝트는 프론트엔드-백엔드-데이터베이스 이렇게 세 개가 있어서 이 세가지의 정보를 넣어주었다.

데이터베이스 관련해서는... 만약 같은 컴퓨터를 사용한다면 로컬에 데이터베이스 데이터가 남아있어서 괜찮겠지만 다른 컴퓨터를 사용하면 텅 빈 데이터베이스로 시작하게 된다. 즉, 나중에 배포를 하면 호스팅을 해야 된다는 건데 뭐... 그것도 나중에 찾아보면 되겠지... 일단은 각각의 컴퓨터에서 다른 사용자 정보 등으로 개발하려고 한다. Docker는 데이터에 대한 저장기능은 존재하지 않는다.

• docker-compose.yml

  services:
  # Database Service
  db:
    image: mysql:8.0
    restart: always
    env_file:
      - .env
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_DATABASE: ${DB_NAME}
    ports:
      - '3306:3306'
    volumes:
      - ./data:/var/lib/mysql
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql
  
  # Backend Service
  backend:
    build: ./backend
    restart: always
    env_file:
      - .env
    volumes:
      - ./backend:/app
      - /app/node_modules
    ports:
      - '5050:5050'
    environment:
      DB_HOST: ${DB_HOST}
      DB_USER: ${DB_USER}
      DB_PASSWORD: ${DB_PASSWORD}
      DB_NAME: ${DB_NAME}
      PORT: ${PORT}
      DATABASE_URL: mysql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:3306/${DB_NAME}
    depends_on:
      - db
  
  # Frontend Service
  frontend:
    build: ./frontend
    env_file:
      - .env
    volumes:
      - ./frontend:/app
      - /app/node_modules
    ports:
      - '5173:5173'
    environment:
      - VITE_API_BASE_URL=${VITE_API_BASE_URL}
      - VITE_GOOGLE_CLIENT_ID=${VITE_GOOGLE_CLIENT_ID}
    depends_on:
      - backend

그리고 이제 프론트엔드와 백엔드 각각에 그 프로젝트들을 돌릴 수 있는 정보들을 주어야 한다.

• frontend/Dockerfile

# Use Node.js as the base image
FROM node:20-alpine

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the code
COPY . .

# Vite's default dev port
EXPOSE 5173

# Run vite dev
CMD ["npm", "run", "dev", "--", "--host"]

• backend

# Use Node.js as the base image
FROM node:20-alpine

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the code
COPY . .

# Expose the port your backend runs on (usually 5000 or 3000)
EXPOSE 5050

# Start the app using tsx (as seen in your earlier logs)
CMD ["npm", "run", "dev"]

포스팅 작성할 때는 이렇게 간단하게밖에 쓸 수 없는데 Docker로 띄우는 것만 거의 4-5시간...? 정도는 쓴 것 같다... 일단 처음에는... ㅎㅎ... .env 파일의 존재를 잊음 ㅎㅎ... 한창 하던 중에 깨달아서 .env 파일 넣고 하니까 그 전에 셋팅해 놨던 모든 것이 리셋된 거나 마찬가지가 되었다ㅋㅋㅋ 그 뒤부터는 다시 셋팅 파일들이나 관련 코드들에서 .env 파일에서 땡겨와서 써야 하는 부분들을 다시 처리해 주어야 했다.

어쨌든 이제 돌아간다^^! 얏호^^! 프로젝트 켤 때마다 각각의 폴더에 들어가서 npm run dev 이런 거 안 쳐줘도 돼서 좋다!

• 프로젝트 시작 방법 최상단 폴더에서 docker-compose up -d 커맨드 입력하면 끝!

• 프로젝트 종료 방법 docker-compose down 커맨드 입력하면 끝!

아래와 같은 함수를 만들고 그 함수를 동작하는 input 태그에 onPaste 로 걸어주니 바로 실행되었다.

  const handlePaste = async (event: React.ClipboardEvent) => {
    const items = event.clipboardData.items;
    const files: File[] = [];

    for (let i = 0; i < items.length; i++) {
      if (items[i].type.indexOf('image') !== -1) {
        const file = items[i].getAsFile();
        if (file) files.push(file);
      }
    }

    if (files.length > 0) {
      const validatedFiles = await getValidatedFiles(files, requiredConditions);
      await addFiles(validatedFiles);

      event.preventDefault();
    }
  };

1. The Three Main Types There are three events associated with this type: onCopy: Fires when the user initiates a "copy" action. onCut: Fires when the user initiates a "cut" action. onPaste: Fires when the user initiates a "paste" action.

2. The clipboardData Property The most important part of a ClipboardEvent is the clipboardData property. It is a DataTransfer object that acts as a container for the data being moved. It has several key methods and properties: getData(format): Retrieves text or data from the clipboard (usually used in onPaste). setData(format, data): Modifies what gets put onto the clipboard (usually used in onCopy). items: A list of DataTransferItem objects. This is crucial for handling files or images (as we saw in your previous question). files: A list of files being pasted.

몇 주 지나기는 했는데 대충 몇 주 동안은 뭘 했나 기록해보자.

• 프론트엔드 구축: react / typescript
• 백엔드 구축: node.js
• DB 구축: Maria DB

일단 이렇게 스택을 잡고는 뚝딱뚝딱 구축했다.

일단 현재 상황은 회원가입 페이지와 로그인 페이지가 있고, 회원가입을 할 수 있고 비밀번호 변경을 할 수 있다. 그리고 docker를 이용해서 로컬 DB를 사용할 수 있어서 어느 컴퓨터에서도 일단 구성적으로는 똑같이 할 수 있다(데이터는 다를 지라도... 이건 나중에...). 비밀번호 추상화는 bcrypt로 하고 있는데 이건 보안적으로 좋은 방법이 아니라서 다음 목표는 이걸 passportjs를 이용해서 라이브러리를 사용해서 jwt 방식으로 바꾸는 것. 그 다음에는 로그인을 유지할 수 있게 상태관리를 하거나, 또는 로컬스토리지와 세션스토리지를 적절히 활용하는 것(좀 더 찾아보는 과정이 필요하다).

구글 OAuth랑 카카오 OAuth 하고 싶은데... 일단 그건 본 페이지 다 만든 다음에 가장 마지막에 해야겠다...

지금은 그냥 아무 이메일이나 넣어도 가입할 수 있는데(정규식에서 안 걸리기만 하면) 나중에는 이메일 인증해야지만 가입할 수 있게도 바꾸고 싶다. 꿈은 일단 이것저것 큼...

설날까지 로그인은 할 수 있게 만들어서 배포를 미리 해야지 같이 모임하는 선배들한테 쨘-! 할 수 있는데 사실 잘 모르겠다ㅋㅋㅋㅋㅋ

백엔드 API 만지다보니까 오히려 기본적인 CRUD는 하면 할 수 있을 것 같다. 물어물어 하면 할 수 있을 것 같은데 OAuth나 디자인적 부분에서 오히려... 조금 고생할 것도 같은... 게시판 예시같은 것도 찾아보는 거 투두리스트에 넣어야겠다.

어쨌든 2026년 나의 프로젝트는 이것을 하면서 지내보도록 해야겠다.

커서 & 제미나이와 함께하였다.

먼저 아래와 같이 쳐서 온갖 값의 해시를 얻어낸다.

git fsck --unreachable | grep commit

git fsck는 file system check라고 한다. verify the integrity and connectivity of the object를 하는 명령어이다.

여기에서 --unreachable 옵션을 넣으면 integrity나 connectivity가 끊어져 있는 해시값들을 찾는 거니까 정상적이지 않은 것, 즉 내가 날려버린 무언가가 들어있을 가능성이 크다. 다만 이 해시들의 순서는 딱히 보장되어 있지 않고 기간은 대충 90-100일 정도인 것 같아서... 나는 이걸 하나하나 다 확인해야만 한다...

• 대충 아래와 같이 나타난다.

Checking object directories: 100% (256/256), done.
Checking objects: 100% (25070/25070), done.
unreachable commit 160005452267ae3cf9e52fd9e3fd770e1fa8288e
unreachable commit 40011e29756d1702be027c4214bb73c336775590
unreachable commit a50182d634cae9f595e0c195129ea45664706c68
unreachable commit 920de0fcc7a9399a5b7e096063b3b1c9a5cfe82e
unreachable commit d014d5a5f8ec8a1cdc43dfef827c10a623f80b77
unreachable commit bc19b4bac5f66da27b32ca434036079f1022f328
unreachable commit 7a202e272062343dc7f3367b5f48ac6ee4ad31d9
unreachable commit 2c240043b943b0a4c591df881f878ec5ba6d1d9c

위의 터미널 값을 복사해다가 형식을 git show --stat [hash] 로 해다가 하나하나 확인하였다...

위의 해시 중에 내가 원하는 브랜치의 데이터 해시는 두 개가 나왔다. 왜 두 개지? 라는 의문과 함께...

• hash 1

git show --stat  7526021b875a641f8f26335f6b2ceb7ad879f55e

commit 7526021b875a641f8f26335f6b2ceb7ad879f55e
Author: -
Date:   Fri Jul 18 10:55:29 2025 +0900

    index on feature/PROD-19237: c40da0e7 [feature/PROD-19237] 식대 부분 취소 모달 개발 진행 중
(END)

• hash 2

git show --stat  79d5d542966c789485e3f5e05f3ba11424b1c428

commit 79d5d542966c789485e3f5e05f3ba11424b1c428
Merge: c40da0e7 7526021b
Author: -
Date:   Fri Jul 18 10:55:29 2025 +0900

    WIP on feature/PROD-19237: c40da0e7 [feature/PROD-19237] 식대 부분 취소 모달 개발 진행 중

 .../admin/point-history/sikdae-use/sikdaePartialCancelModal.tsx    | 136 +++++++++++++++++++++++-------
 1 file changed, 106 insertions(+), 30 deletions(-)
(END)

이 다음에는 이걸 restore 하려고 하는데 cherry-pick을 해보라고 하길래 따라했다. 근데 hash1을 cherry-pick 하려고 하니 아무것도 바뀐 게 없다고 하면서 안 됐다. 뫄???

일단 넘어가서 hash2를 cherry-pick 진행했다.

git cherry-pick 79d5d542966c789485e3f5e05f3ba11424b1c428

하지만 되지 않았다. 이게 merge commit이어서 그냥은 할 수 없고 - 옵션을 써야한대서 뫄??? 하지만 어쨌든 해 줘! 하고는 진행했다.

git show --pretty=fuller 79d5d542966c789485e3f5e05f3ba11424b1c428

이건 무엇을 바꼈는지 예쁘게 보는 명령어라고 한다. 이렇게 확인해서 보니까 확실히 hash2는 hash1과는 다르게 내가 복구시키고 싶었던 작업분이 잘 들어있었다.

근데 커서가 아래와 같이 부모가 두 명이 있다면서 어느 부모에다가 합칠 건지를 골라야 한다고 했다.

I can see this is a WIP (Work In Progress) merge commit with two parents. For cherry-picking a merge commit, you need to specify which parent to use with the -m option. Let me check what each parent contains:

I can see that this is a WIP stash merge with enhanced changes to the partial cancel modal. The current HEAD is already at the first parent (c40da0e7), so let me try cherry-picking with -m 1 to apply the stash changes:

git cherry-pick -m 1 79d5d542966c789485e3f5e05f3ba11424b1c428

이렇게 하니까 내가 원하는대로 잘 살려낼 수 있었다!

Perfect! The cherry-pick has been resolved successfully. Here's what happened: ✅ Cherry-pick completed successfully Issue: The original commit was a merge commit which required the -m option to specify which parent to use Solution: Used git cherry-pick -m 1 to apply the changes from the WIP stash Result: The enhanced changes to sikdaePartialCancelModal.tsx have been applied cleanly to your current branch The new commit 371bfc09 now contains all the WIP improvements including: Enhanced state management with cancel states Additional form components and validation Improved UI with CardDescription and VoneTypography Better table handling with onCellValueChanged events Your working tree is clean and ready for continued development. The cherry-pick resolved without any conflicts!

근데 살리는 건 살리는 거고, 왜 이렇게 된 건지?는 잘 모르겠어서 더 질문을 해 봤다. 왜 부모가 2명이 됐냐고 하니까 아래와 같이 대답했다.

The Two-Parent Mystery Explained The commit 79d5d542 is a merge commit created by git stash. Here's the breakdown:

What happened:

1. You were working on the feature - making changes to sikdaePartialCancelModal.tsx
2. You ran git stash - this saved your uncommitted work
3. Git created a merge commit with two parents:

Parent 1 (c40da0e7):

• The commit message: "[feature/PROD-19237] 식대 부분 취소 모달 개발 진행 중"
• This was your current HEAD when you stashed

Parent 2 (7526021b):

• The commit message: "index on feature/PROD-19237: c40da0e7..."
• This contains your uncommitted changes that were stashed

Why Git does this: When you run git stash, Git doesn't just save your working directory changes in a simple commit. Instead, it creates a merge commit that preserves:

• Your committed work (parent 1)
• Your uncommitted changes (parent 2)
• The combined state (the merge commit itself) This allows Git to properly restore both your working directory AND any staged changes when you later git stash pop or git stash apply.

The commit message format: Git's standard format for stash commits, where "WIP" means "Work In Progress". So you didn't explicitly create a merge commit - Git automatically created it when you stashed your work! This is why cherry-picking required the -m option to specify which parent's changes you wanted to apply.

맨 처음에는 git stash를 하면 그게 자동적으로 merge commit인 것처럼 말을 했는데 이거저거 찾아보니까 git stash는 merge commit이 아니라고 해서 아니라는데? 이러고 물어봤더니 갑자기 사과하면서ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 너가 맞다고 merge commit 아니래ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이 자식이ㅡㅡ

정수님이랑 이거저거 테스트를 해 본 결과, git stash를 하면 1번: stash를 한 후의 결과(새 작업분이 사라져 있는 상태), 2번: stash 하기 전의 결과(새 작업분이 포함되어 있는 상태) 이렇게 두 개의 커밋을 남긴다. 평소에는 그냥 이런 상태로 살다가 pop을 하거나 하면 아무런 일 없이 제대로 동작시킬 수 있는데, 이 경우에는 내가 drop을 해 버려서 이 커밋 두 개가 garbage collection으로 넘어갔다. 그런데 정말 신기하게도 1번이 넘어갈 때는 그냥 일반 commit으로 넘어가는데 2번이 넘어갈 때는 얘가 merge commit으로 바뀌어서 넘어간다. 그래서 cherry-pick을 해 올 때는 얘가 merge commit이니까 -m 옵션을 써서 바꿔줘야만 한 것 같다.

휴... 정말 힘드럿따... 그래도 어케저케 살렸다... git은 정말 위대하다...

여태까지는 그냥 이렇게 살고 있었다ㅎㅎ

제미나이와 함께했다.

// 이걸로 확인해서 두 개가 다 utf-8 이 나오면 된다.
// 참고로 이건 잘 나오고 있었다.
git config --get i18n.commitencoding
git config --get i18n.logoutputencoding

// 만약 다른 걸로 설정되어 있다면 아래의 명령어를 친다.
git config --global i18n.commitencoding utf-8
git config --global i18n.logoutputencoding utf-8

애초에 잘 되고 있었던 것이었기에 뭐 바꿀 것도 없어서 다음으로 넘어갔다. 다음으로 확인할 것은 Terminal/Shell Encoding (Environment Variables)이라고 한다.

// 아래와 같이 쳤을 때 
// en_US.UTF-8 이나 ko_KR.UTF-8 이 나와야 한다.
echo $LANG
echo $LC_ALL

// 나는 $LANG은 제대로 나오는데 $LC_ALL이 비어있게 나왔다.
// 그래서 아래와 같은 명령어를 쳐줬다.
export LANG=en_US.UTF-8
export LC_ALL=en_US.UTF-8

짠-! 성공-!

• 아직 좀 더 해야 될 부분들이 있지만 일단 Header랑 Footer의 모양을 만들어보았다.
• 여기서 더 해야 할 건 로그인 상태에 따라서 헤더가 바뀌는 거랑(지금은 로그인 후의 헤더 모양), 푸터는 로그인을 하면 사라져서 이걸 display: none 같은 걸 주어야 할 것 같다.
• 일단 Home을 만들고 나서 로그인 관련 처리를 하고 그 다음에 좀 더 수정할 예정.

Global ColorTheme

• 전체 프로젝트 컬러테마를 관리하는 방법을 도입하였다.

export const ColorTheme = {
  // Base colors
  white: "#ffffff",
  black: "#000000",

  // Primary colors
  primary: {
    main: "#475B4A",
    light: "#CCCCCC",
  },

  // Background colors
  background: {
    default: "#ffffff",
    paper: "#f5f5f5",
  },

  // Text colors
  text: {
    primary: "#475B4A",
    secondary: "#CCCCCC",
    light: "#919C92",
  },

  // Border colors
  border: {
    light: "#CCCCCC",
    main: "#475B4A",
  },

  // Shadow colors
  shadow: {
    default: "#1A1A1A",
    light: "#f5f5f5",
  },
} as const;

export type ColorThemeType = typeof ColorTheme;

ColorHighlight extension

• 커서한테 물어봤더니 얘를 추천해줘서 깔아보았다. 이렇게하니까 색깔을 구분하기가 쉬워지긴했는데 아무래도 ColorTheme 파일 안에서 볼 수는 있는데 ${{ColorTheme.text.primary}}이렇게 쓸 때는 색깔이 나오지는 않는다.

// api/notion/route.ts
import { NextResponse } from "next/server";

const headers = {
  Authorization: `Bearer ${process.env.NOTION_TO_DO_LIST_API_KEY}`,
  "Content-Type": "application/json",
  "Notion-Version": "2022-02-22",
};

const notionDatabaseUrl = `https://api.notion.com/v1/databases/${process.env.TO_DO_LIST_DATABASE_KEY}/query`;

export async function POST() {
  try {
    const response = await fetch(notionDatabaseUrl, {
      method: "POST",
      headers,
    });

    if (!response.ok) {
      throw new Error(`Notion API error: ${response.statusText}`);
    }

    const data = await response.json();
    return NextResponse.json(data);
  } catch (error) {
    console.error("Error fetching from Notion:", error);
    return NextResponse.json(
      { error: "Failed to fetch data from Notion" },
      { status: 500 }
    );
  }
}

이렇게 해서 home에서 axios로 불러오니까 데이터가 온다!

  const [data, setData] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.post("/api/notion");
        setData(response.data);
      } catch (err) {
        setError("Failed to fetch data");
        console.error("Error fetching data:", err);
      }
    };
    fetchData();
  }, []);

다음 시간에는 여기에 filter나 sort를 넣어서 보낼 수 있게 수정해봐야겠다.

• layout.tsx 수정
  • 프로젝트 타이틀이랑 favicon 바꿔주고 싶어서 해당 파일에 아이콘파일은 갈아치우고 타이틀이랑 디스크립션은 바꿔주었다.

export const metadata: Metadata = {
  title: "Clone MY ROUTINE",
  description: "Clone MY ROUTINE",
  icons: {
    icon: "/icon.svg",
  },
};

• Cursor AI 이용해서 그냥 "make header" "make footer" "make home page" "make sign up page" "make login page" "make dashboard page" "make routines page" "make profile page" 라고 차레차례 한 결과가 아래와 같았다.

• 다 하고 나니까... 굳이 내가 먼가를 더 만들 필요가...? ㅜㅜ
• 하지만 그래도 해야겠죠... 힘 내어 봅시다...

• 이러고 처리를 다 해서 Notion API를 불러와봤더니... CORS Error가 났음!!! 알고보니 노션 쪽에서 따로 처리를 해 주지 않기 때문에 이건 알아서 해결을 해야 한다고 하더라고!!! 이럴수가!!!

• 프록시 관련해서 무료 어쩌구로 되는 것들 있기는 있는데 이거 다 시도는 안 해봤지만 어쨌든 궁극적으로는… 이거 배포까지 하고 싶어서 하는 건데(그렇게까지 할지 안 할지야 모르지만) 배포를 할래도 어차피 저 CORS 에러는 날 거란 말이죠? 그럼 애초에 이게 안 나는 방식을 택해서 개발을 해야 되는 거 아닌가? 싶었다.

• 인터넷에 여러 예제를 찾아보니까 노션을 데이터베이스로 쓰고싶은 사람들은 애초에 프로젝트를 Next js로 셋팅하는 것 같았다...^^(서버사이드 렌더링이니까). ㅎ ㅏ... 나는 이 프로젝트를 시작했을 때에는 백엔드 관련한 건 생각을 안 하고 나중에 갖다 붙인 거니까 이거까지는 고려가 안 됐던 게 맞기는 해서 고민에 빠졌다.

• 고민하면서 같은 팀 친구들한테도 조언을 구하고 GPT와 Gemini와 Cursor 한테 node로 서버 띄워서 CORS Error 처리하는 방법을 물어봐서는 이거저거 적용도 해 보았다. 하지만... 나는 애초에 서버리스 상태였기 때문에...(의도한 게 아니고 그냥... 생각 없음으로...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ) 이제와서 바꾸자니 조금 복잡하기도 하고 그래서... 프로젝트를 새로 파기로 결정.

• CORS 에러 해결 예제 참고 블로그 나를 너무나 힘들게 했던 CORS 에러 해결하기

어제에 이어 gitignore를 다시 한 번... 아니 사실 여러번 체크하였다...

• Notion API 메뉴 > 설정 > API 통합 에 가면 쉽게 생성할 수 있다.

• Notion Database Key

  // 페이지 전체 공유 말고 해당 데이터베이스의 보기링크 복사 누르면 해당 url이 뜬다.
  // 여기서 ?(물음표) 앞에 부분이 해당 데이터베이스의 키
  https://www.notion.so/{database key}?v=1f88b8db378c8097a2b3000c869ec2e0&pvs=4

• POSTMAN 으로 통신 해보기

  METHOD: POST
  URL: https://api.notion.com/v1/databases/{database key}/query
  AUTHORIZATION: Bearer Token 
  HEADER: {
    Content-Type: application/json
    Notion-Version: 2022-02-22
  }

• 통신을 하면 데이터베이스에 있는 8가지의 정보가 이렇게 길~게 온다^.^...

{
    "object": "list",
    "results": [
        {
            "object": "page",
            "id": "-",
            "created_time": "2025-05-20T23:47:00.000Z",
            "last_edited_time": "2025-05-20T23:49:00.000Z",
            "created_by": {
                "object": "user",
                "id": "-"
            },
            "last_edited_by": {
                "object": "user",
                "id": "-"
            },
            "cover": null,
            "icon": null,
            "parent": {
                "type": "database_id",
                "database_id": "-"
            },
            "archived": false,
            "in_trash": false,
            "properties": {
                "longMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "timeType": {
                    "id": "-",
                    "type": "multi_select",
                    "multi_select": [
                        {
                            "id": "-",
                            "name": "AFTERNOON",
                            "color": "pink"
                        }
                    ]
                },
                "shortMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "emoji": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "🌼",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "🌼",
                            "href": null
                        }
                    ]
                },
                "type": {
                    "id": "-",
                    "type": "select",
                    "select": {
                        "id": "-",
                        "name": "TODO",
                        "color": "green"
                    }
                },
                "timeMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "16:00",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "16:00",
                            "href": null
                        }
                    ]
                },
                "ID": {
                    "id": "-",
                    "type": "unique_id",
                    "unique_id": {
                        "prefix": null,
                        "number": 8
                    }
                },
                "status": {
                    "id": "-",
                    "type": "status",
                    "status": {
                        "id": "-",
                        "name": "YET",
                        "color": "red"
                    }
                },
                "datetime": {
                    "id": "-",
                    "type": "date",
                    "date": {
                        "start": "2025-05-25",
                        "end": null,
                        "time_zone": null
                    }
                },
                "title": {
                    "id": "title",
                    "type": "title",
                    "title": [
                        {
                            "type": "text",
                            "text": {
                                "content": "The crownless again shall be king",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "The crownless again shall be king",
                            "href": null
                        }
                    ]
                }
            },
            "url": "-",
            "public_url": null
        },
        {
            "object": "page",
            "id": "1f98b8db-378c-803a-90ca-fa09099cbd2a",
            "created_time": "2025-05-20T23:47:00.000Z",
            "last_edited_time": "2025-05-20T23:49:00.000Z",
            "created_by": {
                "object": "user",
                "id": "-"
            },
            "last_edited_by": {
                "object": "user",
                "id": "-"
            },
            "cover": null,
            "icon": null,
            "parent": {
                "type": "database_id",
                "database_id": "-"
            },
            "archived": false,
            "in_trash": false,
            "properties": {
                "longMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "timeType": {
                    "id": "-",
                    "type": "multi_select",
                    "multi_select": [
                        {
                            "id": "-",
                            "name": "AFTERNOON",
                            "color": "pink"
                        }
                    ]
                },
                "shortMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "emoji": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "🥰",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "🥰",
                            "href": null
                        }
                    ]
                },
                "type": {
                    "id": "-",
                    "type": "select",
                    "select": {
                        "id": "-",
                        "name": "ROUTINE",
                        "color": "purple"
                    }
                },
                "timeMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "15:00",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "15:00",
                            "href": null
                        }
                    ]
                },
                "ID": {
                    "id": "-",
                    "type": "unique_id",
                    "unique_id": {
                        "prefix": null,
                        "number": 7
                    }
                },
                "status": {
                    "id": "-",
                    "type": "status",
                    "status": {
                        "id": "-",
                        "name": "YET",
                        "color": "red"
                    }
                },
                "datetime": {
                    "id": "-",
                    "type": "date",
                    "date": {
                        "start": "2025-05-24",
                        "end": null,
                        "time_zone": null
                    }
                },
                "title": {
                    "id": "title",
                    "type": "title",
                    "title": [
                        {
                            "type": "text",
                            "text": {
                                "content": "Renewed shall be blade that was broken",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "Renewed shall be blade that was broken",
                            "href": null
                        }
                    ]
                }
            },
            "url": "-",
            "public_url": null
        },
        {
            "object": "page",
            "id": "-",
            "created_time": "2025-05-20T23:47:00.000Z",
            "last_edited_time": "2025-05-20T23:48:00.000Z",
            "created_by": {
                "object": "user",
                "id": "-"
            },
            "last_edited_by": {
                "object": "user",
                "id": "-"
            },
            "cover": null,
            "icon": null,
            "parent": {
                "type": "database_id",
                "database_id": "-"
            },
            "archived": false,
            "in_trash": false,
            "properties": {
                "longMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "timeType": {
                    "id": "-",
                    "type": "multi_select",
                    "multi_select": [
                        {
                            "id": "-",
                            "name": "DAY",
                            "color": "green"
                        }
                    ]
                },
                "shortMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "emoji": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "🍒",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "🍒",
                            "href": null
                        }
                    ]
                },
                "type": {
                    "id": "-",
                    "type": "select",
                    "select": {
                        "id": "-",
                        "name": "TODO",
                        "color": "green"
                    }
                },
                "timeMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "14:00",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "14:00",
                            "href": null
                        }
                    ]
                },
                "ID": {
                    "id": "-",
                    "type": "unique_id",
                    "unique_id": {
                        "prefix": null,
                        "number": 6
                    }
                },
                "status": {
                    "id": "-",
                    "type": "status",
                    "status": {
                        "id": "-",
                        "name": "YET",
                        "color": "red"
                    }
                },
                "datetime": {
                    "id": "-",
                    "type": "date",
                    "date": {
                        "start": "2025-05-23",
                        "end": null,
                        "time_zone": null
                    }
                },
                "title": {
                    "id": "title",
                    "type": "title",
                    "title": [
                        {
                            "type": "text",
                            "text": {
                                "content": "A light from the shadows shall spring",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "A light from the shadows shall spring",
                            "href": null
                        }
                    ]
                }
            },
            "url": "-",
            "public_url": null
        },
        {
            "object": "page",
            "id": "",
            "created_time": "2025-05-19T23:24:00.000Z",
            "last_edited_time": "2025-05-20T23:47:00.000Z",
            "created_by": {
                "object": "user",
                "id": "-"
            },
            "last_edited_by": {
                "object": "user",
                "id": "-"
            },
            "cover": null,
            "icon": null,
            "parent": {
                "type": "database_id",
                "database_id": "-"
            },
            "archived": false,
            "in_trash": false,
            "properties": {
                "longMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "timeType": {
                    "id": "-",
                    "type": "multi_select",
                    "multi_select": [
                        {
                            "id": "-",
                            "name": "NIGHT",
                            "color": "yellow"
                        }
                    ]
                },
                "shortMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "emoji": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "🍻",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "🍻",
                            "href": null
                        }
                    ]
                },
                "type": {
                    "id": "-",
                    "type": "select",
                    "select": {
                        "id": "-",
                        "name": "ROUTINE_COUNT",
                        "color": "red"
                    }
                },
                "timeMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "13:00",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "13:00",
                            "href": null
                        }
                    ]
                },
                "ID": {
                    "id": "-",
                    "type": "unique_id",
                    "unique_id": {
                        "prefix": null,
                        "number": 5
                    }
                },
                "status": {
                    "id": "-",
                    "type": "status",
                    "status": {
                        "id": "-",
                        "name": "YET",
                        "color": "red"
                    }
                },
                "datetime": {
                    "id": "-",
                    "type": "date",
                    "date": {
                        "start": "2025-05-22",
                        "end": null,
                        "time_zone": null
                    }
                },
                "title": {
                    "id": "title",
                    "type": "title",
                    "title": [
                        {
                            "type": "text",
                            "text": {
                                "content": "From the ashes a fire shall be woken",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "From the ashes a fire shall be woken",
                            "href": null
                        }
                    ]
                }
            },
            "url": "-",
            "public_url": null
        },
        {
            "object": "page",
            "id": "",
            "created_time": "2025-05-19T23:23:00.000Z",
            "last_edited_time": "2025-05-20T23:47:00.000Z",
            "created_by": {
                "object": "user",
                "id": "-"
            },
            "last_edited_by": {
                "object": "user",
                "id": "-"
            },
            "cover": null,
            "icon": null,
            "parent": {
                "type": "database_id",
                "database_id": "-"
            },
            "archived": false,
            "in_trash": false,
            "properties": {
                "longMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "timeType": {
                    "id": "-",
                    "type": "multi_select",
                    "multi_select": [
                        {
                            "id": "-",
                            "name": "DAY",
                            "color": "green"
                        }
                    ]
                },
                "shortMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "emoji": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "🧶",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "🧶",
                            "href": null
                        }
                    ]
                },
                "type": {
                    "id": "-",
                    "type": "select",
                    "select": {
                        "id": "-",
                        "name": "ROUTINE_MEMO",
                        "color": "pink"
                    }
                },
                "timeMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "12:00",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "12:00",
                            "href": null
                        }
                    ]
                },
                "ID": {
                    "id": "-",
                    "type": "unique_id",
                    "unique_id": {
                        "prefix": null,
                        "number": 4
                    }
                },
                "status": {
                    "id": "-",
                    "type": "status",
                    "status": {
                        "id": "-",
                        "name": "YET",
                        "color": "red"
                    }
                },
                "datetime": {
                    "id": "-",
                    "type": "date",
                    "date": {
                        "start": "2025-05-21",
                        "end": null,
                        "time_zone": null
                    }
                },
                "title": {
                    "id": "title",
                    "type": "title",
                    "title": [
                        {
                            "type": "text",
                            "text": {
                                "content": "Deep roots are not reached by the frost",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "Deep roots are not reached by the frost",
                            "href": null
                        }
                    ]
                }
            },
            "url": "-",
            "public_url": null
        },
        {
            "object": "page",
            "id": "-",
            "created_time": "2025-05-19T07:37:00.000Z",
            "last_edited_time": "2025-05-20T23:46:00.000Z",
            "created_by": {
                "object": "user",
                "id": "-"
            },
            "last_edited_by": {
                "object": "user",
                "id": "-"
            },
            "cover": null,
            "icon": null,
            "parent": {
                "type": "database_id",
                "database_id": "-"
            },
            "archived": false,
            "in_trash": false,
            "properties": {
                "longMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "timeType": {
                    "id": "-",
                    "type": "multi_select",
                    "multi_select": [
                        {
                            "id": "-",
                            "name": "NIGHT",
                            "color": "yellow"
                        },
                        {
                            "id": "-",
                            "name": "DAY",
                            "color": "green"
                        },
                        {
                            "id": "-",
                            "name": "AFTERNOON",
                            "color": "pink"
                        }
                    ]
                },
                "shortMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "emoji": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "🤣",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "🤣",
                            "href": null
                        }
                    ]
                },
                "type": {
                    "id": "-",
                    "type": "select",
                    "select": {
                        "id": "-",
                        "name": "ROUTINE_TIME",
                        "color": "brown"
                    }
                },
                "timeMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "11:00",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "11:00",
                            "href": null
                        }
                    ]
                },
                "ID": {
                    "id": "-",
                    "type": "unique_id",
                    "unique_id": {
                        "prefix": null,
                        "number": 3
                    }
                },
                "status": {
                    "id": "-",
                    "type": "status",
                    "status": {
                        "id": "btoz",
                        "name": "REST",
                        "color": "yellow"
                    }
                },
                "datetime": {
                    "id": "-",
                    "type": "date",
                    "date": {
                        "start": "2025-05-20",
                        "end": null,
                        "time_zone": null
                    }
                },
                "title": {
                    "id": "title",
                    "type": "title",
                    "title": [
                        {
                            "type": "text",
                            "text": {
                                "content": "The old that is strong does not wither",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "The old that is strong does not wither",
                            "href": null
                        }
                    ]
                }
            },
            "url": "-",
            "public_url": null
        },
        {
            "object": "page",
            "id": "-",
            "created_time": "2025-05-19T07:31:00.000Z",
            "last_edited_time": "2025-05-20T23:46:00.000Z",
            "created_by": {
                "object": "user",
                "id": "-"
            },
            "last_edited_by": {
                "object": "user",
                "id": "-"
            },
            "cover": null,
            "icon": null,
            "parent": {
                "type": "database_id",
                "database_id": "-"
            },
            "archived": false,
            "in_trash": false,
            "properties": {
                "longMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "timeType": {
                    "id": "-",
                    "type": "multi_select",
                    "multi_select": [
                        {
                            "id": "-",
                            "name": "AFTERNOON",
                            "color": "pink"
                        },
                        {
                            "id": "-",
                            "name": "DAY",
                            "color": "green"
                        }
                    ]
                },
                "shortMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "emoji": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "😵‍💫",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "😵‍💫",
                            "href": null
                        }
                    ]
                },
                "type": {
                    "id": "-",
                    "type": "select",
                    "select": {
                        "id": "-",
                        "name": "TODO",
                        "color": "green"
                    }
                },
                "timeMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "10:00",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "10:00",
                            "href": null
                        }
                    ]
                },
                "ID": {
                    "id": "-",
                    "type": "unique_id",
                    "unique_id": {
                        "prefix": null,
                        "number": 2
                    }
                },
                "status": {
                    "id": "-",
                    "type": "status",
                    "status": {
                        "id": "-",
                        "name": "DONE",
                        "color": "green"
                    }
                },
                "datetime": {
                    "id": "-",
                    "type": "date",
                    "date": {
                        "start": "2025-05-20",
                        "end": null,
                        "time_zone": null
                    }
                },
                "title": {
                    "id": "title",
                    "type": "title",
                    "title": [
                        {
                            "type": "text",
                            "text": {
                                "content": "Not all thoes who wander are lost",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "Not all thoes who wander are lost",
                            "href": null
                        }
                    ]
                }
            },
            "url": "-",
            "public_url": null
        },
        {
            "object": "page",
            "id": "-",
            "created_time": "2025-05-19T07:29:00.000Z",
            "last_edited_time": "2025-05-20T23:46:00.000Z",
            "created_by": {
                "object": "user",
                "id": "-"
            },
            "last_edited_by": {
                "object": "user",
                "id": "-"
            },
            "cover": null,
            "icon": null,
            "parent": {
                "type": "database_id",
                "database_id": "-"
            },
            "archived": false,
            "in_trash": false,
            "properties": {
                "longMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "timeType": {
                    "id": "-",
                    "type": "multi_select",
                    "multi_select": [
                        {
                            "id": "-",
                            "name": "DAY",
                            "color": "green"
                        }
                    ]
                },
                "shortMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": []
                },
                "emoji": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "✅",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "✅",
                            "href": null
                        }
                    ]
                },
                "type": {
                    "id": "-",
                    "type": "select",
                    "select": {
                        "id": "-",
                        "name": "ROUTINE",
                        "color": "purple"
                    }
                },
                "timeMemo": {
                    "id": "-",
                    "type": "rich_text",
                    "rich_text": [
                        {
                            "type": "text",
                            "text": {
                                "content": "09:00",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "09:00",
                            "href": null
                        }
                    ]
                },
                "ID": {
                    "id": "-",
                    "type": "unique_id",
                    "unique_id": {
                        "prefix": null,
                        "number": 1
                    }
                },
                "status": {
                    "id": "-",
                    "type": "status",
                    "status": {
                        "id": "-",
                        "name": "YET",
                        "color": "red"
                    }
                },
                "datetime": {
                    "id": "-",
                    "type": "date",
                    "date": {
                        "start": "2025-05-19",
                        "end": null,
                        "time_zone": null
                    }
                },
                "title": {
                    "id": "title",
                    "type": "title",
                    "title": [
                        {
                            "type": "text",
                            "text": {
                                "content": "All that is gold does not glitter",
                                "link": null
                            },
                            "annotations": {
                                "bold": false,
                                "italic": false,
                                "strikethrough": false,
                                "underline": false,
                                "code": false,
                                "color": "default"
                            },
                            "plain_text": "All that is gold does not glitter",
                            "href": null
                        }
                    ]
                }
            },
            "url": "-",
            "public_url": null
        }
    ],
    "next_cursor": null,
    "has_more": false,
    "type": "page_or_database",
    "page_or_database": {},
    "developer_survey": "-",
    "request_id": "-"
}

원래는 1년 전에 마이루틴 클론 코딩을 하던 프로젝트가 있었는데 당시에는 거의 CSS 정도를 많이 했고 기능적으로는 구현이 되어있지 않았다. 나에게 있어서 너무나도 큰 고난은... 백엔드 연결이었는데 일단 mockdata로 하다가 나중에 DB 연결하고 해야지! 싶어서 눈을 감고... 그리고... 회사 일이 너무 바빠져서 그대로 중지되어버렸다...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이러던 중에 개인적으로 노션가지고 좀 놀면서 API를 쓰는 법을 알게 되었다. 근데 보니까 노션이 테이블 구조여서 데이터베이스로 쓰기도 무리가 없을 것 같다는 생각이 들었다. 페이지 안의 content를 가져오는 게 조금 까다롭고(물론 할 수는 있음) 데이터베이스의 정보를 가져오는 건 database key랑 token만 있으면 돼서 완전 할 수 있을 것 같아서 시작!

• 데이터베이스 구조 만들기
  • 데이터베이스 구조는 대충 아래와 같이 짰다. 일단 데이터 넘어오고 나서 만들면서 더 수정할 예정.

• 이번에 알았던 사실이었는데 .gitignore 파일에 .env.local랑 .env.development만 넣어놓고 정작? .env 는 안 넣어놔서? 이게 레포지토리에 올라갔음? ㅎ ㅏ? 어이없어... 퍼블릭이긴했지만 이 안에 포트 번호 이외에는 없었기 때문에 천만 다행으로... 나의 노션이 안전할 수 있었다... ㅎ ㅏ...

이것을 받기위해 오랜만에 rclone을 사용해보았다. 오랜만에 하니까 또 까먹었더라고. 다음번을 위해 기록해 놓아야겠다고 생각함.

저번에 할 때는 내가 사용하는 계정의 구글드라이브 파일을 조작하는 거라서 그냥 등록하면 됐을 것 같은데 이번에는 남이 공유해 준 폴더를 조작하는 거라서 조금 걱정이 되었으나 일단 해 보기로 했다.

일단 rclone config 로 공유받은 폴더에 접근한 계정의 구글 드라이브를 추가해줬다. 타입을 구글드라이브로 선택하고 권한은 drive로 해서 모두 조작 가능할 수 있게 했다.

rlcone --help 로 커맨드랑 대충 확인한 다음에 파일에 뭐가 있는지 좀 봤다.

• remote 구글드라이브의 파일 확인

  // yabiji는 remote의 이름
  

rclone ls yabiji:

근데 이렇게 하니까 파일만 나오고 폴더는 안 나오더라고.
내가 공유받은 폴더만 보는 옵션을 찾아보았다.


<br>

- 공유파일만 보는 옵션

rclone --drive-shared-with-me ls yabiji:

이 옵션의 경우 내가 공유한 것과 내가 공유받은 것이 모두 뜨는 것 같았다. 
나는 해당계정에 다른 파일이 별로 없어서 따로 필터는 안 하고 이 파일들을 모두 받았다.
필터링 찾기 귀찮...^^;;;

<br>

- 공유파일을 내 컴퓨터에     복사

// yabiji의 공유파일을 현제 디렉토리에 [폴더이름]의 폴더에 저장 // -P 는 progress를 보여주는 옵션이다. // 안 하면 되고 있는 건지 마는 건지 알 수 없어서 붙여주었다.

rclone copy yabiji: [폴더이름] --drive-shared-with-me -P

```

복사 끄읕~!

다만 문제는... useMaches는 hooks 자체에 아래와 같이 타입캐스팅이 되어있다.

export declare function useMatches(): UIMatch[];

제네릭으로 바꿀 수 있는 형식이 아니어서 타입이 계속 맞지 않았다.

작업하고 있는 프로젝트에서는 아래와 같이 쓰고 있다. handle 안에 오브젝트를 만들어서 해당 url의 제목을 명시한다.

const CompanyRoutes = {
  path: 'company',
  handle: { title: '고객사 관리' },
  children: [
    {
      path: 'company-manage',
      handle: { title: '고객사 일반관리' },
      children: [
        {
          path: '',
          element: <CompanyManage />,
          handle: { title: '고객사 일반관리' }
        },
        {
          path: 'add',
          element: <CompanyAddPage />,
          handle: { title: '고객사 생성' }
        },
        {
          path: ':comId',
          element: <CompanyDetailPage />,
          handle: { title: '고객사 상세' }
        }
      ]
    }
  ]
};

그런데 원래 UIMatches의 타입에서는 Handle이 unknown으로 넘어오다보니 여기에 title은 없다고 계속 빨간 줄이 떠 있었다(나타나기는 함, 타입에만 없을 뿐 실제로는 존재하고 있기 때문에).

근데 이 타입은 제네릭이 아니어서 가져와서 내 마음대로 고치고 이럴 수는 없다고 하더라고. 어쩌지어쩌지 하고 있다가 정수님한테 물어봐서는 해답을 얻었다.

// react-router-dom.d.ts 파일을 만듦
import 'react-router-dom';

declare module 'react-router-dom' {
  export declare function useMatches(): UIMatch<{ Handle: { title?: string } }>[];
}

이렇게 아예 모듈 자체를 overriding 하는 형식으로 파일을 하나 만들면 전체 프로젝트에서 useMatches의 타입이 바뀐다고!

사실 이 프로젝트를 만든 사람이 한 땀 한 땀 만들었을 줄 알았는데 오늘에서야 찾아보니 simplyScroll 이라는 레포를 가져와서 사용하고 있는 것을 알게되었다.

jquery-simplyscroll GitHub Page

잘 돌아가는 부분과 안 돌아가는 부분의 코드를 확인해 본 결과 안에 들어가 있는 li 태그의 이미지 갯수에 차이가 있었다. 잘 돌아가는 부분은 6개 정도 있었는데 안 되는 부분은 이미지가 1개 뿐이었기 때문에. 무엇보다 모바일이나 약간 작은 모니터 환경(내꺼)에서는 잘 돌아가는 걸 보니 무언가 width 때문에 일어나는 문제같다는 것을 예감했다.

콘솔창으로 element 탭 보면서 확인해 본 결과, simplyScroll은 한 이미지가 돌아가면서 걔가 어느 시점에 기준 위치를 넘으면 그 다음 이미지를 붙여주는 형식이었다. 지금 우리 프로젝트는 width가 3400px 정도로 잡혀있는 상태. 롤링이미지 하나의 width는 1100px 이었다.

즉, 총 width가 3400px로 있는 상태에서 2개의 이미지만 노출되는 형식이다 보니 2200px만 나타나고 있는 중이고 나머지 1300px은 어느정도 화면에 나타날 때까지 빈 이미지로 보이는 상황이었다. 일정 시점을 넘어야 그 다음 이미지를 붙여주는데 일정 시점이 지나기 전에도 이미 화면에 보이고는 있으니까. 그래서 똑같은 이미지를 3400px 보다 더 넘어갈 수 있도록 아래와 같이 복사를 더 했다.

그리고 잘 되는 것을 확인!

<ul class="pt_brand_in">
    <li class="pt_brand_item"><img src="/res/img/rolling.png" /></li>
    <li class="pt_brand_item"><img src="/res/img/rolling.png" /></li>
    <li class="pt_brand_item"><img src="/res/img/rolling.png" /></li>
    <li class="pt_brand_item"><img src="/res/img/rolling.png" /></li>
</ul>

<script> $(".pt_brand_in").simplyScroll({
        speed: 1,
        direction: 'forwards',
        pauseOnHover: false,
        autoMode: 'loop'
    });
</script>

• 일단 전역상태로 deleteIdx가 존재한다. 이유는 각 그룹을 관리할 때 테이블 내에서 관리되고 있어서 각 row에 있는 "삭제" 버튼을 누르면 그 행의 데이터가 삭제되기 때문에 실질적으로 그 버튼을 누를 때까지는 어느 행이 삭제되어야 하는지 알 수 없기 때문이다.

  const [deleteIdx, setDeleteIdx] = useState<string>();

• 삭제 버튼이 눌릴 때 setState 함수를 써서 삭제할 row의 정보를 전달해준다.

const handleDeleteGroup = async (groupId: number) => {
    setDeleteIdx(groupId.toString());
  };

• useEffect 문으로 deleteIdx가 변경되었을 때 감지하여 삭제 동작을 실행하는 함수를 실행하게 만든다.

  useEffect(() => {
    if (deleteIdx) {
      deleteRow();
    }
  }, [deleteIdx]);

• async/await 함수의 형태로 만들어서 실행시킨다.

  const deleteRow = async () => {
    showDialog({
      content: (
        <Box>
          <Box>해당 그룹을 삭제하시겠습니까?</Box>
          <Box>삭제 시 설정 된 고객사 그룹 설정은 삭제되지 않습니다.</Box>
        </Box>
      ),
      onConfirm: async () => {
        await deleteGroup();
        enqueueSnackbar('그룹이 삭제되었습니다.', { variant: 'success' });
        refreshGroups();
      }
    });
  };

💡thought

원래는 useEffect 문 자체에 async/await를 거는 방식도 있는 걸로 알았는데 말이죠? 꿈에서 봤나봅니다... 원래 이런 식으로 useEffect 구문 안에서 함수를 따로 정의해서 돌려야 한다고 했다. 내가 한 방식은 그냥 바로 위에 정의해서 돌려버린 것일 뿐 크게 차이는 없는 듯. 다 같이 모여있는 게 가독성을 위해서는 더 나을 것 같기도 하지만 또 어떤 측면에서는... useEffect 구문이 돌아갈 때마다 사용하지도 않는 함수가 계속 재정의 되어야 할 때도 있으니까 낭비이기도 할지도... 세상에 정답은 없네... 절레절레...

useEffect(() => {
  const fetchData = async () => {
    const data = await getdata();
    setUser(data);
  };
  fetchData();
}, []);

인텔리제이는 정말 좋은 IDE이지만 너무 복잡해서 어디가서 뭘 찾아서 넣어야 하고... 이런 것들을 모르겠는 게 좀 힘든 것 같다. 쨌든 자바/인텔리제이 로 설정하는 자세한 방법은 아래의 블로그에서 찾아볼 수 있었다.

[Java/IntelliJ] Spring Boot Devtools 이해하고 설정하기

파일 코드

• hello.helloSpring > Controller > HelloController

여기에서는 data로 서버에서 내리는 String을 내려주는데 이걸 바꿀 때마다 서버를 내렸다 올렸다 하고 싶지 않았다!

package hello.hellospring.controller;

import org.springframework.ui.Model;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

    @GetMapping("hello")
    public String hello(Model model) {
        model.addAttribute("data", "yap yap yap!!!");
        return "hello";
    }
}

• resources > templates > hello.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>HELLOOOO</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요 ' + ${data}" />
</body>
</html>

설정할 곳

• build.gradle

dependencies {
// 이거 이름은 compileOnly로 하는 사람도 있고 developmentOnly인 사람도 있다.
// 아마 이름은 별로 큰 요인은 아닌 듯 함
    compileOnly 'org.springframework.boot:spring-boot-devtools'
}

• application.properties

// 기본으로 있는 프로젝트 전체에 대한 설정
spring.application.name=hello-spring

// 처음에는 위의 두 개만 있었는데 세번째 것도 위의 블로그를 보고 세번째 것도 추가하였다.
spring.devtools.restart.enabled=true
spring.devtools.livereload.enabled=true
spring.devtools.restart.additional-exclude = static/**,public/**

• IntelliJ IDEA > Settings
  • Advanced Settings > Compiler
    • [체크박스 체크] Allow auto-make to start even if developed application is currently running
  • Build, Execution, Deployment > Compiler
    • [체크박스 체크] Build Project automatically

• Edit Configuration
  • 돌리고 있는 프로젝트를 선택 후
  • Modify options > On 'Update' action > Update resources

설치할 것

LiveReload Chrome Extention

무엇보다 이것을 설치하지 않으면 말짱 도루묵이었다. 근데 몰라서 한참을...^^ 안 함...^^ 그냥 이거 안 해도 되는 줄...^^;;;

먼저 이렇게 배열을 랜덤하게 하는 메소드 자체가 자바스크립트가 없고 앞으로도 쓸 일이 있을 수 있으니까 공통 유틸로 따로 분리를 했다.

// eslint-disable-next-line import/prefer-default-export
export const shuffleArr = <T>(originArr: T[]) => {
  const randomArr = originArr.slice();
  for (let idx = originArr.length - 1; idx > 0; idx -= 1) {
    const randomIdx = Math.floor(Math.random() * (idx + 1));
    const temp = randomArr[idx];
    randomArr[idx] = randomArr[randomIdx];
    randomArr[randomIdx] = temp;
  }
  return randomArr;
};

그리고 아래와 같이 리팩토링 해서 훨씬 깔끔해짐! 나는 배열에서 고유인덱스를 뽑아낸 배열을 랜덤 시킨 다음에 그 값으로 다시 원래 배열에서 맞는 고유인덱스의 객체를 갖고 왔었는데 유틸로 분리해버리니까 객체가 배열의 원소인 것도 랜덤시킬 수 있더라고. 원래 안 되던 이유가 반복문을 기반으로 해서 쓰는 함수들은(반복문, 고차함수 등) 받는 배열 자체를 그 당시에 수정할 수는 없으니까 고유인덱스 값을 뽑았던 거였는데 shuffleArr로 분리시켰더니 안에서 randomArr로 배열을 복사하고는 걔를 바꾸는 거여서 동작하기 때문이었다.

const revisedThemeGoodsData = useMemo(() => {
    const originProduct = data?.originBestProductInfo;
    if (originProduct?.length) {
      originProduct[0].menus = shuffleArr<Menu>(originProduct[0]?.menus || []);
    }
    const themeGoods = [...(data?.autoThemeGoods || []), ...(data?.originBestProductInfo || [])];

    themeGoods.sort((current, next) => {
      const isNeedSwitch =
        themeGoodsTypePosition.indexOf(current.themeGoodsType) > themeGoodsTypePosition.indexOf(next.themeGoodsType);
      return isNeedSwitch ? 1 : -1;
    });

    return themeGoods;
  }, [data]);

백엔드에서 메뉴 정보가 idx 순서로 날아오고 있고 원래는 이걸 순서대로 뿌려주기만 하는데, 좌우스크롤을 하지 않는 사용자에게는 상품이 1-2개 정도밖에는 보이지 않고 하루에 몇 번을 보건 매 번 똑같은 아이템이 보여지니까 이것에 대한 흥미가 들지 않는다는 의견이 있어 이 섹션을 랜덤으로 배열하기로 했다. 백엔드 리소스는 언제나 부족하니까 프론트인 내가 담당하게 되었는데... 난 당연히 뭔가... random()하고 배열 랜덤으로 해버린다음에 다시 재할당~! 하면 끝날 줄 알았더니!!! 아니었다;;;

알고보니... 자바스크립트에는 랜덤배열 메소드가 따로 존재하지 않는다고 한다... 여러가지 방법을 찾아보았는데 대부분 배열의 원소들이 객체가 아닌 숫자로 이루어져 있어서 정확히 복붙해다가 내 상황에 들어맞게 만들 수는 없었다. 그래도 개중에 이 포스팅이 많은 도움을 주었다.

Javascript - 배열의 요소를 무작위로 섞는 방법 [array, shuffle]

나는 [{ idx: 123, productName: 'strawberry', price: 3000 }, { idx: 124, productName: 'mango', price: 5000 }, { idx: 125, productName: 'melon', price: 9000 }, { idx: 126, productName: 'apple', price: 1000 }, { idx: 127, productName: 'orange', price: 3000 }] 와 같은 배열을 랜덤배열 시켜야 했다.

최종 코드는 아래와 같다.

  const revisedThemeGoodsData = useMemo(() => {
    // 상품 데이터만 따로 변수에 할당(depth가 좀 깊어서)
    const originProduct = data?.originProductInfo;
    // 랜덤 배열할 새로운 배열 생성 및 초기화
    const randomProductArr: Menu[] = [];
    // 상품 데이터 undefined 예외 처리
    if (originProduct) {
      // 상품 데이터에서 메뉴 빼 오기
      const { menus } = originProduct[0];
      // 메뉴 데이터 undefined 예외 처리
      if (menus) {
        // 객체 형태로는 랜덤 배열이 어려워서 idx만 걸러서 새로운 배열 만듦
        const menusIndex = menus.map((el) => el.idx);
        // 메뉴인덱스 배열에서 뒤에서부터 차례로 랜덤으로 생성한 인덱스와 자리를 바꾸는 반복문
        // 새로운 배열에 넣으면 중복된 값이 계속 들어가서 반드시 원래 배열을 직접 바꿔야 함
        // 원래 배열을 바꿀 경우 중복된 randomIdx가 생성돼도 바뀐 것이 또 바뀔 뿐이지만
        // 새로 생성한 배열에 값을 지정할 경우에는 중복된 값이 또 들어가 버림
        for (let idx = menusIndex.length - 1; idx > 0; idx -= 1) {
          const randomIdx = Math.floor(Math.random() * (idx + 1));
          const temp = menusIndex[idx];
          menusIndex[idx] = menusIndex[randomIdx];
          menusIndex[randomIdx] = temp;
        }
        // 랜덤으로 배열된 menusIndex배열의 값으로 원래 menus 배열에서 해당 객체를 빼서 랜덤으로 상품 정보를 나열하는 랜덤 배열에 넣기
        for (let i = 0; i < menusIndex.length; i += 1) {
          const matchProduct = menus.filter((el) => el.idx === menusIndex[i]);
          if (matchProduct) {
            randomProductArr.push(matchProduct[0]);
          }
        }
      }
      // 상품 데이터의 menus를 만든 랜덤배열로 바꿈
      originProduct[0].menus = randomProductArr;
    }
    // 여기서는 바뀐 menus의 정보가 랜덤으로 정렬된 배열값으로 들어감
    const themeGoods = [...(data?.autoThemeGoods || []), ...(data?.originProductInfo || [])];

    themeGoods.sort((current, next) => {
      const isNeedSwitch =
        themeGoodsTypePosition.indexOf(current.themeGoodsType) > themeGoodsTypePosition.indexOf(next.themeGoodsType);
      return isNeedSwitch ? 1 : -1;
    });

    return themeGoods;
  }, [data]);

ㅎ ㅏ... 너무 힘들었다... 애초에 백엔드 개발도 그지같이 되어 있어서 쓸데없이 depth 깊은데 이거 데이터를 또 바꿔치기 할려니까 머리를 엄청 싸맸네...

원래 처음에는 원래 배열을 복사해다가 뭐 거기서 삭제해 나가면서 새로운 랜덤배열을 생성하고 막 이러려고 했는데 이러면 한 스코프 안에서 반복문을 너무 많이 써야 돼서(지금이라고 안 쓰는 것은 아닙니다만...) 아무도 못 알아볼 것 같길래 다 때려치고 그냥 딱 보기에 제일 나은 걸로 했다. 아직 팀원들에게 보여주지 않아서 이대로 배포 나갈 수 있을지 아님 리팩토링이 들어갈지 모르겠군... 리팩토링이 들어간다면 다시 찾아오도록 하겠습니다...

• 데이터 컬럼을 단위인 "백만"으로 변경해 주세요.
• describe() 로 기술통계를 구했을 때 다음과 같은 결과가 나오도록 합니다. 아래 결과는 예시로 소숫점 자리수가 다르게 표시되더라도 값이 같다면 괜찮습니다.
• 전처리한 백만, 연도, 분기 컬럼이 수치형 데이터 일 때 아래와 같은 결과가 나오니 데이터가 수치 형태로 되어 있는지도 확인해 주세요!
• 데이터는 위에서 제공된 데이터를 사용합니다.
• 해당 기술통계로 알 수 있는 정보가 무엇인지도 함께 작성해 주세요!

# df 복사 (원본데이터 변형 방지)
df_01 = df.copy()
# '시점' 컬럼 값 확인
df_01['시점']
# split 해보기
'2017.1/4'.split('.')[0]
'2017.1/4'.split('.')[1].split('/')[0]

# '연도' 컬럼 생성
df_01['연도'] = df['시점'].map(lambda x : int(x.split('.')[0]))
# '분기' 컬럼 생성
df_01['분기'] = df['시점'].map(lambda x : int(x.split('.')[1].split('/')[0]))
# '데이터' 컬럼 '백만원' 으로 변경
df_01 = df_01.rename(columns = {'데이터': '백만원'})
# 기술통계 출력
df_01.describe().round(2)

📌 Q2. pivot_table을 사용하여 국가(대륙)별 연도별 판매액의 합계를 분석해 주세요.

• 국가(대륙)별 연도별 판매액의 합계를 구해서 어느 지역에 판매액이 많은지를 알아보겠습니다.
• pivot_table 을 사용하여 다음의 결과를 구하고 시각화 해주세요!
• 그래프의 색상, 스타일은 자유롭게 원하는 스타일로 지정해도 됩니다.

# df 복사 (원본데이터 변형 방지)
df_02 = df_01.copy()
# 데이터 확인
df_02.head(10)

# 피봇테이블 데이터 만들기
pivot_02 = pd.pivot_table(df_02, values='백만원', index=['국가(대륙)별', '연도'], aggfunc='sum')
# 피봇테이블 출력
pivot_02.unstack()
# 라인그래프 출력
sns.lineplot(data=pivot_02, x='연도', y='백만원', hue='국가(대륙)별')
plt.legend(bbox_to_anchor=(1.05, 1), loc=2, borderaxespad=0.)

📌 Q3. groupby를 사용하여 2020년의 온라인 해외판매 상품군을 지역별 합계를 구해 분석해 주세요.

• 2020년은 코로나로 인해 전국민이 어려움을 겪었던 시기입니다. 또, 아마존 등의 해외 온라인 판매가 늘어난 시기이기도 합니다. 이 때, 해외 어느지역에 온라인 판매가 얼마나 되었는지를 groupby() 와 unstack()을 활용해서 합계를 구하고 분석해 주세요! 또 분석한 결과를 보고 어떤 인사이트를 얻었는지도 함께 작성해 주세요!
• 그래프의 색상, 스타일은 자유롭게 원하는 스타일로 지정해도 됩니다.

# df 복사 (원본데이터 변형 방지)
df_03 = df_01.copy()
# 2020년을 포함한 이전년도 데이터만 가져옴
df_2020 = df_03[df_03['연도'] <= 2020]
# groupby 사용
df_2020_group = df_2020.groupby(['국가(대륙)별', '연도'])['백만원'].sum().unstack().fillna(0)
# 데이터프레임인지 확인
type(df_2020_group)
# 컬럼값 확인
df_2020_group.columns

# barplot 생성
df_2020_group.plot(kind='bar', figsize=(12, 8))
plt.xlabel('연도')
plt.ylabel('값')
plt.title('연도별 국가/대륙별 데이터 바 차트')
plt.legend(title='국가/대륙')
plt.grid(True)
plt.show()

# 스택형 바 차트 생성
df_2020_group.plot(kind='bar', stacked=True, figsize=(12, 8))
plt.xlabel('연도')
plt.ylabel('값')
plt.title('연도별 국가/대륙별 데이터 스택형 바 차트')
plt.legend(title='국가/대륙')
plt.grid(True)
plt.show()

📌 Q4. 주요 판매 국가와 상품군에 대해 2021년까지의 연도별 온라인 직접 판매액 합계를 시각화 해주세요.

• 온라인 직접 판매액이 높은 지역은 "미국", "중국", "일본" 이며, 주요 판매 상품군은 "의류 및 패션 관련상품", "화장품", "음반·비디오·악기" 입니다. 2021년까지의 각 지역별 제품별 판매액을 시각화 해주세요!
• 시각화 결과의 색상이나 스타일이나 스타일은 달라도 괜찮습니다.

# 데이터베이스 복사
df_03 = df_01.copy()
# 국가가 미국&중국&일본이고 상품군이 의류 및 패션 관련상품&화장품&음반·비디오·악기이고 2021년까지의 데이터로 데이터셋 만듦
df_03_need = df_03[
((df_03['국가(대륙)별'] == '미국') 
| (df_03['국가(대륙)별'] == '중국') 
| (df_03['국가(대륙)별'] == '일본')) 
& ((df_03['상품군별'] == '의류 및 패션 관련상품') 
   | (df_03['상품군별'] == '화장품') 
   | (df_03['상품군별'] == '음반·비디오·악기')) 
& (df_03['연도'] <= 2021)]
# 출력해서 확인
df_03_need

# 피벗테이블 만들기
pivot_03 = pd.pivot_table(df_03_need, values='백만원', index=['국가(대륙)별', '상품군별', '연도'], aggfunc='sum')
# 데이터프레임 구조 변경
pivot_03 = pivot_03.unstack()
# 컬럼 확인
pivot_03.columns

# 히트맵으로 시각화
sns.heatmap(pivot_03, cmap='Blues', annot=True, fmt='.0f')
plt.xticks(ticks=np.arange(5), labels=['2017년', '2018년', '2019년', '2020년', '2021년'], ha='left')
plt.xlabel('연도')

강의를 마치며...

사실 안 마쳤다네... 문제 5번은 스스로 데이터 정하고 가설 세워서 분석해야 되는데 너무 어려워서 눈물을 흘리고 있음... 그것도 다 하면 여기다 올려야만...

원래 맨 처음에는 화물차의 안전운임제 시행 이전과 이후, 그리고 없어지고 난 다음의 사고통계를 분석해서 안전운임제 이후로 화물차의 교통사고 건수가 줄어들었고... 이런 식으로 분석하려고 했는데... 일단 데이터 자체가 2022년까지밖에 없어서 안전운임제가 사라진 다음의 데이터가 없어서 내 가설의 한 축이 사라졌음. 여기에 KOSIS에 있는 데이터에서 교통사고의 차종을 볼 수 있는 건 맞는데 생각해보면 나 자체가 안전운임제가 어느 차까지 해당되는지 잘 모르니깐... 대충 화물차 사고건수만 살펴볼 수 있어서 좀 빈약한 근거가 되는 것 같았다. 그래서 때려침^^

지금은 노동시간이 줄어듦에 따라 성인들의 여가시간에서 독서가 차지하는 비율이 늘어나고 실질적으로 독서율이 올라갔다는 것을 가설로 세웠는데... 이것도 별로 안 될 것 같음. 시간이 없어서 이거 하다가 내 가설 검증 안 되면 안 된 채로 실패^^! 이러고 내야될 것 같다.

어쨌든 이런 공짜 기회를 통해 판다스도 써보고 너무 재밌었다. 회사 데이터 가지고 시각화 하는 것도 생각해봐야겠다.

age_code = {1: '0~4세',
 2: '5~9세',
 3: '10~14세',
 4: '15~19세',
 5: '20~24세',
 6: '25~29세',
 7: '30~34세',
 8: '35~39세',
 9: '40~44세',
 10: '45~49세',
 11: '50~54세',
 12: '55~59세',
 13: '60~64세',
 14: '65~69세',
 15: '70~74세',
 16: '75~79세',
 17: '80~84세',
 18: '85세+'}

# df 자체를 바꿔버리면 나머지 문제를 푸는 데에 지장이 있어서 copy 해서 사용
df_01 = df.copy()
# 해당 column의 값들을 치환
df_01['연령대코드(5세단위)'] = df_01['연령대코드(5세단위)'].map(age_code)

# ANSWER
pd.pivot_table(df_01, index = '연령대코드(5세단위)', values = '허리둘레', aggfunc = ['describe' ])

📌Q2. "음주여부", "흡연상태", "연령대코드(5세단위)", "성별코드"에 대한 상관계수를 구하고 시각화 해주세요.

# 필요한 데이터만 가져 옴
columns = ['음주여부', '흡연상태', '연령대코드(5세단위)', '성별코드']
df_02 = df[columns]

# ANSWER
mask = np.triu(np.ones_like(df_corr, dtype=np))

plt.figure(figsize=(6, 5))
sns.heatmap(df_corr, annot=True, fmt='2.2f', cmap='spring', mask=mask, vmin=-1, vmax=1)

📌Q3. 흡연하는 사람과 음주하는 사람들의 수는 얼마나 차이가 있을까요?

columns = ['음주여부', '흡연상태']
df_03 = df[columns]
# df_03은 df에서 추출한 데이터프레임이고 이걸 그대로 아래에서 가공하려고 하면 데이터프레임의 일부분이라 오류가 발생함
# 그래서 .copy()로 복사본을 떠서 df_03에 재할당함
df_03 = df_03.copy()

# 흡연상태 문자열로 상태값 치환
smoke = {1 : "흡연안함", 2: "끊음", 3: "흡연중"}
df_03['흡연상태'] = df_03['흡연상태'].replace(smoke)
# 음주여부 문자열로 상태값 치환
drink = {0: "안마심", 1: "마심"}
df_03['음주여부'] = df_03['음주여부'].replace(drink)

# 수업에서는 '가입자일련번호(각 고유번호)'를 넣어서 values에 저걸 넣고 aggfunc=count를 해서 실습한 것 같음
# 찾아보니까 aggfunc=size도 있어서 이걸로 해 봤더니 됨!
# size는 NaN 값을 제외하고 true이거나 false인 값들을 세어준다고 함.

# ANSWER
df_03_pivot = pd.pivot_table(df_03, index='음주여부', columns='흡연상태', aggfunc='size')
df_03_pivot

# ANSWER
sns.countplot(data=df_03, x='흡연상태', hue='음주여부', palette='spring')

📌 Q4. 체중이 120Kg 이상인 데이터를 찾아 "총콜레스테롤", "감마지티피" 값을 음주여부에 따라 산점도로 시각화해주세요!

# 필요한 데이터만 가지고 옴
columns = ['체중(5Kg 단위)', '총콜레스테롤', '감마지티피', '음주여부', '흡연상태']
df_04 = df[columns]
df_04 = df_04.copy()

# 필요한 데이터에서 문제 조건에 맞는 데이터를 골라냄
df_04_over = df_04.loc[df_04['체중(5Kg 단위)'] >= 120, ['총콜레스테롤', '감마지티피', '음주여부', '체중(5Kg 단위)', '흡연상태']]
df_04_over.head()

# 체중이 120Kg 이상이고 흡연을 하지 않는 사람의 정보
df_04_over_smoke_1 = df_04.loc[(df_04['체중(5Kg 단위)'] >= 120) & (df_04['흡연상태'] == 1), 
['총콜레스테롤', '감마지티피', '음주여부', '체중(5Kg 단위)', '흡연상태']]

# 체중이 120Kg 이상이고 흡연을 중단한 사람의 정보
df_04_over_smoke_2 = df_04.loc[(df_04['체중(5Kg 단위)'] >= 120) & (df_04['흡연상태'] == 2), 
['총콜레스테롤', '감마지티피', '음주여부', '체중(5Kg 단위)', '흡연상태']]

# 체중이 120Kg 이상이고 흡연을 하는 사람의 정보
df_04_over_smoke_3 = df_04.loc[(df_04['체중(5Kg 단위)'] >= 120) & (df_04['흡연상태'] == 3), 
['총콜레스테롤', '감마지티피', '음주여부', '체중(5Kg 단위)', '흡연상태']]

# 똑같은 값이 계속 들어가서 변수로 치환
x = '총콜레스테롤'
y = '감마지티피'
hue = '음주여부'
palette = 'spring'
height = 3

# ANSWER
# 문제랑 완전히 똑같지는 않지만 이것이 한계!
sns.lmplot(data=df_04_over_smoke_3, x=x, y=y, hue=hue, palette=palette, height=height)
plt.title('흡연=흡연중')
sns.lmplot(data=df_04_over_smoke_1, x=x, y=y, hue=hue, palette=palette, height=height)
plt.title('흡연=흡연 안 함')
sns.lmplot(data=df_04_over_smoke_2, x=x, y=y, hue=hue, palette=palette, height=height)
plt.title('흡연=끊음')

# 모르겠어서 GTP한테 물어봄
# 근데 이러면 css를 어떻게 하는지는? 모르겠다. GPT가 가르쳐준 방법은 lmplot 추가할 때 palette를 넣는 건데 이건 안 됨.
# 서브셋을 하나의 데이터프레임으로 통합
df_combined = pd.concat([
    df_04_over_smoke_1.assign(흡연상태_설명='흡연 안 함'),
    df_04_over_smoke_2.assign(흡연상태_설명='흡연 끊음'),
    df_04_over_smoke_3.assign(흡연상태_설명='흡연 중')
])

# FacetGrid 생성
g = sns.FacetGrid(df_combined, col='흡연상태_설명', col_wrap=3, height=5, sharey=True)

# lmplot 추가
g.map_dataframe(sns.regplot, x='총콜레스테롤', y='감마지티피')

# 레전드 위치 조정 및 제목 설정
g.add_legend(title='음주 여부', bbox_to_anchor=(1.05, 1), loc='upper left')
g.set_titles(col_template="{col_name}")
g.set_axis_labels("총콜레스테롤", "감마지티피")
g.set(xlim=(df_combined['총콜레스테롤'].min(), df_combined['총콜레스테롤'].max()),
     ylim=(df_combined['감마지티피'].min(), df_combined['감마지티피'].max()))
plt.tight_layout()
plt.show()

📌 Q5. 연령대별로 시력은 얼마나 차이가 날까요? 연령대, 성별 좌우 평균 시력을 시각화 해주세요!

# 필요한 데이터만 가지고 옴
columns = ['연령대코드(5세단위)', '시력(좌)', '시력(우)', '성별코드']
df_05 = df[columns]
df_05 = df_05.copy()
# 연령대코드를 문자열로 치환
df_05['연령대코드(5세단위)'] = df['연령대코드(5세단위)'].map(age_code)

fig, axes = plt.subplots(1, 2, figsize=(14, 6), sharey=True)

sns.barplot(data=df_05, x='시력(좌)', y='연령대코드(5세단위)', hue='성별코드', errorbar=None, palette='spring', ax=axes[0])
sns.barplot(data=df_05, x='시력(우)', y='연령대코드(5세단위)', hue='성별코드', errorbar=None, palette='spring', ax=axes[1])

plt.tight_layout()
plt.show()

우리 팀에 한 7-8명 있는 것 같은데 수료 조건이 가능한 사람이 나만 남았다...^^ 홧팅...^^ 나 자신...^^