• 타입과 제목은 필수로 작성합니다.
• 타입은 소문자를 기본으로 사용합니다. (!BREAKING과 !HOTFIX의 경우 대문자로 작성합니다.)
• 타입과 제목 사이에는 콜론(:)을 사용합니다.
• 콜론은 타입에 붙여쓰며, 제목과는 한 칸 띄어 사용합니다.
• 필요할 경우 본문에 자세한 내용을 기입합니다. (option)

feat: 로그인 기능 구현

Type Description feat 새로운 기능을 추가한 경우 fix 버그를 수정한 경우 design CSS 등 UI 디자인을 변경한 경우 style 코드 포맷 변경을 하거나 세미 콜론 누락하여 추가하면서 코드 수정이 없는 경우 refactor 코드를 리팩토링한 경우 comment 주석을 추가하거나 변경한 경우 docs 문서를 수정한 경우 test 테스트 코드를 추가, 변경, 리팩토링한 경우 chore 기타 변경사항 (빌드 스크립트 수정, 패키지 매니징 설정 등) rename 파일 or 폴더명 수정하거나 옮기는 경우 remove 파일을 삭제하는 작업만 수행한 경우 !BREAKING (대문자) CHANGE 중대한 API를 변경한 경우 !HOTFIX (대문자) 급하게 치명적인 에러를 고친 경우

🍒 작업 중 Conflict 최소화하기 위한 cherry-pick 방법

1. [현재 브랜치: old_branch]: 작업하던 사항을 커밋한다. (푸시 ❌)
2. [현재 브랜치: old_branch]: 커밋 번호를 조회하고 기록해둔다 (git log --oneline 으로 확인)
3. [현재 브랜치: old_branch]: develop 브랜치로 체크아웃 한다. (git checkout develop)
4. [현재 브랜치: develop]: 최신화된 내용을 반영한다. (git pull)
5. [현재 브랜치: develop]: 새롭게 브랜치를 생성하고 이동한다. (git checkout -b new_branch)
6. [현재 브랜치: new_branch]: old_branch 에서 작업하던 커밋을 옮겨온다 (git cherry-pick 000000)
7. • 문제 없이 옮겨오면 마저 작업 시작 그러나 conflict, accept, 현재 작업내용 수락 등과 같은 불길한 메시지가 뜬다면 Slack 메시지 남겨주세요

✅ Context란?

컴포넌트 간에 데이터를 전역으로 공유할 수 있는 리액트 기능

• props drilling 없이 데이터를 여러 컴포넌트에 전달할 수 있음
• 예: 로그인 정보, 테마 설정, 필터 조건, API 데이터 등

✅ 왜 Provider를 쓰는가?

✔ Provider를 사용하면 상태를 하나의 상위 컴포넌트에서 전역 관리 가능함
→ 컴포넌트 간 응집도 높이고, 상태 흐름을 명확하게 관리

✅ Query란?

서버에서 데이터를 가져오는 행위 (ex. API 호출)

• React Query 같은 라이브러리를 사용하면:
  • useQuery() / useSuspenseQuery() 등으로 비동기 데이터 요청
  • 캐시 기능이 있어 같은 쿼리는 다시 호출하지 않음
  • 상태: isLoading, isFetching, error, data 등 자동 관리

✅ 쿼리와 Provider의 관계?

→ 쿼리로 데이터를 가져오고, 그걸 Context로 감싸서 여러 컴포넌트에서 재사용 가능하게 만듦

✅ 언제 Provider를 쓰면 좋은가?

✍️ 작성 규칙 (ITP-CCC)

Context Provider를 작성할 땐 다음 규칙을 지켜주세요:

📦 1. **I**mport

• 필요한 훅, 타입, 쿼리 등 불러오기

✍️ 2. **T**ype 정의

• Context 내부에서 다룰 value 타입 정의 (e.g., SomeContextType)

⚙️ 3. **P**rovider 생성

• createContext로 context 객체 만들기 + 기본값 세팅

📬 4. **C**hild Props 정의

• children: React.ReactNode를 받는 props 타입

🧠 5. **C**omponent 구현

• 내부 상태 관리 (useState, useQuery, useEffect 등)
• value={{ ... }}에 정확하게 타입 맞춰서 전달

🚀 6. **C**ontext Hook 만들기

• useXXXProvider() 이름으로 context 리턴하는 훅 정의

📤 7. default export

• Provider 컴포넌트를 export

🧠 전체 기억하기: 📦 ITP-CCC 구조

✅ 예시 전체 코드

import { createContext, useContext, useState, Dispatch, SetStateAction } from 'react';
import useXYZ from '@/hooks/useXYZ';
import { Item } from '@/types/model/item';

type XYZContextType = {
  itemList: Item[];
  count: number;
  setCount: Dispatch<SetStateAction<number>>;
};

const XYZContext = createContext<XYZContextType>({
  itemList: [],
  count: 0,
  setCount: () => {},
});

type XYZProviderProps = {
  children: React.ReactNode;
};

const XYZProvider = ({ children }: XYZProviderProps) => {
  const [count, setCount] = useState(0);
  const { data: itemList = [] } = useXYZ();

  return (
    <XYZContext.Provider value={{ itemList, count, setCount }}>
      {children}
    </XYZContext.Provider>
  );
};

export const useXYZProvider = () => useContext(XYZContext);
export default XYZProvider;

🔚 마무리 팁

• Context는 너무 많이 남발하면 오히려 복잡해질 수 있으니 공통으로 사용하는 큰 상태에만 적용
• 쿼리와 결합해서 사용하면 더욱 깔끔한 데이터 흐름 설계 가능
• value={{ ... }}에 들어가는 key들은 ContextType과 100% 일치하도록 유지하세요.

📌 이 구조대로 작성하면 규모가 커져도 유지보수/협업이 편리해집니다!

router.tsx

const withErrorAndSuspenseBoundary = (element: React.ReactNode) => ({
    element: (
        <ErrorBoundary fallback={<ErrorArea />}>
            <Suspense fallback={<LoadingArea />}>{element}</Suspense>
        </ErrorBoundary>
    ),
});

2. 과제 프로바이더 구조 이해하기

💡 React Provider 제대로 이해하기: 내 프로젝트에선 이렇게 동작!

✅ Provider란?

React에서 Provider는 공통으로 사용되는 데이터를 전역 상태처럼 관리하고, 필요한 컴포넌트에 쉽게 공급하는 역할을 한다.

쉽게 말하면, React에서의 물류센터 같은 존재입니다. 어떤 데이터든 이 센터에 넣어두면, 아래에 있는 어떤 컴포넌트든 필요할 때 가져다 쓸 수 있다.

🔄 왜 Provider가 필요할까? (feat. 택배 기사)

여러 컴포넌트가 같은 데이터를 필요로 하는 상황을 상상해볼게요. 예를 들어, 사용자 정보가 있다면 이건 헤더, 사이드바, 댓글, 대시보드에서도 필요하겠지?

❌ Provider 없이: Prop Drilling

<App user={user}>
  <Header user={user}>
    <Nav user={user}>
      <Profile user={user} />
    </Nav>
  </Header>
</App>

이렇게 props를 계속 넘겨야 해요. 이것을 Prop Drilling이라고 부릅니다. 택배 기사가 1층에서 출발해 꼭대기까지 계단으로 올라가서 직접 배달하는 상황이라고 보면 돼요.

✅ Provider 사용

<UserContext.Provider value={user}>
  <App />
</UserContext.Provider>

이제 Header, Nav, Profile 어디서든 useContext(UserContext)만 쓰면 데이터를 바로 쓸 수 있어요. 마치 1층에 물류센터를 두고 필요한 사람이 와서 직접 가져가는 구조죠.

🗂 프로젝트 구조 속 Provider 예시

src/
└── pages/
    └── inquiries/
        └── pages/
            └── indexes/
                └── pages/
                    └── MessagePage/
                        ├── MessagePage.tsx
                        └── components/
                            ├── MessageAllGetProvider/
                            │   └── MessageAllGetProvider.tsx
                            ├── MessageLocalValueProvider/
                            │   └── MessageLocalValueProvider.tsx

🧩 실제 연결 구조

1️⃣ MessagePage.tsx

const MessagePage = () => {
  return (
    <MessageAllGetProvider>
      <MessageLocalValueProvider>
        <MessageLayout
          MessageTable={<MessageTableBox />}
          MessageDatePicker={<MessageDatePicker />}
          // ...
        />
      </MessageLocalValueProvider>
    </MessageAllGetProvider>
  );
};

• MessageAllGetProvider: 서버에서 데이터 조회
• MessageLocalValueProvider: 로컬 상태 관리 (ex. 날짜 선택)

2️⃣ MessageAllGetProvider.tsx

const MessageAllGetProvider = ({ children }) => {
  const { company, site } = useCompanySelectProvider();
  const [pagination, setPagination] = useState({ page: 1, size: 20, total: 0 });
  const [dateRange, setDateRange] = useState();
  const [selectedSite, setSelectedSite] = useState(company.siteUrls[0]);

  const { isFetching, data } = useInquiryAllGetQuery({
    path: { companyId: company?.uuid },
    query: { pagination, siteUrl: selectedSite, dateRange },
    body: {},
  });

  const changePagination = (newPage) => setPagination(newPage);
  const changeSite = (site) => setSelectedSite(site);

  return (
    <MessageAllGetContext.Provider
      value={{
        changePagination,
        pagination,
        selectedSite,
        changeSite,
        dateRange,
        setDateRange,
        inquiries: data?.inquiries || [],
      }}
    >
      {children}
      {isFetching && <LoadingOverlay />}
    </MessageAllGetContext.Provider>
  );
};

3️⃣ 하위 컴포넌트에서 사용하는 방법

const MessageTableBox = () => {
  const { inquiries, changePagination } = useMessageAllGetProvider();

  return (
    <Table>
      {inquiries.map((inquiry) => (
        <Row key={inquiry.id}>{inquiry.title}</Row>
      ))}
    </Table>
  );
};

4️⃣ CustomApiSettingUpdateProvider 예시

const CustomApiSettingUpdateContext = createContext({
  uuid: '',
  setUuid: () => {},
  name: '',
  status: '',
  media: '',
  apiMedias: [],
  handleNameInputChange: () => {},
  handleStatusItemClick: () => {},
  handleMediaItemClick: () => {},
  handleSubmitButtonClick: () => {},
  handleCancelButtonClick: () => {},
});

이걸 사용하는 컴포넌트는 다음과 같아요:

const {
  name,
  handleNameInputChange,
  handleSubmitButtonClick
} = useCustomApiSettingUpdateProvider();

return (
  <>
    <Input value={name} onChange={handleNameInputChange} />
    <Button onClick={handleSubmitButtonClick}>등록</Button>
  </>
);

🧠 요약: Provider 패턴의 핵심 정리

💬 마무리

Provider는 React에서 공통 데이터나 상태를 효율적으로 관리할 수 있게 도와주는 핵심 개념이다.
특히 복잡한 페이지일수록, 여러 상태와 데이터를 여러 컴포넌트에 전달할 일이 많을수록 Provider 패턴은 필수라고 할 수 있다.

이 구조를 이해하고 나면, 협업이나 유지보수에서도 훨씬 수월해질 거다.
복잡한 상태 로직, 중첩된 데이터 전달로 고생하고 있다면, 꼭 Provider 패턴을 적극적으로 활용해보자! 💪

오늘 개발팀 데일리 스크럼에서 맡게 된 업무 중 하나가 Sentry 에러 로깅 연동이었는데, 이게 어떤 작업인지 정리해봤다.

🔍 Sentry란?

Sentry는 애플리케이션에서 발생하는 에러(버그, 예외 등)를 실시간으로 추적하고 수집하는 모니터링 도구다.

• 에러 발생 시 스택 트레이스, 사용자 정보, 환경 등 자동 수집
• 다양한 플랫폼 지원 (웹, 모바일, 백엔드 등)
• Slack, 이메일 등과 연동 가능

👉 https://sentry.io

⚙️ Sentry 에러 로깅 연동이란?

앱 또는 서버에 Sentry SDK를 연동해서, 예외 발생 시 자동으로 Sentry에 보고하도록 설정하는 작업

📦 일반적인 연동 절차

1. Sentry 프로젝트 생성

• sentry.io에 로그인하고, 사용할 플랫폼(React, Node, Django 등) 선택해 프로젝트 생성

2. SDK 설치 (예: React 기준)

npm install @sentry/react @sentry/tracing

해결과정

1. 실제 백엔드 API와 통신하고 데이터를 화면에 표시하는 부분 찾기 -폴더 구조 파악도 안 된 상태에서 실제로 통신이 이루어진 부분을 찾기란 쉽지않았다. -GeminiCLI를 사용해서 useQuery가 사용된 파일을 검색해달라고 부탁해서 코드를 확인했다.

   -useQuery를 사용하는 파일이 많아서 src>hooks>server>useInquiryAllGetQuery.tsx파일을 예시로 데이터 호출 및 처리 과정을 확인하라고 함 -먼저 useInquiryAllGetQuery.tsx 커스텀 훅이 어떻게 useQuery를 사용하여 API를 호출하고 있는지 살펴봄 useInquiryAllGetQuery.tsx

   import { InquireType, InquiryAllGetReq } from '@/types/model/inquiry';
   import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
   import queryKey from 'constants/queryKeys';
   import { useEffect } from 'react';
   import { getInquiryAll } from 'services/inquiry';
   import { Pagination } from 'types/pagination';
   import { Request } from 'types/request';
   

const useInquiryAllGetQuery = (request: InquiryAllGetReq) => { const queryClient = useQueryClient(); const { path: { companyId }, } = request; const result = useSuspenseQuery({ queryKey: [queryKey.getInquiryAll, JSON.stringify(request)],

    queryFn: async () => {
        if (!companyId) {
            return { body: [], page: 1, size: 20, total: 0 };
        }
        const response = await getInquiryAll(request);
        return response;
    },
    // throwOnError: true,
    // placeholderData: (previousData) => previousData,
});

useEffect(() => {
    if (!result.data) return;

    const { page, size, total } = result.data;
    const nextPage = page + 1;

    if (nextPage * size - size < total) {
        const nextRequest: InquiryAllGetReq = {
            path: { companyId: request.path.companyId },
            query: {
                ...request.query,
                pagination: {
                    page: nextPage,
                    size,
                    total,
                },
            },
            body: {}, // 유지
        };

        queryClient.prefetchQuery({
            queryKey: [queryKey.getVisitHistoryAll, JSON.stringify(nextRequest)],
            queryFn: () => getInquiryAll(nextRequest),
        });
    }
}, [result.data, queryClient, request]);

const safeData = result.data
    ? {
          inquiries: result.data.body,
          pagination: {
              page: result.data.page,
              size: result.data.size,
              total: result.data.total,
          },
      }
    : {
          inquiries: [],
          pagination: { page: 1, size: 20, total: 0 },
      };

return {
    ...result,
    data: safeData,
};

};

export default useInquiryAllGetQuery;

-그런데 useInquiryAllGetQuery를 사용하는 컴포넌트가 많아서
그 중에서 src>pages>inquiries>pages>indexes>pages>InquiryPage>components>InquityTableBox>components>UserInquiryTableBox>UserInquiryTableBox.tsx파일을 예시로 봄

```ts
import BasicTable from 'headful/Table/BasicTable';
import React from 'react';
import EmptyBoundary from '@/components/EmptyBoundary/EmptyBoundary';
import EmptyTable from 'headful/EmptyTable/EmptyTable';
import useInquiryAllGetQuery from '@/hooks/server/useInquiryAllGetQuery';
import { useCompanySelectProvider } from '@/components/CompanySelectProvider/CompanySelectProvider';
**import useCompanyGetQuery from '@/hooks/server/useCompanyGetQuery';**
import { useInquiryAllGetProvider } from '../../../InquiryAllGetProvider/InquiryAllGetProvider';
import InquiryColumns from '../InquiryColumns/InquiryColumns';
import ContentBox from '@/headful/ContentBox/ContentBox';

type UserInquiryTableBoxProps = {};

const UserInquiryTableBox = ({}: UserInquiryTableBoxProps) => {
    const { pagination: p, selectedSite, dateRange } = useInquiryAllGetProvider();
    const { company, site } = useCompanySelectProvider();

    const {
        data: { inquiries },
    } = useInquiryAllGetQuery({
        path: { companyId: company?.uuid as string },
        query: { pagination: p, siteUrl: site as string, dateRange },
        body: {},
    });

    const {
        data: { company: companyData },
    } = useCompanyGetQuery({ path: { companyId: company?.uuid as string }, query: {}, body: {} });

    const companyColumns = companyData.columns?.split(',') ?? [];

    const inquiryColumns = InquiryColumns({ inquiries });
    const desiredColumnKeys = ['seq', 'createdDate', 'createdTime', 'clientPhone', 'device', 'ip', ...companyColumns];
    const filteredColumns = inquiryColumns.filter((col) => desiredColumnKeys.includes(col.key));

    return (
        <ContentBox title={'문의내역'}>
            <EmptyBoundary data={inquiries} fallback={<EmptyTable text="문의 내역이 없습니다." />}>
                <BasicTable>
                    <BasicTable.Header>
                        {filteredColumns.map(({ key, label }) => (
                            <BasicTable.Cell asHeader align="left" key={key}>
                                {label}
                            </BasicTable.Cell>
                        ))}
                    </BasicTable.Header>
                    <BasicTable.Body>
                        {inquiries?.map((item: any, rowIndex: number) => (
                            <BasicTable.Row key={item.uuid}>
                                {filteredColumns.map((col) =>
                                    // render 함수에서 생성된 JSX에 key를 부여합니다.
                                    React.cloneElement(col.render(item, rowIndex), { key: col.key + col.label })
                                )}
                            </BasicTable.Row>
                        ))}
                    </BasicTable.Body>
                </BasicTable>
            </EmptyBoundary>
        </ContentBox>
    );
};

export default UserInquiryTableBox;

-이파일에서 useInquiryAllGetQuery 훅을 호출하여 얻은 데이터를 테이블 형태로 화면에 표시한다. -즉, 훅을 호출하여 문의 데이터를 가져오고, BasicTable 컴포넌트를 사용해서 화면에 테이블 형태로 데이터를 뿌려줌

데이터 호출 : src/hooks/server/useInquiryAllGetQuery.tsx 파일에서 useSuspenseQuery(react-query의 useQuery와 유사)를 사용하여 getinquiryAll API 함수를 호출하고 데이터를 가져옴.

데이터 표시 : src/pages/inquiries/pages/indexes/pages/InquiryPage/components/InquiryTableBox/components/UserInquiryTableBox/UserInquiryTableBox.tsx 컴포넌트에서 useInquiryAllGetQuery 훅을 사용해서 데이터를 받아온 후 BasicTable 컴포넌트를 이용해 해당 데이터를 화면에 렌더링 함.

그럼 이를 참고해서 데이터를 표시해야되는 UserInfo.tsx(프로필설정) 의 Query.ts파일도 만들어보자

1. 먼저 사용자 정보를 가져오는 API함수가 어디있는지 확인해야 한다.

-services 디렉터리에서 관련 함수를 찾아봄 -getUserAll은 모든 유저를 가져오는 함수로 파악됨. 현재 로그인된 특정 유저의 정보를 가져오는 함수가 필요하다. user.ts파일을 직접 읽어서 확인하자 -getUserAll 함수만으로는 현재 로그인한 사용자의 정보를 가져올 수 없다. auth.ts파일에 현재 정보를 가져오는 함수가 있는지 확인하자

getContext : 현재 로그인한 사용자의 정보를 가져오는 함수임

2. useUserContextGetQuery.ts 파일 생성하기

import { useQuery } from '@tanstack/react-query'; import { getContext } from '@/services/auth'; import queryKey from '@/constants/queryKeys';

const useUserContextGetQuery = () => { const result = useQuery({ queryKey: [queryKey.getContext], queryFn: getContext, });

return result;

};

export default useUserContextGetQuery;

3. UserInfo.tsx파일 수정
-useUserContextGetQuery 훅을 사용하고, 가져온 데이터를 상태에 반영하기
```ts
import React, { useEffect, useState } from 'react';
import styles from './UserInfo.module.scss';
import InputA from '@/ui-kit/src/components/contents/Input/A/InputA';
import ColorChip from '@/headful/ColorChip/ColorChip';
import BasicModal from '@/headful/BasicModal/BasicModal';
import ButtonB from '@/ui-kit/src/components/contents/Button/B/ButtonB';
import UserPasswordChangeForm from '../UserPasswordChangeForm/UserPasswordChangeForm';
import useUserContextGetQuery from '@/hooks/server/users/useUserContextGetQuery';

const UserInfo = () => {
    const { data: userData } = useUserContextGetQuery();
    const [userInfo, setUserInfo] = useState({
        name: '',
        role: '',
        account: '',
        phone: '',
    });

    useEffect(() => {
        if (userData) {
            setUserInfo({
                name: userData.body.name,
                role: userData.body.role,
                account: '', // API에 없음
                phone: '', // API에 없음
            });
        }
    }, [userData]);

    const handleSave = () => {
        alert(JSON.stringify(userInfo));
    };

    return (
        <div className={styles.UserInfo}>
            <div className={styles.FormItem}>
                <div className={styles.Label}>
                    <span>이름</span>
                </div>
                <div className={styles.Input}>
                    <UserInfoInput
                        value={userInfo.name}
                        onChange={(e) => setUserInfo({ ...userInfo, name: e.target.value })}
                    />
                </div>
            </div>
            <div className={styles.FormItem}>
                <div className={styles.Label}>
                    <span>직급</span>
                </div>
                <div className={styles.Input}>
                    <UserInfoInput
                        value={userInfo.role}
                        onChange={(e) => setUserInfo({ ...userInfo, role: e.target.value })}
                    />
                </div>
            </div>
            <div className={styles.FormItem}>
                <div className={styles.Label}>
                    <span>권한</span>
                </div>
                <div className={styles.Input}>
                    <ColorChip bgColor="#D8F5DA" color="#1D5C21" text="관리자" />
                </div>
            </div>
            <div className={styles.FormItem}>
                <div className={styles.Label}>
                    <span>계정</span>
                </div>
                <div className={styles.Input}>
                    <UserInfoInput
                        value={userInfo.account}
                        onChange={(e) => setUserInfo({ ...userInfo, account: e.target.value })}
                    />
                </div>
            </div>
            <div className={styles.FormItem}>
                <div className={styles.Label}>
                    <span>비밀번호</span>
                </div>
                <div className={styles.Input}>
                    <UserInfoInput type="password" placeholder="비밀번호" />
                </div>
            </div>
            <BasicModal>
                <BasicModal.Trigger>
                    <ButtonB
                        bgColor="#F8F8F8"
                        color="#333333"
                        width="124px"
                        height="45px"
                        style={{ border: '1px solid #E2E2E2', marginBottom: '8px' }}
                    >
                        비밀번호 변경
                    </ButtonB>
                </BasicModal.Trigger>
                <BasicModal.Backdrop />
                <BasicModal.Content title="비밀번호 변경" width="550px" height="460px">
                    <UserPasswordChangeForm />
                </BasicModal.Content>
            </BasicModal>
            <div className={styles.FormItem}>
                <div className={styles.Label}>
                    <span>휴대폰 번호</span>
                </div>
                <div className={styles.Input} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <UserInfoInput
                        width={84}
                        maxLength={3}
                        value={userInfo.phone.slice(0, 3)}
                        onChange={(e) =>
                            setUserInfo({
                                ...userInfo,
                                phone: e.target.value + userInfo.phone.slice(3),
                            })
                        }
                    />
                    <span>-</span>
                    <UserInfoInput
                        width={84}
                        maxLength={4}
                        value={userInfo.phone.slice(3, 7)}
                        onChange={(e) =>
                            setUserInfo({
                                ...userInfo,
                                phone:
                                    userInfo.phone.slice(0, 3) +
                                    e.target.value +
                                    userInfo.phone.slice(7),
                            })
                        }
                    />
                    <span>-</span>
                    <UserInfoInput
                        width={84}
                        maxLength={4}
                        value={userInfo.phone.slice(7)}
                        onChange={(e) =>
                            setUserInfo({
                                ...userInfo,
                                phone: userInfo.phone.slice(0, 7) + e.target.value,
                            })
                        }
                    />
                </div>
            </div>
            <ButtonB
                bgColor="#007AFF"
                color="#FFFFFF"
                width="124px"
                height="45px"
                onClick={handleSave}
            >
                저장
            </ButtonB>
        </div>
    );
};

export default UserInfo;

const UserInfoInput = ({ ...props }: React.ComponentProps<typeof InputA>) => (
    <InputA s padding={{ y: 15, x: 20 }} height={45} width={props.width || '100%'} {...props} />
);

-UserInfo.tsx 파일에 useUserContextGetQuery훅을 사용하여 사용자 정보를 가져오고, useEffect로 상태를 업데이트하며, 저장 버튼 클릭 시 alert 창으로 현재 상태를 보여주는 기능을 추가함. -> 이제 프로필 설정 페이지에서 실제 사용자 데이터를 불러와 수정하고, 저장 버튼읠 눌러 변경된 데이터를 확인할 수 있다!

But 콘솔에러 발생

내용 > 컴파일 오류 발생 관련,, 어쩌구 저쩌구 이유 > rank, email, phone 속성이 없다는 메시지 User 타입 정의를 확인해보자

User타입에는 uid, name, role, companyUuid만 있고, UserAllGetItem rank가 아닌 position과 email, phone이 포함되어 있어서 그런 것 getContext API가 User타입을 반환하므로, Userinfo.tsx에서 User타입의 속성을 사용하도록 수정해야 한다. 또한, getContext API 응답에는 position, email, phone 정보가 포함되어 있지 않기 때문에 이런 오류가 발생한 것.

getContext 함수를 다시 확인해서 어떤 정보를 반환하는지 파악하자 -> 확인결과 : getContext는 User타입을 반환하므로 name과 role만 사용할 수 있음 UserInfo.tsx를 다시 수정해서 User타입에 맞게 name과 role만 사용하고 나머지 정보는 빈값으로 두기로 함!

또한 rank대신 role을 사용해보자

잼미니 응답 내용 이렇게 나옴

But 콘솔에러 발생

내용 > 이번에는 key prop을 지정하지 않아서 발생하는 경고 warring!!!! 이유 > React는 key prop을 사용하여 리스트의 항목들을 효율적으로 업데이트하고 식별한다.

메시지에서 DynamicMenu.tsx:15라고 명시되어 있으므로, 해당 파일의 15번째 줄 근처에서 리스트를 렌더링하는 부분 (예:map함수)을 찾아 각 리스트 항목에 고유한 key prop을 추가해야 함

DynamicMenu.tsx파일확인 => compaines.map부분에 key prop이 누락되어 있음 => company.uuid를 key로 사용하도록 수정함

• menuTree.map부분에 key prop도 누락되어 잇어서 menu.id 또는 menu.name과 같이 고유한 값을 key로 사용하도록 수정함 하지만 여기에서는 menu.id가 없으므로 menu.name을 사용함.

Google의 Gemini 모델을 로컬 터미널에서 사용할 수 있는 강력한 CLI 도구로, 개발자와 AI가 더 가까워지는 경험을 제공한다.

✅ 1. MCP 기능 (Multi Code Path)

• 여러 파일의 흐름을 동시에 인식하고 이해한다.
• 프로젝트 단위 문맥 파악이 가능해, 복잡한 코드 구조도 AI가 함께 추적하고 설명해준다.

✅ 2. 코드 파일 수정 및 생성

• @경로/파일명 방식으로 파일을 직접 불러오거나 수정할 수 있다.
• AI가 직접 코드 일부를 수정하거나, 새 파일을 만들어주는 작업도 가능하다.
• 예: @src/App.tsx → "이 부분의 성능을 개선해줘"

✅ 3. CLI에서 스크립트 실행

• run 명령어를 통해 테스트, 빌드, 실행 등 다양한 명령어를 터미널 내에서 바로 실행할 수 있다.
• AI에게 "이 테스트를 통과시키려면 어떻게 수정해야 할까?" 같은 질문도 자연스럽게 할 수 있다.

✅ 4. 일상적인 질문도 가능 (웹 검색 및 일반 Q&A)

• "오늘 날씨 알려줘", "React에서 useEffect 언제 써?" 같은 질문도 가능!
• 일반적인 ChatGPT처럼도 쓸 수 있어서, 문법 설명, 알고리즘 풀이 등도 질문할 수 있다.

✅ 5. 파일 기반 작업 맥락 인식

• 현재 열려 있는 파일뿐 아니라, 주변의 다른 파일들도 함께 고려해 답변을 준다.
• 실제 프로젝트 상황처럼 맥락 있는 도움을 받을 수 있다.

✅ 6. 체크포인트 기능 (Checkpointing)

• 코드 수정 내역을 체크포인트로 저장하여, 변경 전후 비교가 가능하고 되돌리기도 쉽다.

✅ 7. 확장성

• 다양한 확장(extensions)을 설치하거나 선택적으로 활성화해서 원하는 기능을 더할 수 있다.
• 예: --extensions, --list-extensions 옵션 활용이 가능하다.

📝 사용 예시

gemini -p "초등학생용 수학 퀴즈 게임을 React로 만들어줘. 덧셈 문제와 점수 시스템 포함해서."

본격 GEMINI 셋팅 방법

💻 Gemini CLI (잼미니) 설치 방법 (Mac & Windows)

Google의 Gemini 모델을 로컬 터미널에서 쓸 수 있는 Gemini CLI는 개발자의 코드 생산성을 높여주는 강력한 AI 도구입니다. 아래는 운영체제별 설치 방법입니다.

🍎 macOS에서 설치하기

1. Node.js 20.18.1 이상 설치

• Node.js 설치 https://nodejs.org/ko/download
• 로컬 환경(맥 or 윈도우)에 맞는 버전 설치
• 여기에서 npm 설치 꼭 하기 (설치는 기초 셋팅 건들이지 않고 다음 > 다음 넘기면 됨) nvm(Node Version Manager)이 설치되어 있다면 아래 명령어로 Node.js를 설치한다:

nvm install 20.18.1
nvm use 20.18.1

2. 로컬 컴퓨터 CLI(터미널)로 설치하기

윈도우 : powershell 파워쉘 맥 : Terminal 터미널

npm install -g @google/gemini-cli

만약 실행이 되지 않는다면?

• 윈도우 : 관리자 모드로 실행

  Set-ExecutionPolicy RemoteSigned

• 입력후 다시 설치 명령어 실행하면 된다.

• 맥 : sudo 붙이기

sudo npm install -g @google/gemini-cli

또는

• 에러 메시지를 ctrl + c 한뒤 , AI 에게 물어보기

4. 설치 완료 확인

이런 메시지가 떴으면 설치 완료!

원하는 테마 (색상) 선택하고, 구글 계정을 연결한다.

5.구글 계정 연결하기

• 구글 계정 연동 후 보이는 정상 메시지

6. 잼미니 사용하기

gemini

입력하면 네모난 칸이 뜨는데 이곳에 AI에게 질문하면된다. 예를 들면, useState와 useEffect의 차이점을 한글로 물을 수 있다.

참고 : 코딩애플 유튜브 https://youtu.be/f-Izv0ZIeQs?si=cBEBmCmFlyFXIAun

• nvm 설치하고

   nvm install node

• 또는 Node.js 공식 설치파일 다운로드 https://nodejs.org/ko/download

✅ npm 최신 업데이트

• Node.js 설치하면 기본 업데이트

• 필요하면

   npm install -g npm@latest

  node가 설치되어있다면

   node -v

최신 버전이 아니라면 ** nvm 설치**

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

## 2. 리엑트 프로젝트 생성 (Vite + TypeScript)

npm create vite@latest 프로젝트이름 --template react-swc

• React -> Typescript 선택

## *3. 프로젝트 폴더로 이동 *

cd my-app

## *4. TailwindCSS 설치 *

npm install -D tailwindcss@3 postcss autoprefixer

## *5. Tailwind 설정 파일 생성 *

npx tailwindcss init -p

생성이 되면 이렇게 뜬다

만약 생성이 안된다면?

• package.json이 있는 경로에 tailwind.config.js 파일 직접 만들기
• 기본파일 이렇게 되어있음

  /** @type {import('tailwindcss').Config} */
  export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
  }
  

- 주의할 점은 여기에 content가 비어있으면 안된다.
-  Tailwind가 아무 파일도 검사하지 않아서 스타일을 생성하지 않게된다.

**content에 프로젝트의 src 폴더 내 파일들을 지정**
``` ts
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

## *6. CSS 파일에 Tailwindimport * src/index.css 또는 App.css에 아래와 같이 import

@tailwind base;
@tailwind components;
@tailwind utilities;

노란줄이 생긴더라도 문제 없다.

## ** 7. 메인 파일에서 CSS 연결 (main.ts) **

• 이미 연결되어 있으므로 패스해도 됨

  import { createRoot } from "react-dom/client";
  import "./index.css";
  import App from "./App";
  

createRoot(document.getElementById("root")!).render();

<span style="background-color: yellow;">## ** 8. 노드 모듈스 설치 **</span>
```bash
npm i

** 하지만 나는 tsconfig.app.json파일에서 빨간 줄 에러 발생 **

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

해당 에러 부분을 과감하게 지워준다.

마찬가지로 tsconfig.node.json에도 에러 발생;;

이경우엔 정상 작동되는 코드로 변경해준다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

## ** 9. Tailwind 반영 확인용 UI 생성(test 파일) **

• App.tsx

  import "./App.css";
  

function App() { return (

export default App;

변경을 했는데 에러처럼 빨간색으로 보인다면
당황하지 않고 프로그램을 종료하였다가 다시 키면 된다.

<span style="background-color: yellow;">## ** 9. 개발 서버 실행 **</span>
```bash
npm run dev

## ** 10. Tailwind UI 반영 확인 **

이런 화면이 나와야 한다.

1. 프로필(아바타) 이미지 변경 방법

• Velog 로그인 → 오른쪽 상단 프로필 사진 클릭 → 설정(Settings) 이동

• "프로필" 항목에서 👉 이미지 업로드 가능 (JPG, PNG 파일 사용)

✅ 팁: 깔끔한 본인 로고나 심플한 아이콘 추천.

2. 소개글 (About) 작성 방법

• 설정(Settings) → "자기소개" 입력란에 간단한 소개 작성. (예: "자바스크립트를 공부하는 신입 개발자입니다.")

✅ 팁: 짧고 인상적인 문장 2~3줄이면 충분하다.

3. 커버 이미지 설정 (페이지 상단 배경) 방법

• 설정(Settings) → "커버 이미지 업로드" 배경 이미지를 추가하면, 내 Velog 메인 페이지 상단에 크게 나온다.

✅ 팁: 배경은 너무 화려하면 가독성 떨어짐.

심플하거나 연한 그라데이션 배경 추천.

4. 소셜 링크 추가 (GitHub, Blog, Website 등) 방법

• 설정(Settings) → "SNS 링크" 추가 (GitHub, Instagram, 개인 웹사이트 URL 입력 가능)

✅ 팁:

• GitHub 프로필 주소는 꼭 넣는 걸 추천한다.

• 포트폴리오 사이트 있으면 추가하면 좋다.

5. 태그/카테고리 관리 방법

• 글 작성할 때 "태그" 추가 가능

• "카테고리" 지정해서 블로그 주제별로 나누기

✅ 팁:

• ex) 자바스크립트 공부글은 Javascript 카테고리로 묶기

• 글 목록 정리가 깔끔해진다.

🎨 Velog 고급 꾸미기 (디자인 직접 커스터마이징)

• Velog는 직접 디자인 편집은 못 하지만, 특정 설정으로 "내 블로그 느낌"을 낼 수 있다.

팁들

• 썸네일 이미지를 통일된 스타일로 만든다.

• 글 제목 스타일을 통일한다. ([Javascript] var/let/const 정리 같은 형식)

• 본문에도 이모지(✅, 🚀, 🧠) 활용하면 가독성 좋아진다.

🧹 정리 한 줄

➔ Velog 내 페이지 꾸미려면 설정(Settings) 가서 프로필, 커버, 소개글, 소셜 링크를 설정하고, 글 쓸 때는 태그/카테고리 잘 나누면 된다!

1. var

• ES5까지 사용된 변수 선언 방법
• 중복 선언 가능
• 호이스팅 발생 (선언만 위로 끌어올려짐, 초기화는 안 됨)
• 함수 스코프를 가진다. ({} 중괄호를 무시하고 함수 단위로 스코프를 가짐)

📌 예시

console.log(a); // undefined (호이스팅)
var a = 5;
console.log(a); // 5

function test() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 (if문 블록 무시하고 접근 가능)
}
test();                                

2. let

• ES6(2015)부터 등장

• 중복 선언 불가

• 호이스팅은 발생하지만 초기화 전에 접근하면 에러 (Temporal Dead Zone)

• 블록 스코프를 가진다. ({} 안에서만 유효)

  📌 예시

  let b = 10;
  b = 20; // 값 변경 가능
  

function testLet() { if (true) { let y = 30; console.log(y); // 30 } console.log(y); // ReferenceError (블록 스코프) } testLet();

## 3. const
- ES6부터 등장

- **값 재할당 불가 (초기화 이후 값 변경 금지)**

- **호이스팅은 발생하지만 접근 시 에러**

- **블록 스코프**를 가진다.

### 📌 예시
```javascript
const c = 100;
c = 200; // TypeError: Assignment to constant variable.

const arr = [1, 2, 3];
arr.push(4); // 가능 (참조 주소는 그대로, 내부 데이터 변경)

const obj = { name: 'John' };
obj.name = 'Jane'; // 가능

📚 var, let, const 비교표

✏️ 정리

• var는 이제 사용 지양!

• 변할 수 있는 값이면 let

• 변하지 않는 값이면 const를 사용하는 것이 기본.