FE Trend 개발기 #2 - 목표 구체화, 기본 설정

구체화

차별점

문득 이런 생각이 들었다.

이렇게 만들면 타 RSS 파싱 사이트와 다른 게 뭐지?

"프론트엔드" magazine인데 차별점을 줘야 하지 않겠나.

고민한 결과 3가지의 차별점을 두려고한다.

• 기술 트렌드 시각화
  - 주요 키워드 추출하여 태그로
  - 키워드별 순위 부여, 그래프로 확인
• 코드 샌드박스 연동
  - 사용자가 즉석에서 코드 테스트를 해볼 수 있게 샌드박스 embed
  - 만약 코드가 있으면 추적하여 해당 글에 자동으로 embed후 예시 추출하게 (고도화)
• 가져온 데이터 내에 AI 챗봇 적용
  - 가져온 데이터 기반으로 AI에게 질문 및 정리 가능하게 설정

일단 크게 이 정도만 목표로 설정했다.

 

디자인

디자인은 요즘 잘 쓰고 있는 Swiper패키지를 이용하는 방향으로 구상해 봤다

웹은 일반 리스트, 사이트 별로 설정하면 캐러셀

모바일은 swiper의 vertical을 사용하여쇼츠넘기는 느낌으로 단일로 보게 할 생각, 글자 리스트 형식 전환 및 사이트 별 전환가능

 

간단히 디자인 구상

---

기본 설정

베이스 css 설정

먼저 tailwind를 설치해 주자.

vite 환경에서 tailwind 설치 가이드는 공식 문서에 잘 나와있다.

https://tailwindcss.com/docs/installation/using-vite

Installing with Vite - Installation

 

/* /src/app/index.css */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import "tailwindcss";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@theme {
  --font-sans:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue",
    "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", sans-serif;
    
  --spacing: 0.0625rem; /* 1px */
}

간단히 base css를 설정했다.

다크모드를 고려한 코드 포함 https://tailwindcss.com/docs/dark-mode#using-a-data-attribute

기본 폰트는 Pretendard로 설정했다.

tailwind 4 버전 이후부터는 간단하게 저렇게 간단하게 spacing을 커스터마이징하여 기본단위값 설정이 가능해졌다. 보기 편하게 1px 단위로 들어가게 하였고 반응형을 고려하여 rem으로 실질적인 값을  설정하였다.

국제화 사전 작업

i18next, react-i18next, i18next-browser-languagedetector(브라우저 언어 감지) 설치

yarn add i18next react-i18next i18next-browser-languagedetector

 

루트 폴더에 locales를 만들고 임시로 영어 한국어 두 개 파일을 만들어 줬다. (임시로 만든 파일에 빈배열이라도 넣어줘야 에러가 안 뜬다)

 

locales폴더에 설정 파일인 i18n.ts 추가, 리소스에는 방금 만든 json을 연결해 준다.

// src/locales/i18n.ts
import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import enCommon from "../locales/en/common.json";
import koCommon from "../locales/ko/common.json";

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    interpolation: {
      escapeValue: false,
    },
    resources: {
      en: {
        common: enCommon,
      },
      ko: {
        common: koCommon,
      },
    },
    fallbackLng: "ko",
    defaultNS: "common",
    react: {
      useSuspense: false,
    },
  });

export default i18n;

 

번들링을 위해 main.tsx 에 방금 만든 i18n설정 파일을 import 해줬다.

// src/app/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './app.tsx'
import "../locales/i18n"; //추가
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

 

이전 프로젝트에서 useTransition 사용할 때 기본값을 주는 게 보기가 편해서 훅을 따로 만들었다.

// src/shared/lib/use-trans.tsx
import { useCallback } from "react";
import { useTranslation } from "react-i18next";

const useTrans = () => {
    const { t } = useTranslation();
    const trans = useCallback(
        (key: string, defaultValue: string) => {
            return t(key, { defaultValue });
        },
        [t]
    );
    return { trans }
};

export default useTrans;

 

라우팅 설정

react-router를 설치한다.

yarn add react-router

 

그다음 router파일을 수정해 준다.

// src/app/router.tsx
import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from "react-router";
import { MainPage } from "../pages/main";
import { useMemo } from "react";
import { Layout } from "../shared/ui";

const BrowserRouter = ({ children }: React.PropsWithChildren) => {
  const router = useMemo(() => createBrowserRouter(createRoutesFromElements(children)), [children]);

  return <RouterProvider router={router} />;
};

const Router = () => {
    
  return (
    <BrowserRouter>
      <Route element={<Layout />}>
          <Route path="/" element={<MainPage />} />
      </Route>
    </BrowserRouter>
  );
};
export default Router;

임시로 메인페이지에 더미 내용을 넣고 기본 페이지로 설정해 주었다. (Layout도 단순히 Outlet만 들어간 상태)

이전 react-router와 달라진 게 react-router 6버전 이후 부터는 동적 라우팅이 가능해졌다.

이전에 createBrowserRouter내에 json형식으로 라우팅을 잡아줘야 Route Elements로 사용이 가능했다

이런식으로 각기 잡아 줘서 사용...

6버전 이후 createRoutesFromElements 함수가 추가되어서 동적 라우팅이 가능해졌다. 위 사진같이 번거롭던 과정을 위 코드같이 단순히 Route Element만 사용하면 동적으로 라우팅 되도록 바뀌었다.

 

이후 App에 import만 해주면 끝

// src/app/App.tsx
import Router from "./router"

function App() {
  return (
    <Router />
  )
}

export default App

---

#2부터는 본격적인 시작인 줄 알았으나... 세팅에 생각보다 시간을 소요하였다ㅠㅠ

#3부터는 기능 및 ui 구현에 들어가겠다.

 

브랜치 #2 

https://github.com/inho1019/front-end-trend/tree/%232