트위터 클론코딩(JS) - (1)

노마드코더의 트위터 클론코딩을 따라가고 있는데 타입스크립트를 사용하는 강의였다.
내가 타입스크립트는 몰라서 자바스크립트로 따라가고 있는데 나처럼 어려워하는 분이 계실꺼라 생각해 수정하는 코드 일부분을 블로그에 게시하려고 한다.

우선 깃허브 주소

트위터 클론코딩

간략한 소개

• CRA 환경이 아닌 vite를 사용
• 빌드 방식은 JS + SWC 선택

초기 셋팅

우선, 위에 소개한 것처럼 CRA가 아닌 vite를 선택했다.
CRA는 많이 써봤고 vite는 처음이기도 하고, 또 코드 작성할 때 차이가 있는 것은 아니어서 그냥 노마드코더 따라 vite를 사용해봤다.

강의를 따라가다 보면 언어 선택하는 부분이 나온다.
위 사진처럼 나오는데 나는 JS + SWC를 선택했다.
이 글은 개념 설명하려는 곳이 아니니까 vite와 SWC에 대한 정리는 아래 출처를 참고하시기 바란다.
Vite로 React 프로젝트 시작해보기
초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC

글을 보러오시는 분들은 이미 잘 아시겠지만 강의에서 .tsx 파일은 .jsx 파일로, .ts 파일은 .js파일로 작성했다.

CSS

클론코딩하며 기능을 배우려는 목적이라 css는 그대로 따라했다.
참고로 위 사진 부분은 맥북만 가능한 것 같아서 font-family 부분은 뺐다.
위와 같은 형태가 익숙하지 않을텐데 styled-components의 역할이 저런 형태를 가능하게 해주는 것 같다.
아무튼 내가 프론트하면 .css 파일 따로 만들거니까 시간 버리기 싫어서 그냥 똑같이 했다.

create-account.jsx

여기 onChange 함수가 TS 문법으로 작성되었다. 필자는 아래처럼 변경했다.

const onChange = (e) => {
  if(e.target.name === 'name') {
    setName(e.target.value);
  }
  else if(e.target.name === 'email') {
    setEmail(e.target.value);
  }
  else if(e.target.name === 'password') {
    setPassword(e.target.value);
  }
};

그리고 아래 onSubit 함수도 TS문법이다.
중간에 잘렸는데 좌우지간 JS 코드로는 아래처럼 변경했다.
어느정도 수업을 들은 후에 작성하는 글이라 영상과 약간의 차이가 존재한다.
(예를들면 아래 instanceof FirebaseError라든지)
TS 문법을 어떤식으로 JS 형태로 변경했는지에 초점 맞춰 보기 바란다.

const onSubmit = async(e) => {
  e.preventDefault();
  setError("");
  if(isLoading || name === '' || email === '' || password === '') return;
  try {
    setLoading(true);

    // 1. 계정 생성
    const credentials = await createUserWithEmailAndPassword(
      auth,
      email,
      password
    );
    console.log(credentials.user);

    // 2. 사용자의 이름 설정
    await updateProfile(credentials.user, {
      displayName: name
    });

    // 3. 홈페이지로 redirect
    navigate("/");
  } catch(e) {
    if(e instanceof FirebaseError) {
      setError(e.message);
    }
  } finally {
    setLoading(false);
  }
   
  // console.log(name, email, password);
};

protected-route.jsx

protected-route 파일도 TS 문법이 사용되었다.
아래와 같이 변경했다.

import { Navigate } from "react-router-dom";
import { auth } from "../firebase";

export default function ProtectedRoute(props) {
  const user = auth.currentUser;
  // console.log(user);
  if(user === null) {
    return <Navigate to="/login" />;
  }
  
  return props.children;
}

여기는 수정을 하면서도 이해가 잘 가지 않았다.
'혹시 이건가?'싶은 생각으로 .children을 사용하니까 렌더링이 되었다.
아마 children은 App.jsx에서 createBrowserRouter 내에 있는 children일 것이고, ProtectedRoute 메서드가 인자로 props를 받으니까 createBrowserRouter 내부의 요소들이 props로 전달되는 것 같다고 추정 중이다...
공부를 더 해봐야 알겠지만 JS 문법이 굉장히 괴랄함을 다시 느끼는 중이다.
아무튼 위 코드처럼 변경하면 이상없이 동작한다.

아직 인증 파트만 공부했는데 계속 보면서 추가할 예정이다.