[TIL] 230206

서비스 아키텍쳐

프론트엔드에서는 자바스크립트 프레임워크인 리액트를 사용했습니다.

서버와의 api 통신을 위해 axios를 사용했고

전역 상태 관리 tool로 Redux-toolkit을 사용했습니다.

스타일은 styled-components 를 사용하여 작성하였으며

aws Ec2 를 통해 배포하였습니다.

 

기술적 의사결정

스타일 작성을 위해 Sass와 styled-components 사용을 고려했습니다.
Sass는 className을 일일이 지정해야 하고 컴포넌트의 변화에 대한 반응성이 비교적 떨어지는 단점이 있는 반면, Styled-components는 className의 중복이나 오타로 인한 버그를 줄여주고 props의 값에 따라 스타일을 다르게 적용할 수 있는 장점이 있어 채택하였습니다.

 

API 통신에 있어서는 fetch 와 axios 가 고려됐습니다.
fetch 는 axios에 비해 instance 와 같은 기능이 부족하다는 단점이 있습니다.
반면, axios는 JSON 데이터를 자동 변환해주며 instance, interceptor와 같은 추가적인 기능이 있어 채택했습니다.

게시글 상세조회 페이지 댓글 전체 조회 구현 시 pagination과 infinite scroll을 고려했습니다.
pagination은 유저가 다음 버튼을 클릭하는 추가적인 작업이 생깁니다.
그러나 Infinite Scroll은 데이터의 일부만 먼저 렌더링하고 유저가 기다리지 않아도 계속해서 데이터를 보여줄 수 있으므로 더 좋은 유저 경험을 줄 수 있어 선정했습니다.

Infinite Scroll을 라이브러리 없이 구현하기 위해 직접 scroll height 값을 계산하는 Intersection Observer API 를 고려했습니다. Intersection Observer 는 비동기적으로 실행되어 scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제가 없으므로 채택했습니다.

전역으로 상태관리를 하기 위해 Recoil 과 Redux toolkit 을 고려했습니다.
리덕스 툴킷은 전용 dev tool이 있다는점, 기존 Redux에 비해 Boilerplate code(보일러플레이트 코드)가 적어져 불필요한 코드가 많지 않다는 점에서 Redux toolkit을 사용했습니다.

 

트러블 슈팅 중

- 실시간 채팅이 쌓이지 않고 교체만 되던 문제
setState() 함수에서 이전 state 값을 기준으로 값을 계산해야 한다면, 객체 대신 updater 함수를 전달해야 함.
state와 props를 인자로 받아 state를 변화시키는 함수인 updater를 사용함.

(state, props) => stateChange 이렇게 updater의 인자로 최신상태를 가진 state를 넣어주는 것이 핵심이었음.

따라서 setChatMessages((chatMessages) => [...chatMessages, data]) 이렇게 코드를 썼고 문제를 해결했음.

setState() 함수를 쓸 때 데이터의 최신 상태를 유지하는 state를 인자로 넣어줘야 했음

 

-> setState 는 비동기적으로 동작하는데 setState의 updator 함수로 동기적으로 동작하도록 하여 해결함

User Feedback

• 닉네임 변경
  • 기존에 닉네임을 cookie 에 담아 관리하고 있었는데 닉네임 변경 api를 호출하고 변경된 닉네임을 주기로 함
• 카메라 기본 상태 off로 설정
  • 각각의 유저 정보를 객체로서 저장하여 요소로 가지는 배열에 유저 객체를 처음 할당할 때 카메라 On/Off를 설정하는 프로퍼티의 값을 true에서 false로 변경
• 게임 종료 시 키워드 알림
  • 컴포넌트 최상단 scope에 키워드를 저장할 let 변수 선언 후 게임 시작 시 서버로부터 받아온 키워드 데이터를 해당 변수에 할당하여 게임종료시 해당 변수 사용하여 키워드 화면에 출력
• 커뮤니티 페이지 카테고리 설정 방식 변경
  • 카테고리의 경우 [자유게시판]과 [내가 쓴 피드백]은 drop down으로, [내가 쓴 게시판]의 경우엔 버튼으로 따로 구성되어있어서 불편하다는 피드백을 받음.
  • 모든 카테고리를 drop down으로 변경
• 카카오톡 회원탈퇴 (서비스 연결 끊기)
  • 카카오 로그인 시 백엔드 서버에서 전달하는 토큰에 카카오 access token을 추가하고, 카카오톡 연결 끊기 api로 해당 토큰을 전송하여 서비스 연결 끊기 요청
• 버튼 중복 클릭 방지
  • debounce와 동일한 기능을 하는 커스텀 훅을 만들어서 버튼을 여러 번 눌렀을 때 특정 시간(0.3초)동안 액션이 없는 경우 함수가 호출되도록 변경
• 게임 플레이 시 효과음
  • howler.js 라이브러리를 사용하여 삽입한 src가 플레이되는 커스텀 훅을 만들어서 게임 중 효과음이 나오도록 변경

오늘 todo

⭐️ 필수

• 에러
  • [x] acces token 재발급 확인
• 크로스 브라우징
  • [ ] 웹폰트 적용 문제
• 렌더링 최적화
  • [ ] 세션 녹화영상 보기
  1. 리소스 줄이기(폰트, 이미지)
  2. 이미지(새로고침 등) → 폰트로 적용
  3. 코드
  image CDN→ 도표, 그래프 등 수치화 자료만들고 github readme 애 update
• lazy loading : Img 태그 loading 속성에 lazy주거나 IntersetctionObserver 사용 등
• UT 개선 사항
  • [x] 커뮤니티 버튼 드래그앤드롭하면 url 노출되는 오류 막기
  • [x] 게시글 검색 시 결과 없을 때 보여줄 컴포넌트
  • [x] 배경음악 추가
• 전체 UI 수정 (수빈)
  • 적용할 내용들
    1. 로비 페이지
       • [ ] 환영 문구 폰트 자간 변경
       • [ ] 방검색 input 글자색 및 굵기 수정
       • [ ] 새로고침 버튼 위치 수정
       • [ ] 방제목과 계란 사이 여백 체크
    2. 설정 모달
       • [ ] 설정에서 닫기 엑스 표시 삭제
  • 확인 필요
    1. 왜 폰트가 유저마다 다르게 보이는지? (계란 방 제목, 게시글 검색 input)
    2. 첨부파일 문구가 두 줄로 보이는 문제 확인
  • 디자이너님께 궁금한 내용
    1. 설정 모달 단락 path 합쳐져 있는 부분을 이미지가 아니라 코드로 구현했습니다. border 테두리를 적용해서 선이 생겨보이는데 선을 없애야 할까요?
    2. 설정 모달 왼쪽 단락 계정/탈퇴 모두 가운데 정렬했고 글자와 도형 사이 간격도 피그마를 보고 구현했는데 보기에 다르다는 말씀이실까요?
    3. 탈퇴 탭에서 비밀번호를 입력해주세요 는 font-wieght 300 이던데 두꺼운 폰트로 처리해달라는 말씀이실까요?
    4. 글쓰기 제목 부분에 쉐도우? 쉐도우를 넣은 적이 없습니다..어디가 쉐도우인지 궁금합니다
    5. 댓글 입력 input 글자 굵기는 피그마랑 똑같이 font-weight: 500; 으로 적용했었습니다 500이 아닐까요?
    6. 댓글을 입력해주세요. 폰트 안내문구 위로 배치 → 이렇게 하고싶은데 방법을 모르겠어요..

~ 필수 ⭐️

access token이 GameRoomRTC 에서만 재발급이 안되는 문제

// WebRTC signaling section
  useEffect(() => {
    setAccessToken(getAccessToken('AccessToken'));
    if (!sessionStorage.getItem('normalEnter')) {
      useToast('정상적인 접근이 아닙니다', 'warning');
      navigate('/rooms');
    }
    connect();
    socketRef.current = new SockJS(`${process.env.REACT_APP_SIGNAL_URL}`);

 	생략
 
  }, []);
  // end WebRTC signaling section

엑세스 토큰을 만드는 setState() 함수에 토큰값을 넣어줘야 했음

setAccessToken(getAccessToken('AccessToken'));

기존의 AccessToken을 getAccessToken으로 가져오고 토큰을 만드는 함수인 setAccessToken에 기존 토큰값을 넣어줌.

WebRTC signaling 이 처음 시작되는 useEffect 안에서 setAccessToken을 호출하여 유저의 토큰 정보를 담아서 보내주었고 재발급 요청에 성공함

 

https://lakelouise.tistory.com/337

[React] 리액트 웹폰트 적용 방법과 최적화 방법 (feat. 2022년)

https://mengkki.netlify.app/React/2020-11-10-react%20setState/

[React] setState() 톺아보기

https://taenami.tistory.com/49

React - setState 이해하기

https://velog.io/@hyunn/setState%EA%B0%80-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

setState가 비동기 처리되는 이유

https://heropy.blog/2019/10/27/intersection-observer/

Intersection Observer - 요소의 가시성 관찰