오늘의 개발 - 2024년 11월 30일

🚀 오늘의 목표

📝 개발 작업 내역

구현한 기능

• 댓글 프로필 이미지 변경 기능 구현

• 댓글 닉네임 변경 기능 구현

코드 변경 사항

/* 전체적인 코드를 shadcn 의 FormField 를 적용하여 리렌더링 최적화 */
    <Form {...form}>
      <form onSubmit={handleSubmit(handleSubmitForm)} className="space-y-4 border-t pt-4" aria-label="댓글 등록">
            <FormField
              control={form.control}
              name="text"
              render={({ field }) => (
                <Textarea
                  required
                  disabled={isPending}
                  placeholder={parentId ? '답글을 남겨주세요 👋🏻' : '댓글은 큰 도움이 됩니다 🙏'}
                  {...field}
                />
              )}
            />
    </Form>

/* ImageElement 의 onLoad 이벤트를 사용한 인터렉션 구현 */
  const handleAvatarChange = useCallback((setIsLoading: (isLoading: boolean) => void) => () => {
    const newAvatarUrl = getAvatarUrl();
    setIsLoading(true);

    const img = new Image();
    img.src = newAvatarUrl;
    img.onload = () => {
      setCurrentAvatar(newAvatarUrl);
      setIsLoading(false);
    };
  }, []);

🐞 문제 및 해결 과정

1. 문제 상황

• 문제 설명:
폼 컴포넌트의 불필요한 리렌더링 문제와 부가적으로 발생하는 프로필 이미지 무한 변경 문제
setState 를 사용한 Controlled 패턴으로 폼의 상태를 변경하도록 구현되니 값이 변경될 때 마다 해당 컴포넌트에 포함된 모든 컴포넌트가 리렌더링 되는 문제 발생
랜덤 아바타의 URL 만 변경하면 다음 이미지가 로드되기까지 렌더링이 되지 않아 UX 저하 문제 발생

• 발생 위치: CommentForm 컴포넌트

• 에러 메시지/스크린샷: 이미 다 고쳐서 없다.. 흑흑

2. 문제 해결 과정

• 최종 해결 방법:

const form = useForm<InferZodType<typeof commentFormSchema>>({
    resolver: zodResolver(commentFormSchema),
    defaultValues: {
      text: '',
      author: '',
    },
  });
  
type InferZodType<T extends z.ZodType> = z.infer<T>;

/* FormField 의 메모이제이션과 컨텍스트를 사용한 리렌더링 최적화 */
<FormField
	control={form.control}
	name="text"
	render={({ field }) => (
		<Textarea
			required
			disabled={isPending}
			placeholder={parentId ? '답글을 남겨주세요 👋🏻' : '댓글은 큰 도움이 됩니다 🙏'}
			{...field}
		/>
	)}
/>

3. 학습한 내용

React Hook Form

Building forms with React Hook Form and Zod.

https://ui.shadcn.com/docs/components/form

const FormControl = React.forwardRef(({ ...props }, ref) => {
  return React.useMemo(
    () => <Slot {...props} ref={ref} />,
    [props, ref]
  )
})

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

// 1. 메모리에 이미지 객체 생성
const img = new Image();
img.src = newAvatarUrl;

// 2. 브라우저가 이 URL의 이미지를 다운로드하고 캐시에 저장
// 3. 다운로드 완료되면 onload 이벤트 발생
img.onload = () => {
  // 4. 실제 DOM의 이미지 src 업데이트
  setCurrentAvatar(newAvatarUrl); // 이미 캐시된 이미지를 사용하므로 즉시 표시
}

🌟 오늘의 성과

1. 단순히 프로필 이미지 변경 기능만 만들었다면 모바일로 접근하는 사용자는 해당 기능의 출시를 모를 수 있을거라 생각해서 안내 문구를 추가했다. 조금이라도 UX 를 챙기지 않았나? 싶다.

2. 이미지를 계속 변경하는 상황에 있어서 쓰로틀을 적용해서 빠른 클릭을 방지하도록 구현했다. 지금은 단순히 UX 개선을 위한 고민이었지만 이러한 영향범위를 꾸준히 챙긴다면 장애를 사전에 예방할 수 있지 않을까 하는 생각이 있기도 하다.

3. 각각의 역할에 맞도록 코드를 배치하려고 노력한 것 같다. 이전에는 무작정 Props 로 내리거나 해서 최상단에 로직이 뭉쳐져 있어서 발생하는 가독성문제나 리렌더링 문제가 많았었다.

 // 상위 컴포넌트
  const handleAvatarChange = useCallback((setIsLoading: (isLoading: boolean) => void) => () => {
    const newAvatarUrl = getAvatarUrl();
    setIsLoading(true);

    const img = new Image();
    img.src = newAvatarUrl;
    img.onload = () => {
      setCurrentAvatar(newAvatarUrl);
      setIsLoading(false);
    };
  }, []);

// 하위 컴포넌트
const CommentAvatar = memo(({ handleAvatarChange, currentAvatar }: CommentAvatarProps) => {
  const [isLoading, setIsLoading] = useState(false);

  const throttledHandleAvatarChange = useThrottle(handleAvatarChange(setIsLoading), 1500);

🔨기술부채 정리

📅 다음 작업 계획

💡 추가 메모