프로젝트 SPAM #2 초기 설정

◆ Vite

있는 줄을 알았지만 내가 쓰게 될줄을 꿈에도 몰랐다. 멘토님의 강제력이 행사되어 얼떨결에 쓰기 시작했지만, 뭔가 아주 큰 변화나 차이점이 없어서 아직은 잘? 모르겠다. 마치 엘지폰 쓰다 삼성폰 쓰는 정도의 차이랄까. 아직 뭐 제대로 써본 것도 없으니 딱히 쓸 말은 없다.

 

◆ Yarn

드림코딩 엘리 누님(누님 맞을까..)이 사용하셔서 쓰기 시작했는데, 솔직히 선택지가 npm 아니면 yarn인 상황이니 뭐 가릴 처지가 아니긴 하다. 초반에 npm start에 길들여져 있던 내게 yarn과 vite의 조합은 신선했다. 어떤 조합으로도 화면 구동이 안되서 구글의 힘을 빌렸다.

$ yarn dev

 

◆ TypeScript

큰일이다. 제대로 기능 구현 시작도 하기 전에 내 에디터와 브라우저가 붉게 물들기 시작했다. 누가 타입스크립트 쉽다 그랬던가. 복잡하게 얽힌 함수와 컴포넌트, 프롭스 사이에서 하루 종일 피를 흘리고 있다..
내 공부가 짧은 탓이니 누굴 탓하랴. 아직 갈길이 멀다.

 

◆ React Query

15,000원 할인 행사를 올리브 영 뺨치게 자주하는 유데미의 상술 덕에 내 강의실 구석에서 언제 구입했는지도 모를 리액트 쿼리 강의가 먼지만 쌓여가고 있었는데, 이번 프로젝트를 계기로 제 구실을 톡톡히 해내고 있다. 절반 정도 뿐이 못 들었는데 엄청 도움이 되고 있다. 프로젝트에 필요한 기능들과 찰떡이라 잘 써먹을 거 같은데, 타입스크립트에서 발이 묶였다. ㅋㅋㅋㅋㅋㅋ

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient();

return (
    <div>
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </div>

• 제일 초기 설정 코드, 라우터는 쿼리클라이언트프로바이더 안에 위치시킨다. 한글로 쓰니 되게 어색하군.

 

◆ React Router

라우팅은 대체 상품이 없습니다. 그냥 쓰세요.
Wouter는요? React Hook으로 가능한데 모르셈? 등의 반론이 예상된다. 내가 쓸 줄 모른다. 이상이다.

 

◆ Axios

이거시야말로 대체 불가. Fetch의 늘어진 나무늘보 같은 코드를 쓰다가 Axios를 쓰면 정말 신세계. 안 쓸 수가 없다.

const getPosts = async (pageNum: number) => {
  const { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${pageNum}`);
  return data;
};

 

◆ SCSS

CSS에 진심인 나아게는 남이 만든 거 퍼다 쓰는 게 아니라는 점에서 긍정적이다. 그러나 내가 원하는 퀄리티까지 끌어올리는데 걸리는 시간을 얼마나 줄일 수 있을지가 관건.

제일 좋은 기능은 자주 사용되는 것들을 변수처리해서 쓸 수 있다는 점!

$colorText: #114173;

 

---

 

🔍 SCSS 템플릿?

부트스트랩 사이트에 가면 이미 만들어놓은 완성된 버전의 SCSS 파일들을 아주 손쉽게 구할 수 있다. 그러나 그걸 내 사이트에 적용하기는 힘들다. 아주 힘들다. 양이 너무 많다. 다 읽지도 못할 수준이다.

그럼 우리처럼 한 달짜리 프로젝트의 규모에 맞는 샘플은 없을까? 찾아보다가, 그 시간에 만드는 게 빠르겠다는 결론이 나왔다. 만드는 것도 다 경험!