리액트 1달차 토이프로젝트 리뷰 (게임 커뮤니티 사이트) - 작성중

 

초기 목표

• 리액트를 학습하기 위해서 (경험해보기 위해서..)
• 백엔드 개발자 지망생으로서 프론트엔드 개발자들에게 어떻게 데이터를 가공해서 넘겨주면 좋을지 이해해보기 위해서
• 백엔드, 프론트엔드가 완벽히 분리되어 있을때의 신경 쓸 수 있는 부분을 현업 체험 전에 경험해보자!

 

기존 서버사이드 개발 환경

• 스프링부트 , 스프링 시큐리티, JPA , Mysql , Redis , 인텔리제이
• 게시판
  • 게시글 관련
    
    • 쓰기, 읽기, 수정, 삭제, 검색
    • 게시글 추천, 조회수, 베스트 게시글 (최근 3일의 게시글 중 좋아요 10개 이상 상위 5개)
    • 게시글에 캐릭터 링크 후 클릭 시 해당 캐릭터가 등록된 게시글 혹은 캐릭터 정보 상세보기 조회 가능
  • 댓글 관련
    • 쓰기, 읽기, 수정, 삭제
    • 대댓글 (계단식이 아닌 하나의 댓글에 한 층(?)의 댓글이 열리는 로직
    • 대댓글 쓰기 읽기 수정 삭제
    • 베스트 댓글 (해당 게시글의 좋아요 10개 이상 상위 5개)
• 회원
  • 가입,로그인,탈퇴,정보 변경
  • 세션 로그인 방식 -> Jwt 토큰 인증 방식
    • 원활한 소통을 위해서 세션 인증 방식에서 변경 하였으나, 실질적으론 변경할 이유가 없었다.
      • JSESSIONID 쿠키가 클라이언트로 받아와지지 않았던 오류가 발생 했을때 변경했으나, 토큰을 쿠키에 저장하는 방식으로 구현하니 세션 인증 방식과 다를게 없었다.
      • 오히려 토큰 인증 방식으로 구현하니 잡다한 오류가 많이 발생해 기존의 스프링 시큐리티에서 제공해주는 안정적인 폼 로그인 방식이 더 나아보였다.
  • 회원과 모험단 연동 (직접 연동이 아닌 단순 서버사이드에서 db에서 연관관계를 맺는 방식)
  • 회원과 캐릭터 즐겨찾기 등록
  • 프로필 이미지 변경
• 캐릭터
  • 캐릭터 정보 검색 
  • 캐릭터 랭킹 조회 (모험단, 개인 캐릭)

 

초기 화면 구현 목표

• 유지보수가 쉽도록 재사용 가능한 컴포넌트 만들기
• 상위 컴포넌트에서 하위 컴포넌트로 여러개의 props 를 넘겨줘서 의존하게 하는 행위 지양
• 반응형 템플릿 제작
• 딱딱한 사이트가 아닌 최소한의 애니메이션을 이용해 동적인 웹페이지 구성
• 기존의 서버사이드 개발시에 중요하게 생각했던 계층형 구조를 생각하며 개발 및 정리

클라이언트 사이드 진행상황

• 개발 환경
  • 리액트 최신버전, 타입스크립트, REST API, Material UI, Styled Component 
    • 참고 사이트 -> 던파모아 https://dunfamoa.com/
• 게시판 
  • 게시글 관련 ⭕️
    
    • 쓰기, 읽기, 수정, 삭제, 검색 ⭕️
    • 게시글 추천, 조회수, 베스트 게시글 (최근 3일의 게시글 중 좋아요 10개 이상 상위 5개) ⭕️
    • 게시글에 캐릭터 링크 후 클릭 시 해당 캐릭터가 등록된 게시글 혹은 캐릭터 정보 상세보기 조회 가능 ⭕️
  • 댓글 관련 ⭕️
    • 쓰기, 읽기, 수정, 삭제 ⭕️
    • 대댓글 (계단식이 아닌 하나의 댓글에 한 층(?)의 댓글이 열리는 로직 ⭕️
    • 대댓글 쓰기 읽기 수정 삭제 ⭕️
    • 베스트 댓글 (해당 게시글의 좋아요 10개 이상 상위 5개) ⭕️
• 회원
  • 가입 ⭕️,로그인 ⭕️,탈퇴 ❌ ,정보 변경  ❌
  • 세션 로그인 방식 -> Jwt 토큰 인증 방식 ⭕️
  • 회원과 모험단 연동 (직접 연동이 아닌 단순 서버사이드에서 db에서 연관관계를 맺는 방식)  ❌
  • 회원과 캐릭터 즐겨찾기 등록 ❌
  • 프로필 이미지 변경 ⭕️
• 캐릭터
  • 캐릭터 정보 검색  ⭕️
  • 캐릭터 랭킹 조회 (모험단, 개인 캐릭) ⭕️

 

메인화면

 

재사용 가능한 테이블 구현

모바일 환경에서도 이용 가능하도록 반응형으로 개발

 

그리드를 이용하여 모바일 환경에서는 한줄, pc 및 태블릿 환경에서는 두줄로 랭킹을 표시하도록 구현

 

• 단순히 각각의 파트별로 각각의 컴포넌트를 매번 새로 만들 필요 없이 , 단순 틀로 사용 할 수 있는 테이블 컴포넌트를 선언 후 , 테이블의 양옆에 컴포넌트를 렌더링하거나 행동을 지정할 수 있도록 구현했다.
• 내용에는 각각 필요에 따라 다른 내용이 들어갈 수 있도록 구현했다. (테이블 컴포넌트 > 내용 컴포넌트 로 이어지는 트리)
  • 해당 부분은 생각보다 어려운 부분은 없었고, 개발 초기에 구현했던 부분이라 어디까지 나눠서 어떠한걸 props 로 전달해줘야할지 고민이 많았던 부분이었다.

이런식으로 상위 컴포넌트에 전적으로 의지하도록 구현하였다. (단순히 이것 하나로 렌더링 할 무언가가 있을것 같지 않다는 생각이 들었다.)

재사용 가능한 검색창 구현

깔끔한 느낌의 검색창을 구현하였다.

최근 검색 기록과 빠른 검색을 지원해준다.

 

영상을 업로드 하지 못해서 아쉽지만 mui 의 트랜지션 api 를 사용해 애니메이션을 추가하여서 딱딱한 느낌을 없애주었다.

• 처음엔 단순 노동으로 셀렉트 박스와 서치박스를 합쳐서 해당 컴포넌트를 구현했었다가, mui 의 input base 와 paper 라는 api 를 이용해서  사각형 카드 박스에 버튼으로 셀렉트박스와 input base 로 검색 input 창을 구현 후 합쳤다.
  • 이때 css 에 대해서 한번 더 배우게 되었다.
  • 해당 셀렉트 박스를 api를 이용하지 않고 구현하려면 밑의 화면을 덮어쓰는 쪽으로 구현해야 하는데, position 속성을 처음으로 알게되어 이용하게 되었다.
• 해당 검색창 구현은 코드도 그렇지만 ui 적으로 더더욱 유저 친화적인 부분으로 개발하려고 노력하였다.
  • 어떻게 보면 검색창 / 선택 박스 / (최근 검색 기록 , 빠른검색  ( 최근검색기록 출력화면 , 빠른검색 출력화면 )) 이런식으로 분리되 어 있어서 각각의 이벤트 발생 시에 핸들링을 어떻게 해야할지 고민을 많이 했다.
  • 하나의 컴포넌트를 통으로 렌더링 하는게 아닌 하나의 div 에 여러개의 div 가 들어가있는 형식이라 이때 검색 창의 외부를 클릭시에 옵션창이 사라진다던지, 옵션창이 나와있는데 셀렉트박스를 누르면 사라졌다가 셀렉트 박스가 닫혀지면 다시 나타난다던지 하는 로직을 구현하는데 머리를 많이 썼다.

useRef 를 이용하여 클릭 이벤트를 핸들링하였다.

• 해당 기능을 구현하면서 useRef 훅과 dom 오브젝트 를 다루는법을 조금이나마 이해했다.
• 결국 chatGPT 의 도움을 받긴 했지만, 그래도 해당 부분에 대해서 좀 더 논리적으로 고민했던 흔적이 남아있어서 해당 컴포넌트를 구현했을 때 좀 뿌듯했다.