← Dev Log

2023년 06월 03일

·5 min read

오늘 한 일

  • 알고리즘 문제 풀이
  • 학림이가 진행하는 프로젝트에서의 웹뷰 테스트 진행
  • 카공실록 갤러리 페이지 구현
  • 카공실록 코드리뷰
  • 리뷰 상세 페이지 구현
  • 소프트웨어공학 시험 공부

학림이가 진행하는 프로젝트에서의 웹뷰 테스트 진행

1. 웹뷰 -> 모바일

플러터에서 정의해둔 LoginToaster의 postMessage 메서드를 리액트에서 호출한다. 이때 postMessage의 인자로는 JSON.stringify를 통해 문자열로 변환한 객체를 전달한다.

const handleClick = () => {
  LoginToaster.postMessage(
    JSON.stringify({
      loginSuccess: true,
    })
  )
}

타입스크립트를 사용하는 경우에는 LoginToaster의 타입을 정의해주어야 한다.

// LoginToaster.d.ts
declare namespace LoginToaster {
  function postMessage(message: string): void
}

2. 모바일 -> 웹뷰

이제 모바일 단에서 요청을 처리해서 자바스크립트 코드를 주입해줄 것이다.
window.flutterWebView 함수를 정의해주고, 이 함수를 통해 모바일 -> 웹뷰로 데이터를 전달한다.

<script>
  window.flutterWebView = function (message)
  {
    // message를 파싱해서 사용
  };
</script>

여기서도 마찬가지로 타입스크립트를 사용하는 경우에는 타입을 정의해주어야 한다.

// index.d.ts
declare global {
  interface Window {
    flutterWebView: (message: string) => void
  }
}

컴포넌트에서 사용하기

이제 컴포넌트에서 사용할 수 있도록 해보자.

const handleClick = () => {
  LoginToaster.postMessage(
    JSON.stringify({
      loginSuccess: true,
    })
  )
}

useEffect(() => {
  window.flutterWebView = (message) => {
    // message를 파싱해서 사용
  }
}, [])

주의할 점

window 객체는 브라우저에서만 사용할 수 있기 때문에, 서버사이드 렌더링을 할 때는 window 객체가 존재하지 않는다. 그래서 typeof window !== 'undefined'를 통해 window 객체가 존재하는지 확인해주어야 한다. (useEffect에서는 mount 시점에만 호출되기 때문에, 여기서는 확인할 필요가 없다.)

if (typeof window !== 'undefined') {
  window.flutterWebView = (message) => {
    // message를 파싱해서 사용
  }
}

재사용성을 위한 커스텀 훅

커스텀 훅을 만들어서 재사용성을 높일 수 있다.

// useFlutterWebView.ts
import { useEffect } from 'react'

const useFlutterWebView = (callback) => {
  // 대충 필요한 코드들

  useEffect(() => {
    window.flutterWebView = callback
  }, [callback])
}

export default useFlutterWebView

// 컴포넌트에서 사용
useFlutterWebView((message) => {
  // message를 파싱해서 사용
})

상황에 맞게 사용하면 될 것 같다.

카공실록 갤러리 페이지 구현

Jun-03-2023 20-47-34Jun-03-2023 20-47-34

고민점

여기서 가져오는 이미지 url은 리뷰 데이터들의 images 필드에 들어있다. 근데 갤러리에서 이미지마다 올린 유저까지 보여줘야 한다. 그래서 이미지와 유저 정보를 매핑해주었다.

images 필드가 배열이기 때문에 map을 두 번 사용했다. 그리고 flat을 사용해서 2차원 배열을 1차원 배열로 만들어주었다.

const { data: reviews } = useGetReviews(params.id)

const images = reviews
  ?.map((review) =>
    review.images.map((image) => ({
      url: image.url,
      userId: review.userId,
      userNickname: review.userNickname,
    }))
  )
  .flat()

카공실록 코드리뷰

드디어 우리 팀원들의 PR이 올라왔다! 하나하나 꼼꼼히 보고 코드리뷰를 진행했다.

쭉 보면서 느낀 점은, 컨벤션이 확실하게 정해져 있지 않아 통일성이 부족했다 😅
그래서 팀원들을 불러서 애매한 부분들을 토의하고, 컨벤션을 정해주었다.

하다보니 남긴 코멘트가 30개 정도 되었다ㅋㅋㅋ

내가 짠 코드들과 중복되는 코드들도 많아서, 나중에 리팩토링을 진행해야겠다.

내일 할 일

  • 알고리즘 문제 풀이
  • 소프트웨어공학 시험 공부
  • 카공실록 코드리뷰
← 2023.06.042023.06.02 →