-
Notifications
You must be signed in to change notification settings - Fork 0
๐Conventions
-
ํจ์ ๋ด๋ณด๋ด๊ธฐ(Exporting Functions)
// ์ปดํฌ๋ํธ export const Component = () => {}; // ๋จ์ผ ํจ์ export default function () {} // ์ฌ๋ฌ ๊ฐ์ ํจ์๋ ๋ณ์, ์์๋ฅผ ๋ด๋ณด๋ด๋ ๊ฒฝ์ฐ export const functionName = () => {}; export const variable = 1;
-
์์ ๋ณ์ ์ ์ธ
- ์์ ๋ณ์๋ ๋๋ฌธ์ ์ค๋ค์ดํฌ ์ผ์ด์ค๋ก ์ ์ธ (์:
GENRES
,MAX_HEIGHT
)
- ์์ ๋ณ์๋ ๋๋ฌธ์ ์ค๋ค์ดํฌ ์ผ์ด์ค๋ก ์ ์ธ (์:
-
์ปดํฌ๋ํธ ๋ค์ด๋ฐ
- ์ปดํฌ๋ํธ๋ ํ์ค์นผ ์ผ์ด์ค ์ฌ์ฉ (์:
HelloWorld
)
- ์ปดํฌ๋ํธ๋ ํ์ค์นผ ์ผ์ด์ค ์ฌ์ฉ (์:
-
ํ๋กํผํฐ ๋ค์ด๋ฐ
-
ํ๋กํผํฐ๋ ์นด๋ฉ ์ผ์ด์ค ์ฌ์ฉ
type User = { userName: string userAge: number }
-
-
๋ฐฐ์ด ๋ค์ด๋ฐ
- ๋ฐฐ์ด์ ๋ณต์ํ์ผ๋ก
dataList
์ฌ์ฉ - ์ด๋ค ๋ฐฐ์ด์ธ์ง ๊ตฌ์ฒด์ ์ผ๋ก ๋ค์ด๋ฐ ํ๊ธฐ ex) performList, menuList
- ๋ฐฐ์ด์ ๋ณต์ํ์ผ๋ก
-
์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ค์ด๋ฐ
์ด๋ฒคํธ ํธ๋ค๋ฌ๋onClick
,onChange
์ ๊ฐ์ด ๋ค์ด๋ฐ -
๋ถ๋ฆฌ์ธ ๋ณ์ ๋ค์ด๋ฐ
๋ถ๋ฆฌ์ธ ๋ณ์๋isLoading
๊ณผ ๊ฐ์ดis
์ ๋์ฌ๋ก ์ฌ์ฉ -
ํจ์ ์ ์ธ ๋ฐฉ์
์ผ๋ฐ ํจ์๋ ํจ์ ํํ์const a = function() {}
์ฌ์ฉ
์ด๋ฒคํธ ํธ๋ค๋ฌ๋ ํ์ดํ ํจ์const a = () => {}
์ฌ์ฉ -
ํ๊ทธ ๋ค์ด๋ฐ
ํ๊ทธ๋<UserComponent>hello</UserComponent>
์ ๊ฐ์ด ํ์ค์นผ ์ผ์ด์ค ์ฌ์ฉ -
ํ์ผ ๋ค์ด๋ฐ
.ts
๋ ์ผ๋ฐ TypeScript ํ์ผ,.tsx
๋ JSX ๋ฌธ๋ฒ์ด ํฌํจ๋ ํ์ผ์ ์ฌ์ฉ
๋ฆฌ์กํธ ๋ฌธ๋ฒ์ด ๋ค์ด๊ฐ๋ ํ์ผ, ์ปดํฌ๋ํธ, ํ ์.tsx
ํ์ฅ์ ์ฌ์ฉ
์ปค์คํ ํ ์use
์ ๋์ฌ ์ฌ์ฉํ์ฌuseHello.tsx
์ ๊ฐ์ด ๋ค์ด๋ฐ -
ํด๋ ๋ค์ด๋ฐ
ํด๋๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์นด๋ฉ ์ผ์ด์ค ์ฌ์ฉํ๋ฉฐ, ์ปดํฌ๋ํธ ํด๋์ผ ๊ฒฝ์ฐ์๋ง ํ์ค์นผ ์ผ์ด์ค ์ฌ์ฉ -
styled-components CSS import ์ปจ๋ฒค์
์คํ์ผ๋ ์ปดํฌ๋ํธ ์ฌ์ฉํ ๋, ์คํ์ผ ๋ณ๋์ ํ์ผ๋ก ๋ถ๋ฆฌํ๊ณ ๊ฐ์ฒด๋ก ๊ฐ์ ธ์ค๋ ๋ฐฉ์ ์ฌ์ฉ ์ ๋ค์ด, ์คํ์ผ ํ์ผstyles.js
๋ก ๋ง๋ค๊ณ ๋ค์๊ณผ ๊ฐ์ด ๊ฐ์ ธ์จ๋ค:import * as S from './styles';
-
props ์ปจ๋ฒค์
๊ตฌ์กฐ ๋ถํด ํ ๋น ์ฌ์ฉ
export const Poster = ({ src, width = 235, height = 330 }: PosterProps) => {...}
-
styled-components props ํ์ ์ ์ ์ปจ๋ฒค์ styled-components props๋ฅผ ๋๊ธธ ๋์๋ $๋ฅผ ์ ๋์ฌ๋ก ๊ผญ ๋ถ์ฌ์ฃผ์ธ์!
๐Styled-Component : $prefix
export const Poster = styled.img<{ $width: number, $height: number}>``
-
styled-components props ๋ฐ์์ฌ ๋ ์ปจ๋ฒค์
font-size: ${({ $isSearch }) => ($isSearch ? '15px' : '25px')}; color: ${({ theme, $isRangking }) => ($isRangking ? theme.colors.primary : theme.colors.black)};
-
๋ฐฐ์ด ํ์ ๋๊ดํธ๋ก ํ๊ธฐํ๊ธฐ ex)
string[]
- Feat: ์๋ก์ด ๊ธฐ๋ฅ ์ถ๊ฐ
- Fix: ๋ฒ๊ทธ ์์
- Docs: ๋ฌธ์ ์์
- Refactor: ์ฝ๋ ๋ฆฌํํ ๋ง
- Chore: ๋น๋ ์ ๋ฌด ์์ , ํจํค์ง ๋งค๋์ ์์
[์ด์ ๋ฒํธ]-feature/๊ธฐ๋ฅ ex) 3-feature/some-feature
[์ด์ ๋ฒํธ]-bug/๊ธฐ๋ฅ ex) 15-bug/some-error