코딩 컨벤션

컨벤션 지켜지지 않은 것은 코드리뷰에서 최대한 서로 찾아보기 + 리팩터링은 추후 논의

GitHub - team-nabi/nabi-market-client

Contribute to team-nabi/nabi-market-client development by creating an account on GitHub.

https://github.com/team-nabi/nabi-market-client

• 컴포넌트
• rafce
• 폴더명 캐밥, 파일명, 상수명 파스칼
• 폴더명 login-button , 파일명 LoginButton.tsx , 컴포넌트명 const LoginButton
• index.tsx 따로 두고 import export만 처리하기
• 구현부는 각 파일명 LoginButton.tsx 으로 두기

const Index = () => {
  return (
    <div>index</div>
  )
}

export default Index

• 타입관리
• 타입 vs 인터페이스
• User, Post, → interface
• props 같은거는 type
• 파스칼 케이스
• 폴더 type : interface 위주 User.ts Post.ts
• props가 여러 곳에서 사용되면?
• Button.tsx → export type {ButtonProps}
• LoginButton → import type {ButtonProps}
• LogoutButton → type LogoutButtonProps =
→ 기본적인 API로 받는 객체 같은거는 interface, props나 객체를 응용하는 것은 type으로

interface User {
	name: string
	age: number
}

interface MaleUser extends User {
	gender: 'Male'
}

type ButtonProps = {
	title: string
} // props 타입에는 props 붙이기

type LogoutButtonProps = {login: string} & ButtonProps

Button.tsx
export type ButtonProps
->
LoginButton

Button.tsx
export type ButtonProps
->
LogoutButton

• object
• as const

const WARNING_MESSAGE = {
	404: '404 발생',
	500: '서버에러입니다'
} as const

• if문 간략히 쓰는 경우

if(condition) console.log('안됨') // x

if(condition) {
	console.log('굿')
} // o

• 줄임말

Object -> Obj
Response -> Res
Request -> Req

// 이 외에는 무조건 풀 네임

• http method
• 관련된 함수는 접두사에 해당하는 HTTP Method로 시작하기
• 예외가 필요하면 PR에 이유 남기기

const loadNewData = () => {} // x
const getNewData = () => {}

const createNewData = () => {} // x
const postNewData = () => {}

• DOM 관련된 타입
• 타입 시스템보다 개발하는 사람이 더 파악을 잘 하기 때문에
• 최대한 구체적인걸 적어주면 됨

React.ReactNode
JSXElement // -> 외부 라이브러리 쓰면... react에 한정되지 않은
ReactElement

HTMLElement // -> 이거는 넓음
HTMLButtonElement // -> 이게 좋음

• 이벤트 prop
• 능력껏 자세히 해주면 좋다
• 가능하면 자세히 하기!

const increaseNumber = (e: ??) => {

}

• 에러 처리
• error boundary
• axios 안 쓸 예정
• fetch api → 기존 fetch를 확장한 형태
• client api call → tanstack query
• server api call → fetch
• SSR, ISR

const getSSRCall = () => {
	try {
	const data = fetch('주소/user')
 } catch {
	
}

  return data
}

const Component = () => {
	const data = getSSRCall()
}

• server api call, 인피니티 스크롤 → tanstack query의 useInfinity~~

• 클라이언트 컴포넌트
• 사용자의 조작에 따라 어떤 페인트나,, 콜 같은게 일어날 때
• 최상단에 use client 를 작성해서 활성화
• form같은거나, button onClick 이벤트가 있는 컴포넌트

const Component = () => {
	const {data, error} = useQuery(func, 어쩌구)

	if(error){
	</>
	}

	return </>
}

• 서버 컴포넌트
• 안 써도 되는데 13 app router 부터는 default임

• 공부해봐야 할 듯 → 에러 처리 야무지게 하는법
react-query 에러 처리시 주의할 점
I am an ordinary person.

https://lovemewithoutall.github.io/it/react-query-error-usecase/

• 시멘틱 태그… 잘 써보기
• div만 쓰는거 하지말고 main, figure, section, header, footer

• 여러 페이지 검사 툴 잘 사용해보기 (웹 접근성)
The W3C Markup Validation Service
W3C's easy-to-use markup validation service, based on SGML and XML parsers.

https://validator.w3.org/