TIL: 2023-03-02

⚙️ 오늘 학습한 내용

리액트 + 타입스크립트로 프로젝트 구성하기

 

🐹 오늘의 기분

타입스크립트 공부를 해봐야할 것 같아서 프로젝트 주제를 고민하고 있었는데 얼떨결에 좋은 재료가 생겨버렸다. 좋아하는 가수랑 채팅할 수 있는 어플이 있었는데 서비스 종료로 그 동안의 채팅 데이터를 다운받을 수 있게 해준 것! 이게 csv 파일인데다가 사진, 영상 같은 첨부파일도 다 줘서 잘 써먹으면 프로젝트를 해볼 수 있겠다는 생각이 들었당

어제 피그마 만들고 오늘부터 조금씩 만들어보기 시작했는데 타입스크립트로 예시 코드만 몇 개 작성해봤지 이렇게 뭘 만드는 건 처음이라 계속 구글링해가며 개발하고 있다. 오늘은 json으로 변환한 데이터에서 메시지를 뽑아와 렌더링하는 것까지만 해봤다. 확실히 props 안 넘겼을 때나 타입 안 맞을 때 오류를 재깍재깍 잡아내줘서 편하긴 하다.

모바일 우선으로 개발하는 중이고, 기존 앱에 없던 기능인 검색 기능을 만들어보고 싶어서 한 번 해보려고 한다. 어려울 것 같지만,, 최대한 해봐야지

 

🗝 키워드

fit-content, svg, GlobalStyle

 

🗣 스스로에게 설명

리액트 + 타입스크립트로 프로젝트 시작하기

프로젝트를 생성할 디렉토리에 아래 명령어를 입력하면 된다. (npm 기준)

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

현재 폴더에서 타입스크립트 기반의 프로젝트를 시작하고 싶다면 my-app 부분만 .으로 바꾸면 된다.

npx create-react-app . --template typescript

Adding TypeScript | Create React App

svg 파일 리액트 컴포넌트로 편하게 쓰기

svg 파일을 리액트 컴포넌트로 import하면 원본 파일을 손대지 않고 너비, 높이, 색상 등을 자유롭게 지정할 수 있어 쓰기 편해진다. 

import { ReactComponent as ChatIcon } from "../icons/chat.svg";

이렇게 import해오면 svg 아이콘을 컴포넌트처럼 쓸 수가 있다.

<ChatIcon width="23px" height="25px" fill="#BBBBBB" />

가끔 fill이나 stroke 속성이 제대로 적용되지 않을 때가 있는데 svg 파일 내부에 이미 해당 속성이 적용되어 있는 경우라서 그런 거였다.

기존 속성을 지우고 컴포넌트로 렌더링할 때 새롭게 내려주면 잘 적용된다.

잘 불러와졌다

 

fit-content 속성

말풍선 너비를 글자 수에 딱 맞추고 싶어서 찾아보다가 알게 되었다. 

최대 너비를 max-width로 지정해두고 width: fit-content를 추가하니 글자 수에 맞게 말풍선이 맞춰졌다. 

전, 후

fit-content - CSS: Cascading Style Sheets | MDN

styled-components GlobalStyle 이용하기

부캠 프로젝트에서 css variables를 쓰지 않아 일일이 색상값을 입력해야해 번거로웠던 기억이 있어 이번에는 css variables를 써볼 겸 styled-components의 GlobalStyle을 적용해봤다.

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  :root {
    --lightPurple: #EFE8FD;
    --deepPurple: #7C4FFD;
    --gray: #BBBBBB;
    --lightGray: #D9D9D9;
    --lightBlack: #535353;
  }
  
  // ...rest
`

:root 선택자 내부에 하이픈 두 개(--)와 함께 변수를 만들고 지정하고 싶은 값을 넣으면 된다.

자주 쓸 색상들만 넣어놓았는데 이렇게만 했는데도 굉장히 편해졌다. 

 

GlobalStyle을 적용하려면 app.tsx의 가장 위에 GlobalStyle 컴포넌트를 불러오면 된다. 

function App() {
  return (
    <BrowserRouter>
      <GlobalStyle />
      <main>
        <Routes>
          <Route path="/" element={<Chats />} />
          <Route path="/calendar" element={<Calendar />} />
        </Routes>
        <Navbar />
      </main>
    </BrowserRouter>
  );
}

 

❓ 막히는 or 막혔던 부분

JSON 파일을 fetch로 불러오려고 했는데 src 폴더에서는 못 찾고 public 폴더에 있어야만 데이터를 불러올 수가 있었다. 이유를 모르겠다. 

netlify에서 github 레포지토리와 연동하여 자동 배포를 하려고 했는데 채팅 데이터를 포함한 미디어 파일들은 전부 .gitignore에 넣어놓아서 이렇게 배포하니 데이터가 아예 불러와지지 않았다. 그렇다고 이 미디어 파일들을 전부 github에 올리는 건 좀 아닌 것 같아서 다른 방법을 찾을 때까지는 그냥 수동으로 해야겠당

 

🔍 공부가 더 필요한 부분

무한스크롤 구현방법을 찾아봐야겠다