2월 2주차

0 views

📌 웹뷰 개발을 처음하면서 맞닥뜨린 문제

Google Store에 1.0.0 버전을 12월 말에 배포하고, 1.0.1을 준비하던 중 문제에 부딪혔다. 나는 1.0.1 버전에서 권한 승인 기능과 관련한 고도화 작업을 진행했는데, 1.0.0 버전에 대한 고려를 미쳐하지 못했다. react 코드만 바뀌면 상관이 없는데 react-native 코드도 바뀌어서, 기존에 1.0.0 버전의 react-native 코드가 적용된 앱은 사용이 불가능해진 것.

쉽게말하면 react를 1.0.1 버전으로 업그레이드 하면 기존의 앱과 새롭게 배포될 앱 모두 react 1.0.1 버전이 적용되는데, 기존 앱의 경우 react-native 버전이 1.0.0이고, 신규 앱의 경우 react-native 버전이 1.0.1인 상황에서 react 1.0.1버전은 react-native 1.0.1에 의존하기 때문에 기존 사용자는 앱이 켜지지 않는 문제가 발생했다.

절대 발생하면 안되는 문제를 발생시켰지만, 너무나도 귀중한 경험을 한것 같다.

📌 기확자와 처음 협업하면서 맞닥뜨린 문제

기획자분과 본격적으로 일하기 시작한지 2주가 됐다. 이미 한분과 일은 게속해왔지만, 그분이 기획하신 업무를 받아서 일을 진행하진 않았어서 사실 기획자와 협업한다는 느낌이 많이 없었다. 이번에 같이 일하면서 두가지를 느꼈는데, 그중 첫번째는 행위를 나열한다는 것이다.

예를들면 “A한 상황에서 B를 클릭하면 C가 되게해야 한다”의 형식으로 티켓(기획)을 만들어주신다. 물론 행위가 달라질 수 있기 때문에, A, B, C를 바꿔서 제시해주신다. 처음에는 기획자분들께서 일을 잘하시고 똑똑하시니까 이를 믿고 개발에 바로 돌입했는데, 코드를 작성하다보니 계속 예외 행위에 부딪혔다. 심지어는 기획자분께서 제시해준 행위 하나는 발생할 수 없는 행위… 예를들면 안돼야 하지만, 돼야하는 경우가 존재하는. 그래서 개발 중간에 vscode를 끄고 usecase부터 작성했다.

usecase를 작성하니 (1) 기획적인 부분에서 검토가 부족했던 부분을 발견할 수 있었고, (2) 행위들을 몇 가지 케이스로 분류가 가능했고, (3) 분류하고나니 머릿속에 어떻게 로직을 작성해야 하는지 쉽게 그려졌다.

이를 깨닫고 항상 티켓에 대한 작업을 들어가기 전에는 usecase부터 작성한 후에 티켓 작업에 들어가고 있다.

여담으로, usecase를 작성할때 코테 준비했던게 많은 도움이 되는 것 같다.

📌 ssr에서의 bfcache 그리고 뒤로가기

ssr 환경에서는 bfcache가 동작하지 않는다고 한다. bfcache가 동작하려면 기본적으로 img, font와 같은 asset들을 클라이언트에서 들고 있을 수 있는 csr만 가능하고, ssr은 페이지를 다 그려서 내려주기 때문에 불가능하다고 한다.

추가적으로 프로젝트를 진행하면서 bfcache의 존재로 인해 이전 페이지의 정보가 유지돼야 한다는 주장이 있었는데, bfcache는 이전 페이지의 정보를 들고 있다가 보여주기 때문에 페이지가 보여지는 속도가 빠른 장점이 있지만, 반대로 이전 페이지의 정보가 최신화되지 못한다는 단점이 있다. 그러니까 이전 페이지의 정보가 유지돼야 한다는 것은 어떤 표준이나 규약같은게 아니라 단점으로 언급된다는 것이다.

더불어서 nextjs에서 뒤로가기 했을 때 스크롤을 복원하는 설정을 제공하고 있긴 하나, next 13.0.7버전 이상부터 정상적인 동작을 보장하고 있다.

📌 금주 읽은 아티클

1. Scrollend, a new JavaScript event

scrollend 이벤트가 나온다고 한다. 프로젝트의 디테일 페이지를 react-native에서 react로 마이그레이션 할때, react-native에 존재하는 onScrollEnd 이벤트가 react에 존재하지 않아서 굉장히 힘들게 구현했는데, 기쁜 소식이 들려와서 좋다. 아직 지원되는 브라우저가 많지 않아서 않아서 당장 사용은 어려울듯 ㅜ.ㅜ

2. useLayoutEffect와 관련해서

useEffect는 부수적인 효과(api 요청, 이벤트 리스너 등록, 상태 변화에 따른 특정 액션 수행 등)를 만든다는 표현을 또 처음 알게됐다. 더불어서 useEffect 내부의 return 문은 오직 컴포넌트가 unmount될때만 실행되는 줄 알았는데 의존성 배열 요소가 바뀌어도 실행되는 것을 처음 알았다.

useLayoutEffect는 당연스럽게도 너무 헤비한 작업을 처리하면 browser에 화면이 늦게 보인다고하고, 사용 예시로는 부모 요소의 size를 기반으로 자식 요소의 size를 결정해야할 때 유용하다고 한다.

또한 react 18 버전에서는 useEffect의 동작이 조금 바뀌었다고 하는데, 앞선 두개의 문서만으로는 이해가 되질 않아서 chatGPT에게 물어보니

import React, { useState, useEffect } from 'react'

function Example() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('useEffect triggered')
    document.title = `Count: ${count}`
  }, [count])

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

유저 상호작용에는 discrete input과 continuous input 두가지가 있는데, discrete input의 경우는 마우스 클릭, 키보드 입력, 화면 터치 등이 있고, continuous input은 스크롤링, 마우스 이동 등이 존재한다.

만약 앞선 사진의 코드 처럼 discrete input에 의해서 상태가 변경되어 useEffect 내부 코드가 실행되는 경우, react 18 버전에서는 브라우저가 paint 하기 전에 useEffect 내부 코드가 즉각 실행된다고 한다. 그러므로 앞선 코드도 button을 discrete input하여 count가 바뀌므로 document.title이 paint되기전에 실행된다고 한다.