엄청난 역사를 지닌 지글 프론트엔드 레포지토리를 방문해주신 여러분, 환영합니다
.
├── public
│ ├── .well-known: 앱 링크를 위한 파일
│ └── tinymce: wysiwyg editor
└── src
├── api: 앱 내부에서 호출하는 api. fetch를 통해 호출
│ ├── auth
│ ├── image
│ ├── log
│ ├── notice
│ └── tag
├── app
│ ├── [lng]: 지글의 모든 화면은 이 디렉토리 밑에 있습니다
│ │ ├── (common)
│ │ │ ├── (common)
│ │ │ │ ├── mypage
│ │ │ │ ├── search
│ │ │ │ └── section
│ │ │ │ └── [type]
│ │ │ └── (needSidebar)
│ │ │ ├── [category]
│ │ │ └── notice
│ │ │ └── [id]
│ │ │ └── assets
│ │ ├── (empty): 레이아웃이 비어있는 화면
│ │ │ ├── app: /[lng]/app - 앱 설치 페이지 리다이렉션
│ │ │ └── login: /[lng]/login - 로그인 페이지 리다이렉션
│ │ └── (write): 사이드바가 없고, 상단바가 있는 글쓰기 화면
│ │ └── write: /[lng]/write
│ ├── api
│ │ ├── auth: nextauth를 사용하여 인증을 처리
│ │ │ └── [...nextauth]
│ │ ├── bff: ziggle-backend와 통신하는 api. proxy 역할
│ │ │ └── [...ziggle]
│ │ ├── notice: 직접 ziggle-backend와 통신하는 api (deprecated)
│ │ │ └── [noticeId]
│ │ │ ├── [contentId]
│ │ │ │ └── foreign
│ │ │ ├── additional
│ │ │ └── full
│ │ └── og: open graph image를 생성하는 api
│ ├── components: 모든 컴포넌트는 이 디렉토리 밑에 있습니다
│ │ ├── atoms: 가장 작은 단위의 컴포넌트
│ │ │ ├── Analytics
│ │ │ ├── Button
│ │ │ ├── Checkbox
│ │ │ ├── ExternalLink
│ │ │ └── Toggle
│ │ ├── molecules: atom을 조합한 컴포넌트
│ │ │ ├── Chip
│ │ │ ├── DDay
│ │ │ ├── HighlightedText
│ │ │ ├── HorizontalScrollButton
│ │ │ ├── Pagination
│ │ │ ├── Tag
│ │ │ └── ZaboImage
│ │ ├── organisms: molecule을 조합한 컴포넌트
│ │ │ ├── DateTimePicker
│ │ │ ├── ImageCarousel
│ │ │ ├── Tags
│ │ │ └── Zabo
│ │ └── templates: organism을 조합한 컴포넌트
│ │ ├── Footer
│ │ ├── LoadingCatAnimation
│ │ ├── Navbar
│ │ ├── NavbarWrite
│ │ ├── ResultZabo
│ │ ├── SearchAnimation
│ │ ├── SearchResults
│ │ └── Sidebar
│ └── i18next: 다국어 지원을 위한 설정
│ └── locales
│ ├── en
│ └── ko
├── assets: 이미지, 폰트, 아이콘 등의 정적 파일
│ ├── animations: lottie 애니메이션
│ ├── fonts
│ ├── icons
│ └── logos
├── mock: 개발 환경(storybook)에서 사용하는 mock 데이터
└── utils: 유틸성 파일
지글은 Next.js의 app directory 구조를 따르고 있습니다. 이 때문에 각 컴포넌트(페이지)는 Client Component와 Server Component로 나눠지게 됩니다
각각은 각자의 특성을 가지고 있습니다.
- Client Component: 클라이언트에서 hydrate되는 컴포넌트
- Server Component: 서버에서 렌더링되는 컴포넌트 (hydration이 필요 없음)
지글은 다국어 지원을 위해서 i18next를 사용하고 있습니다.
src/app/i18next/locales 디렉토리에 각 언어별 폴더로 json 파일을 만들어서
다국어를 지원하고 있습니다.
자세한 json 파일 작성법은 i18next 문서를 참고해주세요.
Server Component에서는 const {t} = await createTranslation()을,
Client Component에서는 const {t} = useTranslation을 사용해야 합니다.
서버와 클라이언트에서 동일한 번역을 사용하기 위해서 파라미터로 받은 lng를
각 함수의 인수로 넘겨주어야 합니다.
지글은 NextAuth를 사용하여 인증을 처리하고 있습니다.
src/api/auth 디렉토리에 NextAuth의 설정 파일이 있습니다.
별도로 설정 값을 바꿀 필요는 없이 token refresh, access token 등의 정보가 모두 세션에 담겨 있습니다.
session.user.studentNumbersession.user.uuidsession.accessToken
Server Component에서는 const session = await auth()로 인증정보를 가져올 수 있고,
Client Component에서는 const { data: session } = useSession()으로 인증정보를
가져올 수 있습니다.
기본적으로 제공되는 .env 파일은 localhost:3000으로 개발 서버를 열 때
사용 가능한 파일입니다.
이외에 두가지 환경변수가 추가로 필요합니다
NEXTAUTH_SECRETIDP_CLIENT_SECRET
이 두가지 환경변수를 .env.local 파일에 작성하시면 버전 관리에 tracking
되지 않고 편하게 사용하실 수 있습니다.
NEXTAUTH_SECRET는 openssl rand -base64 128과 같은 명령어로 생성한 랜덤한
문자열이면 되고, IDP_CLIENT_SECRET은 infisical에서 ziggle2023 client의
secret값을 받아오실 수 있습니다.
yarn berry를 사용하고 있습니다
- zero-install X - node-modules linker - `.yarnrc.yml` 파일 참고yarn install
yarn dev해당 프로젝트는 .gitattributes 파일에서 eol 설정을 lf로 하고 있습니다.
만약에 이미지 파일과 같은 바이너리 파일을 추가하는 경우에는, 해당 파일에 대해서
*.png binary와 같은 설정을 해주셔야 의도치 않은 결과를 막을 수 있습니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent