[1월 1주차] 실전프로젝트 일주일 후기 (feat. 항해99 8주차 실전 프로젝트)

새벽 3시에 사람들과 수다떨었다ㅎㅎㅎ

이번주에는 실전프로젝트를 본격적으로 시작하였다. 시작하고 나서 호기롭게 우리조는 지금까지 해왔던 리덕스를 쓰지말고 리액트 쿼리를써보자고 결정하였고, 또한 타입스크립트를 배워서 사용하기로 하였다. 문제는 지금까지 리액트 쿼리와 타입스크립트를 한번도 쓴 적도 배운 적도 없다는 것이었다! 그래서 지난 주 주말까지 계속 헤맴의 연속이었다가 이번주에 오면서 다소 적응이 되면서 다행히 1주차 스코프를 완벽하진 않지만 대략적으로 완성할 수 있었다. 그런데 디자이너와 협업하면서 아직 와이어프레임 조차 다 완성되지 않아서 css 작업은 전혀 되지 않았다. 디자인이 확정되지 않았으므로 확정되고 나서 한번에 몰아서 하는 게 나을 것 같다.

 

 

1.  로그인 / 회원가입 기능 : react-hook-form, 카카오 소셜 로그인

글자 수 및 정규식 조건에 따라 달라지는 input 아래의 메세지

비밀번호가 일치하지 않으면 나타나는 input 아래의 메세지

회원가입 기능을 먼저 구현하였는데, 여기서는 지금까지 사용하지 않았던 react-hook-form을 사용하였다. 기존에는 input을 만든 뒤 onChange나 onBlur 그리고 useEffect를 사용하여 input마다 하나씩 적용을 해줘야했다. 그러한 문제들을 react-hook-form의 register함수를 활용하여 코드를 훨씬 줄일 수 있었다. 게다가 이메일 주소나 비빌번호의 정규식 역시 굉장히 쉽게 pattern으로 적용할 수 있었고, error에 따른 메세지도 매우 간단하게 처리할 수 있었다. 글자수 제한도  minLength를 활용하여 쉽게 해결할 수 있었다. 다만 이메일과 닉네임에서 중복체크를 반드시 했어야했는데, 이부분을 onBlur로 자연스럽게 처리하는 부분이 참고할 만한 코드가 없어서 헤메다가 중복확인 버튼을 만들었다. 그래서 중복확인 버튼을 눌러서 중복일 시 메시지를 띄울 수 있도록 하였다. 다만 지금은 핵심기능에 집중하다보니 유저가 중복확인 버튼을 누르기 전에는 회원가입을 못하도록 하는 기능을 추가하지는 못하였다. 그래서 출시하기 전에는 중복확인 버튼을 눌러야만 회원가입 호출이 되도록 할 것이고, 또한 중복확인 버튼을 누르기 전과 누르고 나서 통과됐을 때의  UI 역시 다르게 하여 유저가 확인하게 쉽도록 만들어야겠다. 버튼의 색을 회색에서 통과 시 초록으로 바꾸거나 중복일 시 빨강으로 바꾸는 식으로 말이다. 통과했을 때의 메세지도 띄워야겠다. 지금은 통과를 못할 시에만(중복일 시에만) 메세지가 띄워지고 있다.

 

카카오 소셜 로그인의 경우 시작하기 전부터 악명이 높아서(실패한 사람들이 많았다고 한다.) 걱정이었지만 의외로 반나절만에 성공하였다. 백엔드분의 역량이 큰 도움이 되었다고 생각했다. 나의 경우 리다이렉트 url만 어떻게 할지 제시했고, 나머지는 아래 블로그 글을 참고하여 거의 똑같이 하니 큰 무리없이 성공하였다. 다만 서버에 인가코드를 담아 호출시, 리액트의 strict mode 때문에 두번 씩 호출되면서 에러가 초반에 발생하였다. 그래서 strict mode를 제거하고 호출하였다. 그리고 나서 백엔드 쪽에서 몇가지 빼먹은 설정을 완료하자 무리없이 받아오게 되었다. 나의 경우 아래 블로그 글과는 달리 타입스크립트를 사용하였기에, 블로그 코드를 타입스크립트에 맞게 수정하는 작업을 추가하였다. 

// 리다이렉트될 화면

import axios from "axios";
import { useEffect } from "react";
// import Spinner from "./Spinner";
interface IData {
  headers: {
    authorization: string;
  };
}

const setAccessToken = (accessToken: any) => {
  localStorage.setItem("is_login", accessToken);
};

const kakaoLogin = (code: string | null) => {
  console.log(code);
  axios
    .get(`https://woooo.shop/api/user/kakao/callback?code=${code}`)
    .then((res) => {
      console.log(res.headers.authorization); // 토큰이 넘어올 것임
      const accessToken = res.headers.authorization;
      setAccessToken(accessToken);

      window.location.href = "/"; // 토큰 받았았고 로그인됐으니 화면 전환시켜줌(메인으로)
    })
    .catch((err: any) => {
      console.log("소셜로그인 에러", err);
      window.alert("로그인에 실패하였습니다.");
      window.location.href = "/login"; // 로그인 실패하면 로그인화면으로 돌려보냄
    });
  //   };
};

const KakaoSocial = () => {
  // 인가코드
  console.log("호출 직전!!!");
  const code: string | null = new URL(window.location.href).searchParams.get(
    "code"
  );
  console.log(code);
  kakaoLogin(code);
  return <div>카카오 로그인 처리중...</div>;
};

export default KakaoSocial;

REST-API 활용한 카카오 소셜 로그인 구현(feat. React)

 

 

2. 게시판 기능 : nested router & outlet

커뮤니티에 들어가자마자 보이는 전체 게시물들과 위의 옵션을 변경할 시 나타나는 해당 게시판의 게시물들

커뮤니티의 경우에는 위의 select가 있는 부분이 일정하고 아래의 게시물들이 옵션에 따라 달라지는 것을 구현해야 하였다. 그 부분은 nested router를 사용하여 구현하였다. 커뮤니티에 들어가자마자 보이는 전체 게시판은 "/ board"로, 자유게시판은 "/board/free"로,  알바고민 게시판은 "board/partTime"으로, "board/cover"는 대타구해요 게시판으로 설정하였다. 그리고 전체 게시판 페이지에 위의 select부분과 더불어 Outlet을 추가하여 달라지는 라우터에 따라 다른 게시판의 게시물들이 나오도록 하였다. 또한 들어가자마자 보이는 전체 게시판의 게시물들은 "/board"일 때만 나와야 하므로 useMatch를 사용하여 "/board"일 때만 받은 전체 게시물 데이터가 나타나도록 하였다. 또한 우측 하단의 +버튼을 누르면 게시물 추가 페이지로, 상단의 돋보기 이모지를 누를 시 검색 페이지로 이동하도록 설정하였다. 

 

 

3. 검색기능

검색기능은 생각보다 쉽게 구현하였다. 다만 접속하자마자 무조건 get요청을 보내다보니, 사용자가 검색어를 입력하지 않은 경우에 전체게시물들이 불러와져서 나타나는 바람에 검색 버튼을 클릭해야만 게시물들이 나타나도록 하였다. 그리고 리액트 쿼리를 이번주에 처음 쓰다보니 refetch를 하는 부분에 있어서 약간의 어려움이 있었다. 일단 검색 버튼을 눌렀을 때 refetch가 되어야 하는데, "queryClient.invalidateQueries();"라는 코드가 작동하지 않았다. 그래서 "refetch()"와 같이 refetch 함수를 실행하여 해결하였다. 그런데 아직도 queryClient를 사용한 코드가 왜 안되는지 의문이어서 다음주에는 꼭 리액트 쿼리관련한 공부를 더 해야겠다.

 

 

 

4. 디자이너와의 협업

디자이너와 처음으로 협업을 해보면서 좋은 점도 어려운 점도 있었다. 좋은 점은 당연히 높은 퀄리티의 디자인을 받아볼 수 있다는 것이었다. 그런데 우리 조에 배정된 디자이너의 경우 기획도 겸하는 직무를 희망하고 있어서 디자이너님의 영향으로 기획에 있어서 보다 공을 많이 들이게 되었다. 처음에는 기획에 지나치게 공을 들이는 것 아닌가 싶었지만, 결과적으로는 좋은 방향으로 설정된 것 같았다. 그리고 한 가지 문제는 디자이너들한테 공지한 일정은 6주에 걸쳐 MVP를 완성하는 것인데, 항해가 우리에게 알려준 일정은 중간발표 즉 3주차까지 MVP를 완성하는 것이었다. 그래서 디자이너는 굉장히 여유롭게, 무려 3주에 걸쳐 와이어프레임을 완성하는데, 개발자의 경우에는 와이어프레임은 물론이고 최종 디자인이 하루빨리 나오면 좋은 상황이라 안맞는 부분이 있었다. 다행히 우리조 디자이너님은 공지 일정보다 빠르게 진행하는 것이 가능하다고 하여 다음주까지 와이어프레임이 완성될 예정이다.