_soul_.log

👏내일배움캠프 React 3기 수료 후기👏

Mon, 12 Feb 2024 10:59:43 GMT

내일배움캠프 React 3기 수료 후기...

4개월 간의 내일배움캠프를 마치고 꿀같은 설 연휴 휴식을 만끽하며 수료후기를 작성합니다. 이렇게 보니 연휴 전에 일정이 끝나서 참 다행이라는 생각이 드네요. 연휴 내내 프로젝트 마무리하고 있을 생각하니,, ~~(노드 트랙 아직 안끝나신 것 같은데,, 화이팅임다..!!)~~

수많은 부트캠프 중 왜 내배캠을 선택했는지, 내배캠에서 공부하면서 어떤 점이 좋았는지/아쉬웠는지, 그래서 내배캠을 추천하는지 주절주절 적어보겠습니닷

_아주 개인적인 의견_임을 먼저 말씀드리며..!!

내배캠을 선택한 이유

짧은 교육 기간

제가 내배캠을 선택한 가장 큰 이유는 교육기간이 다른 국비지원 부트캠프에 비해 짧다는 것이었습니다. 보통 국비지원 부트캠프는 최소 6개월 코스인 것에 비해 내배캠을 4개월+α로 짧았고, 교육 일정이 월~금으로 주말이 보장된다는 것이 굉장히 큰 장점이었습니다. (물론, 팀 프로젝트 기간에는 주말에도 종종 작업을 하기도 했습니다.) 짧은 기간동안 밀도 있게 공부해서 빨리 취업준비를 하고 싶다는 생각이 크기도 했고, 캠프 기간이 길어지게 되면 '9 to 6 매일매일 공부하는 나 자신'에만 만족해버릴까봐 걱정도 됐기 때문에 기간이 짧다는게 가장 큰 장점이었던 것 같습니다.

캠프 시작 날짜

부트캠프를 알아보던 당시에 다른 공부를 위해 학원을 다니고 있을 때라 그 기간 이후로 곧바로 시작할 수 있는 일정이라서 좋았습니다. (사전캠프는 참가하지 않았습니다.)

간편한 지원 방식

내일배움캠프 지원을 하면서 같이 봤던 다른 국비지원 부트캠프에서는 3문항 정도의 자기소개서를 요구했는데 그게 생각보다 부담스럽더군요;; 그에 반해 내배캠은 자기주도학습 경험과 관련된 간단한 짧은 자기PR? 영상만 제출하면 되는 거라서 간단했습니다. ~~(모집기간 임박/넘어서 지원하신 분들은 이런 영상 제출 없이도 지원합격 하셨다고 하시기도 했습니다.)~~

내배캠을 하면서 아쉬웠던 점

'내 것'으로 만들기에는 물리적인 시간이 적다

기간이 짧은 부트캠프의 양면성이겠지만 주중에는 캠프 공부와 프로젝트로 9to9 + α를 보내기 때문에 강의를 듣고 프로젝트를 진행하는 것 이외에 공부한 것을 나의 것으로 정리하고 복습하려면 주말 시간을 이용해야 합니다. 그런데 주중을 9to9 + α으로 보내다 보면,, 주말에는 정말 쉬고 싶다는 생각이 강하게 듭니다,, 그래서 캠프를 마치면서 팀원들과 날잡고 포트폴리오 정리나 블로그 정리할 시간을 가져야겠다 라는 이야기를 하기도 했습니다.

캠프를 진행하면서 정리하기에는 쉽지 않다는 의미!!

코딩을 처음 해보는 거라면,,

우선 저는 대학교에서 컴퓨터를 전공했고, 내배캠 합류 전에 개인적으로 기본적인 html + css + 바닐라 자바스크립트 정도를 개인적으로 공부했던 경험이 있습니다. (학부에서 웹프로그래밍 강의를 들은 적은 없습니다) 웹프로그래밍 경험이 없는 건 다른 수강생들과 다르지 않지만 기본적으로 '코딩 기초체력'은 아무래도 제가 더 좋다,,고,,해도,, 되겠죠,,?? (학부때 공부를 그렇게 열심히 한건 아니지만 그래도,, 8학기 짬바,, 물론 캠프 하시는 분들 중에도 전공생분들이 여럿 있으시고 백엔드에서 개발하다가 오신 분들도 있고, 웹 개발 공부 한참 하시다 오신 분들도 있고 실력자이신 분들도 많은 걸로 알고 있습니다!)

무튼 캠프하면서 대부분의 팀 프로젝트에서 저는 실력이 좋은 편에 속했었는데 강의를 듣거나 과제를 하거나 팀 프로젝트를 하면서 와 코딩 처음 해보는 사람은 따라가기 쉽지 않겠다라는 생각을 여러 번 했던 것 같습니다. 아무래도 짧은 기간 내에 기초부터 심화까지 공부하는 커리큘럼이다 보니 일정이 빠르게 진행되는데 처음이라면 용어나 개념 자체가 생소할테니까요. 당연히 쉽지 않다는 의미이지 *불가능하다는 의미가 절대 아닙니다!! * 최종 프로젝트 때에는 잘하는 사람 정말 많다라는 생각이 계속 들 정도로 다들 멋지게 프로젝트 완성하시더라구요. 정말 대단하신 것 같아요.

내배캠을 하면서 좋았던 점

아쉬운 점을 먼저 적은 건 좋았던 점을 적기위한 빌드업,, 이라고 하겠습니다! 다른 부트캠프를 경험해보지 않았기 때문에 순수하게 내배캠 이런점이 좋았어요!로 적어보겠습니닷

튜터 상주

즉각적으로 질의응답이 가능한 튜터님이 9to9 상주해 계셔서 좋았습니다. 저는 튜터님께 개인적으로 질문을 많이 하진 않았지만(스스로,, 해결하고 싶었습니다,,) 팀프로젝트를 할 때 기술적으로 문제가 있거나 의사결정 과정에서 조언이 필요할 때 바로바로 튜터님을 찾아가 의견을 들을 수 있어서 든든하고 좋았습니다.

담임 매니저 관리와 전반적인 캠프 분위기

담임 매니저님이 돌아다니시면서 팀원들 간 어색함도 풀어주시고 강의 수강 진도율 같은 것도 체크해주셨던 점이 좋았습니다. 아무래도 제공된 동영상 강의를 자기주도학습 하는 것이다보니 느슨해지고 게을러질 수 있는데 거의 매일 순회하시면서 강의/프로젝트 진행상황을 체크해주셔서 좋았고 항상 !으쌰으쌰 할 수 있다 화이팅! 해주셨던게 정말 큰 힘이 되었던 것 같습니다.

그런 담임 매니저님 덕분인지 전반적인 캠프 분위기도 !으쌰으쌰 할 수 있다 화이팅! + 항상 예쁜말로 소통하기였어서 마지막까지 살짝만 지치고 ~~(지치지 않았다고 하면 그건 거짓말입니다)~~ 기분 좋게 마무리할 수 있었습니다. 물론 많은 사람이 모이는 것이기 때문에 빌런이 없다고는 말할 수 없겠지만 저는 그런 빌런을 거의 만나지 않고 좋은 사람들과 수료했다는 느낌을 받았습니다!

팀 프로젝트와 성취의 경험

팀 프로젝트 있는 강의를 선호하지 않기도 했고 학부생활의 절반이 코로나가 심했던 기간이었다보니 팀플 경험이 많지 않았던 것이 대학생활에서 후회하는 것들 중 하나였는데 내배캠하면서 팀플할 기회가 많아서 좋았습니다. 회사에 들어가게 되면 팀플에 세계로 들어가게 되는 것과 마찬가지일 테니까요.

저는 개인적으로 성취의 경험을 굉장히 중요하게 생각하는 편인데 팀 프로젝트를 완성할 때마다 작은 일이지만 또 하나 해냈다! 라는 보람과 성취의 경험을 느낄 수 있어서 좋았습니다.

최종 프로젝트 과정에서의 서포트

약 5주간 진행되는 최종 프로젝트에서는 처음으로 디자이너님 + 전담 튜터의 멘토링이 있었던 것이 좋았습니다. 아무래도 디자이너가 있으니 프로젝트의 완성도가 확 높아지는 느낌이 있었고 (좋은 기획 / 기능이 있어도 UI가 별로면 그런게 잘 안보이니까요) 매주 진행되는 기술 멘토링도 프로젝트 뿐 아니라 개인적인 성장에도 많은 도움이 되었습니다. 그리고 최종 프로젝트의 경우에는 팀을 거의 자율적으로 구성했는데 저 같은 경우에는 실력 좋고 인성 좋고 공부 많이 하시는 분들과 함께해서 팀원들에게 배운 것들도 정말 많았습니다. 그리고 발표 이후 이전 수료생 분들이 오셔서 저희에게 질문도 주시고 질문도 받아주신 것들도 앞으로 취업 준비하면서 도움이 많이 될 것 같습니다!

내일배움캠프를 추천합니다?!

~~누구에게나 추천할만한 부트캠프! ❌~~ 국비지원 프론트엔드 부트캠프를 들어야겠다고 결심한 분에게 추천할 만한 부트캠프! ⭕

그냥 프론트엔드 공부 한번 해볼까? 하는 분들에게는 절대절대절대 추천하지 않습니다. 부트캠프를 수료하고 바로 취업 준비해서 취뽀하겠다! 라고 마음먹으신 분들이라면 충분히 추천할 만한 부트캠프라고 생각해요. 제가 다른 부트캠프는 경험이 없어서 비교해서 이런점이 좋습니다~라고 이야기할 순 없습니다. 그리고 내배캠 하나로 취업 준비 끝입니다! 라고 말하기에는 아쉬운 점이 조금 있긴 합니다만 그럼에도 불구하고 내배캠이 추천할 만하다라고 이야기하는 이유는 짧은 기간에 임팩트있게 공부할 수 있다는 장점이 있는 아주 크다고 생각하기 때문입니다. (물론 아직 취업 지원 주차가 시작하지 않은 시점이기도 하고 그 이후에 취업준비는 아직 경험해보지 못한 부분이라 어떻다라고 말하기 어렵겠네요.)

++ 이미 내일배움캠프에 지원하기로 마음 먹었고, 지원하신 분이라면 캠프 시작 전에 간단하게라도 코딩공부나 웹프로그래밍 공부를 해보시면 좋을 듯 합니다. 위에 적었듯이 캠프가 빠르고 밀도있게 진행되다보니 조금이라도 선행되어있는 것이 있으면 따라가기 한결 수월하실 거예요!!

전체 동의 버튼 만들기 (그런데 이제 react-hook-form을 곁들인)

Mon, 29 Jan 2024 13:16:31 GMT

맨 위에 체크박스를 체크하면 밑에 두 개도 체크되게 하고 맨 위에 체크박스 체크 해제하면 밑에 두 개도 체크 해제되게 하고 다 체크되어있다가 밑에 두 개 중 하나 체크 해제하면 전체 동의 버튼도 해제하게 하는 그런 체크박스를 만들었다.

...
//전체 동의 클릭 시
  const allAgree = (e: React.FormEvent) => {
    if (e.currentTarget.checked) {
      setValue(`fullTerms`, true);
      setValue(`protection`, true);
      setValue(`useTerms`, true);
    } else {
      setValue(`fullTerms`, false);
      setValue(`protection`, false);
      setValue(`useTerms`, false);
    }
  };
  //약관 동의
  const agree = (e: React.FormEvent, target: string) => {
    if (e.currentTarget.checked) {
      setValue(target, true);
    } else {
      setValue(`fullTerms`, false);
      setValue(target, false);
    }
  };

...
const {
    register,
    formState: { isValid },
    setValue
  } = useForm({ mode: "onBlur" });
...

     
          
                 렌탈 약관동의
          

          
                
                 전체 약관 동의
          
          
                 
                       agree(e, `protection`)}
                      />
                      개인 정보 보호를 위한 이용자 동의 (필수)
                    
                    
                      내역보기
                    
                  
                  
                    
                       agree(e, `useTerms`)}
                      />
                      렌트 상품 이용약관 동의 (필수)
                    
                    
                      내역보기
                    
                  
                
                ...

react-hook-form setValue를 이용하면 뚝딱 해결할 수 있다.

tailwindCSS로 스켈레톤 적용하기

Thu, 25 Jan 2024 14:10:33 GMT

서버에서 데이터를 불러오는 동안 유저가 심심하지 않게 애니메이션이 들어가 있는 스켈레톤을 적용했다.

//ImgPulse.tsx
import React from "react";
import { FaRegImage } from "react-icons/fa6";

const ImgPulse = () => {
  return (
    
      
    
  );
};

export default ImgPulse;

--------------------------------------------------------------------

//CardPulse.tsx
import React from "react";
import ImgPulse from "./ImgPulse";

const CardPulse = () => {
  return (
    
      
        
      
      
        
        
        
          
            
          
        
      
    
  );
};

export default CardPulse;

나이쓰한 테일윈드 덕분에 간단하게 스켈레톤을 구현했다. (className에 animate-pulse넣어주면 되더라~)

완성한 컴포넌트를 로딩되는 상황에 넣어주면 된다.

"use client";
import React, { useState } from "react";
...
import CartPulse from "@/components/pulse/CartPulse";

const PaymentPage = ({ params }: { params: { userId: string } }) => {
  const userId = params.userId;
  const { data: cart, isLoading } = useQuery({
    queryKey: ["cart"],
    queryFn: async () => await getAllCart({ userId })
  });
 ...

  return (
    <>
      
      
        {!isLoading && cart !== undefined ? (
          ...
        ) : (
                  //이렇게
        )}
      
    
  );
};

export default PaymentPage;

적용한 모습

[supabase] trigger/function 조건부로 작성하기

Mon, 22 Jan 2024 13:13:52 GMT

supabase auth를 이용해 회원가입/로그인을 구현하면서 유저 정보(이메일, 이름, 프로필 사진, 전화번호)를 직접 auth에 접근하지 않고 userinfo 테이블을 생성해 관리했다. (supabase에서도 유저 정보 테이블을 따로 생성해 관리하는 것을 추천한다.)

auth에 새로운 데이터가 insert된 후에 작동하는 trigger와 함수를 작성해 자동으로 새로운 유저가 가입하면 userinfo 테이블에 정보가 삽입되게 하였다.

처음에 작성한 트리거와 함수는 다음과 같다.

create function public.handle_new_user()
returns trigger as $$
begin
insert into public.userInfo(id, email, username, avatar_url)
values (new.id, new.email, new.raw_user_meta_data->>'name', new.raw_user_meta_data->>'avatar_url');
return new;
end;

$$ language plpgsql security definer;
create trigger on_auth_user_created
  after insert on auth.users        
  for each row execute procedure public.handle_new_user();

새로운 회원이 가입해 auth.users에 insert가 발생하면 그 이후에 on_auth_user_created라는 트리거가 활성화된다.

on_auth_user_created는 handle_new_user()라는 함수를 실행한다. handle_new_user()는 회원 가입 시 생성된 raw_user_meta_data (auth.users 테이블에서 확인 가능)에 있는 id (auth.users에 자동 생성되는 primary key), email, username, avatar_url을 userInfo 테이블의 각 column에 맞게 넣어준다. (values 앞뒤로 순서 맞춰서 적어야 함)

이메일 회원가입 시 입력받은 이름을 raw_user_meta_data에 name이라는 키로 값을 저장해줬고, avatar_url을 null로 저장해줬으므로 회원가입 시 문제가 없었고,

const { data, error } = await supabase.auth.signUp({
      email: id,
      password: pw,
      options: {
        data: {
          //options안 data 객체 안에 key:value형식으로 넣어주면 
          //raw_user_meta_data에 객체 형태로 저장된다.
          name: name,
          avatar_url: null,        
        }
      }
    });

구글과 카카오 소셜 로그인 시에도 raw_user_meta_data에 해당 이름에 맞는 key가 존재하므로 문제가 없었다.

💢문제 발생💢

회원가입 시 전화번호를 입력받고 본인인증을 하면서 문제가 발생했다. 입력받은 전화번호를 아이디/비밀번호 찾기, 결제페이지에서 사용해야하므로 다른 정보와 동일하게 raw_user_meta_data에 저장하고 handle_new_user()를 수정해줬다. (물론 userinfo 테이블에 phone column도 추가했다) 이렇게

const { data, error } = await supabase.auth.signUp({
      email: id,
      password: pw,
      options: {
        data: {
          name: name,
          avatar_url: null,
          phone: phone,
        }
      }
    });

--handle_new_user() 함수
begin
insert into public.userInfo(id, email, username, avatar_url, phone)
values (new.id, new.email, new.raw_user_meta_data->>'name', new.raw_user_meta_data->>'avatar_url');
return new;
end;

수정한 후 일반 회원가입 시 잘 작동하는 것을 확인하고, 문제가 없는 줄 알았으나,,

카카오 로그인 & 구글 로그인 불가

카카오 신규 로그인과 구글 신규 로그인 시 에러가 발생하는 것을 발견했다. 배포 이후 발견한 에러라 배포와 관련된 설정이 잘못되어 발생하는 오류인지 알고 이리저리 supabase나 kakao developers, google cloud console에서 url을 수정해보았지만 고쳐지지 않았다. 그러다가 trigger가 정상 작동하지 않으면 auth에 새로 등록이 안된다는 것이 생각났다. (지난 프로젝트에서 trigger function 작성할 때 column이름에 오타가 있어서 회원가입이 정상 작동하지 않았었다.) 구글과 카카오로 로그인했을 때 raw_user_meta_data에 전화번호 정보가 없어서 (정확히는 key가 'phone'인 값이 없다. 물론 가져올 수 있는 전화번호도 없다.) 에러가 발생하는 것이었다.

그래서 생각한 해결책은 1. 조건부로 trigger를 실행한다 2. function 내에서 분기처리한다. 였는데 일단 2번으로 해보기로 했다.

function 조건문 처리하기

begin
  if new.raw_app_meta_data->>'provider' = 'email' then
    insert into public.userInfo(id, email, username, avatar_url, phone)
    values (new.id, new.email, new.raw_user_meta_data->>'name', new.raw_user_meta_data->>'avatar_url', new.raw_user_meta_data->>'phone');

  elsif new.raw_app_meta_data->>'provider' = 'kakao' then
    insert into public.userInfo(id, email, username, avatar_url, phone)
    values (new.id, new.email, new.raw_user_meta_data->>'name', new.raw_user_meta_data->>'avatar_url', 'kakao 유저');

  elsif new.raw_app_meta_data->>'provider' = 'google' then
    insert into public.userInfo(id, email, username, avatar_url, phone)
    values (new.id, new.email, new.raw_user_meta_data->>'name', new.raw_user_meta_data->>'avatar_url', 'google 유저');
  end if;

  return new;

회원 가입 유형에 따라raw_app_meta_data에 provider값이 있다는 것을 이용해 조건문 처리를 하였다. 기본 이메일 회원가입시에는 기존과 동일하게 처리하고 카카오와 구글 로그인 시에는 phone column에 각각 'kakao 유저', 'google 유저'라고 string을 넣어주었다. (phone은 text type으로 되어있다.)

elsif라는 키워드는 생각도 못했다. elif일거라고 생각했는데 ㄷㄷ

무튼 잘 해결해서 다행이다!@!

아이디 찾기 구현하기

Thu, 18 Jan 2024 15:03:06 GMT

supabase로 구현한 회원가입/로그인 기능에 아이디 찾기를 추가해보았다.

로그인 페이지와 별도로 페이지를 만들었다

//src>app>auth>find
"use client";
import React, { useState } from "react";
import FindID from "./FindID";
import FindPW from "./FindPW";

const AuthFindPage = () => {
  const [mode, setMode] = useState(true);
  return <>{mode ?  : };
};

export default AuthFindPage;

FindId 컴포넌트가 아이디를 찾는 부분이다. 비밀번호 재설정도 추가할 예정.

//
import React, { useState } from "react";
import PageBreadCrumb from "@/components/layout/PageBreadCrumb";
import { useForm, SubmitHandler } from "react-hook-form";
import { supabase } from "@/service/supabase";
import ResultID from "./ResultID";

interface Props {
  setMode: React.Dispatch>;
}

interface FormValue {
  name: string;
  phone: string;
}

const linkList = [
...
];

const FindID = ({ setMode }: Props) => {
  //찾기
  const [find, setFind] = useState(false);
  //찾기 결과
  const [result, setResult] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({ mode: "onBlur" });

  const onSubmit: SubmitHandler = async (inputData) => {
    //아이디 찾기 버튼 눌렀을 때
    setFind(true);
    const { data, error } = await supabase
      .from("userinfo")
      .select("email")
      .match({ username: inputData.name, phone: inputData.phone });
    if (error) {
      window.confirm("아이디 찾기 실패");
    } else {
      setResult(data[0]?.email || false);
    }
  };
  return (
    <>
      
      
        아이디 찾기
         setMode(false)} className="text-tc-light cursor-pointer">
          비밀번호 찾기
        
      

      
        
          {!find ? (
            
              
                
                  Username
                  {errors?.name?.message}
                
                
              

              
                
                  Phone Number
                  {errors?.phone?.message}
                
                
                  
                  
                
              
              
            
          ) : (
            
          )}
        
      
    
  );
};

export default FindID;

이름과 휴대폰번호를 입력받고 supabase userinfo 테이블에서 두 값을 같은 행의 id를 찾는다.

 //아이디 찾기 버튼 눌렀을 때
    setFind(true);
    const { data, error } = await supabase
      .from("userinfo")
      .select("email")
      .match({ username: inputData.name, phone: inputData.phone });
    if (error) {
      window.confirm("아이디 찾기 실패");
    } else {
      setResult(data[0]?.email || false);
    }


검색 결과에 맞춰 화면에 출력해준다.

```typescript
//
import React from "react";
import { useRouter } from "next/navigation";

interface Props {
  result: string | boolean;
  setFind: React.Dispatch>;
  setMode: React.Dispatch>;
}

const ResultID = ({ result, setFind, setMode }: Props) => {
  const router = useRouter();

  return (
    <>
      {result ? (
        
          아이디 찾기가 완료되었습니다.

          {result}

          
            
            
          
        
      ) : (
        
          고객님 명의로 찾은 아이디가 없습니다.
          
            
            
          
        
      )}
    
  );
};

export default ResultID;

[TIL] 데이터 생성 및 결제페이지 css

Wed, 17 Jan 2024 14:27:41 GMT

1. 지점 데이터 및 상품 데이터 생성

admin 페이지에서 직접 데이터를 입력해 supabase의 store 테이블과 product 테이블에 넣어주었다.

tada~!🧞‍♀️

2. cart 컴포넌트 수정

장바구니 페이지와 결제 페이지에서 사용되는 컴포넌트를 수정했다. 할인가격을 적용했다.

3. 결제 페이지 만들기

장바구니에 있는 데이터와 유저 데이터를 불러오고 페이지 css를 진행했다. 내일은 결제하기 버튼을 눌렀을 때 과정을 구현해야한다.

[TIL] 장바구니 구현하기 - 총 결제금액

Tue, 16 Jan 2024 14:32:02 GMT

~~어제 하루종일 삽질한 문제 해결~~

장바구니에서 총 결제 금액이 문제였다,, 카트 컴포넌트에서 상품 수량이 변경되면 거기에 맞게 바로바로 업데이트 됐으면 좋겠는데!!

문제점

처음에 생각한 로직은 페이지 처음 로드할 때 db에서 불러온 초기값을 가지고 총 결제금액을 계산한 후, 각 컴포넌트에서 수량이 변경되었을 때에 맞춰 더하고 빼주려고 했다. react-hook-form을 이용해 만든 number input 컴포넌트에서 변경 이전 값을 가져올 방법이 없다..!!

해결방법

페이지에서 아이템마다 총 금액을 담는 배열을 만들어서 각 컴포넌트에서 업데이트하고, 페이지에서는 배열에 있는 금액의 총합을 이용하도록 했다.

"use client";
import React, { useEffect, useState } from "react";
import Section from "@/components/layout/Section";
import CartItem from "./CartItem";
import { useCart } from "@/hooks";
import Link from "next/link";
import PageBreadCrumb from "@/components/layout/PageBreadCrumb";
    ...
const Page = () => {
    ...

  const { cart, isLoading } = useCart({ userId: auth, cartId: "" });

  const [cartPrice, setCartPrice] = useState([]);
    //카트 아이템당 총 금액을 담는 배열
  return (
    <>
      
      
        {logedIn ? (
                     ...

                  {(cart as CartBox[]).map((cartItem, idx) => {
                    return (
                      cartItem && (
                        
                      )
                    );
                  })}

                  ...

                    
                      총 결제금액
                      
                        {" "}
                        {cartPrice.reduce((acc, num) => acc + num, 0)}원
                           //총 결제금액은 배열의 총합으로 구하기
                        ...

import React, { useEffect, useState } from "react";
import Image from "next/image";
import { CartBox } from "./page";
import { VscChromeClose } from "react-icons/vsc";
import { useCart } from "@/hooks";
import { useForm } from "react-hook-form";
import NumberInput from "@/components/NumberInput";

...

const CartItem = (cart: Props) => {
  const { count, id, product_id, store_id, user_id, rent_date, store, product } = cart.cart;
  const { name, thumbnail, price, percentage_off, category } = product;
  const { cartPrice, setCartPrice, idx } = cart;

  const [isVisible, setIsVisible] = useState(true);

  const { updateCountMutation, deleteCart } = useCart({ userId: user_id, cartId: id });

  const {
    register,
    setValue,
    getValues,
    watch,
    formState: { errors }
  } = useForm({ mode: "onChange" });
  const watchCount = watch();

  useEffect(() => {
    const updateCount = async () => {
      if (isVisible) {
        //cartPrice 배열에 총액
        cartPrice[idx] = getValues("count") * price;
        setCartPrice([...cartPrice, 0]);
        updateCountMutation.mutate(watchCount.count);
      } else {
        //삭제했을 때
        cartPrice[idx] = 0;
        setCartPrice([...cartPrice, 0]);
      }
    };
    updateCount();
  }, [watchCount.count, isVisible]);

  const handleCartDelete = () => {
    setIsVisible(false);
    deleteCart(id);
  };

  return (
    <>
     ...
    
  );
};

export default CartItem;

짜잔 수량이 바뀌어도, 삭제해도 잘 작동한다.

'intrinsicAtrributes&...형식에서 선언된..'에러 해결하기

Sun, 14 Jan 2024 23:46:22 GMT

여기서 계속 ~~생각보다 간단히 해결되는 문제였다..~~

cartItem 상단에서 props로 받아온 cart값을 콘솔에 찍어봤을 때 값이 {cart: {...}}형태로 받아오는 것을 확인했다.

그래서

import React, { useEffect, useState } from "react";
import { supabase } from "@/service/supabase";
import Image from "next/image";
import { CartBox } from "./page";
import { VscChromeClose } from "react-icons/vsc";
import { useCart } from "@/hooks";

interface Props {
  cart: CartBox;
}

interface Input {
  count: number;
}

const CartItem = (cart: Props) => {
  const { count, id, product_id, store_id, user_id, rent_date, store, product } = cart.cart;
  const { name, thumbnail, price, percentage_off, category } = product;
  // console.log(product);

  const [isVisible, setIsVisible] = useState(true);

  const { updateCountMutation, deleteCart } = useCart({ userId: user_id, cartId: id });
  ...

CartItem이 받아오는 props 타입을 cart:{...}에 맞게 cart: CartBox로 고쳐줬다.

에러 해결 끝!!

🥵에러가 나는데 실행이 된다?!🥵

Thu, 11 Jan 2024 14:43:30 GMT

_나를 환장하게 하는 빨간줄_

오늘 뭔가 영차영차해서 장바구니 컴포넌트를 만들려고 했다. ~~(오늘 완성하고 싶었는데)~~

와 TIL쓰려고 코드 복사하면서 잉?이거 왜 이렇게 생겼냐? 싶은걸 고쳤더니 에러가 6개에서 2개로 줄었다..!!

그래서 오늘 무엇을 했는가

1. 장바구니 api route 작성

import { supabase } from "@/service/supabase";
import { NextResponse, NextRequest } from "next/server";

export const GET = async (res: NextResponse, context: { params: { userId: string } }) => {
  const {
    params: { userId }
  } = context;
  let { data: cart, error } = await supabase
    .from("cart")
    .select(`*, store(name), product(name, thumbnail, category(category_name), price, percentage_off)`)
    .eq("user_id", userId);
  if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
  return NextResponse.json(cart);
};

http://localhost:3000/api/cart/`userId`를 입력하면 해당 유저가 장바구니에 담은 아이템 데이터를 잘 가져오는 것을 확인할 수 있다.

2. 장바구니 데이터를 fetch 해올 useCart.ts 작성

import { useQuery } from "@tanstack/react-query";

interface CartBox {
  cart: {
    count: number | null;
    id: string;
    product_id: string | null;
    store_id: string | null;
    user_id: string;
    product: {
      name: string;
      thumbnail: string;
      price: number;
      percentage_off: number;
      category: {
        category_name: string;
      };
    };
    store: {
      name: string;
    };
  };
}

const useCart = (id: string) => {
  const {
    data: cart,
    isLoading,
    isError
  } = useQuery({
    queryFn: async (): Promise => {
      const response = await fetch(`/api/cart/${id}`, { method: "GET" });
      const data = await response.json();
      return data;
    },
    queryKey: ["cart"]
  });
  // console.log(cart);
  return { cart, isLoading };
};

export default useCart;

3. Cart 페이지 만들기

요 녀석이 결제 페이지에서 동일하게 들어가서 컴포넌트로 분리하기로 했는데 일단,, 일단 컴포넌트로 분리하지 않고,,

"use client";
import React, { useState } from "react";
import Image from "next/image";
// import CartItem from "./CartItem";  <- 컴포넌트로 만드려고 했던 흔적...

import useCart from "@/hooks/useCart";

interface CartBox {
  cart: {
    count: number | null;
    id: string;
    product_id: string | null;
    store_id: string | null;
    user_id: string;
    product: {
      name: string;
      thumbnail: string;
      price: number;
      percentage_off: number;
      category: {
        category_name: string;
      };
    };
    store: {
      name: string;
    };
  };
}

// const CartItem = ({ cart, product, store }: Props) => {
const CartItem = (cart: CartBox) => {
  const { count, id, product_id, store_id, user_id, store, product } = cart.cart;
  const { name: product_name, thumbnail, price, percentage_off, category } = product;
  console.log(price);

  //수정필
  const [cnt, setCnt] = useState(count || 0);
  return (
    <>
      
        
          
            
          
          
            {category.category_name}
            {store.name}
            날짜
            {price}원
            
              

              {cnt}
              
            
          
        
        
          상품금액{price}원
          수량 {cnt}개
          총금액{cnt * price}원
        
      
    
  );
};

const page = () => {
  //useCart에 사용자 id
  const { cart, isLoading } = useCart("aba26c49-82c0-42b2-913c-c7676527b553");
  // console.log(cart);
  return (
    <>
      {!isLoading ? (
        
          {(cart as CartBox[]).map((cartItem) => {
            console.log("cartItem:", cartItem);
            return cartItem && ;        
            //↑여기서 에러가 2개난다. 나증말 환장해
          })}
        
      ) : (
        Loading...
      )}
    
  );
};

export default page;

어떤 에러 2개가 나냐~~ 첫번째 에러는 잘 모르겠지만 두번째 에러는 정말 모르겠다. 콘솔에 key값 없다고 warning도 안뜨고 cartItem을 콘솔에 찍어봤을 때 분명히 id값이 있는데 왜,, 왜 없다고 하니,,

실행은 멀쩡하게 잘 된다. (불길해보이는 warning은 사진 사이즈 때문이다. 나중에 수정해야디) 기계친구한테 물어봐도 시원한 해결책을 얻지 못했다.

내일 점심 먹기 전에 꼭 해결해야지. 그래서 저녁 먹기전에 컴포넌트 분리하고 cart 페이지 틀까지 잡는게 목표!!

[TIL] DB에서 읽어온 정보가 들어있는 헤더 만들기

Wed, 10 Jan 2024 15:09:43 GMT

오늘을 모든 페이지에 공동으로 들어가는 헤더를 만들었습니다. 작업 속도가 거북이보다 느렸던게 아주 큰 흠이지만, 이전 프로젝트에서 정확히 이해하지 못하고 넘어갔던 부분을 조금씩 알아가는 느낌이 들어 다행이라는 생각이 듭니다. 오늘 공부한 부분을 내일 개발할 부분에 적용할 수 있겠죠?!
이번 프로젝트는 지금까지와는 다르게 개발기간도 길고, 디자이너님도 함께합니다. 그래서 우리 팀이 아주아주 정성으로 작성한 와이어프레임을 가지고 멋지게 작업해주고 계십니다. 어제 메인페이지 와이어프레임 디자이너.ver을 받아볼 수 있었는데요. 고것을 가지고 헤더를 만들어보았습니다.

🎨디자이너님의 믓찐 와이어프레임

중 일부입니다. 깔끔하고 멋지죠?!

💻구현한 헤더 (프로토타입)

footer 부분은 팀원분이 만드셨습니닷

좌상단에서부터 보면

✔ 로고

사이트 로고가 들어갈 부분은 일단 text로 처리했습니다. 클릭하면 메인페이지로 링크됩니다.

✔ 카테고리

아직 색상팔레트가 정확히 정해지지 않은 것 같아 검은색으로 남겨두었습니다. 카테고리를 클릭하면 상품 카테고리 드롭다운이 나옵니다. 이렇게. (css는 일단 흐린눈을,,👀) 그리고 해당 카테고리를 클릭하면 카테고리 페이지로 링크되도록 했습니다.

✔ 검색창

검색창은 input만 있습니다. 나중에 검색기능을 완성되면 input 처리와 검색 결과 처리를 추가할 계획입니다.

✔ 사람 아이콘

이 부분은 로그인 여부에 따라 달라지는데 로그인하지 않았다면 클릭했을 때 로그인/회원 가입 페이지로 연결됩니다.

만약 로그인 한 상태라면 클릭했을 때 드롭다운이 나옵니다. 마이페이지를 클릭하면 user 페이지로 이동하고 로그아웃 버튼을 누르면 로그아웃하며 홈으로 이동합니다.

로그인 상태는 zustand를 이용해 전역상태 관리합니다.

✔ 장바구니 아이콘

장바구니 아이콘을 클릭하면 장바구니 페이지로 링크됩니다. 로그인 하지 않았을 때는 보이지 않도록 해야하는데 방금 생각났습니다. 수정해야겠네요.

수정하려다가 다시 생각해보니 로그인 상태는 zustand를 이용해 관리하는데 header에는 use client가 없습니다. header를 그냥 csr으로 관리할 지 팀원들과 상의해봐야겠네요.

++ 모든 드롭다운은 영역밖을 클릭하면 닫히도록 만들었습니다.

📂 DB에서 카테고리 목록 가져오기

카테고리 목록은 supabase public schema에 category라는 이름의 table로 저장되어있습니다. 물론 헤더의 카테고리 목록 부분을 하드코딩해도 되지만 휴먼 에러가 발생할 수 있고, 추후 카테고리의 확장성을 고려했을 때 db에서 불러오기로 했습니다.

1. src>app>api 폴더에 category폴더 만들고 route.ts 만들기

import { supabase } from "@/service/supabase";
import { NextRequest, NextResponse } from "next/server";

export const GET = async () => {
  let { data: category, error } = await supabase.from("category").select("*");

  if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
  return NextResponse.json(category);
};

2. src>hooks에 useCategory.tsx 만들기

import { CategoryTable } from "@/types/db";
import { useQuery } from "@tanstack/react-query";

const useCategory = () => {
  const {
    data: category,
    isLoading,
    isError
  } = useQuery({
    queryFn: async (): Promise => {
      const response = await fetch(`/api/category`, { method: "GET" });
      const data = await response.json();
      return data;
    },

    queryKey: ["category"]
  });

  return { category, isLoading };
};

export default useCategory;

3. 카테고리 컴포넌트 만들기

"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";

import { RxHamburgerMenu } from "react-icons/rx";
import useCategory from "@/hooks/useCategory";
import { CategoryTable } from "@/types/db";

interface Props {
  category: CategoryTable;
}

const CategoryName = ({ category: { id, category_name } }: Props) => {
  return (
    
      {category_name}
    
  );
};

const HeadCategory = () => {
  //카테고리 메뉴 열기
  const [open, setOpen] = useState(false);
  const { category, isLoading } = useCategory();
  //   console.log(category);

  ...

  return (
    <>
       setOpen(!open)}>
        
        카테고리
        {open && !isLoading && (
          
            {(category as CategoryTable[]).map((category) => (
              
            ))}
          
        )}
      
    
  );
};

export default HeadCategory;

useCategory에서 가져온 데이터에 map함수를 적용하는게 쉽지 않았습니다. 코드가 크게 맘에 들지는 않습니다. 너무 지저분해요. 프로젝트를 진행하면서 시간 여유가 있다면 깔끔하게 정리하고 싶습니다.

4. 카테고리 컴포넌트 헤더에 삽입

...
const Header = () => {
  return (
    
      
        
          
            YOLOCEAN
          
        

        
          
                    //이렇게 삽입해줬습니다.
          
          
            
              
              
            
            
              
            
            
              
                
              
            
          
        
      
    
  );
};

db에서 데이터를 잘 가져왔던 경험을 가지고 앞으로 프로젝트에 잘 써먹어 보도록 하겠습니다. 오늘도 수고했다!!

React Hook Form으로 회원가입/로그인 구현하기

Tue, 09 Jan 2024 15:18:52 GMT

❓ React-Hook-Form을 적용한 이유

지금까지는 input 이벤트를 관리할 때 useState & onChange를 이용했다. 이렇게 했을 때 단점은 input 창에 변화가 있을 때마다 리렌더링이 발생한다는 것이다. 입력의 개수가 적을 때는 크게 문제가 되지 않겠지만, 관리해야 하는 state가 많아지고, 입력할 때마다 컴포넌트가 리렌더링하게 되면 불필요한 연산이 발생하고, 유효성 검사 같은 기능이 필요할 경우 코드 양이 많아지고, 유지보수에 어려움이 생길 수 있다.

🌷 React-Hook-Form의 장점 🌷

Performance of React Hook Form Performance is one of the primary reasons why this library was created.
"성능이 곧 react-hook-form을 만든 이유"

1. 성능 최적화

내부적으로 성능 최적화를 고려해 설계되었다. 리렌더링을 최소화 해 불필요한 작업을 방지하고, 빠른 사용자 경험을 제공한다. 📌 대규모 폼이나 복잡한 유효성 검사 로직을 가진 폼에서 특히 유용!!

2. 간편한 API

사용하기 쉽고 직관적인 API를 제공한다.

3. 유효성 검사 용이

다양한 유효성 검사 규칙과 커스텀 유효성 검사 규칙을 사용해 폼의 요구사항을 쉽게 처리할 수 있다.

🎯 React-Hook-Form 사용하기

🌊 react-hook-form 없이 구현한 회원가입

const SignUp = ({ login, setLogin, setOpen }: Props) => {
  //입력받은 이메일, 패스워드, 닉네임
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");
  const [pwCheck, setPwCheck] = useState("");
  const [name, setName] = useState("");

  //유효성 검사에 사용
  const pwValid = pwCheck !== "" && pw === pwCheck ? true : false;
  const isValid = pwValid && emailValidChk(id) && pw.length > 5 && name !== "" ? false : true;

  ...

  return (
    ...
   
            
              
                Email address{" "}
                {emailValidChk(id) ? (
                  ✅
                ) : (
                   이메일 형식이 유효하지 않습니다.
                )}
              
              
                 setId(e.target.value)}
                  placeholder="  example@where2go.com"
                />
              
            

            //비밀번호 input 생략

            
              
                
                  Password 확인{" "}
                  {!pwValid ? (
                    비밀번호가 일치하지 않습니다.
                  ) : (
                    ✅
                  )}
                
              
              
                 setPwCheck(e.target.value)}
                  placeholder="  비밀번호 재입력"
                />
              
            

            // username 입력 생략

            
              
            
          
            ...
  );

react-hook-form 없이 만든 회원가입은 input마다 useState로 처리하고, 유효성 검사도 로직을 각각 만들어 에러 메세지 처리를 해야한다. onChange로 state를 변경할 때마다 렌더링 되므로 불필요한 렌더링이 너무 많고, 유효성 검사가 복잡하다는 단점이 한눈에 보인다.

✨ React-hook-form으로 리팩토링

⚙ React-hook-form install

npm install react-hook-form

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

interface FormValue {
  id: string;
  pw: string;
  pwCheck: string;
  name: string;
}

const SignUp = ({ mode, setMode }: Props) => {
  //회원가입 함수 signUpNewUser() 생략

  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
    setError
  } = useForm({ mode: "onBlur" });

  //비밀번호 유효성 검사를 위해 pw 입력값 확인
  const passwordRef = useRef(null);
  passwordRef.current = watch("pw");

  const onSubmit: SubmitHandler = (inputData) => {
    console.log(inputData);
    signUpNewUser(inputData.id, inputData.pw, inputData.name);
  };


  return (
    <>
             ...
          
            
              
                Email address
                {errors?.id?.message}
              
              
                
              
            

            
              
                
                  Password
                  {errors?.pw?.message}
                
              
              
                
              
            

            
              
                
                  Password 확인 {errors?.pwCheck?.message}
                
              
              
                 (value === passwordRef.current ? true : "   비밀번호가 일치하지 않습니다.")
                  })}
                  placeholder="비밀번호 확인"
                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-300 sm:text-sm sm:leading-6"
                />
              
            

            
              
                
                  Username
                  {errors?.name?.message}
                
              
              
                
              
            

            
              
            
          

          
             setMode(!mode)}
              className="mt-10 text-center text-sm text-blue-700 hover:text-blue-500 cursor-pointer"
            >
              로그인 하기
            
          
        
      
    
  );
};

...

register

이메일 input 부분을 살펴보면

첫번째 매개변수 name : 해당 필드를 다룰 key값으로 반드시 들어가야 하는 값이다.
두번째 매개변수 options 객체: 유효성 검사를 위한 프로퍼티들이 들어갈 수 있다.
- required, min, max, minLength, maxLength, pattern 등...
- value와 message로 구성된 객체를 주면 해당 에러에 대한 구체적인 메세지를 제공할 수도 있다.

watch

코드 상단 비밀번호 유효성 검사 부분에서

//비밀번호 유효성 검사를 위해 pw 입력값 확인
  const passwordRef = useRef(null);
  passwordRef.current = watch("pw");

watch를 폼에 입력된 값을 구독해 실시간으로 체크할 수 있게 한다,
매개변수를 주지 않으면 전체 값을 관찰할 수 있고, 매개변수를 주면 해당 값만 관찰할 수 있다.

handleSubmit

폼에서 데이터를 입력하고 사용자가 등록(회원가입) 버튼을 누르면 submit 이벤트가 발생한다. 이때, 사용자가 해당 데이터를 올바른 형식으로 입력했는지 검증을 한다. form 태그의 onSubmit 에 handleSubmit 이라는 함수를 넣어주고 매개변수로 우리가 정의한 onSubmit 함수를 넣어주면 된다. onSubmit 함수를 정의 할 때 매개변수로 data 라는 값을 받을 수 있는데, 해당 값은 사용자가 제출 버튼을 클릭 한 후 내려오는 사용자 입장에서 최종으로 제출하는 데이터가 된다. 이 값을 이용해 서버에 값을 넘겨주면 된다.

[TIL] 최종 프로젝트 db구성 및 와이어 프레임 수정

Mon, 08 Jan 2024 14:06:43 GMT

오늘은 종일 와이어프레임을 수정했습니다..!! 기초가 탄탄해야 튼튼한 건물을 세우는 것 처럼 자세하고 정성들여 만든 와이어프레임이 멋진 웹페이지를 완성하는데 큰 도움이 될 것이라고 믿으며..!!

📁DB 설계하기

우선 어떤 테이블이 필요한지, 테이블마다 어떤 필드가 필요한지 스프레드시트에 정리해보았다. 이렇게.

📂Database Schema

위에서 작성한 스프레드시트를 기반으로 supabase에 table을 만들었다.

(멋져요,,🙌)

store나 상품관련 dummy data가 많이 필요할텐데 supabase는 csv파일을 바로 db에 업로드할 수 있다고 하니 다행이다.

🙃와이어프레임 수정

이라고 쓰고 재창조..라고 읽는 프로젝트 기획이 한번 변경된 후 간단하게 작성한 와이어프레임으로는 좀 부족할 듯 싶어 와이어프레임을 수정해보았다.

구)와이어프레임

분명히 만들때는 이정도면 충분하지라고 생각했는데 지금 생각해보니 어림도 없는 생각이었다. 디자이너님도 이 와이어프레임으로 작업해달라고 하면 힘드셨을듯.

⭐새로 만든 와이어프레임⭐

한눈에 봐도 볼륨차이가 많이 난다. 아무래도 이렇게 페이지가 많은 프로젝트는 진행해본 적이 없어서 와이어프레임 짜는 것도 쉽지 않았다. 와이어프레임을 보니 프로젝트가 끝나지도 않았는데 완성한 것처럼 뿌듯해서;; 내일부터는 진짜로 개발에 집중해서 내가 맡은 부분 후다다다닥 끝내야지.

이번 로그인/회원가입 기능에는 react-hook-form을 사용해보려고 한다. 아주 나이쓰하다던데,, 잘 활용해봐야겠다.

[Supabase] 이메일로 회원가입/로그인 구현하기

Sun, 07 Jan 2024 07:35:42 GMT

어디가지🍆 프로젝트를 진행하면서 처음으로 supabase를 사용해보았다. supabase 공식 docs가 꽤나 친절하게 설명되어있는 편이지만 영어로 되어있고 구글링했을 때 한국어로 된 정보는 거의 없고 youtube이 대부분이었어서 정리를 해보려고 한다^^

🤜🤛Supabase vs Firebase

supabase는 RDBMS이라는 것이 firebase와 가장 큰 차이점이다. firebase는 'document-based data storage'_를 기반으로 구축하지만 supabase는 _'postgreSQL' 이라는 관계형 데이터베이스 시스템을 제공한다. 때문에 SQL 쿼리를 사용할 수 있다.

SQL 쿼리 사용 가능

개발과정에서 가격 부담이 적음 ( firebase는 CRUD에 대해 가격을 청구하고, supabase는 저장된 데이터 양에 따라 요금 청구 → 개발 과정에서 가격 부담이 적다)

🔐Supabase Auth

이번 프로젝트에서는 이메일 로그인과 카카오 로그인을 구현했는데, Docs가 아주 친절하게 step by step으로 설명되어있어서 따라서 하면 어렵지 않았다. 특히 카카오 로그인에 대한 설명도 상세히 적혀있어서 꽤 감동이었다. (물론 자잘한 문제가 있긴 했지만,,)

🔨회원 정보 관리 방법

supabase docs에서는 Authentication 자체의 meta_data를 활용하기 보다는 별개의 table을 만들어 관리하기를 추천하고 있다. (보안문제)

그래서 유저 정보를 갖는 table인 userinfo Auth에 새로운 정보가 생기면 userinfo 테이블에 자동으로 update되게 만드는 것이었다. (트리거를 만들어야되겠군..!!) 외국인 선생님의 youtube영상과 희미한 SQL 문법 기억을 이용해 함수와 트리거를 작성했다.

📌Auth 생성 시 자동으로 update 되는 userinfo 테이블 만들기

✔ userinfo 테이블 만들기

SQL editor로 만들기 ```sql
- create a table for public profiles

-- userInfo라는 이름의 테이블을 생성 -- userInfo에서 관리하고 싶은 column들의 이름과 타입을 적어준다. -- 생성은 꼭 SQL Editor에서 하지 않아도 된다. table Editor에서도 가능 create table userInfo( id uuid references auth.users on delete cascade not null primary key, email text, avatar_url text, username text admin bool, );

* Table editor로 만들기
![](https://velog.velcdn.com/images/_soul_/post/c7bbb81b-f738-4241-bb95-8a47858060ac/image.png)
id 사슬 클릭하고
![](https://velog.velcdn.com/images/_soul_/post/28e79613-17c4-4df7-9ab2-9862d59d86de/image.png)




#### ✔ Function과 Trigger 작성하기
> auth.users에 새로운 값 insert → auth.users에 새로 입력된 값으로 userinfo에 회원 정보 저장

```sql

create policy "public profiles are viewed by everyone." on userInfo
for select using(true);

create policy "Users can insert their own profile." on userInfo
for insert with check(auth.uid()=id);

-- 회원가입 시 auth 테이블에 새로 생기는 row의 id, email, raw_user_meta_data 칼럼에서 값을 가져와서 자동으로 userinfo 테이블에 업데이트 해줌
-- auth의 id == userinfo의 id
create function public.handle_new_user()
returns trigger as $$
begin
insert into public.userInfo(id, email, username, avatar_url)
values (new.id, new.email, new.raw_user_meta_data->>'name', new.raw_user_meta_data->>'avatar_url');
return new;
end;

$$ language plpgsql security definer;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

auth 스키마의 users 테이블에서 값을 가져오는 것 (회원가입을 하면 users 테이블이 업데이트 된다.)
새로 회원 가입을 할 때 가져올 column의 값이 비어있으면 (가져올 수 있는 값이 없으면) 에러가 발생하므로 주의

✔ 확인하기

데이터 베이스 schema visualizer에서 auth.users와 userinfo가 연결되어있는 것을 확인 할 수 있다.
데이터 베이스 functions에서 작성한 함수를 확인/수정할 수 있다.
데이터 베이스 triggers에서 작성한 트리거를 확인할 수 있다.
- auth trigger는 SQL editor로만 수정 가능

📝이메일 회원가입 구현하기

위에서 작성한 트리거에 auth.users의 raw_user_meta_data_ column의 값을 가져왔으므로 회원가입 시에 raw_user_meta_data_ 값을 함께 등록하는 것이 매우 중요하다.

.
.
.
    const { data, error } = await supabase.auth.signUp({
      email: id,
      password: pw,
      options: {
        data: {
          user_name: name,
          avatar_url: null
        }
      }
    });
.
.
.

위의 코드에서 option의 data 부분이 raw_user_meta_data_ column에 저장되는 값이다.

회원가입을 진행하고나서 웹페이지 localstorage에 user 정보가 저장되는 것을 보아 정상적으로 회원가입이 진행되고 나면 자동으로 로그인 되는 듯 하다.
++ 기본설정이 이렇게↑ 되어있고 회원가입과 로그인을 분리하고 싶으면 Settings → Authentication → Auth Settings → User Signups 에서 Allow new users to sign up을 끄면 된다.

❗❗Error Code : 429 too many requests

supabase auth 설정을 아무것도 건들이지 않은 상태에서 이메일 회원가입을 하게 되면 입력한 이메일 주소로 인증메일이 발송된다. ↓ waiting for verification,,

오 이런 기능이?! 하고 나서 회원가입과 로그인을 계속해서 테스트 하다보면 갑자기 회원가입도 로그인도 안되는 현상이 발생한다. 콘솔을 열어보면 429에러가 발생한 것을 볼 수 있는데 supabase에서 인증메일을 보내는 기본 횟수가 아주 적기 때문이다. (정확한 횟수는 모르겠다.)

해결방법1) 이메일 인증기능 끄기

Authentication → Providers → Auth Providers → Email → Confirm email 끄기

해결방법2) SMTP 서버 이용하기

이메일 인증기능이 꼭 필요하다면 자체 SMTP 서버를 사용하는 방법이 있다. 처음에 이메일 인증기능을 끄는 기능이 있는지 모르고 Gmail을 이용해 SMTP setting을 했는데 특별히 어렵지 않았고 정상적으로 인증이메일이 발송되는 것도 확인했다.

🔑이메일로 로그인 구현하기

    const { data, error } = await supabase.auth.signInWithPassword({
      email: id,
      password: pw
    });

로그인을 하면 localStorage에 동일한 이름의 key값으로 로그인 정보가 저장되는 것을 알 수 있다

🔒로그아웃

  const { error } = await supabase.auth.signOut();

공식 docs 링크

최종 팀 프로젝트 S.A.

Fri, 05 Jan 2024 08:00:01 GMT

아이디어

- 이력서 관리 - 여행 플래너 (날씨 + 캘린더 + 지도) - 개발 블로그 - 블로그 포스팅 기능 - 다른 사람 포스팅 기능 - 팔로우 - 좋아요 - 회원가입 - notion 연동 - 유기견 사이트 - 분위기 공유 사이트 (음악 재생) - 렌탈 어플리케이션 플랫폼 - 쿠팡처럼 신청을하고 렌탈을 할 수 있는 어플리케이션 - 유아용품 (아이들의 성장이 빠르기 때문에 ) - 위치기반 (주변 기반에서 보내줘야하기 때문에 + 계약서) - 렌탈을 하는 업체가 없기 떄문에 테스트 시에는 임의로 넣어줘야한다.

고려하고 있는 기능들

실시간 채팅
차트
커머스 기능
캘린더
지도
뮤직 플레이어

고려하고 있는 라이브러리

matter-js (물리 엔진 기능)
clayful (커머스 회원, 결제 기능)
react-player (음악 플레이어 기능)
toast ui editor(마크다운 에디터 기능) ⇒ @uiw/react-md-editor

프로젝트

해양 레저 렌탈전문 웹/앱

MVP 스펙

일반 사용자 관련

회원가입 , 로그인
회원정보 수정
문의에 대한 답변 알림

관리자 관련

제품 등록 (제품 대여소에대한 지도정보 등록)
제품에 대한 문의 답변작성
등록된 제품의 상태관리

*제품 관련 *

제품 조회
렌탈 후기작성(댓글 및 별점 + 사용자가 렌탈한 이력이 있을경우 작성가능)
제품에 대한 문의
장바구니 담기

개발환경

Next.js - App Router
supabase
react kakao map
zustand
tailwindCSS

와이어 프레임

Where2Go (어디가지🍆) 프로젝트 KPT 회고

Wed, 03 Jan 2024 07:54:28 GMT

KPT 회고

Keep - 현재 만족하고 있는 부분

도⭐⭐
- 팀 분위가 너무 좋았다
- 모르는 것이 있을 때 같이 고민해주고 답을 찾는 과정이 좋았다
- 깃헙 룰이 잘 지켜졌다고 생각한다
마⭐⭐
- 초기 프로젝트 세팅 : 프로젝트 초기 설정을 탄탄하게 해서 편했다
- 팀원간의 활발한 의사소통 : 의견 공유와 피드백을 통한 프로젝트 퀄리티 향상
- git 커밋 컨벤션 : 커밋 컨벤션에 따라 git을 관리한 부분
한⭐⭐
- 각자 맡은 역할을 모두 성실하게 수행했다
- tailwind, nextjs, ts, supabase 등 새로운 기술에 도전하여 포기하지 않고 끝까지 완성해냈다!
- nextjs의 장점을 십분 활용하여 SSR로 구현하려고 시도한 점이 좋았다.
민⭐⭐
- github issue로 진행상황 관리 : 구두로 진행상황 공유하는 것 뿐만 아니라 문서화 되어있어서 좋음
- 커밋 컨벤션

Problem - 불편하게 느끼는 부분

도⭐⭐
- Next.js에 적응하는데 시간이 걸려 프로젝트를 진행하는데 힘든 점이 많았다.
- Next.js를 사용하는데 page.tsx에 몰아서 작성하다보니 가독성이 떨어졌다.
마⭐⭐
- 초기 프로젝트 기획 : 초기에 프로젝트를 너무 장황하게 잡은 것 같다.
- 시간 : 프로젝트 진행 기간이 좀 짧았던 것 같다.
한⭐⭐
- 리액트 쿼리를 사용하면서 여러개의 쿼리키를 효율적으로 관리하지 못함
- 타입스크립트가 미숙하여 코드 이해보다 돌아가게 하는 데 중점을 둔 것이 아쉬움
민⭐⭐
- pull request 리뷰 🌟
- merge끝난 브랜치 삭제하기
- 처음 쓰는 기술스택,, 쉽지 않아여,,(익숙해지자!!)

Try - Problem에 대한 해결책, 당장 실행 가능한 것

시간여행을 두려워하지 말고 병합한 브랜치는 가차없이 삭제하자
서버와 통신할 대 모든 로딩에 대해 spinner, 스켈레톤 등의 적용을 고려하자 loading.ts
next js의 SSR, SSG개념 이해하고 프로젝트에 잘 활용하기
코드가 한 파일에 올리지 않도록 구조화를 잘짜서 깔끔하게 만들기
리액트 쿼리의 다양한 기능 사용해보기 (인피니트 쿼리, 페이지네이션…)
PR 리뷰 한번씩 남겨보기 (KPT 회고 끝난 다음 바로!!)
PR 리뷰를 잘 남기자!: 사소한 리뷰라도 서로 공유하기 LGTM :)
app router와 pages router를 이용한 todo app을 만들며 next.js 와 SSR에 친숙해지기
리액트 쿼리 사용 시 쿼리 키를 하드코딩으로 작성하기보다 객체형태로 key를 관리해 휴먼 에러를 방지하자
커밋 컨벤션처럼 PR review도 규칙을 만들어보자

[프로그래머스] 주차 요금 계산

Thu, 28 Dec 2023 00:09:52 GMT

주차 요금 계산

문제 설명

주차장의 요금표와 차량이 들어오고(입차) 나간(출차) 기록이 주어졌을 때, 차량별로 주차 요금을 계산하려고 합니다. 아래는 하나의 예시를 나타냅니다.

요금표

기본 시간(분) 기본 요금(원) 단위 시간(분) 단위 요금(원)

180 5000 10 600

기본 시간(분)	기본 요금(원)	단위 시간(분)	단위 요금(원)
180	5000	10	600

입/출차 기록

시각(시:분)	차량 번호	내역
05:34	5961	입차
06:00	0000	입차
06:34	0000	출차
07:59	5961	출차
07:59	0148	입차
18:59	0000	입차
19:09	0148	출차
22:59	5961	입차
23:00	5961	출차

자동차별 주차 요금

차량 번호	누적 주차 시간(분)	주차 요금(원)
0000	34 + 300 = 334	5000 + ⌈(334 - 180) / 10⌉ x 600 = 14600
0148	670	5000 +⌈(670 - 180) / 10⌉x 600 = 34400
5961	145 + 1 = 146	5000

어떤 차량이 입차된 후에 출차된 내역이 없다면, 23:59에 출차된 것으로 간주합니다.

0000번 차량은 18:59에 입차된 이후, 출차된 내역이 없습니다. 따라서, 23:59에 출차된 것으로 간주합니다.

00:00부터 23:59까지의 입/출차 내역을 바탕으로 차량별 누적 주차 시간을 계산하여 요금을 일괄로 정산합니다.
누적 주차 시간이 기본 시간이하라면, 기본 요금을 청구합니다.
누적 주차 시간이 기본 시간을 초과하면, 기본 요금에 더해서, 초과한 시간에 대해서 단위 시간 마다 단위 요금을 청구합니다.
- 초과한 시간이 단위 시간으로 나누어 떨어지지 않으면, 올림합니다.
- ⌈a⌉ : a보다 작지 않은 최소의 정수를 의미합니다. 즉, 올림을 의미합니다.
  주차 요금을 나타내는 정수 배열 fees, 자동차의 입/출차 내역을 나타내는 문자열 배열 records가 매개변수로 주어집니다. 차량 번호가 작은 자동차부터 청구할 주차 요금을 차례대로 정수 배열에 담아서 return 하도록 solution 함수를 완성해주세요. #### 제한사항 링크 참조
  #### 입출력 예시 링크 참조

solution code

function solution(fees, records) {
    let answer = [];

    const getNumberTime = (time) => {
        const arr = time.split(":");
        return Number.parseInt(arr[0]) * 60 + Number.parseInt(arr[1]);
    }

    const getParkTime = (start, end) => { 
        return getNumberTime(end) - getNumberTime(start); 
    }

    const getTotalFee = (time) => {

        // 기본 시간
        let cost = fees[1];
        time -= fees[0];

        // 추가 단위 시간
        if(time > 0) {
            cost += Math.ceil(time/fees[2]) * fees[3];
        }

        return cost;
    }

    const park = records.map((item) => item.split(" ")).sort((a, b) => a[1] === b[1] ? a[0] - b[0] : a[1] - b[1]);

    let time = 0;
    for(let i=park.length-1; i>=0;i--) {

        if(park[i][2] === 'IN') {
            // 나간 기록이 없는 차량
            time += getParkTime(park[i][0], "23:59");
        } else {
            // 나간 기록이 있는 차량
            time += getParkTime(park[i-1][0], park[i][0]);
            i--;
        }

        // 차량 종류가 바뀌면 answer 맨 앞에 주차 요금 추가
        if(i === 0 || (park[i][1] !== park[i-1][1])) {
            answer.unshift(getTotalFee(time));
              // 차량 번호의 오름차순 정렬된 park 배열을 반대로 탐색하고 있기 때문에 unshift
            time = 0;
        }
    }
    return answer;
}

Where2Go (어디가지🍆) 프로젝트 S.A. (미완성)

Wed, 27 Dec 2023 00:05:30 GMT

프로젝트 명 : Where2Go (어디가지🍆)
소개
- 한 줄 정리 : 자랑하고 싶은 숨은 명소들, 함께 즐기고 싶은 특별한 장소들을 공유하는 지도 기반의 소셜 플랫폼 입니다
- 내용 : ‘어디가지?’ 는 지도 기반의 소셜 플랫폼으로, 여러 사용자들이 자신만의 특별한 스팟을 공유하고 추천할 수 있는 서비스입니다. 해당 서비스를 통해 자신이 지나쳤던 장소를 발견하고, 사용자들과 특별한 장소를 공유할 수 있습니다.
- 필수 구현 사항
  - 게시물
    - 게시물 작성:
      - 사진 업로드 (최소 1장, 최대 5장)
      - 공간에 대한 소개글
      - 장소의 주소 (상세하게)
      - 방문한 날짜
      - 대표 카테고리 (1개만)
    - 게시물 삭제 / 수정
  - 타 유저 게시물/개인 페이지를 통해 팔로우/취소 가능
  - 사용자
    - 프로필
      
      프로필 수정
    - 마이페이지에서 사용자가 작성한 게시물 전체 확인
  - 지도API (카카오맵)
    - 키워드로 장소 검색
    - 등록된 스팟에 핀 찍기 (+오버레이)
    - 현재 유저 위치 기반 장소 찾기

추가 구현 사항
- 댓글 관련 기능 (작성/수정/삭제)
- 회원 탈퇴 기능
- 지도 오버레이 상세화

개발환경
- 전역 상태 관리 라이브러리: zustand
- 백엔드 서버: supabase
- 프레임워크: Next.js (pages-router)
- TypeScript

와이어프레임

[React] React Query의 동작원리

Mon, 25 Dec 2023 06:28:43 GMT

🎯 일단 사용해보기

0. 설치

yarn add react-query

+ json-server 설치 및 실행

yarn add json-server
yarn json-server --watch db.json --port 3001
//db.json 파일을 db로 사용하고 3001번 포트에서 서버를 시작하겠다

+ axios 설치 및 실행

yarn add axios

1. QueryClientProvider

: 데이터를 읽어오는 기능(QueryClient)를 애플리케이션 전체에 주입하는 API

import React from "react";
import Router from "./shared/router";
import { QueryClient, QueryClientProvider } from "react-query";

const App = () => {
  
    return ;
  ;
};

export default App;

2. useQuery

import { useQuery } from 'react-query';
import { fetchTodoList } from '../api/fetchTodoList';

function App() {
    const info = useQuery('todos', fetchTodoList);
      //const { isLoading, isError, data } = useQuery("todos", fetchTodoList);
      ...
}

useQuery('todos', fetchTodoList)

(1) useQuery의 첫번째 인자

Query Keys : refetching / caching 처리 / 애플리케이션 전체 맥락에서 이 쿼리를 공유하는 방법으로 사용된다. (여러 컴포넌트에 존재해도 같은 key면 같은 쿼리 및 데이터를 보장함)

Query Keys는 한 단어일수도, 배열일 수도 nested객체 일 수도 있다.

const query1 = useQuery('qk', api); // unique
const query2 = useQuery('qk2', api); // not unique
const query3 = useQuery('qk2', api); // not unique

: key 이므로 고유한 값을 가져야 한다.

한 단어로 이뤄진 Query Keys
```
useQuery('todos', ...)
```
위와 같은 코드가 있다면 내부적으로는 아래처럼 해석된다.
```
queryKey === ['todos']     // 배열 형태로 갖고 있다
```
배열 형태로 이뤄진 Query Keys : 문자, 숫자, object 등등 여러가지를 조합한 배열 형태의 key도 사용 가능

// ID가 5인 todo 아이템 1개
useQuery(['todo', 5], ...)
// queryKey === ['todo', 5]

// ID가 5인 todo 아이템 1개인데, preview 속성은 true야
useQuery(['todo', 5, { preview: true }], ...)
// queryKey === ['todo', 5, { preview: true }]

// todolist 전체인데, type은 done이야
useQuery(['todos', { type: 'done' }], ...)
// queryKey === ['todos', { type: 'done' }]

(2) 두 번째 인자

Query Functions : promise 객체 리턴 : promise 객체는 반드시 data resolve하거나 에러를 내야한다
- resolve : 정상적으로 통신되었음을 의미
- 오류가 발생한 경우에는 그에 맞는 적절한 오류 처리 관련 로직을 삽입해 처리해줘야한다. (axios, fetch, graphgl...)

(3) useQuery의 결과물

: useQuery를 통해 얻은 결과물은 객체이다. : 객체 안에는 '조회'를 요청한 결과에 대한 거의 모든 정보가 들어있고, 그 과정에 대한 정보도 들어있다.

조회를 시작하면 isLoading이 true가 되고

조회 결과 오류가 나면 isError가 true가, isLoading은 false가 된다. error 객체를 통해 더 상세한 오류 내용을 확인 할 수 있다.

조회 결과 정상이 되면 isSuccess가 true가 , isLoading은 false가 된다. data 객체를 통해 좀 더 상세한 조회 결과를 확인할 수 있다.

2. useMutation

: query와 다르게 mutation은 CUD에서 사용됨

예제
```
// [출처] : 공식문서
```

function App() { const mutation = useMutation(newTodo => { return axios.post('/todos', newTodo) })

return (

{mutation.isLoading ? ( 'Adding todo...' ) : ( <> {mutation.isError ? (

An error occurred: {mutation.error.message}

) : null}

       {mutation.isSuccess ? Todo added! : null}

       
     
   )}

) }


 * `mutation.mutate(인자)`
 : **인자**는 반드시 한 개의 변수 또는 객체여야 한다.
 : 결과는 객체의 형태로 되어있고
 : 그 객체는 항상 (isIdle | isLoading | isError| isSuccess) 중 하나의 상태이다.

 



# 🎯 React Query란?
: 서버 상태 관리를 쉽게 할 수 있게 도와주는 라이브러리 이다.
> 서버 상태 관리: 서버에 요청하고 응답받는 모든 과정과 연관된 데이터들
* `fetching`: 서버에서 데이터 받아오기
* `caching`: 서버에서 받아온 데이터를 따로 보관해서 동일한 데이터가 단 시간 내에 다시 필요할 시 서버 요청없이 보관된 데이터에서 꺼내쓰기
* `synchronizing`: 서버 상의 데이터와 보관 중인 캐시 데이터(서버 상태)를 동일하게 만들기(동기화)
* `updating`: 서버 데이터 변경 용이 (mutation & invalidateQueries)


#### 기존 미들웨어의 한계
: 서버와의 API통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga등의 미들웨어를 사용할 수 있다. 하지만 문제가 있는데,,
* 보일러 플레이트 코드의 양이 너무 많다.
* Redux는 비동기 데이터 관리를 위한 전문 라이브러리가 아니다. (규격화 문제)

#### 리액트 쿼리의 장점
* 보일러 플레이트를 만들다가 오류날 일이 없다
* 사용방법이 thunk에 비해 쉽고 직관적이다.

#### 기존 미들웨어와의 차이
```javascript
// React Query 미사용 시
const [todos, setTodos] = useState([]);
const [isLoading, setIsLoading] = useState(false);

const getTodos = async () => {
  setIsLoading(true);
    const data = await axios.get(`${API_URL}/todos`).then(res => res.data);
    setTodos(data);
  setIsLoading(false);
}
useEffect(() => {
    getTodos();
}, []);


// React Query 사용 시
const getTodos = () => axios.get(`${API_URL}/todos`).then(res => res.data);

const { data: todos, isLoading } = useQuery(["todos"], getTodos);

+읽어볼 만한 글) 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유

✔ 주요 키워드

Query : 어떤 데이터에 대한 요청 : axios의 get요청과 유사
Mutation : 데이터 그룹 자체를 변경하는 것 (Create, Update, Delete) : axios의 post, put, patch, delete 요청과 유사
Query Invalidation : 쿼리 무효화 : 기존에 가져온 Query는 서버 데이터이기 때문에 언제든지 변경이 있을 수 있다. 최신 상태가 아닐 수 있으므로 기존의 쿼리를 무효화한 후 최신화 해야 하는데 React Query는 이런 과정을 알아서 해준다.

✔ SWR 전략

stale-while-revalidate : 신규 데이터가 도착하는 동안 일단 기존 캐싱된 데이터를 사용하도록 하는 전략

서버의 헤더 응답 설정 Cache-control에서 아이디어 기원 ⬆️ 클라이언트가 0~1초 사이에 다시 데이터를 요청하면, 서버 호출없이 캐시 데이터를 바로 사용 ⬆️ 클라이언트가 1 ~ 60s 사이에 다시 데이터 요청하면, 일단 캐시 데이터를 사용하고 서버에서 신규데이터를 주면 그것으로 교체

✔ 캐시 데이터 저장

QueryClientProvider는 React Context API를 내부적으로 사용한다.
QueryCLientProvider의 자식으로 있는 모든 컴포넌트들은 캐시 데이터에 접근할 수 있다.
페이지 컴포넌트 외부에 상태가 존재한다는 점에서 캐시 데이터는 전역 상태로 볼 수 있다.
```
//App.jsx
const queryClient = new QueryClient();
```

const App = () => { }; }


### ✔ useQuery에서 자주 사용하는 옵션들
#### ① enabled
```javascript
useQuery(["todos"], getTodos, {enable: true})

: boolean 타입 (true / false) : true일 경우에만 queryFn 실행 : default 값은 true, useQuery 자동 실행됨

예제1 (Disabling / Pausing Queries): 이벤트 발생 시에만 수동 실행하고 싶을 때

const {data, refetch} = useQuery(["todos"], getTodos, {enabled: false});

return (
    
          
    
);

예제2 (Dependent Queries): useQuery가 2개 이상이고 실행순서 설정이 필요할 때

//Get user
const {data: user} = useQuery({queryKey: ['user', email], queryFn: getUserByEmail});

const userId = user?.id;

//Get user's projects
const { status, fetchStatus, data: projects }
    = useQuery({ queryKey: ['projects: userId'], queryFn: getProjectsByUser, enabled: !!userId});
// userId가 존재하기 전까지 이 쿼리는 실행되지 않음
// !!userId === Boolean(userId)

② select

queryFn에 의해 리턴된 값을 변형시킨 후에 useQuery의 리턴 data로 넘겨줌 (단, cache data는 queryFn에서 리턴 받은 값 그대로 이다.)

import {useQuery} from "react-query"

function User(){
  const { data } = useQuery( ['user'], fetchUser, { select: (user) => user.username, });
  return Username: {data};
}

✔ react Query의 데이터 흐름

"오래된 것 먼저, 리렌더링 되면서 새 것으로 교체"

📌Tanstack Query ?

: React Query v4 부터 라이브러리 이름이 Tanstack Query로 변경되었다. React 뿐 아니라 Vue 같은 다른 SPA 프레임워크에도 적용!!

// "react-query": "^3.39.3"
yarn add react-query

// "@tanstack/react-query": "^4.29.19"
yarn add @tanstack/react-query

+ v4부터는 query key를 반드시 배열 형태로 써야 함

📌React Query LifeCycle

fresh: 새거가 필요하지 않은 상태
state: 새거가 필요한 상태
기본 설정 (default config)

기본설정	의미
staleTime: 0	useQuery 또는 useInfiniteQuery에 등록된 QueryFn을 통해 fetch해 온 데이터는 항상 stale data 취급
refetchOnMount: true	useQuery 또는 useInfiniteQuery가 있는 컴포넌트가 마운트 시 stale data를 refetch 자동 실행
refetchOnWindowFocus: true	실행중인 브라우저 화면은 focus할 때마다 stale data를 refetch 자동 실행
refetchOnReconnect : true	Network가 끊겼다가 재연결되었을 때 stale data를 refetch 자동 실행
cacheTime: 5분 (1000 * 60 * 5ms)	useQuery 또는 useInfiniteQuery가 있는 컴포넌트가 언마운트 되었ㅇ르 때 inactive query라고 부르며, inactive 상태가 5분 경과 후 GC(Garbage Collector)에 의해 cache data 삭제 처리
retry: 3	useQuery 또는 useInfiniteQuery에 등록된 queryFn이 API 서버에 요청을 보내서 실패하더라도 바로 에러를 띄우지 않고 총 3번까지 재요청을 자동으로 사용

staleTime: 얼마의 시간이 흐른 뒤에 stale취급할 것인가 (default: 0)

staleTime > 0이면, fresh data staleTime = 0이면, stale data

cacheTime: inactive된 이후로 메모리에 얼마만틈 있을 것인가 (default: 5분, cacheTime이 0이 되면 삭제처리됨)

📌isLoading vs isFetching

isLoading: 새로운 캐시 데이터를 서버에서 받고 있는가

isFetching: 서버에서 데이터를 받고 있는가

: 캐시 데이터가 있는 경우 isLoading은 false, isFetching은 true이다.

📌useQuery 실행 시cacheTime > 0인 것과 queryFn

useQuery 실행 시 cacheTime > 0인 것과 queryFn 실행은 관계 없다. (stateTime과 관련 있음)
cacheTime > 0이면 캐시 데이터가 존재하고, 이 경우 useQuery를 실행하면 stale data를 우선 받고 cacheTime이 0이면 queryFn을 실행한 리턴 값으로 리렌더링하면서 바꿔준다.
cacheTime이 0이 되면 캐시 데이터가 삭제되기 때문에 useQuery로 data 호출 시 undefined 값을 우선 받고 queryFn을 실행한 리턴 값으로 리렌더링 하면서 바꿔준다.

[프로그래머스] 바탕화면 정리

Thu, 21 Dec 2023 12:04:49 GMT

바탕화면 정리

문제 설명

코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작성했던 코드는 그 문제에 가서 다시 볼 수 있기 때문에 저장해 둔 파일들을 전부 삭제하기로 했습니다.
컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 wallpaper가 주어집니다. 파일들은 바탕화면의 격자칸에 위치하고 바탕화면의 격자점들은 바탕화면의 가장 왼쪽 위를 (0, 0)으로 시작해 (세로 좌표, 가로 좌표)로 표현합니다. 빈칸은 ".", 파일이 있는 칸은 "#"의 값을 가집니다. 드래그를 하면 파일들을 선택할 수 있고, 선택된 파일들을 삭제할 수 있습니다. 머쓱이는 최소한의 이동거리를 갖는 한 번의 드래그로 모든 파일을 선택해서 한 번에 지우려고 하며 드래그로 파일들을 선택하는 방법은 다음과 같습니다.

드래그는 바탕화면의 격자점 S(lux, luy)를 마우스 왼쪽 버튼으로 클릭한 상태로 격자점 E(rdx, rdy)로 이동한 뒤 마우스 왼쪽 버튼을 떼는 행동입니다. 이때, "점 S에서 점 E로 드래그한다"고 표현하고 점 S와 점 E를 각각 드래그의 시작점, 끝점이라고 표현합니다.
점 S(lux, luy)에서 점 E(rdx, rdy)로 드래그를 할 때, "드래그 한 거리"는 |rdx - lux| + |rdy - luy|로 정의합니다.
점 S에서 점 E로 드래그를 하면 바탕화면에서 두 격자점을 각각 왼쪽 위, 오른쪽 아래로 하는 직사각형 내부에 있는 모든 파일이 선택됩니다.
예를 들어 `wallpaper` = [".#...", "..#..", "...#."]인 바탕화면을 그림으로 나타내면 다음과 같습니다. ![](https://velog.velcdn.com/images/_soul_/post/b61b3e76-596e-4b43-863a-e5e33a379818/image.png) 이러한 바탕화면에서 다음 그림과 같이 S(0, 1)에서 E(3, 4)로 드래그하면 세 개의 파일이 모두 선택되므로 드래그 한 거리 (3 - 0) + (4 - 1) = 6을 최솟값으로 모든 파일을 선택 가능합니다. ![](https://velog.velcdn.com/images/_soul_/post/ef0d5a4c-59b2-4544-af9b-fccc250e1f63/image.png) (0, 0)에서 (3, 5)로 드래그해도 모든 파일을 선택할 수 있지만 이때 드래그 한 거리는 (3 - 0) + (5 - 0) = 8이고 이전의 방법보다 거리가 늘어납니다.
머쓱이의 컴퓨터 바탕화면의 상태를 나타내는 문자열 배열 `wallpaper`가 매개변수로 주어질 때 바탕화면의 파일들을 한 번에 삭제하기 위해 최소한의 이동거리를 갖는 드래그의 시작점과 끝점을 담은 정수 배열을 return하는 `solution` 함수를 작성해 주세요. 드래그의 시작점이 `(lux, luy)`, 끝점이 `(rdx, rdy)`라면 정수 배열 `[lux, luy, rdx, rdy]`를 return하면 됩니다. #### 제한사항
1 ≤ wallpaper의 길이 ≤ 50
1 ≤ wallpaper[i]의 길이 ≤ 50
- wallpaper의 모든 원소의 길이는 동일합니다.
wallpaper[i][j]는 바탕화면에서 i + 1행 j + 1열에 해당하는 칸의 상태를 나타냅니다.
wallpaper[i][j]는 "#" 또는 "."의 값만 가집니다.
바탕화면에는 적어도 하나의 파일이 있습니다.
드래그 시작점 (lux, luy)와 끝점 (rdx, rdy)는 lux < rdx, luy < rdy를 만족해야 합니다.
#### 입출력 예시 |wallpaper|result| |-|-| |[".#...", "..#..", "...#."]|[0, 1, 3, 4]| |["..........", ".....#....", "......##..", "...##.....", "....#....."] |[1, 3, 5, 8]| |[".##...##.", "#..#.#..#", "#...#...#", ".#.....#.", "..#...#..", "...#.#...", "....#...."]|[0, 0, 7, 9]| |["..", "#."]|[1, 0, 2, 1]|

solution code

function solution(wallpaper) {
  let x = [];
  let y = [];

  wallpaper.forEach((sub, i) => {
    sub.split("").forEach((e, j) => {
      if (e === "#") {
        x.push(i);
        y.push(j);
      }
    });
  });

  x.sort((a, b) => a - b);
  y.sort((a, b) => a - b);

  return [x[0], y[0], x.at(-1) + 1, y.at(-1) + 1];
}

[React] react-router-dom

Wed, 20 Dec 2023 07:53:12 GMT

📌react-router-dom 이란?

: 페이지를 구현할 수 있게 해주는 패키지
→ SPA (single Page Application)기반인 React 프로젝트 안에서 여러 개의 페이지를 구현할 수 있다.

📌react-router-dom 설치하기

: 패키지 설치 yarn add react-router-dom

📌react-router-dom 사용하기

0. 순서

페이지 컴포넌트 생성
Router.js 생성 및 router 설정 코드 작성
App.js에 import 및 적용

1. 페이지 컴포넌트 생성 (예시)

src폴더에 pages 폴더를 만들고 Home About Contact Works 4개의 컴포넌트 생성

2. `Router.js` 생성 및 router 설정 코드 작성

: 브라우저에 url을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게 만드는 부분 : url 하나당 1개의 페이지 컴포넌트 매칭 → URL = Route : 일반적으로 Route 설정 코드는 Router.js 라는 파일을 별도로 분리해서 작성한다.

(1) `src` 폴더 안에 `shared` 폴더를 생성하고 그 안에 `Router.js` 파일 생성

import React from "react";
//react-router-dom을 사용하기 위해 API import
import { BrowserRouter, Route, Routes } from "react-router-dom";

const Router = () => {
  return (
    
      
    
  );
};

export default Router;

를 로 감싸는 이유는 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어주기 위함!! (SPA의 장점)

Route를 설정할 뼈대 완성!!

(2) 페이지 컴포넌트 마다 Route 설정하기

Router.js

import React from "react";
//react-router-dom을 사용하기 위해 API import
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

const Router = () => {
  return (
    
      
        } />
        } />
        } />
        } />
      
    
  );
};

export default Router;

에는 react-router-dom에서 지원하는 props가 있어서 path는 우리가 사용하고 싶은 주소를 넣어주고 element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어주면 된다.

3. App.js에 Router.js import 하기

App.js

import React from "react";
import Router from "./shared/Router";

function App() {
  return ;
}

export default App;

Router.js를 App 컴포넌트에 넣는 이유는 _가장 최상위 컴포넌트가 App.js_이기 때문이다.
어떤 컴포넌트를 화면에 띄우던지 항상 App.js를 거쳐야하므로 path별로 분기되는 Router.js를 App.js에 위치시켜 서비스를 이용하는 모든 사용자가 항상 App.js → Router.js를 거치도록 코드를 구현하는 것이다.

📌react-router-dom Hooks

: react-router-dom에서 제공하는 다양한 hook들 (공식문서)

(1) useNavigate

: 어떤 버튼이나 컴포넌트를 눌렀을 때 페이지를 이동하도록 하는 훅

  // src/pages/home.js
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  return (
    
  );
};

export default Home;

navigate를 생성하고 navigate(이동하려는 url문자열)을 통해 페이지 이동

(2) useLocation

react-router-dom을 사용하면 현재 페이지의 정보들을 추가적으로 얻을 수 있다.

// src/pages/works.js
import { useLocation } from "react-router-dom";

const Works = () => {
  const location = useLocation();
  console.log("location :>> ", location);
  return (
    
      {`현재 페이지 : ${location.pathname.slice(1)}`}
    
  );
};

export default Works;

📌Link

: Link는 html 태그 중 a태그의 기능을 대체하는 API이다.

JSX에서 a태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침(refresh)되고, 브라우저가 새로고침되면 모든 컴포넌트가 다시 렌더링되어야 하고 redux나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화 된다. → 성능에 악영향줄 수 있는 불필요한 움직임이다

import { Link, useLocation } from 'react-router-dom';

const Works = () => {
  const location = useLocation();
  console.log('location :>> ', location);
  return (
    
      {`현재 페이지 : ${location.pathname.slice(1)}`}
      contact 페이지로 이동하기
    
  );
};

export default Works;

📌children 용도

공식문서에서 설명하는 props.children

💡 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다

범용적인 ‘박스’ 역할을 하는 컴포넌트는 크게 봤을 때 Layout 역할을 하는 컴포넌트라고 생각할 수 있다.

children props를 이용해 페이지 레이아웃을 만들고 개별적으로 존재하는 Header, Footer, Page를 합성해 개발자가 의도하는 UI를 만들어주는 Layout 컴포넌트를 만들어보자.

src/shared폴더에 Layout.js파일 생성

  // src/shared/Layout.js

import React from 'react';

const HeaderStyles = {
  width: '100%',
  background: 'black',
  height: '50px',
  display: 'flex',
  alignItems: 'center',
  paddingLeft: '20px',
  color: 'white',
  fontWeight: '600',
};
const FooterStyles = {
  width: '100%',
  height: '50px',
  display: 'flex',
  background: 'black',
  color: 'white',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '12px',
};

const layoutStyles = {
  display: 'flex',
    flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  minHeight: '90vh',
}

function Header() {
  return (
    
      Let's learn React
    
  );
}

function Footer() {
  return (
    
      Have a Nice Day!
    
  );
}


function Layout({ children }) {
  return (
    
      
      
        {children}
      
      
    
  );
}

export default Layout;

Router.js 수정 ( 컴포넌트를 컴포넌트로 감싸준다)

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Works from '../pages/Works';
import Layout from './Layout';

const Router = () => {
  return (
    
      
        
          } />
          } />
          } />
          } />
        
      
    
  );
};

export default Router;

📌Dynamic Routes

: 동적 라우팅. path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 하는 방법을 말한다.

예를 들어 works 페이지에 여러 개의 work가 보이고 work마다 독립적인 페이지를 갖도록 구현한다면?!

Router.js에서 Dynamic Routes를 설정한다.

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";
import Layout from "./Layout";

const Router = () => {
  return (
    
      
        
          } />
          } />
          } />
          } />
          } />    //Dynamic Route
        
      
    
  );
};

export default Router;

이전과는 다르게 works/:id 라고 path가 들어갑니다. :id는 동적인 값을 받겠다라는 의미이고 works/1 로 이동해도 로 이동하고, works/2, works/3 …. works/100 모두 로 이동하게 해준다.

:id는 useParams 훅에서 조회할 수 있는 값이 된다.

📌useParamㄴ

: Dynamic Routes를 사용하면 element에 설정된 같은 컴포넌트를 렌더링 하게 된다.

} />

useParams을 이용하면 같은 컴포넌트를 렌더링 하더라도 각각의 고유한 id값을 조회할 수 있다.

Works.js 수정
```
// src/pages/Works.js
```

import React from 'react'; import { Link } from 'react-router-dom';

const data = [ { id: 1, todo: '리액트 배우기' }, { id: 2, todo: '노드 배우기' }, { id: 3, todo: '자바스크립트 배우기' }, { id: 4, todo: '파이어 베이스 배우기' }, { id: 5, todo: '넥스트 배우기' }, { id: 6, todo: 'HTTP 프로토콜 배우기' }, ];

function Works() { return (

{data.map((work) => { return (

할일: {work.id}

/works/${work.id}}> ➡️ Go to: {work.todo}

); })}

); }

export default Works;

* `` 컴포넌트 생성
```javascript
// src/pages/Work.js

import React from 'react';
import { useParams } from 'react-router-dom';

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Work() {
  const param = useParams();

  const work = data.find((work) => work.id === parseInt(param.id));

  return {work.todo};
}

export default Work;

Router.js 수정

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";
import Work from "../pages/Work";
import Layout from "./Layout";

const Router = () => { return ( } /> } /> } /> } /> } /> ); };

export default Router;