모여타 Frontend Wiki

서비스 바로가기

폴더 구조

FSD FSD 도입 이유와 과정 블로그


src/
├── _app/
│   ├── providers/
│   ├── config/
│   └── styles/
│
├── _pages/
│   ├── home/
│   ├── auth/
│   │   ├── login/
│   │   └── sign-up/
│   ├── post/
│   │   ├── list/
│   │   ├── detail/
│   │   └── write/
│   ├── chat/
│   │   ├── list/
│   │   └── room/
│   └── taxi-matching/
││
├── features/
│   ├── auth/
│   │   ├── login/
│   │   └── sign-up/
│   ├── post-create/
│   ├── post-comment/
│   ├── location-detect/
│   └── taxi-match/
│
├── entities/
│   ├── user/
│   ├── post/
│   ├── chat-room/
│   ├── taxi-match/
│   └── location/
│
└── shared/
    ├── analytics/
    ├── api/
    ├── lib/
    ├── model/
    ├── types/
    └── ui/

Slice groups

Slice group을 허용해 파일 개수가 늘어나도 파일 탐색을 보다 쉽게 하도록 한다.

widgets 레이어는 사용하지 않는다.

mvp 개발 기간에서는 widgets 레이어가 필요하지 않다고 판단해 사용하지 않고, 추후 필요한 상황이 올때 추가 할 예정이다.

새 코드 배치 기준

새로운 컴포넌트나 로직을 추가할 때 다음 순서로 판단한다.

특정 페이지에서만 사용하는가?
-> pages

특정 도메인의 데이터를 표현하는가?
-> entities

사용자의 행동이나 기능을 수행하는가?
-> features

비즈니스 로직과 관계없는 범용 코드인가?
-> shared

컨벤션 룰

코드 컨벤션 ( Oxfmt & Oxlint)

네이밍 규칙

항목	케이스 규칙
폴더명, 파일명, 변수 및 함수명, 서버 응답 데이터	camelCase
컴포넌트명	PascalCase

Oxfmt

옵션	값	설명
trailingComma	all	여러 줄로 작성되는 배열, 객체, 함수 매개변수 등에 가능한 경우 후행 쉼표를 추가합니다.
tabWidth	2	들여쓰기 한 단계당 사용할 공백 수를 2칸으로 지정합니다.
semi	true	문장 끝에 세미콜론을 추가합니다.
singleQuote	true	JavaScript, TypeScript 문자열에 작은따옴표를 사용합니다.
jsxSingleQuote	false	JSX 속성에는 큰따옴표를 사용합니다.
bracketSpacing	true	객체 리터럴의 중괄호 안쪽에 공백을 추가합니다. 예: { name: '홍길동' }
bracketSameLine	false	여러 줄 JSX/HTML 태그의 닫는 >를 마지막 속성 줄에 붙이지 않고 다음 줄에 표시합니다.
printWidth	100	한 줄의 권장 최대 길이를 100자로 지정합니다.
arrowParens	always	화살표 함수 매개변수가 하나여도 괄호로 감쌉니다. 예: (value) => value
useTabs	false	탭 대신 공백으로 들여씁니다. tabWidth: 2이므로 2칸 공백을 사용합니다.
sortTailwindcss	true	Tailwind CSS 클래스를 권장 순서에 따라 자동 정렬합니다.
sortPackageJson	true	package.json의 필드를 Oxfmt의 정해진 순서에 따라 정렬합니다.
singleAttributePerLine	false	JSX/HTML 태그의 속성을 한 줄에 하나씩 강제하지 않습니다.

Oxlint

기본 설정

옵션	값	설명
$schema	./node_modules/oxlint/configuration_schema.json	Oxlint 설정 파일의 스키마를 지정합니다.
categories.correctness	error	코드의 정확성과 관련된 기본 규칙 위반을 오류로 처리합니다.

플러그인

옵션	값	설명
plugins	eslint	ESLint 기본 코드 품질 규칙을 사용합니다.
plugins	typescript	TypeScript 타입 안정성 규칙을 사용합니다.
plugins	oxc	Oxc 자체 최적화 및 코드 품질 규칙을 사용합니다.
plugins	react	React 및 JSX 관련 규칙을 사용합니다.
plugins	vitest	Vitest 테스트 코드 관련 규칙을 사용합니다.
plugins	import	import 구조 및 모듈 의존성 규칙을 사용합니다.
plugins	promise	Promise 사용 방식을 검사합니다.
plugins	nextjs	Next.js 파일 및 코딩 규칙을 사용합니다.

esLint 규칙

규칙	값	설명
eslint/eqeqeq	error	== 대신 === 사용을 강제합니다. 단, null 비교는 허용합니다.
eslint/no-var	error	var 사용을 금지합니다.
eslint/prefer-const	error	재할당하지 않는 변수는 const 사용을 강제합니다.
eslint/curly	error	if, for 등의 제어문에 중괄호 사용을 강제합니다.
eslint/no-console	warn	console 사용 시 경고합니다.
eslint/no-alert	error	alert, confirm, prompt 사용을 금지합니다.
eslint/no-duplicate-imports	error	동일 모듈의 중복 import를 금지합니다.
eslint/object-shorthand	error	객체 속성 축약 표기법을 사용하도록 합니다.
eslint/prefer-template	warn	문자열 연결 대신 템플릿 리터럴 사용을 권장합니다.
eslint/no-param-reassign	error	함수 매개변수 재할당을 금지합니다.
eslint/no-bitwise	error	비트 연산자 사용을 금지합니다.
eslint/no-unused-expressions	error	실행 효과가 없는 표현식을 금지합니다. 단축 평가 호출은 허용합니다.
eslint/guard-for-in	error	for...in 사용 시 상속 속성 검사를 강제합니다.
eslint/array-callback-return	error	map, filter 등의 콜백에서 반환값을 명시하도록 합니다.
eslint/no-negated-condition	error	부정 조건을 사용한 if...else 분기를 금지합니다.
eslint/no-nested-ternary	error	중첩 삼항 연산자를 금지합니다.
eslint/no-template-curly-in-string	error	일반 문자열 내부의 잘못된 ${} 표현식을 감지합니다.
eslint/radix	error	parseInt 사용 시 진법을 명시하도록 합니다.
eslint/no-case-declarations	error	switch case 내부의 선언문 사용을 제한합니다.
eslint/no-empty	error	빈 블록문을 금지합니다.
eslint/no-fallthrough	error	switch에서 break 누락을 검사합니다.
eslint/no-prototype-builtins	error	hasOwnProperty 직접 호출을 금지합니다.
eslint/no-regex-spaces	error	정규식 내부의 연속 공백 사용을 검사합니다.
eslint/prefer-rest-params	error	arguments 대신 rest parameter 사용을 강제합니다.
eslint/prefer-spread	error	apply 대신 spread 문법 사용을 강제합니다.
eslint/prefer-arrow-callback	error	콜백 함수에 화살표 함수 사용을 권장합니다.
eslint/no-array-constructor	error	new Array() 사용을 금지하고 배열 리터럴 사용을 권장합니다.
eslint/no-restricted-imports	error	금지된 import 경로 사용을 검사합니다.
eslint/no-unused-vars	warn	사용하지 않는 변수와 import를 경고합니다. _ 접두사가 붙은 변수는 허용합니다.

promise 규칙

규칙	값	설명
promise/no-new-statics	error	Promise 정적 메서드에 new 사용을 금지합니다.
promise/valid-params	warn	Promise 메서드에 전달하는 인자 개수를 검사합니다.

TypeScript 규칙

규칙	값	설명
typescript/consistent-type-imports	error	타입 전용 import에 import type 사용을 강제합니다.
typescript/no-non-null-assertion	warn	non-null assertion 연산자 ! 사용을 경고합니다.
typescript/no-explicit-any	warn	명시적인 any 사용을 경고합니다.
typescript/no-empty-object-type	error	의미 없는 빈 객체 타입 사용을 금지합니다. 단일 interface 상속은 허용합니다.
typescript/prefer-as-const	error	리터럴 타입 고정 시 as const 사용을 권장합니다.
typescript/prefer-for-of	warn	인덱스를 사용하지 않는 반복문은 for...of 사용을 권장합니다.
typescript/no-floating-promises	error	처리되지 않은 Promise를 금지합니다. void로 명시한 경우는 허용합니다.
typescript/no-misused-promises	off	Promise를 잘못 사용하는 상황에 대한 검사를 비활성화합니다.
typescript/no-unnecessary-type-assertion	warn	불필요한 타입 단언을 경고합니다.
typescript/restrict-template-expressions	error	템플릿 리터럴에 허용되지 않은 타입을 삽입하지 못하게 합니다. 숫자와 불리언은 허용합니다.
typescript/switch-exhaustiveness-check	warn	Union 또는 enum의 모든 케이스를 처리하도록 권장합니다.
typescript/ban-ts-comment	error	@ts-ignore, @ts-nocheck 등의 주석을 금지합니다.
typescript/no-dynamic-delete	error	동적 키를 이용한 delete 사용을 금지합니다.
typescript/no-unsafe-member-access	error	타입이 안전하지 않은 객체 멤버 접근을 금지합니다.
typescript/prefer-optional-chain	error	a && a.b 대신 a?.b 사용을 권장합니다.
typescript/await-thenable	error	Promise가 아닌 값에 await 사용하는 것을 금지합니다.
typescript/no-misused-spread	error	전개할 수 없는 값에 spread 문법을 사용하는 것을 금지합니다.
typescript/no-unsafe-enum-comparison	error	enum을 원시값과 직접 비교하는 것을 금지합니다.
typescript/no-unsafe-unary-minus	error	숫자 또는 BigInt가 아닌 값에 단항 마이너스를 적용하지 못하게 합니다.
typescript/no-duplicate-type-constituents	error	Union 타입 내부의 중복 구성요소를 금지합니다.
typescript/no-redundant-type-constituents	error	의미가 중복되거나 불필요한 타입 구성요소를 금지합니다.
typescript/prefer-promise-reject-errors	error	Promise reject 시 Error 객체 사용을 강제합니다.
typescript/no-array-delete	error	배열 요소 삭제에 delete 사용을 금지합니다.
typescript/no-base-to-string	error	객체가 [object Object]로 문자열 변환되는 상황을 검사합니다.
typescript/no-for-in-array	error	배열에 for...in 사용하는 것을 금지합니다.
typescript/no-implied-eval	error	문자열 기반의 암시적 eval 실행을 금지합니다.
typescript/only-throw-error	error	throw 대상은 Error 객체만 허용합니다.
typescript/restrict-plus-operands	error	+ 연산 시 서로 다른 타입의 결합을 제한합니다.
typescript/require-await	error	await가 없는 async 함수를 금지합니다.
typescript/return-await	error	비동기 함수의 return await 사용을 검사합니다.
typescript/dot-notation	error	가능한 경우 obj['key'] 대신 obj.key를 사용하도록 합니다.
typescript/non-nullable-type-assertion-style	error	단순 null 제거에는 as 대신 non-null assertion 사용을 권장합니다.
typescript/prefer-find	error	filter()[0] 대신 find() 사용을 권장합니다.
typescript/prefer-includes	error	indexOf() !== -1 대신 includes() 사용을 권장합니다.
typescript/prefer-nullish-coalescing	error
typescript/prefer-regexp-exec	error	String.match 대신 RegExp.exec 사용을 권장합니다.
typescript/prefer-string-starts-ends-with	error	문자열 검색 대신 startsWith, endsWith 사용을 권장합니다.
typescript/array-type	error	배열 타입을 T[] 형식으로 통일합니다.
typescript/ban-tslint-comment	error	기존 TSLint 비활성화 주석을 금지합니다.
typescript/class-literal-property-style	error	클래스 내부 리터럴 프로퍼티 작성 방식을 통일합니다.
typescript/consistent-generic-constructors	error	제네릭 생성자 표기 위치를 통일합니다.
typescript/consistent-indexed-object-style	error	인덱스 시그니처 대신 Record 사용을 권장합니다.
typescript/consistent-type-assertions	error	타입 단언에 as 문법을 사용하도록 합니다.
typescript/consistent-type-definitions	error	타입 선언을 type으로 통일합니다.
typescript/no-inferrable-types	error	타입 추론이 가능한 불필요한 타입 선언을 금지합니다.
typescript/prefer-function-type	error	함수 타입은 interface 대신 type alias 사용을 권장합니다.
typescript/no-confusing-non-null-assertion	error	혼동을 일으킬 수 있는 non-null assertion 표현을 금지합니다.
typescript/no-require-imports	error	CommonJS의 require 대신 ES Module import를 사용하도록 합니다.
typescript/no-unnecessary-type-constraint	error	불필요한 제네릭 타입 제약을 금지합니다.
typescript/no-namespace	error	namespace 대신 ES Module 사용을 권장합니다.
typescript/no-unsafe-function-type	error	광범위한 Function 타입 사용을 금지합니다.
typescript/unbound-method	error	객체 메서드를 바인딩 없이 전달하는 것을 검사합니다. 정적 메서드는 허용합니다.
typescript/no-useless-default-assignment	off	불필요한 기본값 할당 검사를 비활성화합니다.
typescript/adjacent-overload-signatures	error	관련된 함수 오버로드 시그니처를 인접하게 선언하도록 합니다.

React 규칙

규칙	값	설명
react/jsx-key	error	배열 렌더링 시 JSX 요소에 key를 지정하도록 합니다.
react/jsx-no-duplicate-props	error	JSX에서 중복 prop 사용을 금지합니다.
react/jsx-boolean-value	error	Boolean prop 표기 방식을 통일합니다.
react/jsx-curly-brace-presence	error	JSX에서 불필요한 중괄호 사용을 제거하도록 합니다.
react/jsx-fragments	error	Fragment에 <>...</> 문법을 사용하도록 합니다.
react/jsx-pascal-case	error	React 컴포넌트 이름에 PascalCase 사용을 강제합니다.
react/self-closing-comp	error	자식이 없는 컴포넌트는 self-closing 태그를 사용하도록 합니다.
react/exhaustive-deps	warn	Hook dependency 배열 누락을 경고합니다.
react/rules-of-hooks	error	React Hook 호출 규칙을 강제합니다.

import 규칙

규칙	값	설명
import/no-cycle	warn	모듈 간 순환 참조를 경고합니다.
import/no-default-export	warn	default export 대신 named export 사용을 권장합니다.
import/no-duplicates	error	동일 모듈의 중복 import를 금지합니다.
import/no-self-import	error	모듈이 자기 자신을 import하는 것을 금지합니다.
import/no-relative-parent-imports	warn	../를 통한 상위 디렉터리 import 사용을 경고합니다.
import/first	error	import 문을 파일 최상단에 배치하도록 합니다.
import/newline-after-import	error	import 블록 다음에 빈 줄을 강제합니다.
import/namespace	off	namespace 검사를 비활성화하고 TypeScript에 위임합니다.

무시 폴더

옵션	값	설명
ignorePatterns	pnpm-lock.yaml	pnpm lock 파일을 검사에서 제외합니다.
ignorePatterns	package-lock.json	npm lock 파일을 검사에서 제외합니다.
ignorePatterns	yarn.lock	Yarn lock 파일을 검사에서 제외합니다.
ignorePatterns	public/mockServiceWorker.js	Mock Service Worker 자동 생성 파일을 제외합니다.
ignorePatterns	src/styles/tokens/**	스타일 토큰 폴더를 제외합니다.
ignorePatterns	.agents/, .claude/	에이전트 및 Claude 설정 폴더를 제외합니다.
ignorePatterns	shared/skills/, shared/rules/	공용 스킬 및 규칙 파일을 제외합니다.
ignorePatterns	AGENTS.md, CLAUDE.md	에이전트 관련 문서를 제외합니다.
ignorePatterns	docs/**	문서 폴더를 제외합니다.
ignorePatterns	.github/**	GitHub 설정 파일을 제외합니다.

React 및 Next.js 예외 설정

대상	규칙	값	설명
scripts/sync-rules.mjs	typescript/no-unsafe-member-access	off	규칙 동기화 스크립트에서는 타입이 불안전한 멤버 접근을 허용합니다.
scripts/sync-rules.mjs	eslint/no-console	off	규칙 동기화 스크립트에서는 console 사용을 허용합니다.
app/, src/app/	import/no-default-export	off	Next.js의 page, layout, route 파일은 default export를 허용합니다.
*/.stories.{ts,tsx}	import/no-default-export	off	Storybook story 파일은 default export를 허용합니다.
.storybook/**	import/no-default-export	off	Storybook 설정 파일은 default export를 허용합니다.
*.config.{ts,js,mjs}	import/no-default-export	off	프로젝트 설정 파일은 default export를 허용합니다.

깃 브랜치 전략

기본 브랜치

브랜치	설명
main	배포 브랜치
dev	개발 환경 브랜치

작업 브랜치 네이밍 규칙

브랜치 타입	네이밍 패턴
기능 추가	feature/#이슈번호
버그 수정	bug/#이슈번호
리팩토링	refactor/#이슈번호

커밋 메세지

커밋 유형	설명
feat	새로운 기능이나 컴포넌트를 추가한 경우
fix	버그나 잘못된 동작을 수정한 경우
docs	README, API 문서 등 문서를 추가·수정한 경우
style	코드 포맷, 들여쓰기, 세미콜론 등 동작에 영향을 주지 않는 변경
refactor	기능 변경 없이 코드 구조나 가독성을 개선한 경우
test	테스트 코드를 추가·수정한 경우
chore	패키지, 빌드 설정, 환경 설정 등 기타 작업
design	UI/UX, 레이아웃, 색상, 스타일을 변경한 경우
comment	코드 주석을 추가·수정·삭제한 경우
rename	파일, 폴더, 변수, 함수 등의 이름을 변경한 경우
remove	사용하지 않는 코드, 파일, 기능을 제거한 경우
BREAKING CHANGE	기존 사용 방식이나 API를 깨뜨리는 호환성 없는 변경
HOTFIX	운영 중인 서비스의 긴급한 문제를 즉시 수정한 경우

PR 컨벤션

예시: Feature - 메인 페이지 UI 구현

태그	의미	설명
Refactor	코드 구조 개선	기능 변경 없이 코드 구조, 가독성, 유지보수성을 개선한 경우
Perf	성능 개선	렌더링, 로딩 속도, 네트워크 요청 등 성능을 개선한 경우
Remove	코드/파일 제거	사용하지 않는 코드, 컴포넌트, 파일, 의존성을 제거한 경우
Fix	버그 수정	일반적인 오류나 잘못된 동작을 수정한 경우
Hotfix	긴급 수정	운영 중인 서비스의 치명적인 문제를 긴급하게 수정한 경우
Feat	기능 추가	새로운 기능이나 컴포넌트를 추가한 경우
Style	UI/스타일 수정	레이아웃, 색상, 폰트, 반응형 등 UI를 수정한 경우
Revert	변경 사항 되돌리기	기존 커밋이나 변경 사항을 되돌리는 경우
Merge	브랜치 병합	다른 브랜치의 작업 내용을 병합한 경우
Comment	주석 추가/수정	코드 주석이나 문서성 설명을 추가·수정한 경우
DB	DB 관련 변경	스키마, 테이블, 컬럼, 인덱스, 마이그레이션 등을 변경한 경우

트러블 슈팅

사용 라이브러리

라이브러리	역할 / 설명
React	컴포넌트 기반으로 사용자 인터페이스를 구성하고 화면의 상태와 렌더링을 관리한다.
Tailwind CSS	유틸리티 클래스를 활용해 레이아웃, 색상, 간격, 반응형 스타일을 작성한다.
Base UI	접근성과 상호작용 기능을 제공하는 Headless UI 컴포넌트로 공통 컴포넌트의 동작을 구현한다.
Lucide React	일관된 스타일의 SVG 아이콘을 제공한다.
Zustand	모달, 바텀시트, 위치 정보, 작성 중인 데이터 등 전역 클라이언트 상태를 관리한다.
TanStack Query	서버 상태를 조회하고, 캐싱·동기화·로딩·에러·데이터 재검증을 관리한다.
React Hook Form	폼 입력값, 제출 이벤트, 필드 상태 및 에러를 효율적으로 관리한다.
Zod	폼 입력값과 API 데이터의 스키마를 정의하고 유효성을 검증한다.
Storybook	공통 컴포넌트를 독립적으로 개발·문서화하고 다양한 상태를 시각적으로 검증한다.

코드 품질 관리 도구

도구	역할	목적
OxLint	JavaScript 및 TypeScript 코드 정적 분석	코드 오류와 잠재적인 문제를 사전에 발견하고 일관된 코딩 규칙을 유지한다.
Oxfmt	코드 자동 포맷팅	팀 전체의 코드 스타일을 통일하고 가독성을 높인다.
TypeScript	정적 타입 검사	타입 오류를 컴파일 단계에서 발견해 코드의 안정성과 유지보수성을 높인다.

테스트 전략

도구	역할	목적
Vitest	단위 테스트 실행 및 검증	함수, 유틸리티, 개별 컴포넌트의 동작을 독립적으로 검증한다.
MSW	네트워크 요청 모킹	실제 서버 없이 API 요청과 응답 상황을 재현한다.
React Testing Library	컴포넌트 렌더링 및 사용자 상호작용 테스트	여러 컴포넌트가 함께 동작하는 통합 흐름과 사용자 관점의 UI 동작을 검증한다.
Playwright	브라우저 자동화 및 E2E 테스트	실제 브라우저 환경에서 주요 사용자 시나리오와 서비스 전체 흐름을 검증한다.

지원 브라우저 범위

MVP에서는 모든 브라우저를 지원하기보다, 실제 사용자가 많이 사용하는 모던 브라우저를 우선 지원하기로 했습니다.

환경	지원 범위
Desktop Chrome	최신 2개 메이저 버전
Desktop Edge	최신 2개 메이저 버전
Desktop Safari	최신 2개 메이저 버전
Desktop Firefox	최신 2개 메이저 버전
iOS Safari	최신 2개 메이저 버전
Android Chrome	최신 2개 메이저 버전
Internet Explorer	지원하지 않음

모바일 사용 비중이 높기 때문에 iOS Safari와 Android Chrome에서 지도, 위치 권한, 바텀시트, 채팅 기능이 정상적으로 동작하는지 우선적으로 검증합니다. 지원하지 않는 브라우저에서는 서비스가 완전히 동작하지 않을 수 있으므로, 필요한 경우 사용자에게 브라우저 업데이트 안내를 제공합니다. 브라우저 호환성 테스트는 Playwright를 활용해 Chromium, WebKit, Firefox 환경에서 진행하고, 모바일 환경은 실제 iOS와 Android 기기에서도 별도로 확인합니다.

Internet Explorer를 지원하지 않는 이유

Microsoft의 공식 지원이 종료됨
최신 JavaScript·CSS 기능 지원이 부족함
fetch, ES Module, Optional Chaining, Geolocation 등에서 제약이 많음
Polyfill과 별도 빌드 설정이 많이 필요함

Polyfill 전략

기본적으로 빌드 도구와 TypeScript 설정을 통해 문법 변환을 처리하고, 실제 지원 범위에서 필요한 기능만 선별적으로 Polyfill을 적용합니다.

Polyfill을 적용할 때는 다음 원칙을 따릅니다.

지원 브라우저에 기본적으로 제공되는 기능은 별도로 추가하지 않는다.
특정 브라우저에서만 필요한 기능은 해당 기능에 한해서 Polyfill을 추가한다.
브라우저의 API 지원 여부가 중요한 기능은 Feature Detection을 사용한다.
Polyfill을 추가하기 전에 브라우저 지원 범위를 조정할 수 있는지 먼저 검토한다.
지원하지 않는 기능은 오류가 발생하지 않도록 안내 화면이나 대체 동작을 제공한다.
- 예를 들어 현재 위치 기능을 사용할 때는 브라우저가 Geolocation API를 지원하는지 확인한 뒤 요청합니다.
- 해당 브라우저가 지원하지 않는다면, 위치 기능을 사용할 수 없다는 안내 모달을 사용자에게 보여줍니다.

SEO

서비스의 모든 페이지가 검색 엔진에 노출될 필요는 없기 때문에, 공개 페이지와 사용자 전용 페이지를 구분해서 SEO를 적용합니다.

검색 엔진에 노출할 페이지

다음과 같은 공개 페이지는 검색 엔진 노출을 고려합니다.

홈
글 목록
글 상세

위치 기반 글 목록의 SEO

글 목록은 사용자의 위도와 경도를 기준으로 가까운 게시글을 조회하고 있습니다. 하지만 브라우저 위치 권한은 검색 엔진이 안정적으로 제공하기 어렵기 때문에, 현재 위치 기반 목록을 그대로 SEO 대상으로 사용하기는 어렵다고 판단했습니다.

따라서 사용자용 글 목록과 검색 노출용 글 목록을 분리하기로 했습니다.

사용자용 글 목록은 현재 위치를 기준으로 게시글을 조회하고, 검색 노출용 글 목록은 지역을 URL에 포함해 서버에서 해당 지역의 게시글을 조회합니다.

/post-list
→ 사용자 현재 위치 기반 목록

/post-list/seoul
→ 서울 지역 게시글 목록

검색 노출용 페이지는 SSR 또는 사전 렌더링을 적용해 초기 HTML에 게시글 목록이 포함되도록 구성합니다.
또한 지역별 대표 URL을 기준으로 canonical URL을 설정하고, 개인화된 위치 목록이나 다양한 필터 조합은 검색 엔진에 노출하지 않습니다.
MVP에서는 우선 게시글 상세 페이지를 SEO 대상으로 삼고, 글 목록은 나중에 지역별 공개 페이지가 필요해졌을 때 확장하는 방식을 고려 중입니다.

각 페이지에는 페이지의 내용에 맞는 메타 정보를 설정합니다.

페이지별 title
페이지별 description
Open Graph 메타 태그
대표 이미지
canonical URL
의미 있는 h1 제목
이미지 alt 속성
게시글과 이동 경로를 표현하는 구조화 데이터
게시글 상세 페이지는 게시글 제목과 본문이 검색 엔진에 잘 전달될 수 있도록 시맨틱 HTML을 사용합니다.

검색 엔진에 노출하지 않을 페이지

사용자 개인 정보나 서비스 내부 동작과 관련된 페이지는 검색 엔진에 노출하지 않습니다.

글 작성
채팅 목록
채팅방
택시 매칭
사용자 전용 설정 페이지

Frontend Wiki - 100-hours-a-week/KTB4-3rd-wiki GitHub Wiki

모여타 Frontend Wiki

서비스 바로가기

목차

폴더 구조

Slice groups

widgets 레이어는 사용하지 않는다.

새 코드 배치 기준

컨벤션 룰

코드 컨벤션 ( Oxfmt & Oxlint)

깃 브랜치 전략

커밋 메세지

PR 컨벤션

트러블 슈팅

사용 라이브러리

코드 품질 관리 도구

테스트 전략

지원 브라우저 범위

Internet Explorer를 지원하지 않는 이유

Polyfill 전략

SEO

검색 엔진에 노출할 페이지

위치 기반 글 목록의 SEO

검색 엔진에 노출하지 않을 페이지

⚠️ GitHub.com Fallback ⚠️

Frontend Wiki - 100-hours-a-week/KTB4-3rd-wiki GitHub Wiki

모여타 Frontend Wiki

서비스 바로가기

목차

폴더 구조

Slice groups

widgets 레이어는 사용하지 않는다.

새 코드 배치 기준

컨벤션 룰

코드 컨벤션 ( Oxfmt & Oxlint)

깃 브랜치 전략

커밋 메세지

PR 컨벤션

트러블 슈팅

사용 라이브러리

코드 품질 관리 도구

테스트 전략

지원 브라우저 범위

Internet Explorer를 지원하지 않는 이유

Polyfill 전략

SEO

검색 엔진에 노출할 페이지

위치 기반 글 목록의 SEO

검색 엔진에 노출하지 않을 페이지

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️