[오병훈] Sprint10

[bhoh032019]

요구사항

기본

상품 등록 페이지

• 상품 등록 페이지 주소는 "/addboard" 입니다.
• 게시판 이미지는 최대 한개 업로드가 가능합니다.
• 각 input의 placeholder 값을 정확히 입력해주세요.
• 이미지를 제외하고 input 에 모든 값을 입력하면 '등록' 버튼이 활성화 됩니다.

상품 상세 페이지

• 상품 상세 페이지 주소는 "/board/{id}" 입니다.
• 댓글 input 값을 입력하면 '등록' 버튼이 활성화 됩니다.
• 활성화된 '등록' 버튼을 누르면 댓글이 등록됩니다

심화

• 회원가입, 로그인 api를 사용하여 받은accessToken을 사용하여 게시물 등록을 합니다.
• '등록' 버튼을 누르면 게시물 상세 페이지로 이동합니다.

주요 변경사항

• 이전 미션에서 만든 로그인 페이지를 가져와 수정해 로그인 페이지를 제작했습니다.
• accessToken을 withCredential을 이용해 사용하려하니 CORS에러가 발생해 우선 localstorage를 사용해 accessToken을 관리했습니다.

스크린샷

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[arthurkimdev]

리뷰 반영 굳 입니다! 👍

[arthurkimdev]

지난번 리뷰 반영해주시느라 고생 많으셨습니다! 수고하셨습니다~ 👍

[arthurkimdev]

context API를 사용할 때는, value를 useMemo로 감싸서 불필요한 리렌더링 방지 처리를 꼭 해줘야해요.
라이브러리(redux, zustand 등) 을 사용 안하게 될 땐, 리랜더링 최적화를 저희가 직접 챙겨야하거든요.

const value = useMemo(() => ({
    login,
  }), [login]);

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );

[arthurkimdev]

useMemo뿐 아니라, useCallback도 추가할 수 있습니다.

const login = useCallback(async (credentials: { email: string; password: string }) => {
    try {
      const response = await axiosInstance.post('/auth/signIn', credentials);
      const { accessToken } = response.data;

      localStorage.setItem('accessToken', accessToken);
      console.log('로그인 성공');
    } catch (error) {
      console.error('로그인 실패:', error);
      throw new Error('로그인에 실패했습니다.');
    }
  }, []);

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-constructed-context-values.md

[arthurkimdev]

해당 파일 전반적으로 아래 처럼 커스텀 훅을 통해 로직이 분리되어 개선이 되면 코드 가독성이 향상되고, 유지보수에 도움이 될 것 같아요. 아래 구조로 한번 고민해보세요.

export default function AddBoardPage({
  initialValues = INITIAL_VALUES,
  initialPreview,
}: BoardCreateFormProps) {
  const { values, isValid, handleChange } = useFormState(initialValues);
  const { submitArticle } = useArticleSubmit();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await submitArticle({
        title: values.title,
        content: values.content,
        image: '...' // 이미지 URL
      });
      alert('게시글이 등록되었습니다.');
    } catch (error) {
      alert('게시글 등록에 실패했습니다.');
      console.error(error);
    }
  };

  return (
    <div className={styles.container}>
      <form onSubmit={handleSubmit}>
        <FormHeader isValid={isValid} />
        <div className={styles['container-body']}>
          <FormField
            label="*제목"
            name="title"
            value={values.title}
            onChange={handleInputChange}
            placeholder="제목을 입력해주세요."
          />
          <FormField
            as="textarea"
            label="*내용"
            name="content"
            value={values.content}
            onChange={handleInputChange}
            placeholder="내용을 입력해주세요."
          />
          <FileInput
            label="이미지"
            name="imgFile"
            value={values.imgFile}
            initialPreview={initialPreview}
            onChange={handleChange}
          />
        </div>
      </form>
    </div>
  );
}

[arthurkimdev]

이렇게 리스트를 map 사용해서 UI 표시할 수 있는 부분은 <CommentList comments={comments} /> 이렇게 별도로 분리해서 가독성을 향상 시키면 좋겠습니다. 😸

[arthurkimdev]

이렇게 객체로도 관리할 수 있겠어요! 🧐

const [formData, setFormData] = useState<LoginFormState>({
    email: '',
    password: ''
  });
  const [validation, setValidation] = useState<ValidationState>({
    email: true,
    password: true,
    form: false
  });

[arthurkimdev]

아래처럼 검증로직을 보다 더 단순화할 수 있습니다.

  const validateEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  useEffect(() => {
    const isEmailValid = validateEmail(formData.email);
    const isPasswordValid = formData.password.length >= 8;

    setValidation({
      email: isEmailValid || !formData.email,
      password: isPasswordValid || !formData.password,
      form: isEmailValid && isPasswordValid
    });
  }, [formData]);