콘텐츠로 이동

Nextjs 및 FastApi (Flask) 설계 제안

1. 프론트앤드 개발 스팩

  • Nextjs 15(App Routing), React 19
  • SEO(Search Engine Optimization, 검색 앤진 최적화, 이후 SEO 로 표시) 에 NextJS 필요

2. 백앤드 개발 스팩

  • 기존 Flask==3.0.3 -> 점진적으로 FastApi 로 변경.
  • Radis 를 설치해서 토큰을 공유하고 신규 api 는 FastApi 로 제작
  • 기존의 Flask 의 api 들을 FastApi 로 만든 후 리다이렉션.
  • 모든 api 대체 시 인증 부분을 FastApi 로 대체하고 Flask 제거.
  • 프론트와 협업을 위한 api 문서 작성.
  • Refresh Token, Access Token 구현.

3. 데이터베이스

  • postgis:16-3.5-alpine, 현재 도커를 이용해서 설치된 데이터베이스

4. UI/UX

  • Atomic Design

    • 컴포넌트 중삼의 UI/UX 설계로 가장 작은 단위 atom(Icon, Typograph)을 생성하고 이것들을 합치면서 재사용이 가능한 컴포넌트로 설계.
    • Primary Color 변경 등의 방법으로 주요 색상 자체를 바꿀 수 있음.
    • 모든 컴포넌트를 커스터마이징 함으로써 일관된 디자인 제공
    • 테마 번경, Dark/Light 모드, 어르신 모드 변경 등이 용이함 예시 사이트: 차크라 UI 스토리북

  • TailwindCss

    • css 파일을 따로 생성하지 않아서 GPT4 와의 협업에 편리함.
    • 속도 빠름 (빌드 시 정적 CSS로 추출)
    • 피그마에 관련 라이브러리가 존재함

  • StoryBook

    • 피그마 등으로 전달된 ui/ux 를 컴포넌트 단위로 구성하고 이를 웹에 배포해서 개발자/디자이너/기획자 간에 협업을 하는 프래임 워크
    • 예시 : 위의 '차크라 UI 스토리북' 이 스토리북으로 컴포너트 디자인을 공유하는 예시
    • 내부 서버를 사용해서 내부망의 웹에서 공유 가능. (ex: storybook.myfarmus.com, 또는 개발 서버)

5. 상태관리

  • 클라이언트 상태관리 : React Context Api
  • 서버 상태관리 : Tanstack Query(React Query)

6. 다국어 시스템

  • i18next 예시 사이트: 다국어 적용된 스토리북 홈페이지

  • url 에 /ko, /en 이 들어감으로써 해당 페이지가 한국어, 영어임을 명시함 -> SEO 에 도움이 됨.

  • 처음부터 번역 작업을 하지는 않지만 개발을 진행한 이후 다국어를 적용하려면 URL 이 전부 변경 되어서 번거로움.
  • 초기 세팅 (1~2시간) 이후 진행을 해야 향후 번거로운 작업을 막을 수 있음.
  • 구현 이후 번역을 위해서는 한국어 문장 파일만 넘김으로써 번역가에게 번역 요청 가능

7. SEO (Search Engine Optimization)

  • 네이버, 구글 등의 검색앤진을 통해 검색을 할 경우 사용자를 자 사이트에 유입시키거나 앱 설치를 할 수 있도록 구성
  • 안드로이드, 아이폰등에 설치된 앱은 검색엔진에 노출되지 않음.
  • 유입 예 : 벼 품종인 '하이아미', '맛드림' 등을 검색 시 자 사이트의 게시판, 댓글, 뉴스기사 를 검색에 노출시킴으로써 사용자를 유입시키고 앱 설치를 유도함

8. SEO 방법 (CSR, SSR, SSG 설명은 생략합니다.)

  • React 는 CSR 이라서 SEO 에 부적합함 (검색 엔진에 노출되기가 어려움)
  • NextJS 는 SSR, SSG 구현과 URL 기반 라우팅을 통해 SEO 최적화가 가능.
  • SSR, SSG, SiteMap, metatag, og:tag 등을 통해 SEO 최적화
  • 기획 단계에서 핵심적인 SEO url 을 정의하고 SiteMap 으로 정리

9. 사용자 행동 분석

  • Google Analytics 사용
  • Google Analytics 기본 설정시 다음과 같은 정보를 제공
    • 어떤 페이지에서 사람들이 많이 머무는지, 어느 링크를 클릭했는지 등의 사용자 행동 분석 가능
    • 유입 경로 확인 가능 (예: 검색, SNS, 직접 접속 등)
    • 사용자 디바이스, 브라우저, 지역 등 정보 확인 가능
  • 추가 설정 시 사용자 앱 설치 유도율 등을 알 수 있지만 1차적으로는 기본적인 기능만 구현
  • 향후 추가 개발 논의

10. 문서화

  • Mkdocs 사용 (현재 보고 있는 문서가 Mkdocs 입니다)
  • 개발을 진행함에 있어서 코멘트 등을 MD파일(MarkDown) 로 제작하고 이를 배포해서 개발에 필요한 내용을 공유하고 필요 없는 내용은 정리하면서 협업
  • git 을 통해 협업 문서 관리 가능
  • 현재 문서의 경우 배포를 하게 되면 mkdocs.myfarmus.com 와 같은 위치에 배포 됩니다.

11. 코드 관리 및 CI/CD

  • 내부 코드관리, CI/CD 를 위해 내부 Gitlab 설치 및 배포가 필요함. Github 의 경우는 논의
  • Gitlab 내부 망에 설치함으로서 코드, 문서 등을 외부로 부터 보호.
  • 각 브랜치에 대한 권한 (ex: 운영레벨 : main, 개발 레벨: develop, 각자 개발 : jang-dev 등)을 설정해서 코드 관리 및 배포 안정화
  • 위의 Mkdocs, StoryBook 등도 배포를 자동으로 하기 위해서는 Gitlab 이 필요함.