코딩연습장

SnapRoad에서 SignedUrl을 사용한 이유

공대탈출 — Mon, 18 Nov 2024 01:24:37 +0900

SnapRoad 서비스는 어떤 서비스인가?

SnapRoad는 private 그룹을 통해 개인, 그룹의 여행 기록과 사진, 텍스트를 그룹원들만 볼 수 있도록 안전하게 공유하는 서비스입니다. supabase의 private storage와 signed url은 snaproad의 특징인 프라이빗 그룹을 위한 개인정보 보호와 보안성을 구현하는데 핵심 역할을 한다.

왜 Signed Url을 사용했나?

Supabase의 storage는 기본적으로 public, private 버킷을 제공하며, private 버킷은 인증된 요청만 접근할 수 있다. 하지만 하기 이유로 signed url을 사용한다.

프라이빗 스토리지의 안전성 유지
- 버킷의 파일을 노출시키지 않고, 지정된 유효시간 동안 특정 url으로만 접근을 허용한다.
- 사용자 인증 후 접근 권한을 제한하여 파일을 제공하기 때문에 데이터를 안전하게 보호할 수 있다.
일회성 링크로 효율적인 보안 관리
- 지정된 유효시간동안 url이 유효하고, 만료 시 사용이 불가하다.
- 비인가 사용자가 url을 비정상적인 경로로 획득하더라도 만료 시간이 지나면 접근이 불가하다.
API 호출 간소화
- 클라이언트에서 복잡한 인증 절차 없이 링크를 통해 파일을 바로 불러올 수 있다.
- 이를 통해 UX를 개선하고, 보안을 유지할 수 있다.

Supabase SignedUrl 사용법

먼저 1개의 파일에 대한 url을 받아와야할 때는 createSignedUrl을 사용한다.

supabase에서 제공받은 토큰값은 쿠키로 관리하여 요청시 자동으로 요청헤더에 들어간다. 그 값을 통해 자동으로 url에 넣어 요청url을 만들어 준다. 인자로 path와 파일명을 묶은 문자열, url의 유효기간으로 설정할 값을 넣어서 요청을 보내 사용한다.

const { data, error } = await supabase
  .storage
  .from('avatars')
  .createSignedUrl('folder/avatar1.png', 60)
  
// response
// https://example.supabase.co/storage/v1/object/sign/avatars/folder/avatar1.png?token=<TOKEN>

두번째로 여러 signedurl생성을 한 요청으로 보내기 위한 createSignedUrls이다. Promise.all이나 allsetteled를 사용하여 여러 createSignedUrl 요청을 하나로 묶어 보내도 되지만, HTTP1에서는 한번의 요청이 6개로 제한되기 때문에 첫 로딩에 사용하게 되면 성능이슈가 생길 수 있다. 따라서 여러 signedUrl을 받아야한다면 createSignedUrls가 적절하다.

signedUrl을 사용했던 것과 비슷하게 여러 문자열을 배열로 묶어 유효기간과 함께 보내면 배열 형태로 url묶음을 응답으로 보내준다.

const { data, error } = await supabase
  .storage
  .from('avatars')
  .createSignedUrls(['folder/avatar1.png', 'folder/avatar2.png'], 60)

// response
// [
//  {
//    "error": null,
//    "path": "folder/avatar1.png",
//    "signedURL": "/object/sign/avatars/folder/avatar1.png?token=<TOKEN>",
//    "signedUrl": "https://example.supabase.co/storage/v1/object/sign/avatars/folder/avatar1.png?token=<TOKEN>"
//  },
//  {
//    "error": null,
//    "path": "folder/avatar2.png",
//    "signedURL": "/object/sign/avatars/folder/avatar2.png?token=<TOKEN>",
//    "signedUrl": "https://example.supabase.co/storage/v1/object/sign/avatars/folder/avatar2.png?token=<TOKEN>"
//  }
// ]

하지만 js에서 createSignedUrls는 큰 단점이 하나 있다.

단일 url생성인 createSignedUrl은 transform옵션을 사용하여 이미지 파일 형식(jpg, png, webp, avif, ...)으로 변경하거나, width, height, quality, resize를 사용하여 이미지의 크기를 변경할 수도 있다.

기본적인 createSignedUrl은 이미지 파일의 퀄리티를 80%로 낮춰 사용자에게 보내주어 어느정도 최적화가 된 상태이다.

현재 SnapRoad의 signedUrl 요청 흐름도 / 최적화 예정 내역

현재 SnapRoad에서 signedUrl을 생성하는 흐름도는 위와 같다.

테이블 데이터를 받아와 테이블에 저장된 이미지 파일명을 받아오고, 그 파일명을 배열로 묶어 createSignedUrls를 통해 이미지 요청 경로를 받아온다.

Baas로 Supabase를 사용하다보니 이런 백엔드 서비스로직을 프론트에서 구현해야하여 요청이 나눠진 상태인데, 이를 sql function을 만들어 아예 처음부터 이미지 파일명이 아닌 signedUrl으로 만들어 클라이언트서버에 보내주는 것으로 최적화를 진행할 예정이다.

또한 createSignedUrls는 이미지 확장자나 퀄리티 지정과 같은 최적화를 사용할 수 없어 해당 부분도 같이 최적화를 진행할 예정이다.

최적화 후 예상 요청 흐름도는 아래와 같다.

불필요한 요청흐름을 제거하면 큰 성능향상이 이뤄질 것으로 예상되며, 각 이미지의 최적화 로직또한 supabase에서 제공해주기 때문에 이미지 src요청에서도 성능향상과 최적화가 이뤄질 것이라고 생각한다.

말이안되는 요청코드 rpc로 쉽게? 해결하기

공대탈출 — Sat, 26 Oct 2024 01:38:44 +0900

최종 프로젝트 중 그룹 리스트페이지에서 랜덤한 이미지를 보여줘야할 필요가 있었다.

우리 프로젝트의 erd였는데
내가 원하는 기능은 이것이었다.
1. 로그인한 유저의 id로 user_group에서 유저가 속한 그룹 랜덤하게 가져오기
2. 가져온 그룹 id를 통해 post테이블에서 해당 그룹에서 생성된 게시글의 대표 이미지 파일명 가져오기
3. 가져온 대표 이미지 파일명을 createSignedUrl을 통해 프라이빗한 이미지 url생성하기
4. 그걸 특정 시간마다 재실행하여 이미지를 계속 변경시키기
근데 supabase-js에는 랜덤하게 하나만 가질 수 있는 기능은 제공되지 않고 있었다....
그래서 일단 차선책으로 아래와 같이 구현해보았다.
1. 로그인한 유저의 id로 user_group에서 유저가 속한 그룹 10개 가져오기
2. 그룹 10개를 랜덤하게 sort하기
3. sort된 배열을 promise.allsettled를 사용하여 post_image_name 가져오기
4. 완료된 promise배열중 status가 fulfilled인 값만 필터링하기
5. 필터링된 배열에 signedurl생성하는 함수를 각각 promise.all사용
6. url배열 완성!
끔찍한 로직
```javascript
const groupLists = await getGroupPostLists(userId);
if (groupLists.length === 0) return null;
//랜덤순으로 그룹리스트 정렬
const randomGroupIds = groupLists.sort(() => Math.random() - 0.5);
const PostsList = await Promise.allSettled(
  randomGroupIds.map(async ({ group_id }) => await getPostListsByGroupId(group_id)),
);
const fulfilledLists = PostsList.filter((el) => el.status === 'fulfilled');
const ImageLists = await Promise.all(
  fulfilledLists.map((fulfilled) =>
getSignedImgUrl('tour_images', 60 * 10, `group_name/${fulfilled.value.post_thumbnail_image}`),
  ),
);
```

페이지 이동 후 첫 로직이 3초나 걸린다...
이건 sql을 무조건 써야할거같다는 생각이 듦
1. rpc로 요청을 보내서 post가 있는 group_id를 랜덤하게 하나만 가져온다.
2. post테이블에 group_id로 작성된 post를 랜덤하게 하나만 가져온다.
3. 가져온 이미지파일 하나를 url로 변환한다.
sql문법을 두번만 작성하면 로직이 매우 간단해지고 성능도 오르지 않을까 라는 생각에 해보았다.
근데 내가 어떻게 sql 문법을 작성하나
구글링을 해보고 스택오버플로우에 비슷한 사례가 있는지 검색해보고
gpt한테 물어도 보고 파파고를 사용해 supabase ai와도 대화를 해봤지만
gpt는 테이블 구조를 이해못하고 supabase ai는 아직 좀 부족해서 해결을 못해주었다.

이걸 튜터님한테 들고가면 도대체 뭔 소리를 들을까 싶다가도 아무리생각해도 첫로딩에 3초가 걸리는건 좀 아니다 싶어 들고갔다

3160ms -> 89ms
jesus

```sql
begin
  return query
    select p.post_thumbnail_image
    from public.post p
         , (
            select p.post_id, count(1)
            from public.post p
            where p.user_id = input_user_id  -- 동적 user_id 파라미터 적용
            group by p.post_id
            having count(1) > 0
         ) cal_p
    where p.post_id = cal_p.post_id
    limit 5;
end;
```
뭔가 같은 데이터만 들어오길래 봤더니 내 게시물의 이미지만 받아오는 거였음
그래서 두번의 rpc를 사용하기로 함
```sql
SELECT user_group.group_id
FROM user_group
JOIN profiles ON profiles.user_id = user_group.user_id
JOIN post on post.group_id = user_group.group_id
WHERE profiles.user_id = insert_user_id
ORDER BY RANDOM()
LIMIT 1;
```
```sql
begin
  return (
    select p.post_thumbnail_image
    from public.post p
    where p.group_id = input_group_id
    order by random()
    limit 1
  );
end;
```
처음 user_id를 넣어서 속한 그룹중 post가 있는 group_id를 받아오고
받아온 group_id로 post 중 랜덤한 하나의 썸네일 이미지를 받아온다.
```jsx
  useEffect(() => {
    const refetchInterval = setInterval(() => {
      refetch();
    }, 1000 * 10);
    refetchInterval;
    return () => clearInterval(refetchInterval);
  });
```
그렇게 받아온 데이터를 10초에 한번씩 다시 refetch해준다.

정상작동함...ㅠㅠ
근데 infinitequery가 6개씩받아오고, 이미지가 1개씩 받아와야해서 6개의 HTTP요청에 제한이 걸려 해당부분을 해결해야할것도 같다.

infiniteQuery부분의 promise.all을 사용한 createSignedUrl도 합칠수있으면 합치면 좋을 것 같고

변하는 이미지 부분도 한 rpc에서 createSignedUrl로 변경할 수 있으면 매우 좋을 것 같다.

지금 상황이 그냥 한글을 보고 읽을수있는데 뜻을 모르는 상황같다.

뭐 FE개발트랙에서 배워야할 이유는 없는 것이지만 알아둬서 나쁠 이유는 없다고 본다.

baas사용 프로젝트 rpc를 사용해서 성능 최적화를 이끌어냈다는게 나쁜건 아닐거라고 생각한다.

24.10.22 supabase OAuth 관련 에러 수정

공대탈출 — Tue, 22 Oct 2024 01:43:42 +0900

1. 문제발생

OAuth관련 설정 후 소셜로그인 하여도 에러가 발생하는 문제

2. 원인추론

깃허브와 supabase관련 데이터 입력이 잘못되었나?
Auth를 팔 때마다 깃허브 OAuth Apps의 키를 새로 발급받아야 하나?

3. 해결방안

두 추론 모두 해결되지 않아서 네트워크 탭의 에러코드와 메시지를 파악함
확인해보니 에러코드가 500번

해당 에러는 데이터베이스 로그를 식별해보라하여 DB의 Log를 확인해봄

{"component":"api","error":"failed to close prepared statement: 
ERROR: current transaction is aborted, commands ignored until end of transaction block 
(SQLSTATE 25P02): 
ERROR: null value in column \"avatar_url\" of relation \"users\" violates not-null constraint (SQLSTATE 23502)",
"level":"error","method":"GET","msg":"500: Database error saving new user",
"path":"/callback","referer":"http://localhost:3000/","remote_addr":"218.148.199.243",
"request_id":"8d62a1a0d7c3d1e3-ICN","time":"2024-10-21T16:30:18Z"}

{"component":"api","error":"failed to close prepared statement: 
ERROR: current transaction is aborted, commands ignored until end of transaction block (SQLSTATE 25P02): 
ERROR: column \"image_url\" of relation \"users\" does not exist (SQLSTATE 42703)",
"level":"error","method":"POST","msg":"500: Database error saving new user",
"path":"/signup","referer":"http://localhost:3000","remote_addr":"1.227.78.56",
"request_id":"8d629c9e15a0d1f3-ICN","time":"2024-10-21T16:26:52Z"}

확인해 보니 users테이블의 image_url column이 없는 것과 avatar이 Nullable하지 않은 것이 문제로 파악되어 해당 부분 추가 및 수정

4. 결과

정상로그인 성공함

24.10.20 NextJS react-hook-form Zod

공대탈출 — Sun, 20 Oct 2024 01:29:08 +0900

Zod라이브러리는 간단한 구조부터 복잡한 구조까지 타입검증을 도와주는 라이브러리이다.

https://zod.dev/

GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference

TypeScript-first schema validation with static type inference - colinhacks/zod

github.com

npm i zod
yarn/pnpm add zod

import { z } from "zod";

z를 가지고 schema를 만든다.

const signInSchema = z.object({
    email: z.string().email({ message: "invalid email" }),
    password: z.string(),
});

이렇게 이메일이 string, email형식임을 미리 선언하고 비밀번호가 string임을 미리 선언해서 스키마를 만들어둔다.

const onSubmit = (value: FieldValues) => {
    signInSchema.parse(value);
};

버튼을 눌렀을 때 기존에 유효성 검사를 하던 것을 어느정도는 대신해주는 역할이다.

저 파싱 작업을 콘솔로 찍었을 때 만약 파싱을 통과한다면 value객체 자체를 보여준다.

실패한다면 ZodError를 반환해준다.

이곳에서 지정해준 메시지를 에러속에 담아서 리턴해주는 것을 알 수 있다.

TypeScript는 컴파일타임에 모두 js로 바꿔주는데 zod는 런타임에도 타입에 관련된 에러를 나타내준다.

따라서 우리가 유저이벤트같은 예기치 못한, 처리하지 못하는 런타임중의 타입검증을 할 수 있다.

그러면 react-hook-form의 패턴매칭, 필수값 등의 옵션이나 zod의 런타임 타입검증을 합치기 위해서는 resolver가 필요하다.

pnpm add @hookform/resolvers

import { zodResolver } from "@hookform/resolvers/zod";

라이브러리로부터 zodResolver를 가져와주고

const { register, handleSubmit, formState } = useForm({
    mode: "onChange",
    defaultValues: {
        email: "test@test.com",
        password: "",
    },
    resolver: zodResolver(signInSchema),
});

useForm 안에 resolver속성에 zodResolver를 넣고, 그 안에 미리 만들어둔 스키마를 집어넣는다.

이렇게 설정해두면 react-hook-form과 연결되어 처리가 가능하다.

const signInSchema = z.object({
    email: z
        .string({
            message: "email required",
        })
        .min(1, { message: "minimum length is 1" })
        .max(10, { message: "maximum length is 10" })
        .email({ message: "invalid email" }),
    password: z.string(),
});

이런식으로 처리해두면 길이나 타입이나 형식같은 유효성검사에 따른 다양한 메시지를 처리해줄 수 있다.

확실히 사용성은 좋은 것 같다.

24.10.19 NextJS react-hook-form

공대탈출 — Sat, 19 Oct 2024 22:49:05 +0900

"use client";

import { useState } from "react";

const SignInForm = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
      }}
      className="flex flex-col gap-4 p-5 items-center w-full m-auto"
    >
      <div className="flex flex-col gap-2">
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
          className="text-black"
        />
      </div>

      <div className="flex flex-col gap-2">
        <label htmlFor="password">Password</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
          className="text-black"
        />
      </div>
      <button
        className="bg-gray-800 text-white px-4 py-2 rounded-md"
        type="submit"
      >
        Sign In
      </button>
    </form>
  );
};

export default SignInForm;

전형적인 리액트의 로그인 컴포넌트이다.

useState로 아이디 비밀번호 state를 만들어주고, 제어 컴포넌트로 값의 변화마다 리렌더링 시켜준다.

단순 로그인 페이지면 어느정도 볼만하겠지만, 회원가입이나 혹은 input이 굉장히 많은 페이지에선 절대적인 코드의 양이 어마무시하게 많아진다.

state생성, state핸들링, submit함수, submit전 데이터 전처리, 각 state에 대한 유효성 검사 등...

무엇보다도 한 state가 변화할때마다 해당 state와 연관된 모든 컴포넌트, 그 자식 컴포넌트가 모두 리렌더링 되는 것이다.

그리하여 그러한 코드의 양을 줄일 수 있고, 리렌더링관리를 쉽게 할 수 있는 react-hook-form을 사용해보고자 한다.

npm i react-hook-form
yarn/pnpm add react-hook-form

1. useForm, handleSubmit

"use client";

import { useForm } from "react-hook-form";

const SignInForm = () => {
    const { register, handleSubmit, formState } = useForm();

    const onSubmit = () => {};

    return (
        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4 p-5 items-center w-full m-auto">

라이브러리를 설치하고 useForm을 가져와서 그 안의 register, handleSubmit, formState를 가져와준다.

그리고 submit을 위한 onSubmit함수를 생성해주고, form태그의 onSubmit에 handleSubmit으로 감싸서 넣어준다.

import { FieldValues, useForm } from "react-hook-form"

const onSubmit = (value: FieldValues) => {
  console.log(value)
};

onSubmit에서는 value를 인자로 받아주고 타입은 react-hook-form의 FieldValues를 지정해준다.

2. register

<input
    id="email"
    type="email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    placeholder="Email"
    className="text-black"
/>

기존에 우리는 다양한 input에 value, onChange를 사용해 state를 관리해주었다.

이제는 useForm이 제공해주는 register을 사용하면 된다.

<input
    {...register("email", {
        required: true,
        pattern: {
            value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: "Invalid email address",
        },
    })}
    id="email"
    type="email"
    placeholder="Email"
    className="text-black"
/>

기존 value, onChange를 제거하고 register을 넣어준다. 그리고 첫 인자로는 해당 값의 id를 넣어준다 해당 필드는 이메일을 관리하는 필드이기때문에 email을 넣어주고, 두번쨰 인자로는 option을 객체 형식으로 지정하면 된다.

해당 option은 docs에서 참고하면 된다.

https://react-hook-form.com/docs/useform/register

onSubmit의 인자로 받은 value가 저렇게 이쁜 모습으로 알아서 들어오는 것을 볼 수 있다.

3. formState

formState는 어떤 값을 가지고 있을지 콘솔을 찍어보자.

defaultValues, dirtyFields, errors,isValid

여기서 defaultValues가 undefined로 표시되고 있다. 우리가 useForm에서 설정해주지 않았기 때문이다.

const { register, handleSubmit, formState } = useForm({
    defaultValues: {
        email: "123",
    },
});

이렇게 defaultValues를 지정해주면 렌더링시 해당 기본값이 필드에 들어가 있다.

formState는 에러도 보유하고 있다.

우리가 required로 설정한 값

이 특정 패턴을 지키지 않았거나, 데이터가 없을 때 미리 지정해둔 메시지를 보내주는 것이다.

<div className="flex flex-col gap-2">
    <label htmlFor="email">Email</label>
    <input
        {...register("email", {
            required: true,
            pattern: {
                value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                message: "Invalid email address",
            },
        })}
        id="email"
        type="email"
        placeholder="Email"
        className="text-black"
    />
    {formState.errors?.email?.message}
</div>

따라서 우리가 이렇게 에러메시지를 넣어주면 화면에 출력된다.

또한 formState의 isValid를 사용하면 모든 formData값이 유효한지 검사해주어 bool값에따라 원하는 기능을 제어할 수 있다.

<button className="bg-gray-800 text-white px-4 py-2 rounded-md" type="submit" disabled={!formState.isValid}>
    Sign In
</button>

예를 들어 이런 식으로 formState가 false일때는 버튼을 disabled시킬 수 있다.

"use client";

import { FieldValues, useForm } from "react-hook-form";

const LoginTest = () => {
    const { register, handleSubmit, formState } = useForm({
        mode: "onChange",
        defaultValues: {
            email: "test@test.com",
            password: "",
        },
    });

    const onSubmit = (value: FieldValues) => {};

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div className="flex flex-col justify-center items-center">
                <div className="border border-solid border-black">
                    <label htmlFor="email">이메일</label>
                    <input
                        id="email"
                        type="text"
                        {...register("email", {
                            required: true,
                            pattern: {
                                value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                                message: "Invalid email address",
                            },
                        })}
                    />
                </div>
                <div className="border border-solid border-black">
                    <label htmlFor="password">비밀번호</label>
                    <input
                        id="password"
                        type="password"
                        {...register("password", {
                            required: true,
                        })}
                    />
                </div>
                <button type="submit" className="border border-solid border-black">
                    로그인
                </button>
            </div>
        </form>
    );
};

export default LoginTest;

24.10.15 tailwind에서 제공하지 않는 style속성 사용하기

공대탈출 — Tue, 15 Oct 2024 23:59:31 +0900

팀프로젝트에서 전체 페이지에 적용되는 사이드바에 이런식으로 텍스트를 새로로 작성하고 싶었다.

모르니까 바로 검색을 해보았다.

모두들 writing-mode: vertical-lr 을 사용하면 텍스트를 글자의 왼쪽에서 오른쪽 순서로 방향은 위에서 아래로 세로로 표현해준다는 것이다.

그런데 우리의 엄청난 tailwind는 해당 속성을 지원해주지 않고있다.

그래서 텍스트 태그의 width를 폰트크기보다 아주 조금 크게하고, width를 넘어가는 텍스트를 아래로 보낼까 했지만

이게 맞나? 싶었다.

그래서 tailwind에서 제공해주지 않는 속성을 사용할 방법을 찾아보았다.

뭐 어쩌구 저쩌구 뭐라뭐라 썼는데 결국 tailwind.config.js파일의 theme안에 추가를 하면 되는 것이다.

  theme: {
    extend: {
      writingMode: {
        'vertical-lr': 'vertical-lr',
        'vertical-rl': 'vertical-rl',
        'horizontal-tb': 'horizontal-tb'
      },
      colors: {

그래서 바로 해당 속성을 추가해봤다. 근데 적용이 안됐다.

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .writingMode-vertical-lr {
    writing-mode: vertical-lr;
  }
  .writingMode-vertical-rl {
    writing-mode: vertical-rl;
  }
  .writingMode-horizontal-tb {
    writing-mode: horizontal-tb;
  }
}

문제는 저 layer의 utilities를 추가하지 않는 것이었다.

tailwind가 어떻게 동작하는지 생각해본적이 없었는데, tailwind의 세팅코드들이 아마 tailwind에서 제공해주는 모든 속성을 저런식으로 만들어놓고 적용시켜준 것 같다.

<Link className="writingMode-vertical-lr text-white" href={'/'}>
  홈
</Link>
<Link className="writingMode-vertical-lr text-white" href={'/tech_interview'}>
  기술면접
</Link>
<Link className="writingMode-vertical-lr text-white" href={'/resume'}>
  이력서
</Link>

만들어둔 class를 저렇게 className에 넣으면 당연하게도 적용이 되는 것이다.

이런 의미에서 tailwind가 next와 잘 맞지 않나 싶다.

저런 커스텀 스타일을 만들어두고, Root에 위치한 globals.css에 추가를 하면 next의 모든 페이지는 레이어드되어있기 때문에 해당 클래스명을 사용하면 css가 적용되는 것이다.

뭐 어쨌든 처음엔 왜 지원을 안하는건지 싶었다. 이슈도 이미 생성되어있었고 원하는사람도 많았는데...

추가하는 법이 어렵진 않아 쉽게 적용할 수 있었다.

24.10.14 supabase.insert, promise.all과 transaction

공대탈출 — Tue, 15 Oct 2024 00:56:38 +0900

    !!eduArray.length &&
      eduArray.forEach(async (edu) => {
        const eduFormData = {
          post_id: postId,
          user_uuid: userId,
          ...edu
        };
        const { data: eduPostDtat, error: eduPostError } = await browserClient
          .from('post_detail_education')
          .insert([eduFormData]);
      });

    !!expArray.length &&
      expArray.forEach(async (exp) => {
        const expFormData = {
          post_id: postId,
          user_uuid: userId,
          ...exp
        };
        const { data: expPostDtat, error: expPostError } = await browserClient
          .from('post_detail_experience')
          .insert([expFormData]);
      });

    !!licArray.length &&
      licArray.forEach(async (lic) => {
        const licFormData = {
          post_id: postId,
          user_uuid: userId,
          ...lic
        };
        const { data: licPostDtat, error: licPostError } = await browserClient
          .from('post_detail_license')
          .insert([licFormData]);
      });

이번 팀프로젝트에서 이력서에 들어가는 학력, 경력, 자격증 관련 데이터뭉치들을 supabase에 올려주는 작업을 진행했다.

근데 세개를 한번에 하나씩 실행하다보니 좀 비효율적이라는 생각이 들었다.

그래서 여러 promise요청을 병렬적으로 실행시켜주는 promise.all을 사용해보고자 공식 문서를 읽어보았다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Promise.all()의 괄호안에 배열속에 어떤 요청들을 넣어주면 병렬적으로 그 요청이 실행되는 것이다.

하지만 이런 의문이 들었다.

const a = new Promise(resolve=>resolve(3초가 걸리는 작업))
const b = new Promise(resolve=>resolve(20초가 걸리는 작업))
const c = new Promise(resolve=>resolve(3초가 걸리는 작업))

Promise.all([a,b,c]).then(...).catch(...)

이렇게 여러 작업을 한번에 진행할 때 a,c는 b보다 일찍 fulfilled될 것이다.

그렇다는 의미는 셋 다 post요청일 때 이미 a,c요청에 대한 데이터가 DB에 저장된다는 것이다.

그리고 b에서 오류가 발생해버린다면? 그런데 세 데이터가 모두 한 데이터와 연관이 있어서 하나라도 실패하면 무의미해진다면?

그럼이제 귀찮아지는거다

어쨋든 한번 화면으로 살펴보자

const a = new Promise((resolve) => {
    setTimeout(() => {
        resolve(console.log("a끝!"));
    }, 3000);
});

const b = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(console.log("b는 끝내지 못했어!"));
        // resolve(console.log("b끝!"));
    }, 6000);
});

const c = new Promise((resolve) => {
    setTimeout(() => {
        resolve(console.log("c끝!"));
    }, 4000);
});

Promise.all([a, b, c])
    .then(() => console.log("then"))
    .catch(() => console.log("catch"));

이런 코드가 있다고 가정해보자. 실패할 예정인 b로직은 6초후에 실패하고 성공할 예정인 a,c로직은 3,4초뒤에 성공한다

mdn에 애매하게 설명해둔 설명대로라면 모두 실행되지않고 b가 실패해 b는 끝내지 못했어! 만 출력될 것 같지만

실상은 그렇지 않다.

그럼 Promise.all은 도대체 어떤 녀석일까

말 그대로 모든 요청을 한번에 .then이나 .catch로 보내는 것이다.

내부에서는 따로따로 요청이 처리되고 후 로직을 기다리고 있는 것

    const a =
      !!eduArray.length &&
      eduArray.forEach(async (edu) => {
        //...
        const { data: eduPostDtat, error: eduPostError } = await browserClient
          .from('post_detail_education')
          .insert([eduFormData]);
      });

    const b =
      !!expArray.length &&
      expArray.forEach(async (exp) => {
        //...
        const { data: expPostDtat, error: expPostError } = await browserClient
          .from('post_detail_experience')
          .insert([expFormData]);
      });

    const c =
      !!licArray.length &&
      licArray.forEach(async (lic) => {
        //...
        const { data: licPostDtat, error: licPostError } = await browserClient
          .from('post_detail_license')
          .insert([licFormData]);
      });
    const d = new Promise((reject) => {
      setTimeout(() => reject('실패!'), 5000);
    });
    Promise.all([a, b, c, d])
      .then((res) => console.log('res :>> ', res))
      .catch((err) => console.log('err :>> ', err));
  };

이렇게 supabase에 insert하는 요청을 Promise.all로 처리한다면 insert인 post요청이 각각 일어나고, 결국엔 catch로 에러처리가 될 것이다.

이 데이터를 각각의 table에 insert하는 요청은 일어나고, d라는 Promise가 reject되므로 catch로 이어지는 것이다.

실제로 데이터는 각 테이블에 들어갔지만, catch처리된 모습을 볼 수 있다.

그렇다면 저렇게 의미없어진(연결이 끊긴)데이터를 어떻게 처리해야할까?

저런 요청단위를 DB에선 Transaction이라고 부른다고 한다.

https://smin1620.tistory.com/325

DB의 상태를 변화시키기 위해 수행하는 작업 단위라고 하는데 뭐 어쨌든 깊이 들어가지않겠다 BE의 영역이기 때문에

https://smin1620.tistory.com/325

결국 난 위 사진과 같은 rollback의 기능이 필요하다.

const insertEducation = async (eduArray, postId, userId) => {
  try {
    await Promise.all(
      eduArray.map(async (edu) => {
        const eduFormData = {
          post_id: postId,
          user_uuid: userId,
          ...edu,
        };
        const { error: eduPostError } = await browserClient
          .from("post_detail_education")
          .insert([eduFormData]);

        if (eduPostError) throw new Error("Education insert failed");
      })
    );
    return { success: true };
  } catch (error) {
    return { success: false, error: "education", message: error.message };
  }
};

const insertExperience = async (expArray, postId, userId) => {
  try {
    await Promise.all(
      expArray.map(async (exp) => {
        const expFormData = {
          post_id: postId,
          user_uuid: userId,
          ...exp,
        };
        const { error: expPostError } = await browserClient
          .from("post_detail_experience")
          .insert([expFormData]);

        if (expPostError) throw new Error("Experience insert failed");
      })
    );
    return { success: true };
  } catch (error) {
    return { success: false, error: "experience", message: error.message };
  }
};

const insertLicense = async (licArray, postId, userId) => {
  try {
    await Promise.all(
      licArray.map(async (lic) => {
        const licFormData = {
          post_id: postId,
          user_uuid: userId,
          ...lic,
        };
        const { error: licPostError } = await browserClient
          .from("post_detail_license")
          .insert([licFormData]);

        if (licPostError) throw new Error("License insert failed");
      })
    );
    return { success: true };
  } catch (error) {
    return { success: false, error: "license", message: error.message };
  }
};

const handleRollback = async (postId) => {
  // 삽입 실패 시 rollback 처리
  console.log("Rolling back changes...");
  await browserClient.from("post_detail_education").delete().eq("post_id", postId);
  await browserClient.from("post_detail_experience").delete().eq("post_id", postId);
  await browserClient.from("post_detail_license").delete().eq("post_id", postId);
  console.log("Rollback completed");
};

const runInserts = async () => {
  const postId = "post123"; // 예시 postId
  const userId = "user123"; // 예시 userId

  const eduArray = [{ title: "edu1" }, { title: "edu2" }];
  const expArray = [{ title: "exp1" }];
  const licArray = [{ title: "lic1" }];

  try {
    // Promise.all로 모든 삽입 작업 실행
    const results = await Promise.all([
      insertEducation(eduArray, postId, userId),
      insertExperience(expArray, postId, userId),
      insertLicense(licArray, postId, userId),
    ]);

    // 실패한 작업이 있는지 확인
    const failed = results.find((result) => !result.success);
    if (failed) {
      throw new Error(`Failed on ${failed.error}: ${failed.message}`);
    }

    console.log("All inserts successful");
  } catch (err) {
    console.log("Error occurred:", err.message);
    await handleRollback(postId); // 실패 시 롤백
  }
};

runInserts();

뭐 이렇게 처리해야한다고 한다. 솔직히말하면 감당이 안된다. 조금 더 Promise.all을 사용해야하는지 고민을 해봐야할것같다 ㅋㅋ

24.10.11 react에서 리스트 매핑중 key를 사용해야하는 이유

공대탈출 — Fri, 11 Oct 2024 23:53:37 +0900

문제상황

오늘 팀 프로젝트의 mockview와 state들을 만들면서 이러한 오류가 있었다.

학력의 오른쪽 + 버튼을 누르면 아래 3가지 입력창이 계속 생기는 기능을 만들고 있었다.

{eduArray.map((edu, idx) => {
    return (
      <div key={crypto.randomUUID()}>
        <Input
          isLabeled={true}
          labelText="졸업년월"
          value={edu.graduated_at}
          onChange={(e) => handleEduArray(idx, 'graduated_at', e)}
        />
      </div>
    );
})}

이렇게 key에 crypto.randomUUID()를 넣어주어 유니크한 키 값을 가지도록 하였다.

인풋값을 입력할때마다 focus가 풀렸다. 이유가 뭘까??

발생 이유

https://ko.react.dev/learn/rendering-lists#why-does-react-need-keys

리액트 내부 리스트 매핑에서의 key는 결국 리액트가 해당 컴포넌트를 식별하기 위함이다.

컴포넌트 또한 배열로 관리하여 key값으로 비교하게 되는데, 내가 작성한 코드는 리렌더링시마다 crypto.randomUUID()를 재실행하여 새로운 키값을 부여하기 때문에 의도치않은 성능감소와 에러를 발생시켰던 것이다.

해결 시도

  const addForm = (objName: string) => {
    switch (objName) {
      case 'education':
        setEduArray((prev) => [...prev, { ...emptyEduObj, edu_id: crypto.randomUUID() }]);
        break;
      case 'experience':
        setExpArray((prev) => [...prev, { ...emptyExpObj, exp_id: crypto.randomUUID() }]);
        break;
      case 'license':
        setLicArray((prev) => [...prev, { ...emptyLicObj, lic_id: crypto.randomUUID() }]);
        break;
    }
  };

배열에 객체를 추가할 때 랜덤값을 생성하여 각각의 아이디로 주입하였다.

이렇게 되면 생성당시에 값이 추가되어 리렌더링시에도 키값이 변경될 일이 없기 때문에 리액트는 동일한 컴포넌트로 인식하여 focus를 유지하는 것으로 생각했다.

결과

리액트가 같은 컴포넌트로 인식하여 리렌더링과 input focus의 버그를 발생시키지 않는 모습이다!

https://tecoble.techcourse.co.kr/post/2021-04-25-react-key/

어떤 느낌인지 비교하기 쉬운 사진을 가져와 봤다.

24.10.08 개인프로젝트 마무리

공대탈출 — Tue, 8 Oct 2024 21:28:04 +0900

리그오브레전드 정보 페이지 바로가기

LIP는 무료로 로그인 없이 사용할 수 있는 리그오브레전드 정보 제공 서비스입니다.

Next와 React, TypeScript를 사용하여 개발하였으며
원하는 챔피언이나 아이템의 정보를 확인하고
이상형월드컵을 통해 인기 챔피언을 알아볼 수 있습니다!

LIP 서비스는 이런걸 할 수 있어요!

개인과제에서 이런걸 했어요

NextJS를 사용하며 발생한 여러 문제들

컴포넌트 분리 후 스타일이 적용되지 않는 문제 - 전상국
useSuspenseQuery와 hydration 문제

LIP에선 이런 기술을 사용했어요

LIP의 서비스 요청 흐름도

전상국

분리된 컴포넌트의 스타일이 왜 적용되지 않는걸까 - 전상국
useSuspenseQuery + CSR ==> hydration Error

24.10.07 nextjs 에러핸들링

공대탈출 — Tue, 8 Oct 2024 21:26:47 +0900

{
    "todoList": [
        {
            "id": "adsf",
            "title": "titleTest",
            "desc": "DescTest",
            "isCompleted": false,
            "createdAt": 123
        },
        {
            "id": "adsd",
            "title": "titleTest",
            "desc": "DescTest",
            "isCompleted": false,
            "createdAt": 123
        }
    ]
}

json-server를 이용하여 간단한 투두리스트를 만들었다.

내가 개인과제를 진행하며 제일 궁금했던건 CSR페이지에서 route.ts로 fetch를 했을 때 에러핸들링을 어떻게 할 것이냐는 것이다.

import { Todo } from "@/types/Todo";
import { NextResponse } from "next/server";

export const BASEURL = "http://localhost:4000";

export async function GET() {
    try {
        const res = await fetch(`${BASEURL}/todoList`, { cache: "no-store" });
        const data: Todo[] = await res.json();
        return NextResponse.json({ data });
    } catch (error) {
        console.log("error :>> ", error);
        throw { message: "에러발생" };
    }
}

route handler는 이렇게 생겼다.

try catch를 사용하여 에러를 잡아내 에러를 던져준다.

"use client";

import { Todo } from "@/types/Todo";
import { useEffect, useState } from "react";

const BASEURL = "http://localhost:3000";
const HomePage = () => {
    const [todos, setTodos] = useState<Todo[]>();
    const [isError, setIsError] = useState(false);
    const fetchTodos = async () => {
        try {
            const todoRes = await fetch(`${BASEURL}/api/todos`);
            console.log("todoRes :>> ", todoRes);
            const { data: todoData }: { data: Todo[] } = await todoRes.json();
            setTodos(todoData);
        } catch {
            console.log("1 :>> ", 1);
            setIsError(true);
        }
    };
    useEffect(() => {
        fetchTodos();
    }, []);
    if (isError) throw new Error("1`");
    return (
        <div className="flex flex-col justify-center items-center py-[200px]">
            <h1>투두리스트</h1>
            <ul>
            	//...
            </ul>
        </div>
    );
};

export default HomePage;

맨 처음에는 try catch를 여기서도 사용하여 throw new Error를 통해 에러페이지로 이동하게끔 했는데, useEffect 안에서 throw되어서 그런지 에러를 잡아내지 못했다.

그래서 에러상태를 state로 만들어주고, catch구문으로 들어갈 시 setIsError를 true로 만들어 에러페이지를 화면에 보여주게끔 설정하였다.