[TIL] 뉴스피드 프로젝트 (2)

[오늘 한 일]

• 알고리즘 1문제 풀이
• 회원가입 기능 구현
• 로그인 기능 구현
• 게시물 업로드 -> 홈 화면에 뿌리기

회원가입 기능

firebase를 이용하여 쉽게 구현할 수 있었다.
uid도 생성해주어서 그 id를 userId로 사용할 수 있어서 편리한 것 같다.
그러나 Authentication 에는 이메일, uid정도만 저장되어서 userObj를 생성해서 입력받은 값들을 redux store에 저장해주었다.

const createUserObj = (userId) => {
    const userObj = {
      name,
      email,
      avatar: null,
      userId,
      mbti: selectMbti()
    };
    dispatch(createUser(userObj));
    setName('');
    setPassword('');
    setEmail('');
  };

const signUp = async (event) => {
    event.preventDefault();
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      const userId = userCredential.user.uid;
      createUserObj(userId);
      navigate('/');
    } catch (error) {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log('error with signUp', errorCode, errorMessage);
    }
  };

로그인 기능

마찬가지로 firebase가 제공하는 API들을 이용해서 쉽게 구현할 수 있었다.

const signIn = async (event) => {
    event.preventDefault();
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      console.log('user with signIn', userCredential.user);
      setEmail('');
      setPassword('');
      navigate('/');
    } catch (error) {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log('error with signIn', errorCode, errorMessage);
    }
  };

게시물 업로드 -> 홈 화면에 뿌리기

게시물을 업로드할 때 썸네일 사진 파일도 같이 업로드하게 되는데, 해당 이미지 파일을 화면에 뿌려주기 위한 방법을 고민해보았다..

const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      // FileReader를 사용하여 이미지를 Base64로 변환
      const reader = new FileReader();
      reader.onloadend = () => {
        setImage(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

const createFeedObj = (e) => {
    e.preventDefault();
    const feedObj = {
      feedId,
      title,
      content,
      userId,
      createAt: formattedDate,
      thumbImg: image
    };
    dispatch(createFeed(feedObj));
    setTitle('');
    setContent('');
    navigate('/');
  };

검색해보니, FileReader를 사용하면 이미지를 Base64 라는 것으로 변환하여 저장하면 나중에 불러올 수 있었다. 그 변경된 이미지를 image라는 state에 저장하여 feedObj를 생성할 때 thumbImg: image 이렇게 이미지 파일을 넘겨주고, redux store에 저장하였다.

갈 길이 구만리다..
매 과제, 매 프로젝트가 나에게는 늘 쉽진 않았지만
이번 프로젝트가 어느 때보다 쉽지 않다고 느낀다..😭
그래도 이걸 해내고 나면 그 어느때보다 성장해 있겠지?