뇌 채우기 공간

[Firebase] javascript firestore CRUD하는 방법

자바칩 프라푸치노 — Tue, 4 Jul 2023 15:26:47 +0900

GET

export const getList = async () => {
  const data = (await firebase.firestore().collection("MY_COLLECTION_NAME").get()).docs.map(
    (doc) => {
      return { ...doc.data(), id: doc.id };
    }
  );
  return data;
};

콜렉션을 만들고 그 콜렉션에 있는 모든 데이터를 가지고 오는 코드

id를 자동 생성으로 만들게 되면 data안에는 id가 안들어있어서 따로 map으로 붙여서 새로운 배열을 만들어줬다.

GET BY ID

export const getItemById = async (id: string) => {
  const data = (
    await firebase.firestore().collection("MY_COLLECTION_NAME").doc(id).get()
  ).data();
  return data;
};

콜렉션 안에 특정 아이디만 뽑아내서 해당 데이터를 가져오는 코드

POST

export function postItem(content) {
  return firebase.firestore().collection("MY_COLLECTION_NAME").add(content);
}

콜렉션에 새로운 문서를 추가하는 코드

DELETE

export function deleteBucket(id: string) {
  return firebase.firestore().collection("MY_COLLECTION_NAME").doc(id).delete();
}

콜렉션에서 해당 아이디인 문서를 삭제하는 코드

UPDATE

export function completeBucket({ id, content }) {
  return firebase.firestore().collection("MY_COLLECTION_NAME").doc(id).update(content);
}

아이디에 해당하는 문서 중에서 필드 몇가지의 값을 업데이트 하는 코드

SET

export function completeBucket({ id, content }) {
  return firebase.firestore().collection("MY_COLLECTION_NAME").doc(id).set(content);
}

아이디에 해당하는 문서에 필드를 갈아끼우는 코드

set은 여기서 파라미터로 들어온 값으로 아예 대체를 하고 update는 업데이트 하지 않은 필드는 그대로 두고 파라미터로 들어온 값만 수정함

[Vue.js] vue-awesome-swiper vue2.7 setup script에서 내장 함수 쓰는 법

자바칩 프라푸치노 — Fri, 26 May 2023 16:27:35 +0900

https://github.com/surmon-china/vue-awesome-swiper

GitHub - surmon-china/vue-awesome-swiper: Swiper component for @vuejs

Swiper component for @vuejs. Contribute to surmon-china/vue-awesome-swiper development by creating an account on GitHub.

github.com

내가 원하는 기능은 autoplay되다가 마우스 오버를 하면 멈췄다가 mouseleave를 하면 다시 autoplay가 되는 기능을 원했다.

예시로 나오는 코드들은 다 vue2버전인데 나는 2.7의 setup script로 바꾸고 싶었음!

<script setup lang='ts'>
const swiperRef = ref();

const onSwiperReady = (swiper) => {
	swiperRef.value = swiper;
};

const mouseover = () => {
	swiperRef.value.autoplay.stop();
};

const mouseleave = () => {
	swiperRef.value.autoplay.start();
};

</script>

<template>
<swiper
    :options="swiperOption"
    class="flex"
    @ready="onSwiperReady">
    ...
</swiper>
</template>

swiper에 @ready 함수에 swiperRef를 등록하면 그 안에 등록된 함수들을 사용할 수 있다.

console을 찍으면 다 나옴!

[React] clip-path polygon으로 원형 wheel 만들기 2탄

자바칩 프라푸치노 — Tue, 4 Apr 2023 18:19:21 +0900

1탄은 아래 게시물

https://sso-feeling.tistory.com/850

[css] clip-path polygon으로 원형 wheel 만들기 1탄

코드펜에서 이런 작업물을 발견했습니다. https://codepen.io/wheatup/pen/GbgyLY Interactive Wheel Menu Using javascript and css(non-svg) to make an hold-and-drag wheel menu.... codepen.io 마우스 클릭을 하면 동그란 휠이 나와서

sso-feeling.tistory.com

2탄은 리액트로 코드를 옮기고 hover 할때마다 약간 바운스되면서 커지는 효과를 넣어보겠습니다.

css는 styled-components를 사용하겠습니다.

1. styled-components로 Wheel 스타일 만들기

1탄의 코드를 보면 wheel의 스타일은 아래와 같습니다.

.wheel{
  width:500px;
  height : 500px; 
  transform: translate(50%, 50%);
  
}

이것을 styled-component로 만들어줍니다.

const Wheel = styled.div`
  width:500px;
  height : 500px; 
  transform: translate(50%, 50%);
`;

2. styled-components로 Child 스타일 만들기

1탄의 child css 는 아래와 같습니다.

.wheel .child {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  opacity: 0.8;
  transform-origin: 0% 100%;
  clip-path: polygon(0 0, 0 99%, 99% 0);
}

이것을 styled-component로 바꿔줍니다.

const Child = styled.div`
  position : absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  opacity: 0.8;
  transform-origin: 0% 100%;
  clip-path: polygon(0 0, 0 99%, 99% 0);
  `;

3. child에서 props로 rotate각도와 색상, 테두리 색상을 받아서 처리하기

child에서 요소마다 rotate되는 각도가 다르고, 테두리 색상과 배경 색상이 달랐습니다.

이것을 props로 받아서 처리합니다.

const Child = styled.div`
  position : absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  opacity: 0.8;
  transform-origin: 0% 100%;
  clip-path: polygon(0 0, 0 99%, 99% 0);
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, ${(
    props
  ) => props.border} 30%, ${(props) => props.border} 30.5%, ${(props) =>
  props.bg} 31%, ${(props) => props.bg} 50%, ${(props) =>
  props.border} 50.25%, ${(props) =>
  props.border} 51.5%, transparent 51.75%, transparent);
  transform: rotate(${(props) => props.rotate}deg);
`;

 <Wheel>
        <Child rotate="-22.5" border="#67D5B5" bg="#C89EC4"></Child>
        <Child rotate="22.5" border="#67D5B5" bg="#EE7785"></Child>
        <Child rotate="67.5" border="#67D5B5" bg="#84B1ED"></Child>
        <Child rotate="112.5" border="#67D5B5" bg="#AACD6E"></Child>
        <Child rotate="157.5" border="#67D5B5" bg="#ABD0CE"></Child>
        <Child rotate="202.5" border="#67D5B5" bg="#feee7d"></Child>
        <Child rotate="247.5" border="#67D5B5" bg="#cbe86b"></Child>
        <Child rotate="292.5" border="#67D5B5" bg="#6a60a9"></Child>
      </Wheel>

4. hover시에 애니메이션 주기

styled-component 에서 애니메이션을 props를 사용하면서 주는 방법입니다.

const bounce = (rotate) => keyframes`
  0% {
     transform: scale(1.1) rotate(${rotate}deg);
  }
  50% {
    transform: scale(1.13) rotate(${rotate}deg);
  }
  100% {
    transform: scale(1.1) rotate(${rotate}deg);
  }
`;

const Child = styled.div`
  position : absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  opacity: 0.8;
  transform-origin: 0% 100%;
  clip-path: polygon(0 0, 0 99%, 99% 0);
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, ${(
    props
  ) => props.border} 30%, ${(props) => props.border} 30.5%, ${(props) =>
  props.bg} 31%, ${(props) => props.bg} 50%, ${(props) =>
  props.border} 50.25%, ${(props) =>
  props.border} 51.5%, transparent 51.75%, transparent);
  transform: rotate(${(props) => props.rotate}deg);

   &:hover{
    animation:  ${(props) => bounce(props.rotate)} 0.2s 0.1s ease-out;
    transform : rotate(${(props) => props.rotate}deg) scale(1.1);
   }
    
  
`;

결과는 이렇게 완성되었습니다 !

[Git] pull request 에서 Run yarn install --frozen-lockfile 에러

자바칩 프라푸치노 — Tue, 4 Apr 2023 15:55:15 +0900

깃헙 pr에서 여기서 에러가 났다.

밑의 사진은 success이지만 에러가 나면 x표시가 나면서 디테일 보기가 있다.

Run yarn install --frozen-lockfile 과정에서 에러가 났다고 한다.

챗 gpt 한테 물어본 결과

yarn install --frozen-lockfile 명령어는 yarn.lock 파일에서 의존성 패키지들을 설치하는 명령어입니다. 만약 이 과정에서 에러가 발생한다면 다음과 같은 방법들을 시도해 볼 수 있습니다:

에러 메시지를 분석하기: 에러 메시지를 자세히 읽어보면 어떤 종류의 에러가 발생했는지 알 수 있습니다. 에러 메시지에서 어떤 패키지나 파일에서 문제가 발생했는지, 또는 어떤 종류의 충돌이 발생했는지 확인해보세요.
yarn.lock 파일 확인하기: yarn.lock 파일이 있는지 확인하고, 이 파일이 최신 상태인지 확인하세요. yarn.lock 파일이 없다면, yarn install 명령어를 실행해보세요.
캐시 삭제하기: yarn cache clean 명령어를 실행하여 캐시를 삭제한 후, 다시 yarn install 명령어를 실행해보세요.
node_modules 폴더 삭제하기: node_modules 폴더를 삭제한 후, 다시 yarn install 명령어를 실행해보세요.
패키지 버전 업데이트하기: yarn upgrade [package] 명령어를 사용하여 패키지를 최신 버전으로 업데이트한 후, 다시 yarn install 명령어를 실행해보세요.
yarn.lock 파일 업데이트하기: yarn upgrade --latest 명령어를 사용하여 yarn.lock 파일을 최신 상태로 업데이트한 후, 다시 yarn install 명령어를 실행해보세요.

위 방법들 중 하나를 시도해보시고, 문제가 해결되지 않는다면, 추가적인 정보와 함께 더 자세한 질문을 해주세요.

node_modules와 yarn.lock 파일을 삭제하고 yarn install을 했더니 해결되었다.

[에러노트] Type 'undefined' is not assignable to type 'Element'.

자바칩 프라푸치노 — Thu, 23 Mar 2023 10:02:43 +0900

vue에서 lottie-web을 써서 아래 코드를 작성함

const lottieRef = ref<Element | null>(null);

onMounted(() => {
    lottie.loadAnimation({
        container: lottieRef.value,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationLoading,
    });
    
});

여기서 container 부분에서 빨간줄이 떴다.

 Type 'undefined' is not assignable to type 'Element'.

이런 에러가 떴다.

undefined를 잡으면 null 문제라고 또 떴다.

이것을 해결하는 방법은

const lottieRef = ref<Element | null>(null);

onMounted(() => {
    if(!lottieRef.value) return;

    lottie.loadAnimation({
        container: lottieRef.value,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationLoading,
    });
    
});

이렇게 체크를 해주면 된다. !

[React] react-query

자바칩 프라푸치노 — Wed, 22 Mar 2023 12:12:02 +0900

1. react-query

React-Query는 React 애플리케이션에서 API 데이터를 쉽게 가져오고 관리할 수 있도록 도와주는 라이브러리입니다.

React-Query를 사용하려면, 먼저 React-Query 라이브러리를 설치해야합니다.

npm install react-query

다음으로, React-Query의 useQuery hook을 사용하여 데이터를 가져올 수 있습니다. useQuery는 3가지 인자를 받습니다.

queryKey: 요청에 사용할 고유 키입니다. 이 값은 문자열 또는 배열일 수 있습니다. 배열을 사용하면 여러 개의 쿼리를 처리할 수 있습니다.
queryFn: 실제 데이터를 가져오는 함수입니다. 이 함수는 Promise를 반환해야하며, 데이터를 가져오는 로직이 포함되어야합니다.
options: useQuery hook을 호출하는 데 사용되는 옵션 객체입니다.

예를 들어, 다음과 같이 사용할 수 있습니다.

import { useQuery } from 'react-query';

function App() {
  const { isLoading, error, data } = useQuery('todos', () =>
    fetch('https://jsonplaceholder.typicode.com/todos').then((res) =>
      res.json()
    )
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error has occurred: {error.message}</div>;

  return (
    <div>
      <h1>Todos</h1>
      {data.map((todo) => (
        <p key={todo.id}>{todo.title}</p>
      ))}
    </div>
  );
}

위의 예제에서는 useQuery를 사용하여

JSONPlaceholder API에서 Todos 데이터를 가져오고, 로딩 상태를 표시하고, 오류를 처리하고, 데이터를 렌더링합니다.

React-Query는 다양한 기능과 옵션을 제공하여 데이터 가져오기와 관리를 훨씬 더 쉽게 만듭니다.

예를 들어, 데이터 캐싱, refetching, infinite scrolling 등을 쉽게 처리할 수 있습니다.

(get은 useQuery)

2. useMutation

useMutation hook은 React-Query의 기능 중 하나로,

API 호출을 위한 새로운 데이터를 만들거나, 기존 데이터를 업데이트 또는 삭제하는 등의 동작을 수행할 때 사용됩니다.

다음은 useMutation hook을 사용한 예제입니다.

이 예제에서는 특정 ID를 가진 사용자를 삭제하는 API를 호출하고, 성공 또는 실패 시 사용자에게 알림 메시지를 보여줍니다.

(post, update, delete는 useMutation)

import { useMutation } from 'react-query';

function App() {
  const [deleteUserId, setDeleteUserId] = useState('');
  const { mutate, isLoading, isSuccess, isError, error } = useMutation(
    (id) =>
      fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
        method: 'DELETE',
      }).then((res) => res.json()),
    {
      onSuccess: () => {
        alert('User deleted successfully!');
        setDeleteUserId('');
      },
      onError: (error) => {
        alert('Error deleting user: ' + error.message);
      },
    }
  );

  const handleDeleteUser = () => {
    mutate(deleteUserId);
  };

  return (
    <div>
      <h1>Delete User</h1>
      <label>
        User ID:
        <input
          type="number"
          value={deleteUserId}
          onChange={(e) => setDeleteUserId(e.target.value)}
        />
      </label>
      <button onClick={handleDeleteUser}>Delete</button>
      {isLoading && <div>Loading...</div>}
      {isSuccess && <div>User deleted successfully!</div>}
      {isError && <div>Error deleting user: {error.message}</div>}
    </div>
  );
}

위의 예제에서는 useMutation hook을 사용하여 mutate 함수를 만들고, 해당 함수를 클릭 이벤트 처리기에 연결합니다.

mutate 함수는 사용자가 입력한 ID를 인자로 전달하고, API에서 데이터를 삭제합니다.

useMutation hook은 isLoading, isSuccess, isError와 같은 여러 상태값을 반환하므로,

이를 활용하여 요청 상태에 따른 알림 메시지를 사용자에게 보여줄 수 있습니다.

onSuccess와 onError 콜백 함수를 사용하여 각각 성공과 실패 시의 처리를 할 수 있습니다.

아래는 위의 코드를 커스텀 훅으로 추상화한 코드입니다.

import { useMutation } from 'react-query';

function useDeleteUser() {
  const [isLoading, setIsLoading] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
  const [isError, setIsError] = useState(false);
  const [error, setError] = useState(null);

  const deleteUser = useMutation(
    (id) =>
      fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
        method: 'DELETE',
      }).then((res) => res.json()),
    {
      onSuccess: () => {
        setIsLoading(false);
        setIsSuccess(true);
        setIsError(false);
        setError(null);
      },
      onError: (error) => {
        setIsLoading(false);
        setIsSuccess(false);
        setIsError(true);
        setError(error);
      },
    }
  );

  const handleDeleteUser = (id) => {
    setIsLoading(true);
    setIsSuccess(false);
    setIsError(false);
    setError(null);

    deleteUser.mutate(id);
  };

  return {
    isLoading,
    isSuccess,
    isError,
    error,
    handleDeleteUser,
  };
}

function App() {
  const [deleteUserId, setDeleteUserId] = useState('');
  const { isLoading, isSuccess, isError, error, handleDeleteUser } =
    useDeleteUser();

  return (
    <div>
      <h1>Delete User</h1>
      <label>
        User ID:
        <input
          type="number"
          value={deleteUserId}
          onChange={(e) => setDeleteUserId(e.target.value)}
        />
      </label>
      <button onClick={() => handleDeleteUser(deleteUserId)}>Delete</button>
      {isLoading && <div>Loading...</div>}
      {isSuccess && <div>User deleted successfully!</div>}
      {isError && <div>Error deleting user: {error.message}</div>}
    </div>
  );
}

위의 예제 코드를 useDeleteUser라는 custom hook으로 추상화하였습니다.

이렇게 추상화된 hook은 다른 컴포넌트에서도 사용할 수 있으며,

동일한 로직을 반복 작성할 필요가 없어 코드의 재사용성이 높아집니다.

useDeleteUser hook은 deleteUser mutation과 handleDeleteUser 함수를 반환합니다.

deleteUser mutation을 사용하여 API 호출을 수행하고,

handleDeleteUser 함수는 deleteUser.mutate를 호출하여 deleteUser mutation을 실행합니다.

이 함수는 isLoading, isSuccess, isError, error와 같은 상태값도 함께 반환합니다.

3. mutate

mutate 함수는 useMutation hook에서 반환되는 객체의 메서드 중 하나로,

mutation을 수동으로 트리거하는 데 사용됩니다.

mutate 함수는 mutation에 전달된 인수를 사용하여 API 호출을 수행하고, mutation 상태를 업데이트합니다.

mutate 함수는 다음과 같은 형태를 가집니다.

mutate(
  variables?: Variables, 
  options?: MutateOptions<Data, Error, Variables>
): Promise<Data>

variables: mutation에 전달될 변수입니다.
options: mutate 함수에 전달할 옵션입니다. useMutation hook의 options 객체와 유사합니다.
Promise<Data>: mutate 함수는 Promise를 반환하며, Promise가 성공하면 API에서 반환한 데이터를 포함한 객체가 반환됩니다.

mutate 함수에 variables와 options를 전달하여 API 호출을 수행할 수 있습니다.

variables는 mutation에 전달할 인수를 담은 객체입니다.

options는 useMutation hook의 options와 동일한 옵션을 가지며,

onSuccess, onError, onSettled와 같은 콜백 함수를 포함할 수 있습니다.

mutate 함수를 호출하면 React Query는 캐시된 데이터를 업데이트하고, 새로운 데이터를 가져와 캐시합니다.

이 때, useQuery hook과 마찬가지로 더 나은 사용자 경험을 위해 optimistic updates를 수행합니다.

이는 API 호출이 완료되지 않았을 때도 미리 데이터를 변경하여 UI를 업데이트함으로써 사용자가 보다 빠르게 응답하는 것을 가능하게 합니다.

코드 해석

export const useABCQuery = (params: ABCRequestParams) => {
  const queryKey = [ABC_API_PATH, params];

  return useQuery({
    queryKey,
    queryFn: () => getABCApi(params)
  })
}

useQuery hook은 첫 번째 인수로 query key를, 두 번째 인수로는 queryFn을 받습니다.

query key는 해당 쿼리를 식별하는 데 사용되며, 여기서는 [ABC_API_PATH, params]로 정의되어 있습니다.

이 값에 따라 유일한 식별자가 생성되어, 해당 쿼리에 대한 데이터를 캐싱하는 데 사용됩니다.

queryFn은 쿼리를 실행하는 함수로, 여기서는 getABCApi 함수를 사용하여 API를 호출하고 데이터를 반환합니다.

따라서 useABCQuery hook은 params에 따라 API에서 데이터를 가져와서

React Query의 캐시 기능을 사용하여 데이터를 관리하는 데 사용됩니다.

이를 통해 애플리케이션에서 데이터를 쉽게 관리할 수 있으며, 캐시 기능을 사용함으로써

네트워크 요청 수를 줄이고, 더 나은 성능을 제공할 수 있습니다.

4. 전역관리

React Query에서 관리하는 데이터는 전역으로 관리됩니다.

React Query는 컴포넌트 트리의 상위 레벨에서 QueryClient를 생성하고, 이를 사용하여 쿼리 결과를 저장하고 캐시합니다.

따라서 React Query를 사용하는 모든 컴포넌트는 동일한 QueryClient 인스턴스를 공유하여 데이터를 조회하고 업데이트할 수 있습니다.

이는 React Query가 동일한 데이터를 중복으로 불러오지 않도록 보장하고,

쿼리 결과를 캐시하고 업데이트하여 네트워크 요청 수를 줄이는 데 도움이 됩니다.

또한 React Query는 브라우저의 캐시와 같은 기존의 캐시 시스템을 보완하여 더욱 효율적인 데이터 관리를 제공합니다.

5. queryClient

import { QueryClient, QueryClientProvider, useQuery } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div>
        <h1>Books</h1>
        <BookList />
      </div>
    </QueryClientProvider>
  );
}

function BookList() {
  const { isLoading, error, data } = useQuery('books', fetchBooks);

  if (isLoading) return <p>Loading...</p>;

  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((book) => (
        <li key={book.id}>
          <h2>{book.title}</h2>
          <p>{book.author}</p>
        </li>
      ))}
    </ul>
  );
}

async function fetchBooks() {
  const response = await fetch('/api/books');
  const data = await response.json();
  return data;
}

위 예제에서는 QueryClient를 생성하여 QueryClientProvider 컴포넌트에 전달합니다.

이 컴포넌트는 React Query의 쿼리 클라이언트를 프로바이더로 제공하여 애플리케이션 전체에서 쿼리를 관리합니다.

BookList 컴포넌트에서는 useQuery hook을 사용하여 fetchBooks 함수를 호출하고, 이를 book라는 쿼리 키로 캐시합니다. isLoading 및 error 상태를 통해 데이터를 불러오는 동안 로딩 화면과 에러 메시지를 표시할 수 있습니다.

그리고 데이터가 로드되면 data 상태를 통해 결과를 렌더링합니다.

fetchBooks 함수에서는 실제로 /api/books API를 호출하여 데이터를 가져옵니다.

이 데이터는 QueryClient에 의해 캐시됩니다.

따라서 애플리케이션에서 책 목록을 요청할 때마다 서버에 다시 요청하지 않고, 이전에 가져온 데이터를 사용할 수 있습니다.

이와 같이 React Query의 QueryClient를 사용하면 쿼리 결과를 캐시하고 업데이트하여 더 나은 성능을 제공할 수 있습니다.

6. getQueryData, setQueryData

export const useABCQueryData = () => {
  const queryClient = useQueryClient()
  
  // getter
  const getQueryData = () => {
    return queryClient.getQueryData<ABCQueryData>(queryKey)
  }

  // setter
  const setQueryData = (updater: Updater<ABCQueryData | undefined, ABCQueryData | undefined>) => {
    queryClient.setQueryData(updater)
  }


  return {
    getQueryData,
    setQueryData
  }
}

위 코드는 React Query에서 useQueryClient hook을 사용하여 쿼리 클라이언트 객체를 가져와서 사용하는 예제입니다.

getQueryData 함수는 해당 쿼리 키에 대한 데이터를 가져오는 메서드입니다.

setQueryData 함수는 해당 쿼리 키에 대한 데이터를 설정하는 메서드입니다.

updater는 이전 데이터를 받아 새로운 데이터를 반환하는 함수이며, 업데이트를 수행하는 방법을 정의합니다.

useABCQueryData hook에서는 getQueryData와 setQueryData 함수를 반환합니다.

이 함수들을 사용하면 캐시된 데이터를 가져오고 업데이트할 수 있습니다.

import { useABCQuery } from 'path/to/useABCQuery';
import { useABCQueryData } from 'path/to/useABCQueryData';

function MyComponent() {
  const { data, isLoading } = useABCQuery();

  const { getQueryData, setQueryData } = useABCQueryData();

  const handleClick = () => {
    const currentData = getQueryData();

    // currentData에서 원하는 정보를 가공하여 새로운 데이터 생성
    const newData = { ...currentData, additionalInfo: 'some info' };

    // 기존 데이터 업데이트
    setQueryData(newData);
  };

  return (
    <>
      {isLoading && <div>Loading...</div>}
      {!isLoading && data && (
        <div>
          {/* 데이터 렌더링 */}
        </div>
      )}
      <button onClick={handleClick}>Update Data</button>
    </>
  );
}

위 코드에서는 useABCQuery hook을 사용하여 데이터를 가져오고,

useABCQueryData hook을 사용하여 setQueryData와 getQueryData 함수를 가져왔습니다.

handleClick 함수에서는 getQueryData 함수를 사용하여 현재 캐시된 데이터를 가져온 후,

해당 데이터를 가공하여 newData를 생성합니다.

그리고 setQueryData 함수를 사용하여 newData를 캐시에 업데이트합니다.

이렇게 setQueryData와 getQueryData 함수를 사용하면 쿼리 데이터를 가져오고 업데이트할 수 있습니다.

7. queryFn

queryFn은 useQuery hook에서 데이터를 가져오는 함수를 지정하는 옵션입니다.

이 함수는 Promise를 반환해야 하며, 해당 Promise가 resolve되면 데이터가 캐시에 저장됩니다.

이후 같은 쿼리가 호출되면 캐시된 데이터가 반환됩니다.

queryFn은 보통 API 호출을 하여 데이터를 가져오는 함수로 사용됩니다.

API 호출을 하는 함수를 queryFn으로 지정하면, 해당 함수는 쿼리를 호출할 때마다 API를 호출하여 데이터를 가져옵니다.

이때, queryFn은 호출 시 필요한 인자값들을 받을 수 있습니다.

아래는 queryFn을 사용하여 API 호출을 하는 예시 코드입니다.

import { useQuery } from 'react-query';
import axios from 'axios';

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

const fetchTodos = async (userId: number): Promise<Todo[]> => {
  const { data } = await axios.get(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`);
  return data;
};

const MyComponent = () => {
  const { data, isLoading, error } = useQuery(['todos', 1], () => fetchTodos(1));

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>
          {todo.title} - {todo.completed ? 'completed' : 'not completed'}
        </li>
      ))}
    </ul>
  );
};

위 코드에서는 useQuery hook을 사용하여 API에서 todos 데이터를 가져옵니다.

queryKey로 ['todos', 1]을 사용하고, queryFn으로 fetchTodos 함수를 사용합니다.

fetchTodos 함수는 userId를 인자로 받으며, 해당 userId로 API를 호출하여 데이터를 가져옵니다.

fetchTodos 함수는 Promise를 반환하므로, 해당 Promise가 resolve되면 데이터가 캐시에 저장되고,

이후 같은 쿼리가 호출되면 캐시된 데이터가 반환됩니다.

참고 : 위 설명들은 챗 gpt가 설명해준 내용입니다.

[css] clip-path polygon으로 원형 wheel 만들기 1탄

자바칩 프라푸치노 — Tue, 21 Mar 2023 17:44:08 +0900

코드펜에서 이런 작업물을 발견했습니다.

https://codepen.io/wheatup/pen/GbgyLY

Interactive Wheel Menu

Using javascript and css(non-svg) to make an hold-and-drag wheel menu....

codepen.io

마우스 클릭을 하면 동그란 휠이 나와서 마우스가 움직일 때 마다 위치에 있는 버튼이 튀어나오는 인터렉션입니다.

그런데 무엇보다 이 원형 모양을 css로 어떻게 만들었는지 궁금해서 css를 분석해보았습니다.

전체 코드는 링크에서 확인 바랍니다.

1. 테두리있는 조각난 원링 모양 만들기

각각의 버튼에 기본적으로 이러한 css가 있었습니다.

예상컨대 이것이 핵심인 것 같았습니다.

background-image: 
radial-gradient(circle at 0% 100%, 
transparent, 
transparent 29.5%, 
var(--color-border) 30%, 
var(--color-border) 30.5%, 
var(--color) 31%, 
var(--color) 50%, 
var(--color-border) 50.25%,
var(--color-border) 51.5%,
transparent 51.75%,
transparent);

무슨 뜻인지 모르니까 다른 색깔로 바꾸어서 확인해보겠습니다.

<div class="hi"/>

.hi{
  width:500px;
  height : 500px; 
  transform: translate(50%, 50%);
  background-image: radial-gradient(circle at 0% 100%, orange, gray 29.5%, pink 30%, blue 30.5%, yellow 31%, red 50%, purple 50.25%, green 51.5%, skyblue 51.75%, #DDF10B);
}

div를 하나 만들고 background image에 색깔을 다르게 설정해보았습니다.

gray 29.5는 gray가 100퍼센트가 되면 아래와 같이 div를 끝까지 채우게 되는데,

29.5퍼센트까지만 그려서 반원형을 만든 것이었습니다.

마찬가지로 pink 30, blue 30.5 .. 등등 도 반원형을 만드는 코드입니다.

0.5씩 늘려서 테두리를 만들고 있습니다.

그래서 다시 원래 코드에 transparent가 있는 부분에 transparent를 넣는다면 아래와 같이 됩니다.

원래 작업물을 보면 테두리는 색이 1개인데 왜 2가지로 나누어졌는지가 의문이 들었습니다.

그래서 두가지로 나누지 않고 테두리 부분을 1가지 색으로 바꿔보겠습니다.

  background-image: radial-gradient(circle at 0% 100%, 
  transparent, transparent 29.5%, 
  pink 30.5%, 
  red 50%,
  green 51.5%, 
  transparent 51.75%, transparent);

테두리 부분을 0.5씩 나누지 않고 그냥 1 차이를 두고 한가지 색상으로 설정을 해두었는데요,

뭔가 기준이 흐리멍텅하고 테두리 같지가 않습니다.

그렇다면 같은 색상으로 0.5씩 나누어서 줘보겠습니다 (원본 작업물과 같음)

오 이제 테두리 같습니다.

하지만 어딘가 좀 흐릿해보입니다.

그리하여 다음 색상과의 텀이 없도록 숫자를 조정하였습니다.

    background-image: radial-gradient(circle at 0% 100%, 
    transparent, transparent 29.5%, 
    pink 29.5%, pink 30.5%, 
    red 30.5%, red 50%, 
    green 50%, green 51.5%, 
    transparent 5.5%, transparent);

그랬더니 이제 진한 테두리가 되었습니다.

2. 원링을 8개 만들기

하지만 이제 보니 이 비율이라면 다른색상 휠 4개밖에 못만들겠군요. (4분의 1 원이기 때문에)

어떻게 8개로 원을 만들었는지 다시 코드를 확인해보았습니다.

clip-path: polygon(0 0, 0 99%, 99% 0);

clip-path polygon이라는 코드가 있었네요. 이건 처음봅니다..!

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

clip-path - CSS: Cascading Style Sheets | MDN

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

developer.mozilla.org

폴리곤은 다각형을 만드는 코드입니다.

polygon(시계방향 꼭지점)
clip-path: polygon(좌측 상단, 우측 상단, 우측 하단, 좌측 하단);

이렇게 값을 주는 건데

위 코드는 예상하기로는 아래와 같이 삼각형대로 잘라서 삼각형 안에 있는 모습만 보여주도록 하는 코드인 것 같습니다.

알고 쓰려면 엄청난 연마가 필요할듯..

3. 결과

자 결론은..!

div 8개를 만들고

각각의 div에 동일한 clip-path를 주고

각자 rotate를 시켜주면 8개의 wheel을 만들 수 있습니다.

(8개이므로 360 나누기 8 을 해서 45도씩 회전시킵니다.)

<완성>

<코드>

html

<div class="wheel">
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
</div>

css

.wheel{
  width:500px;
  height : 500px; 
  transform: translate(50%, 50%);
  
}
.wheel .child {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  opacity: 0.8;
  transform-origin: 0% 100%;
  clip-path: polygon(0 0, 0 99%, 99% 0);
}

.wheel .child:nth-child(1) {
  transform: rotate(-22.5deg);
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, pink 30%, pink 30.5%, red 31%, red 50%, green 50.25%, green 51.5%, transparent 51.75%, transparent);

}
.wheel .child:nth-child(2) {
  transform: rotate(22.5deg);
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, yellow 30%, yellow 30.5%, blue 31%, blue 50%, purple 50.25%, purple 51.5%, transparent 51.75%, transparent);

}
.wheel .child:nth-child(3) {
  transform: rotate(67.5deg);
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, pink 30%, pink 30.5%, red 31%, red 50%, green 50.25%, green 51.5%, transparent 51.75%, transparent);
}
.wheel .child:nth-child(4) {
  transform: rotate(112.5deg);
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, yellow 30%, yellow 30.5%, blue 31%, blue 50%, purple 50.25%, purple 51.5%, transparent 51.75%, transparent);
}
.wheel .child:nth-child(5) {
  transform: rotate(157.5deg);
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, pink 30%, pink 30.5%, red 31%, red 50%, green 50.25%, green 51.5%, transparent 51.75%, transparent);
}

.wheel .child:nth-child(6) {
  transform: rotate(202.5deg);
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, yellow 30%, yellow 30.5%, blue 31%, blue 50%, purple 50.25%, purple 51.5%, transparent 51.75%, transparent);
}

.wheel .child:nth-child(7) {
  transform: rotate(247.5deg);
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, pink 30%, pink 30.5%, red 31%, red 50%, green 50.25%, green 51.5%, transparent 51.75%, transparent);
}

.wheel .child:nth-child(8) {
  transform: rotate(292.5deg);
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, yellow 30%, yellow 30.5%, blue 31%, blue 50%, purple 50.25%, purple 51.5%, transparent 51.75%, transparent);
}

다음 포스팅에서는 react 컴포넌트로 만들어서 변수로 rotate를 하고 background image를 설정 해보겠습니다 ~!

그리고 돌아가는 휠도 만들어보겠습니다.

[TIL] 20230315 volta로 노드 버전 바꾸기/ vue attrs / boolean vs Boolean

자바칩 프라푸치노 — Fri, 17 Mar 2023 17:22:40 +0900

1. node 버전이 안바뀌는 이유

한 프로젝트에서는 노드를 14버전을 써야해서 노드 버전을 바꿔야했다.

노드 버전을 바꾸어도 변경이 안되었는데 그 이유는

volta에서 노드를 잡고 있어서 그렇다

volta install node@14

이렇게 하여 해결했다.

2. vue $attrs

https://hasudoki.tistory.com/entry/Vuejs-%EC%83%88%EB%A1%9C%EC%9A%B4-v-model-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B04-attrs-listeners

[Vue.js] 새로운 v-model 살펴보기#4 ($attrs, $listeners)

2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) 2021/01/28 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#2 (다수의 v-model 사용하기) 2021/01/31 - [개발일기/Vue.js] - [Vue

hasudoki.tistory.com

vue 에서 부모가 class와 style을 제외하고 모든 속성을 넘겨주는 것

3. boolean 과 Boolean 타입의 차이점

https://stackoverflow.com/questions/1295170/whats-the-difference-between-boolean-and-boolean-in-java

What's the difference between boolean and Boolean in Java?

I would like to understand the difference between the Boolean and boolean types in Java, specifically as they relate to GWT. I know that methods are not supported but I want more info if it is avai...

stackoverflow.com

https://pythontoomuchinformation.tistory.com/493

Boolean과 boolean의 차이 = 참조타입과 원시타입의 차이

우선, Boolean과 boolean의 차이를 알아보자. Boolean (참조타입; reference type) true, false, null 값을 가진다. ∴ Null 체크를 필요로할 때 참조형을 사용하자. boolean (원시타입; primitive type) true, false 값을 가진

pythontoomuchinformation.tistory.com

boolean은 true, false의 값을 가진다.

Boolean은 추가로. null값을 가진다.

[TIL] 20230306 패키지 잠금/ vue setup / vue filter/react custom hook

자바칩 프라푸치노 — Tue, 7 Mar 2023 17:51:48 +0900

1. package-lock.json / 패키지 잠금

package-lock.json

https://oneroomtable.tistory.com/entry/packagejson-파일이란-무엇이며-어떤-역할을-할까요

패키지 잠금

https://www.daleseo.com/js-package-locks/

패키지 잠금 파일 (package-lock.json, yarn.lock)

Engineering Blog by Dale Seo

www.daleseo.com

작업 시점에 따라서 패키지를 설치할 때 작업자마다 다른 버전을 설치하게 될 수도 있는데

package-lock.json에 명시가 되어있으면 모든 작업자가 같은 버전의 패키지를 설치할 수 있도록 보장받을 수 있다.

2. Vue setup

https://kyounghwan01.github.io/blog/Vue/vue3/composition-api/#computed-watch

vue3 composition api 사용법, vue, computed, reactive, ref, watch, watchEffect, props, vuex, composable

kyounghwan01.github.io

3. Vue filter

https://v2.ko.vuejs.org/v2/guide/filters.html

필터 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

v2.ko.vuejs.org

4. react custom hook

https://ko-de-dev-green.tistory.com/71

custom hook 이란? React hooks custom hook 이란?

custom hook 이란? React hooks custom hook 이란? 오늘은 짧게 리액트 훅에서 커스텀 훅을 알아보겠습니다. 커스텀 훅이란 말 그대로 개발자가 스스로 커스텀 한 훅을 말합니다. 예를 들면 useState, useEffect,

ko-de-dev-green.tistory.com

5. 임의의 랜덤값 생성하기

https://jookipedia.tistory.com/22

임의의 랜덤값 생성하기

개발하는 과정에서 임의의 랜던값을 생성해서 PK값인 ID 값으로 사용 할때가 종종 발생하여 오늘은 임의의 랜던 값 생성 하는 방법에 대하여 정리한다. RandomStringUtils를 이용한 랜덤 문자열 생성 -

jookipedia.tistory.com

[React/next/ts] react로 라이브러리 없이 달력 구현하는 법

자바칩 프라푸치노 — Fri, 24 Feb 2023 17:03:14 +0900

오늘은 달력을 만들어볼 것이다.

달력 만드는 것이 너무 어려워서 챗 gpt한테 코드 좀 작성해달라했는데..

정말 뭔가 잘 작성해주었지만..

프리미엄이 아니라서 끝까지 볼 수 없었다.

그래서 그냥 내가 했다.

1) 요일 만들기

빨간 줄 쳐진 요일 부분을 만들어보겠다.

이 달력 만드는 것 중에 가장 쉬운 부분은 여기다. 그래서 이거부터 하겠음.

const DayoftheWeek = () => {
  const date = ["일", "월", "화", "수", "목", "금", "토"];

  return (
    <thead className="days rows flex justify-center my-[10px]">
      <tr>
        {date.map((p) => {
          return (
            <th className="col w-[50px] text-center" key={p}>
              {p}
            </th>
          );
        })}
      </tr>
    </thead>
  );
};

export default DayoftheWeek;

요일 배열을 만들어주고 map돌려서 보여주면 된다.

아주 쉽죠잉?

2) 현재 월에서 뒤로가기 앞으로 가기 구현하기

다음에 구현할 것은 2023년 2월 (현재 달) 에서 이전 달로 이동, 다음 달로 이동하는 것을 만들어보겠다.

import { addMonths, startOfMonth, startOfWeek, subMonths } from "date-fns";
import { useState } from "react";
import CalendarHeader from "./CalendarHeader";
import CalendarTable from "./CalendarTable";

const Calendar = () => {
//현재 보고 있는 달
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState(new Date());

//이전 달로 이동(currentMonth가 이전 달로 바뀜)
  const prevMonth = () => {
    setCurrentMonth(subMonths(currentMonth, 1));
  };
  
//다음 달로 이동(currentMonth가 다음 달로 바뀜)
  const nextMonth = () => {
    setCurrentMonth(addMonths(currentMonth, 1));
  };
  const onDateClick = (day: React.SetStateAction<Date>) => {
    setSelectedDate(day);
  };
  const monthStart = startOfMonth(currentMonth);
  const startDate = startOfWeek(monthStart);

  return (
    <div className="flex flex-col justify-center">
      <CalendarHeader
        currentMonth={currentMonth}
        prevMonth={prevMonth}
        nextMonth={nextMonth}
      />
      <CalendarTable currentMonth={currentMonth} selectedDate={selectedDate} />
    </div>
  );
};

export default Calendar;

이 코드가 캘린더 전체 코드인데, 이번에 구현하고자 하는 부분이 CalendarHeader 컴포넌트 이다.

CalendarTable은 일단 무시하라.

부모 컨포넌트에서 현재 달을 구하고 prevMonth와 nextMonth로 가는 메서드를 구현했다.

왜냐하면 같은 currentMonth를 밑에오는 CanlendarTable컴포넌트와 공유해야하기 때문이다.

import React from "react";
import { format } from "date-fns";

import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";

interface CalendarHeaderProps {
  currentMonth: Date;
  prevMonth?: () => void;
  nextMonth?: () => void;
}
const CalendarHeader = ({
  currentMonth,
  prevMonth,
  nextMonth,
}: CalendarHeaderProps) => {
  return (
    <div className="flex justify-center m-[20px]">
      <button onClick={prevMonth}>
        <ArrowBackIosIcon sx={{ fontSize: "12px" }} />
      </button>
      <span className="m-[20px] text-[20px]">
        {format(currentMonth, "yyyy")}년{' '}
        <span>{format(currentMonth, "M")}월</span>
      </span>
      <button onClick={nextMonth}>
        <ArrowForwardIosIcon sx={{ fontSize: "12px" }} />
      </button>
    </div>
  );
};

export default CalendarHeader;

CalendarHeader는 이런 모습이다.

arrow버튼을 두어서 클릭을 할 때마다 위에서 본 부모의 메서드를 호출해서 사용하고 있다.

여기까지는 쉽다.

3) 달력에 날짜 표시하기

방법)

[1] 현재 보고 있는 달이 시작하는 날을 구한다. (2월 1일이 수요일이라는 사실을 구한다.)

[2] 현재 보고 있는 달이 끝나는 날을 구한다. (2월이 28일까지 있고 그것은 화요일이라는 사실)

[3] 맨 첫번째 칸의 날짜를 구한다(1월 29일이다)

[4] 맨 마지막 칸의 날짜를 구한다(3월 4일이다)

[5] 3번에서 구한 처음 날부터 7개까지 한 배열로 묶는다. 그걸 끝날때 까지 반복한다.

[6] 그리고 다른 배열에 그 배열들을 넣는다. (이차원 배열이 된다.)

예를 들면 아래와 같은 배열이 만들어진다.

[[29, 30, 31, 1, 2, 3, 4],
 [5, 6, 7, 8, 9, 10, 11],
 [12, 13, 14, 15, 16, 17, 18],
 [19, 20, 21, 22, 23, 24, 25],
 [26, 27, 28, 1, 2, 3, 4],
]

[7] 그것을 렌더링한다.

[8] 오늘 날짜랑 비교해서 오늘은 다른 색을 넣어준다.

[9] 현재 보고 있는 달과 비교해서 달이 다르면 투명한 글자를 넣어준다.

const CalendarTable = ({ currentMonth, selectedDate }: CalendarProps) => {
  return (
    <table className="calendar text-[16px]">
      <DayoftheWeek />
      <Tbody>
        <Tr currentMonth={currentMonth} selectedDate={selectedDate} />
      </Tbody>
    </table>
  );
};

아까봤던 CalendarTable 컴포넌트이다.

table 태그로 만들었다.

DayoftheWeek 컴포넌트는 위에서 했던 요일 만드는 컴포넌트이다.

Tbody부터 확인해보자.

interface TbodyProps {
  children: ReactNode;
}

const Tbody = ({ children }: TbodyProps) => {
  return <tbody className="body">{children}</tbody>;
};

별거없이 tbody 태그에 children만 넣어주고 있다.

Tr태그로 가보자.

interface CalendarProps {
  currentMonth: Date;
  selectedDate: Date;
}
interface WholeDateArray {
  date: Date;
  formattedDate: string;
}

const Tr = ({
  currentMonth,
  selectedDate,
}: PropsWithChildren<CalendarProps>) => {
  const monthStart = startOfMonth(currentMonth); //현재 보고 있는 달의 시작하는 날
  const monthEnd = endOfMonth(monthStart); //현재 보고 있는 달의 끝나는 날
  const startDate = startOfWeek(monthStart); //현재 보고 있는 달력에서 맨 앞칸
  const endDate = endOfWeek(monthEnd); //현재 보고 있는 달력에서 마지막 칸

 // 한달에 몇 주인지 체크
  const countOfWeek = Math.ceil(differenceInDays(endDate, startDate) / 7);

  let day = startDate;

//이차원 배열 
  let wholeDate: WholeDateArray[][] = [];
  for (let i = 0; i < countOfWeek; i++) {
    let arr: WholeDateArray[] = [];
    //7번 반복
    for (let j = 0; j < 7; j++) {
    //추후에 날짜를 선택해서 저장할 것을 고려하여 date정보와 format된 정보를 객체로 저장했다.
      arr.push({
        date: day,
        formattedDate: format(day, "d"),
      });

	//날짜를 다음날로 옮긴다.
      day = addDays(day, 1);
    }
    
    //위에서 만든 길이 7짜리 배열을 이차원 배열에 넣음
    wholeDate.push(arr);
  }

  return (
    <>
      {wholeDate.map((p) => {
        return (
          <tr className="row flex justify-center" key={Math.random()}>
            <Td weekDate={p} currentMonth={currentMonth}></Td>
          </tr>
        );
      })}
    </>
  );
};

Td태그로 가보자

interface TdProps {
  weekDate: WholeDateArray[];
  currentMonth: Date;
}

const Td = ({ weekDate, currentMonth }: TdProps) => {
  return (
    <>
      {weekDate.map((p) => {
        const isToday =
          format(new Date(), "yyyy-M-d") === format(p.date, "yyyy-M-d");

        const isThisMonth =
          format(currentMonth, "yyyy-M") === format(p.date, "yyyy-M");
        return (
          <td
            key={p.formattedDate}
            className={`w-[50px] text-center h-[80px] ${
              !isThisMonth && "text-transparent"
            }`}
          >
            <span className={`${isToday && "text-[#663399]"}`}>
              {p.formattedDate}
            </span>
          </td>
        );
      })}
    </>
  );
};

여기서 날짜를 실질적으로 보여주는 코드가 있다.

그리고 돌때마다 오늘인지와, 보고 있는 달이 맞는지를 확인해주는데

이게 이렇게 해도 되는 건지는 모르겠다.

확인 후 텍스트 색깔을 바꿔준다.

4) 결과 화면

달력을 만드는 것에 대해 되게 엄두를 못내고 있었는데, 라이브러리가 내 맘대로 디자인을 할 수 없어서 직접 구현하기로 했다.

처음에는 너무 이해가 안됐는데 다 만들고 난 지금은 왜 이해가 안됐지? 하는 생각이 든다.

그런데 props로 넘기는 것도 너무 많고 코드가 복잡해서 전역 상태를 사용해볼까 싶다.

다음 번에는 더 깔끔한 코드로 리팩토링을 해서 와보겠다.