- URL: https://gameus.web.app/
- ๊ณ์
ID
:gameus@gmail.com
PassWord
:asdf1234
๐ฎ ๊ฒ์๊ณผ ๊ด๋ จ๋ ๋ชจ๋ ๊ฒ, ๊ฒ์์ด์ค๋ ๊ฒ์ ์นฉ, ๊ฒ์๊ธฐ ๋ฑ ๊ฒ์์ ๊ด๋ จ๋ ๋ฌผํ์ ์ฌ๊ณ ํ๋ ์ค๊ณ ๊ฑฐ๋ ์ปค๋ฎค๋ํฐ์ ๋๋ค.
๊ฒ์์ ์ข์ํ๋ ํ์๋ค์ด ๋ชจ์ฌ, ๊ฒ์ ๋ฌผํ ์ ์ฉ ์ค๊ณ ๊ฑฐ๋ ์ฌ์ดํธ๋ฅผ ์ ์ํ์์ต๋๋ค.
ํ๊ณ ์ถ์ ๊ฒ์ ๊ด๋ จ ๋ฌผํ์ ์์ ์ ํ๋กํ์ ์ฌ๋ ค ํ๋งค ํ ์ ์์ต๋๋ค.
๊ฒ์์ผ๋ก ๊ฐ๋์ฐฌ ๋์ ์ผ์์ ๊ธ๊ณผ ์ฌ์ง์ด ๋ด๊ธด ๊ฒ์๋ฌผ์ ์์ฑํ์ฌ ๋ค๋ฅธ ์ ์ ์๊ฒ ๊ณต์ ํ ์ ์์ต๋๋ค.
๋์ ์ทจํฅ์ด ๋น์ทํ ์ฌ๋ฌ ์ ์ ๋ฅผ ๊ฒ์ํ ํ๋ก์ฐํ์ฌ ํผ๋์์ ๊ฒ์๋ฌผ์ ๊ตฌ๊ฒฝํ ์ ์์ผ๋ฉฐ, ๋๊ธ์ ๋จ๊ธฐ๊ณ ์ข์์๋ฅผ ๋๋ฅผ ์ ์์ต๋๋ค.
- ๐ฎ ํ๋ก์ ํธ ๋ ํฌ์งํ ๋ฆฌ
- ๐ ํ ์คํฐ๋ ๋ ํฌ์งํ ๋ฆฌ
- ๐ ํ ์ํฌ์คํ์ด์ค
- ๐จ ๋์์ธ ํผ๊ทธ๋ง
๊น๋ํฌ | ๊น๋ณด๋ | ์ฌ๋คํฌ | ์ดํ์ |
---|---|---|---|
github: hee1231 | github: boram2445 | github: yeodahui | github: donkeeman |
- ํ๋ก์ ํธ ์ ๋ฐ์ ์ธ ๋์์ธ ๋ฐ ์คํ์ผ๋ง
- ํ๋กํ ์์ ํ์ด์ง ๋งํฌ์
- ์ฑํ ๋ฐฉ ํ์ด์ง ๋งํฌ์
- 404 ํ์ด์ง ๋งํฌ์ ๋ฐ ๊ธฐ๋ฅ ๊ตฌํ
- ์ํ ๋ฑ๋ก ํ์ด์ง ๋งํฌ์ ๋ฐ ์ํ ๋ฑ๋ก, ์์ , ์ญ์ ๊ธฐ๋ฅ ๊ตฌํ
- ๊ฒ์๊ธ ๋ฑ๋ก ํ์ด์ง ๋งํฌ์ ๋ฐ ๊ฒ์๊ธ ๋ฑ๋ก, ์์ , ์ญ์ , ์ ๊ณ ๊ธฐ๋ฅ ๊ตฌํ
- ๋๊ธ ๋ฑ๋ก, ์ญ์ , ์ ๊ณ ๊ธฐ๋ฅ ๊ตฌํ
- ์ด๋ฏธ์ง ๋ฆฌ์ฌ์ด์ฆ ๋ฐ ์ด๋ฏธ์ง ์ ๋ก๋ ๊ธฐ๋ฅ ๊ตฌํ
- ๋ชจ๋ฌ ๋งํฌ์ ๋ฐ ๊ธฐ๋ฅ ๊ตฌํ
- ๊ฒ์ ๊ธฐ๋ฅ ๊ตฌํ
- ๋ก๊ทธ์ธ, ๊ฒ์, ์ฑํ ๋ชฉ๋ก ํ์ด์ง ๋งํฌ์
- ํ ํผ๋ ํ์ด์ง ๋งํฌ์ ๋ฐ ํ๋ก์ฐํ๋ ์ฌ์ฉ์ ๊ฒ์๊ธ ๋ถ๋ฌ์ค๋ ๊ธฐ๋ฅ ๊ตฌํ
- ์ข์์ ๋ฐ ์ข์์ ์ทจ์ UI ๊ตฌํ
- ํ๋จ ํญ ๋ค๋น๊ฒ์ด์ ๋ฐ ๋งํฌ์ ๋ฐ ๊ธฐ๋ฅ ๊ตฌํ
- Splash ํ์ด์ง ๋งํฌ์ ๋ฐ ๊ธฐ๋ฅ ๊ตฌํ
- ๋ก๊ทธ์ธ, ๋ก๊ทธ์์ ๊ธฐ๋ฅ ๋ฐ ํ ํฐ ๊ฒ์ฆ, ์ ํจ์ฑ ๊ฒ์ฌ ๊ตฌํ
- ํ์๊ฐ์ ๊ธฐ๋ฅ ๋ฐ ์ ํจ์ฑ ๊ฒ์ฌ ๊ตฌํ
- ์ฌ์ฉ์์ ํ๋กํ ํ์ด์ง ๋งํฌ์ ๋ฐ ํ๋กํ ์์ ๊ธฐ๋ฅ ๊ตฌํ
- ํ๋ก์/ํ๋ก์ ๋ชฉ๋ก ํ์ด์ง ๋งํฌ์ ๋ฐ ํ๋ก์ฐ, ์ธํ๋ก์ฐ ๊ธฐ๋ฅ ๊ตฌํ
- ์ข์์, ์ข์์ ์ทจ์ ๊ธฐ๋ฅ ๊ตฌํ
Front-End | Back-End | ๋ฒ์ ๋ฐ ์ด์๊ด๋ฆฌ |
---|---|---|
HTML Living Standard CSS Modules React |
API ์ ๊ณต๋จ | Git Github Notion |
๐ Styled components vs CSS Modules
ํ์๋ค ๋ชจ๋ ์ด ํ๋ก์ ํธ๋ฅผ ํตํด ๋ฆฌ์กํธ๋ฅผ ๋ฅ์ํ๊ฒ ๋ค๋ฃจ๊ณ ์ถ๋ค๋ ๊ณตํต์ ์ธ ๋ชฉํ๊ฐ ์์์ต๋๋ค.
ํ์ง๋ง ๋ค ๋ช
๋ชจ๋ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํด๋ณธ ๊ฒฝํ์ด ์์๊ธฐ ๋๋ฌธ์, ๊ธฐ์กด์ CSS์ ์ฌ์ฉ๋ฒ์ด ์ ์ฌํ CSS Modules๋ฅผ ์ฌ์ฉํด ํ์ต๋น์ฉ ์ค์ด๊ธฐ๋ฅผ ์ ํํ์์ต๋๋ค.
๐ Git-flow vs Github-flow
๊น ๋ธ๋์น ์ ๋ต์ผ๋ก ๊นํ๋ธ ํ๋ก์ฐ๋ฅผ ์ฑํํ์ต๋๋ค.
์งง์ ํธํก์ผ๋ก ๊ฐ๋ฐํ๊ธฐ ๋๋ฌธ์ ์ ์ํ๋ ๋ฐ ์๊ฐ์ด ๋ง์ด ๋ค์ง ์์์ผ๋ฉด ํ๊ณ , ํ์๋ค ๊ฐ์ ์์
๋ด์ฉ์ ๋นจ๋ฆฌ ์ฃผ๊ณ ๋ฐ๊ธฐ์ ์ ์ฉํ ๊ฒ ๊ฐ๋ค๋ ํ๋จ ํ์ ๊น ํ๋ก์ฐ์ ๋นํด ๋ธ๋์น ๊ตฌ์กฐ๊ฐ ๋จ์ํ ๊นํ๋ธ ํ๋ก์ฐ๋ฅผ ์ฌ์ฉํ์ต๋๋ค.
create-react-app
: ๊ฐ๋ฐํ๊ฒฝ ์ธํeslint
,prettier
: ์ฝ๋ ํฌ๋งทํ , ๊ฐ๋ฐ๋จ์์์์ ์ฝ๋ ํ์ง ๊ด๋ฆฌreact-router-dom
: ๋ผ์ฐํ ์ฒ๋ฆฌbrowser-image-compression
: ๋์ฉ๋ ์ด๋ฏธ์ง๊ฐ ์๋ฒ์ ์ ๋ก๋๋๊ธฐ ์ ๋ฆฌ์ฌ์ด์ง
๐
์ํ ๋ฏน ๋์์ธ ํจํด
์ ๊ธฐ๋ฐ์ผ๋ก ํ์ฌ ๋๋ ํฐ๋ฆฌ๋ฅผ ๊ตฌ์ฑํ์์ต๋๋ค.
assets : ํ๋ก์ ํธ์ ์ฌ์ฉ๋๋ ์ด๋ฏธ์ง ๋ฐ ํฐํธ
common : ์ฌ๋ฌ ์ปดํฌ๋ํธ๊ฐ ์ฌ์ฉํ๋ js ํ์ผ
contexts : useContext๋ฅผ ์ด์ฉํ context ํ์ผ
์ปดํฌ๋ํธ ๋ถ๋ฆฌ
atoms : button, CommentIcon, ImageBox ๋ฑ ์ต์ ๋จ์์ ์ปดํฌ๋ํธ
molecules : atom์ ์กฐํฉํด ํค๋, ๋ค๋น๊ฒ์ด์
๋ฐ ๋ฑ ๋ชฉ์ ์ ๊ฐ์ง UI ์ปดํฌ๋ํธ
organisms : ๋ฆฌ์คํธ๋ ํผ ๋ฑ molecules๊ฐ ์ฌ๋ฌ ๊ฐ ๋ชจ์ธ ์ปดํฌ๋ํธ
pages : ๋ผ์ฐํ
๋๋ ๋จ์, ์๋๋ก props๋ฅผ ๋ด๋ ค์ฃผ๋ ํ์ด์ง ์ปดํฌ๋ํธ
------------------------------------
๐public
โโ๐favicon.ico
โโ๐index.html
๐src
โโ๐assets
โ โโ๐fonts
โ โโ๐icons
โ โโ๐images
โโ๐common
โโ๐components
โ โโ๐atoms
โ โ โโ๐Author
โ โ โโ๐Button
โ โ โโ๐Comment
โ โ โโ ...
โ โโ๐molecules
โ โ โโ๐BottomNavigateBar
โ โ โโ๐ChatRoom
โ โ โโ ...
โ โโ๐organisms
โ โโ๐CommentList
โ โโ๐EmailPasswordForm
โ โโ ...
โโ๐pages
โ โโ๐ChatListPage
โ โโ๐ChatRoomPage
โ โโ๐ErrorPage
โ โโ ...
โโ๐contexts
โโ๐App.jsx
โโ๐index.js
โโ๐จfont.css
โโ๐จglobal.css
โโ๐จreset.css
๐.eslintrc
๐.prettierrc
๐package-lock.json
๐package.json
๐README.md
splash | ๋ก๊ทธ์ธ | ํ์ ๊ฐ์ |
---|---|---|
ํ ํผ๋ | ๊ฒ์ |
---|---|
์ฑํ | 404 ํ์ด์ง |
---|---|
๊ฒ์๊ธ ์์ฑ | ๊ฒ์๊ธ ์์ | ๊ฒ์๊ธ ์ญ์ |
---|---|---|
๊ฒ์๊ธ ์์ธ ๋ฐ ๋๊ธ | ๋๊ธ ์ญ์ | ๋๊ธ ์ ๊ณ |
---|---|---|
๊ฒ์๊ธ ์ ๊ณ | ์ข์์, ์ข์์ ์ทจ์ |
---|---|
๋ด ํ๋กํ | ํ๋กํ ์์ |
---|---|
ํ๋ก์, ํ๋ก์ | ํ ์ ์ ํ๋กํ ๋ฐ ํ๋ก์ฐ, ์ธํ๋ก์ฐ |
---|---|
์ํ ๋ฑ๋ก | ์ํ ์์ | ์ํ ์ญ์ |
---|---|---|
์ปดํฌ๋ํธ๋ฅผ ๋จ์๋ณ๋ก ์ชผ๊ฐ ํ ํ์ํ ๋ถ๋ถ์ ์กฐํฉํ๋ ํ์์ผ๋ก ํ์ด์ง๋ฅผ ๊ตฌ์ฑํ์ต๋๋ค.
atom, molecule, organism์ ํ์ฉํด UI๋ ์ต๋ํ ์ฌํ์ฉํ๊ณ , API๋ก ๋ฐ์์จ ์ ๋ณด ๋ฑ์ page์์๋ถํฐ ์๋๋ก ๋ด๋ ค์ฃผ์์ต๋๋ค.
...
return (
<section>
<h2 className="a11y-hidden">๊ฒ์๊ธ ์์ธ ํ์ด์ง</h2>
<HeaderForm backButton={true} menuButton={true} /> // molecule
{post && comments ? (
<div className="wrapper-contents">
<PostCard post={post} /> // molecule
<CommentList // organism
comments={comments}
handleDelete={handleDelete}
handleReport={handleReport}
/>
<MessageInput // molecule
type="comment"
src={user.image}
title="๋๊ธ"
placeholder="๋๊ธ ์
๋ ฅํ๊ธฐ..."
buttonText="๊ฒ์"
inputRef={inputRef}
onClick={handleTextInput}
/>
</div>
) : (
<Loading /> // molecule
)}
</section>
);
useEffect๋ฅผ ํตํด์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ fetch ํจ์๋ฅผ ์ํํ๊ณ , ๊ทธ๋ ๊ฒ ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ ์ปดํฌ๋ํธ์ ๋ณด์ฌ์ฃผ๊ณ ์ ํ์์ง๋ง, ๋ ๋๋ง๋ณด๋ค ๋ฆ๊ฒ ๊ฐ์ ธ์์ ธ ์ปดํฌ๋ํธ์ ์ํ๋ ๋ฐ์ดํฐ๊ฐ ์ ๋๋ก ํ์๋์ง ์๊ฑฐ๋ ํ๋ฉด์ด ๊น๋นก๊ฑฐ๋ฆฌ๋ ์ด์๊ฐ ์์์ต๋๋ค.
์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด, ์์ง ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค์ง ๋ชปํ์๋ค๋จผ ๋ก๋ฉ ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ฃผ๊ณ , ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์ ๊ฒฝ์ฐ์๋ง ์๋์ ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ฃผ๋๋ก ํ์์ต๋๋ค
const [post, setPost] = useState();
const [comments, setComments] = useState([]);
useEffect(() => {
getPostComment(user.token, postId, setComments);
getPostData(user.token, postId, setPost);
}, [postId]);
return(
<section>
<h2 className="a11y-hidden">๊ฒ์๊ธ ์์ธ ํ์ด์ง</h2>
<HeaderForm />
{post && comments ? (
<div className="wrapper-contents">
<PostCard post={post} />
<CommentList comments={comments}/>
<MessageInput/>
</div>
) : (
<Loading />
)}
</section>
)
- ์๋จ์ ํ
์คํธ๊ฐ ์๋ ๋์์ธ์ ํ์ด์ง์ ๊ฒฝ์ฐ์๋
a11y-hidden
ํด๋์ค๋ฅผ ์ด์ฉํ์ฌ ํ์ด์ง ์ค๋ช ์ ์จ๊ฒจ์ฃผ์์ต๋๋ค.
- ํ
์คํธ๊ฐ ๋๋ฌด ๊ธธ ๊ฒฝ์ฐ ๋ง์ค์ํ๋ก ์ค์ด๋
title
์์ฑ์ ์ด์ฉํ์ฌ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ์ ์ฒด ํ ์คํธ๋ฅผ ๋ณด์ฌ์ฃผ๋๋ก ํ์์ต๋๋ค.
...
<span className={styles["product_name"]} title={product.itemName}>
{product.itemName}
</span>
...
ํ๋ก์ ํธ๋ฅผ ์์ํ๊ธฐ ์ ํ์ํ ์ง์๋ค์ ๊ดํด ์คํฐ๋๋ฅผ ์งํํ์ต๋๋ค. (๐์คํฐ๋ ๋๋ ํ ๋ฆฌ)
GitHub-flow ๋ธ๋์น ์ ๋ต
, Github Issues์ Project
, React ํ๋ก์ ํธ์ ๋๋ ํฐ๋ฆฌ ๊ตฌ์กฐ
, ํผ๊ทธ๋ง ์ฌ์ฉ๋ฒ
, StoryBook ์ฌ์ฉ ๋ฐฉ๋ฒ
๋ฑ์ ์ฃผ์ ๋ก ์ค์ต ์์ฃผ์ ์คํฐ๋๋ฅผ ์งํํ์ต๋๋ค.
๋ค๋ฅธ ํ๋ก์ ํธ๋ค์ ๋ถ์ํด์ ๋ฐ๊ฒฌํ ํด์ด๋ ์ ๋ต์ ์คํฐ๋๋ฅผ ํตํด ์ง์ ์ฌ์ฉํด๋ณด๊ณ ๊ทธ๊ฒ์ ์ฐ๋ฆฌ ํ๋ก์ ํธ์ ์ด๋ป๊ฒ ์ ์ฉ์ํฌ ์ง ์๋ ผํ์์ต๋๋ค. ๊ทธ ๊ฒฐ๊ณผ ํ๋์ ์ฃผ์ ์ ๋ํ ํ์ ์ ๋ฐ์ ์ดํด๋๋ฅผ ๋์ผ ์ ์์์ต๋๋ค.
์ํ ๋ฏน ๋์์ธ ํจํด์ ๊ธฐ๋ฐ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฆฌํ์์ต๋๋ค.
์ํ ๋ฏน ๋์์ธ ํจํด์ atoms - molecules - organisms - templates - pages
5๋จ๊ณ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฆฌํ์ง๋ง, ํ๋ก์ ํธ ๊ท๋ชจ์ ๋นํด ์ง๋์น๊ฒ ๋จ๊ณ๋ฅผ ๋ถ๋ฆฌํ๋ฉด ์์
์๋๊ฐ ๋๋ ค์ง๊ณ ๋ณต์กํ ๊ฒ์ด๋ผ ์์ํด 4๋จ๊ณ(atoms - molecules - organisms - pages)
๋ก ํจํด์ ๋ณํํด ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฆฌํ์์ต๋๋ค.
์ํ ๋ฏน ๋์์ธ ํจํด์ ์ ์ฉํจ์ผ๋ก์จ bottom-top ๊ฐ๋ฐ ๋ฐฉ์์์ ์ด๋ป๊ฒ ์ปดํฌ๋ํธ๋ฅผ ๋๋ ์ ์์์ง ๋ง์ด ๊ณ ๋ฏผํด๋ณผ ์ ์์์ต๋๋ค.
ํ์ง๋ง atoms๋ฅผ ๋ชจ๋ ๊ฐ๋ฐํ ๋ค ํ์ด์ง๋ฅผ ๊ตฌ์ฑํ ๊ฒ์ด ์๋๋ผ ์์ ๋จ์๋ฅผ ํ์ด์ง ๋จ์๋ก ์ค์ ํด, ํ์๊ฐ์ ๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ฐํ๊ณ ์๋ ๋ฑ์ ํคํ๋์ด ์์์ต๋๋ค. ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ๋งค์ผ ๐ฉโ๐ฉโ๐งโ๐ง๋ฐ์ผ๋ฆฌ ์คํฌ๋ผ์ ์งํํด ์๋ก์ ์์ ์ํฉ์ ๊ณต์ ํจ์ผ๋ก์จ ํด๊ฒฐํ๊ณ , ์ํ ๋ฏน ์ปดํฌ๋ํธ ๊ฐ๋ฐ์ ์งํํ ๋๋ ๊ทธ์ ์๋ง๊ฒ ์ปดํฌ๋ํธ ๋จ์์ ์์ ๋ถ๋ด์ด ํ์ํ๋ค๋ ๋ ์จ์ ์ป์์ต๋๋ค.
ํ์คํฌ, ์ด์, PR ๊ด๋ฆฌ ๋ฑ์ ๊นํ๋ธ๋ฅผ ์ ๊ทน์ ์ผ๋ก ํ์ฉํ์์ต๋๋ค.
์ ํฌ์ ํ ๊ท์น ์ค ํ๋๋, ๋๊ตฐ๊ฐ ์ด์๋ฅผ ๋ฐ๊ฒฌํ์ ๋ โํด๋น ์ด์๋ฅผ ๋ฐ๊ฒฌํ๊ฒ ๋ ์ํฉโ, โ์ ์ด ์ด์๋ฅผ ํด๊ฒฐํด์ผ ํ๋ ์งโ ๋ฑ ๋ฌธ์ ์ ๋ํด์ ํ์๋ค์ด ์ดํดํ๊ณ ๊ณต๊ฐํ ์ ์๋๋ก ์ต๋ํ ์์ธํ ์ค๋ช ํ๊ธฐ์ ๋๋ค.
์๋ฅผ ๋ค์ด ๋ฒ๊ทธ๋ฅผ ๋ฐ๊ฒฌํ์ ๋๋ ํด๋น ๋ฒ๊ทธ๊ฐ ๋ํ๋ ์ํฉ์ ๋ํด์ ๊ณต์ ํ๊ณ , ์์ ์ด ์๊ฐํ์ ๋์ ํด๊ฒฐ๋ฐฉ๋ฒ ๋ฑ ์ ๋ฌ๋ฐ๋ ์ฌ๋์ด ์ดํดํ๊ธฐ ์ฝ๊ฒ ์ ๋ฌํ๋ ค๊ณ ๋ ธ๋ ฅํ์ต๋๋ค.
๊ตฌ์ฒด์ ์ธ ์ด์ ์์ฑ
์ด์๋ฅผ ์์ฑํ ๋๋ ๋ฒ๊ทธ ๋ฐ์ ์ํฉ์ ๋ํด ์ค๋ช ํ๋ฉฐ ์บก์ณ๋ gif๋ฅผ ์ฒจ๋ถํ๋ ๋ฑ ์ต๋ํ ์ ๋ณด๋ฅผ ์ ๋ฌํ์์ต๋๋ค.
๊ตฌ์ฒด์ ์ธ PR ์์ฑ
PR์๋ ์ด์๋ฅผ ๋งํฌํด ์ด๋ป๊ฒ ํด๊ฒฐํ๋์ง, ์ด๋ค ๊ธ์ ์ฐธ๊ณ ํ๋ ์ง์ ๋ํ ์ค๋ช ๊ณผ ์ค์ ์ ์ผ๋ก ๋ด์ฃผ์์ผ๋ฉด ํ๋ ๋ถ๋ถ์ ๋ช ์ํด ํจ์จ์ ์ธ ์ฝ๋ ๋ฆฌ๋ทฐ๋ฅผ ์ ๋ํ์์ต๋๋ค.
Issue์ Pull Request์ ํ ํ๋ฆฟ์ ์ ์ฉ
๊นํ๋ธ์ Issue์ Pull Request์ ํ ํ๋ฆฟ์ ์ ์ฉํ์ฌ ์ปค๋ฎค๋์ผ์ด์ ์ ์ฌ์ฉ๋๋ ๋น์ฉ์ ์ค์ด๊ณ ์ ํ์์ต๋๋ค.
BUG, CUSTOM, FEATURE ์ธ ๊ฐ์ง Issue ํ ํ๋ฆฟ์ ๋ง๋ค์ด ์ฌ์ฉํ์์ต๋๋ค.
๊นํ๋ธ ํ๋ก์ ํธ
์ด์๋ฅผ ๐ฎ๊นํ๋ธ ํ๋ก์ ํธ์ ์ฐ๊ฒฐํ์ฌ ์งํ ์ํฉ์ ํ๋์ ๋ณผ ์ ์๋๋ก ํ์์ต๋๋ค.
๊นํ๋ธ ์ํค
๐๊นํ๋ธ ์ํค์ ์ฝ๋ฉ, ์ปค๋ฐ, PR ์ปจ๋ฒค์ ์ ์ ๋ฆฌํด ๋์ด ํธํ๊ฒ ๋ณผ ์ ์๋๋ก ํ์์ต๋๋ค.
๋์ค์ฝ๋ ์น ํ
PR์ ์์ฑํ๋ฉด ์ต์ 2๋ช ์๊ฒ ์ฝ๋ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ์ ๋ค ๋จธ์งํ๋๋ก ๊ท์น์ ์ค์ ํด์, ๋์ค์ฝ๋ ์ฑ๋์ Github ์นํ ์ ์ฐ๋ํด PR์ด๋ ๋ณ๊ฒฝ์ฌํญ ์ปค๋ฐ์ด ์์ ๊ฒฝ์ฐ ๋น ๋ฅด๊ฒ ์๋ฆผ์ ๋ฐ์ ์ ์๋๋กํ์์ต๋๋ค.
- props๊ฐ ๊ณ์ ์ปดํฌ๋ํธ๋ฅผ ํ๊ณ ์ ๋ฌ๋๊ธฐ ๋๋ฌธ์ ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ฅผ ๋์์ ๊ด๋ฆฌํ๊ธฐ ๋ณต์กํ๊ณ , ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ๊ฐ ์ ๋์ํ๋์ง ํ์ธํ๊ธฐ๊ฐ ๊น๋ค๋ก์ ์ต๋๋ค.
- ๊ธฐ์กด์ 5๋จ๊ณ ๊ตฌ์กฐ์์ atom, molecules, organisms, pages 4๋จ๊ณ ๊ตฌ์กฐ๋ก ๋ณํํด ์ฌ์ฉํ์ง๋ง, ์ข ๋ ๋จ์ํํ ํ์๊ฐ ์์๋ ๊ฒ ๊ฐ์ต๋๋ค.
- ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ์์ํด์ ํ๋ก์ ํธ ์ ์คํฐ๋๋ฅผ ํตํด์
StoryBook
์ ์ฌ์ฉํด๋ดค์ง๋ง, ๋ฆฌ์กํธ์๋ ์ต์ํ์ง ์์์๊ธฐ ๋๋ฌธ์ ํ์ต ๋น์ฉ์ด ๋๋ค๊ณ ํ๋จํด ๋์ ํ์ง ์์์ต๋๋ค. - ํ์ง๋ง ์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ํตํด์ ์๊ฐ์ ํ ์คํธ์ ์ด๋ ค์์ ํฌ๊ฒ ๋๊ผ๊ณ *, ์ํ ๋ฏน ๋์์ธ ํจํด์ ๊ธฐ๋ฐ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฆฌํ ๋๋ StoryBook์ด ํ์์ ์ด๋ผ๋ ๊ฒ์ ๊นจ๋ณ์์ต๋๋ค.
- ์ปดํฌ๋ํธ๋ฅผ ํ์ฅ์ฑ์๊ฒ, ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ๋ง๋ค๋ฉด์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ธฐ๊ฐ ๊น๋ค๋ก์ ์ต๋๋ค.
UI์ ์ฌ์ฌ์ฉ
์ ํธ๋ฆฌํ์ง๋ง, State๋ฅผ ์ฌ์ฉํ๋ ๋ฑ ๋์์ ์ถ๊ฐํ๋ฉด ๊ธฐ๋์ ๋ค๋ฅด๊ฒ ๋์ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์์ต๋๋ค. - ๊ทธ๋์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ ์ํ ๋ฑ์ ์ฌ์ฌ์ฉ๋์ง ์๋ ์ปดํฌ๋ํธ๋, page ๋จ์์์ props๋ก ์ ๋ฌํ ์ ์๋๋ก ๋ง๋ค์ด์ฃผ์์ต๋๋ค.
- ํ์ง๋ง props๋ฅผ ์๋๋ก ์ ๋ฌํ๊ณ ๋ ์ ๋ฌํ๋ ๊ตฌ์กฐ๋, ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ๋๋ง๋ค props์ ํ์์ ๋งค๋ฒ ํ์ธํด์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์์์ต๋๋ค. ์ด ๋ถ๋ถ์ props์ ํ์ ์ ๊ฐ์ ํ๊ฑฐ๋ default ๊ฐ์ ์ ์ํด์ค์ผ๋ก์จ ๊ฐ์ ํ ์ ์์ ๊ฒ ๊ฐ์ต๋๋ค.
- ๊ฐ๋ฐ ํ๋ก์ ํธ ๊ฒฝํ์ด ๋ง์ด ์๋ค๋ณด๋๊น ๊ณ ๋ฏผ๋ ๋ถ์๋ ๋ง์์ต๋๋ค. ์ํ๊ณ ์ถ๊ณ , ์ด๋ค ๋ ผ์ ์ ๋ํด ์๊ฒฌ์ ์ฃผ๊ณ ๋ฐ๊ณ , ์คํ์ ํด๋ณด๊ณ ๋ ์ถ์๋ฐ ์์ด๋์ด๊ฐ ์ฝ๊ฒ ๋์ค์ง ์์์ต๋๋ค. ์ค๋๋ง์ ์ฒ์ ํ๋ก๊ทธ๋๋ฐ ๊ณต๋ถ๋ฅผ ์์ํ ๋ ๊ฐ์ ๋ง๋งํจ์ ๋๊ผ์ต๋๋ค.
- ์ ๋ ์ด๋ฌํ ๋ฌธ์ ๊ฐ ์ง์์ ๊ฒฉ์ฐจ๋ก๋ถํฐ ๋ฐ์๋๋ค๊ณ ์๊ฐํ์ต๋๋ค. ์ด๋ ํ ๋ฌธ์ ์ ๋ํด์ ์๊ฒฌ์ ๋ด๋ ค๋ฉด ์ต์ํ์ ์ง์์ด๋ ๊ฒฝํ์ด ์์ด์ผ ์์ ๊ฐ์ ๊ฐ์ง๊ณ ์ ์ํ ์ ์์ ๊ฒ ๊ฐ์์ต๋๋ค.
- ๊ทธ๋์ ์ ๋ณด๋ฅผ ๊ธ์ด๋ชจ์์ต๋๋ค. ๋ค๋ฅธ ํ๋ก์ ํธ๋ค์ ๋ถ์ํ๊ณ , ํ์ ์ฃผ์ ์ ๋ธ๋ก๊ทธ ๊ธ์ ์ฝ๊ณ ๋ค๋ฅธ ๊ฐ๋ฐ์๋ถ๋ค๊ป ์ง๋ฌธ์ ๋์ ธ๊ฐ๋ฉฐ ์ ๋ณด๋ฅผ ์ป์ ๋ค์, ์ ์ฉํ ์ ์์ ๋ฒํ ํค์๋๋ค์ ๊ฐ์ ธ์ ์คํฐ๋๋ฅผ ์์ํ์ต๋๋ค.
- 3~4์ผ์ ํ๋ฒ์ฉ ํ์ํ๋ฉด์ ์คํฐ๋๋ฅผ ์งํํ๊ธฐ ํ๋ค์์ง๋ง,
์์ ์ด ๋งก์ ์ฃผ์
์ ๋ํด์๋ ํ ๋ด์์ ๋๋ฆ์ ์คํ์ ๋ฆฌ์คํธ๊ฐ ๋์ด๊ทธ ๋ถ์ผ๋ฅผ ๋ฆฌ๋
ํ ์ ์๊ฒ ๋์์ต๋๋ค. ๋ถ์กฑํ ์ ๋ณด๋ค์ ์ฑ์ฐ๊ณ ๋๋ ์์ ๊ฐ์ด ์๊ฒผ๊ณ , ์์ ์ ๋ถ์ผ๊ฐ ์ ํด์ง๋ฉฐ ์ค๋์ญ์ ๋๋ ๊ฐ์ง๊ณ ์ด์ ๋ณด๋ค ํ๋ฐํ๊ฒ ์๊ฒฌ์ ์ฃผ๊ณ ๋ฐ์์ต๋๋ค. - ์ด ๊ฒฝํ์ผ๋ก ์ฐ๋ฆฌ๋ ์์์, ๋ฌธ์ ๋ฅผ ๊ณต์ ํ๋ ๊ฒ์ด ๊ณง ์ ๊ทน์ ์ธ ํ์ ๋ง๋ ๋ค๋ ๊ตํ์ ์ป์๊ณ , ์ดํ๋ก๋ ๋
ธ์
์ํฌ์คํ์ด์ค ํ์ฉ, ๋ฐ์ผ๋ฆฌ ์คํฌ๋ผ, ๊นํ๋ธ, ํ์ดํ๋ก๊ทธ๋๋ฐ ๋ฑ ์ํํ ์ปค๋ฎค๋์ผ์ด์
์ ์ํ ๋
ธ๋ ฅ์ ํด๋๊ฐ๋ฉฐ
โ๋ฌธ์ ์ ๋ํด์ ํ์๋ค์ด ์ดํดํ๊ณ ๊ณต๊ฐํ ์ ์๋๋ก ์ต๋ํ ์์ธํ ์ค๋ช ํ๊ธฐโ
๋ผ๋ ๊ท์น์ ์ง์ผ์์ต๋๋ค.
- ์ํ ๋ฏน ๋์์ธ ํจํด์ ์ ์ฉํ๋ฉฐ ํค๋ฉ๋ฉด์ ์ค๋ณต์ฝ๋๊ฐ ๋ง์ด ์๊ฒผ๋๋ฐ, ์ ๊ฑฐํ๋ ๊ฒ์ ์ด๋ ค์์ ๋๋ผ๊ณ ์์ต๋๋ค. API ์ฝ๋๋ฅผ ๋ถ๋ฆฌํ๊ณ Custom Hook์ ๋ง๋ค์ด ์ง๊ธ์ ์ฝ๋๋ณด๋ค ๊ฐ์์ ์ด๊ณ ํจ์จ์ ์ธ ์ฝ๋๋ฅผ ๋ง๋ค ์ ์์ ๊ฒ ๊ฐ์ต๋๋ค.
- setState์ ๋น๋๊ธฐ์ ์คํ์ ๋ํด ๋์ฑ ๊ณต๋ถํ์ฌ ๋ฒ๋ฒ ์์ ๊ณ ์ณ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
- ํ ํผ๋, ํ๋ก์/ํ๋ก์ ๋ชฉ๋ก, ๋๊ธ ๋ฑ์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ฌ ๋ ๊ฐ์ ์ ํ์ด ์์ต๋๋ค. ๋ฌดํ์คํฌ๋กค ๋๋ ํ์ด์ง๋ค์ด์ ์ ์ถ๊ฐํด ์ ์ฒด ๋ชฉ๋ก์ ๋ณด์ฌ์ฃผ๋๋ก ๊ฐ์ ํ๊ณ ์ถ์ต๋๋ค.