[ Nomad coders ] (의식의 흐름으로 쓰는) twitter clone 타입스크립트로 다시 만들어보기

 

#0.0 ~ #2.2

 

 

 

 

 

 

nomad coders의 twitter clonecoding은 진작 한 번 해봤다.

react를 막 배우기 시작했을 때 해보고 정말 기뻐했던 기억이 난다.

 

그랬던 트위터 클론코딩을 다시 시작하게 된 이유

 

1. 타입스크립트 + 리엑트 실력 향상을 위해

2. 현재 속해있는 react 스터디에서 함께 진도를 나가고 있는 강의 중 하나가 twitter clone coding이기 때문에

3. 새롭게 배운 것들을 이전에 배운 내용에 적용해보면서 새 라이브러리의 쓰임에 익숙해지고 라이브러리의 존재 이유를 스스로 깨닫기 위해

 

 

 

 

 

 

과정

 

 

새로운 트위터 클론 코딩 프로젝트를 타입스크립트 + 리액트로 빌드하고

진작 들었던 강의를 빠르게 들으면서, 각 주 차에 해당하는 학습 내용을 typescript를 사용해 만들어본다.

 

 

 

 

 

 

💻

 

 

 

 

설치

 

react + typescript 설치

npx create-react-app my-app --template typescript

 

 

수업 진도에 따라서

react-router-dom도 설치해주었다

npm I react-router-dom

 

참고로 react-router-dom v5와 v6의 차이는 

https://pottatt0.tistory.com/25

🔧[ React-router-dom ] react-router-dom v6 달라진 점

여기서 한번 작성한 적 있다.

 

 

 

 

💩 문제

 

1. 확장자명 실수 

HashRouter가 먹지 않았다.

문제가 무엇인지 코드만 들여다보고 있었던게 실책이었다.

문제는 코드가 아니라 파일 확장자에 있었다.

확장자명을

Router.tsx가 아닌

Router.ts로 만들어서 생긴 문제였다.

 

당연하다

react-router-dom을 사용하려고 하는데 확장자 자체가 react가 아니었던 것이다.

 

하지만 덕분에 HashRouter과 BrowserRouter의 차이를 알게 되었다.

BrowserRouter은 HTML 5의 history API를 사용해 UI를 업데이트한다 : 동적인 페이지에 적합

HashRouter은 URL의 hash(#)이용해서 검색엔진이 읽지 못한다 : 정적인 페이지에 적합

 

다음에 관련 내용의 블로그 글을 한번 올릴 것 같다.

이렇게 쌓여가는 글(예정) 목록...

 

 

2. 기초적인 실수

interface AppRouterProps {
  isLoggedIn: boolean;
}

const AppRouter = ( isLoggedIn : AppRouterProps) => {
  console.log(isLoggedIn);

이렇게 만들어놓고 

뭐가 문제지..? 왜 isLoggedIn 값이 false가 안나오는거지..? 하면서 고민했다.

console로 찍어본 isLoggedIn 값은

false가 아닌

"isLoggedIn" : false

였다.

 

콘솔창을 보자마자 깨달았다.

props 안에 있는 isLoggedIn을 가져오는 게 아니라

props의 이름을 isLoggedIn으로 하고, 이 것을 가져오고 있었던 거였다 : 만약 isLoggedIn.isLoggedIn을 console로 찍어봤으면 원하는 false값을 얻었을 것이다 

 

const AppRouter = ( {isLoggedIn} : AppRouterProps) => {
  console.log(isLoggedIn);

바로 isLoggedIn을 props의 한 객체로 가져와주고 문제는 해결되었다.

 

 

 

3. typescript는 아직 어렵다

  const onChange = (e: React.FormEvent<HTMLInputElement>) => {
    console.log;
  };

event에 빨간 줄이 그어져서 빠르게 해결했다.

event 뒤에 React와 이벤트 내용, element를 써줘야 한다는 것을 잘 기억하자!

 

 

 

 

 

 

 

 

배움

   {isLoggedIn ? (
          <Route path="/" element={<Home />} />
        ) : (
          <Route path="/" element={<Auth />} />
        )}

항상 Route를 구성할 때 로그인 여부에 따라 다른 컴포넌트를 보여주더라도 같은 path를 이용할 생각을 하지 못했었다.

나라면

Auth의 path="/"

Home의 path ="/home"

으로 두었을 텐데.

어차피 둘 다 시작하는(정보값이 없는) 화면이라는 점에서 같은 경로를 사용해도 되는데 왜 여태까지 항상 다른 경로를 사용하려고 했는지 모르겠다.

 

다시 보니까 더 세부적인 내용이 보이는 것 같다.

 

 

 

 

 

 

+

인프런 웹 게임을 만들며 배우는 react 강의 정리입니다✨

 

 

 

class이용보다 함수형의 이용이 더 편하기 때문에 함수형을 잘 사용하고 있다

훅을 이용하면 class보다 코드를 간결, 직관적으로 쓰고 이해할 수 있다.

게다가 react 자체에서 class보다 hooks를(함수형)을 더 권장하기 때문에 hooks를 이용하는 것이 좋다.

 

개인적으로도 class문법보다 함수형이 편해서 함수형을 거의 항상 이용할 것 같다

하지만 class도 필요할 때가 있을 수 있으니 열심히 배워둬야지

 

 

 

웹팩

여러개의 js 파일(컴포넌트)를 하나로 합치고 쓸데없는 코드를 빼버리고 최적화하는 작업

설치하면 package.json 파일이 생긴다

 

원래는 react, react-dom부터

npm i... 를 찍으면서 하나하나 설치해야 하는데

create-react-app으로 간단하게 설치하는 것이 보편적이다.

 

 

빌드는 다음번에 ㅎㅎ...

항상 빌드에서 어려움을 겪기 때문에 정신이 멀쩡할 때 제대로 듣고 싶다.

오늘은 너무 피곤..