-
Notifications
You must be signed in to change notification settings - Fork 1
Open
Labels
KPTKPTKPT
Description
Keep (์ ์งํ ํญ๋ชฉ)
- ์ผ์ ์ ๋ง์ถ์ด ์งํํ๋ ค๊ณ ๋
ธ๋ ฅํจ
- ์คํ๋ฆฐํธ๋ฅผ ๋ณด๊ณ ๊ณต๋ถํ๋ ๊ฒ์์ ๋ฒ์ด๋ ์ฒ์ ํด๋ณด๋ ํ๋ก์ ํธ๋ผ์ ์ผ์ ์ ์ง๋ฉด์๋ ๊ธด๊ฐ๋ฏผ๊ฐ ํ ์ ์ด ๋ง์๋๋ฐ, ๊ทธ๋๋ ์ง์ ํด ๋ ์ผ์ ์ ๋ง์ถ์ด ์งํํ๋ ค๊ณ ๋ ธ๋ ฅํด์ ์ด๋ ๊ฒ๋ผ๋ ์ฒซ ํ๋ก์ ํธ๋ฅผ ๋ง๋ฌด๋ฆฌ ํ ์ ์์๋ ๊ฒ ๊ฐ๋ค.
- ์ผ์ ์ ๋ง์ถฐ์ผ ํ๋ค๋ ์๊ฐ๋๋ฌธ์ ์ด๋ฐํ๋ค๋ ์๊ฐ์ ๋ฉํ์ด ๋ง์ด ๊นจ์ง๊ธฐ๋ ํ์ง๋ง ๊ทธ๋๋ ํ์๋ค๊ณผ ๊ฐ์ด ๊ณ ๋ฏผํ๊ณ ์์ฑํ๋ฉด์ ํ์ ์ป์ ์ ์์๋ค.
- ํ์๋ค๊ณผ ์ํตํ๋ฉด์ ์งํํ์
- ํ๋ก์ฐ๊ฐ ์ดํด๋์ง ์์์ ์งํํ๊ธฐ ์ด๋ ค์ด ๊ฒฝ์ฐ๊ฐ ์ข ์ข ์์๋๋ฐ, ํ์๋ค๊ณผ ํจ๊ป ๊ณ ๋ฏผํด๋ณด๊ณ ๋ฌด์์ด ์ดํด๊ฐ ์๋๋์ง ๋ง๋ก ํ์ด๋ณด๋ฉด์ ํํธ๋ฅผ ์ป์ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ค.
Problem (๋ฌธ์ ๋ผ๊ณ ์๊ฐํ๋ ํญ๋ชฉ)
- SR์ ๋ ๊ผผ๊ผผํ ์งํํ์์ด์ผ ํ์
- ๊ทธ๋๋ SR์ ๊ฐ์ด๋์ ๋ง์ถฐ ์ถฉ์คํ๊ฒ ์งํํ๋ค๊ณ ์๊ฐํ๋๋ฐ, ์งํํ๋ฉด์ ๋ณด๋ค๋ณด๋ ๋๋ฌด ๋ชจ์๋ฅธ ์ ์ด ๋ง์๋ค.
- ํนํ SR์์ ์์ด์ดํ๋ ์์ ์๊ฐ์ ๋ง์ด ๋ค์๋๋ฐ, ๋์์ธ ์ชฝ๋ ์ค์ํ์ง๋ง state๋, ๋ฐ์ดํฐ๊ฐ ์ด๋ป๊ฒ ์งํ๋๋์ง ํ๋ฆ์ ๋ ์์ธํ ์์ฑํ๊ณ ์ฐธ๊ณ ํ์์ด์ผ ํ๋ค. ๋์์ธ์ ์ค๊ฐ์ ๋ฐ๊ฟ๋ ์ฝ๋๋ฅผ ํต์งธ๋ก ์ด์ฌ์ํค๊ฑฐ๋ ์ญ์ ํด๋ ์ผ์ถ ๋ง๋ค์ด ๋ผ ์ ์๋๋ฐ, ๋ฐ์ดํฐ ํ๋ฆ์ด๋ผ๋์ง ํ๋ก์ฐ๋ ์ฒ์๋ถํฐ ์๊ฐํด๋๊ณ ๋ง๋ค์ง ์์ผ๋ฉด state๋ฅผ ์
๋ฐ์ดํธ ํ๊ฑฐ๋, useEffect๋ฅผ ์ฐ๊ณ ์ถ์๋ ๋๋ฌด ๋ณต์กํด ์ง๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ค.
- ํ ์ปดํฌ๋ํธ์ 8~10๊ฐ์ ๊ฐ๊น์ด props๋ฅผ ์ ๋ฌํด ์ฃผ์ด์ผ ํ ๋ ๋๋ฌด ๊ณ ํต์ค๋ฌ์ ๋ค(...)
- ์ ์ฒด ์ฝ๋ ์์ฑ ์๊ฐ ์ค์ CSS์ ๋ํ ๋น์จ์ด ๋๋ฌด ๋์์
- ์งํํ ๋ ๋จผ์ ์ปดํฌ๋ํธ๋ฅผ ๋ค ์์ฑ(JSX + styled-component)ํ๊ณ ๋ ํ state๋ฅผ ์ ๋ฌํ๊ณ ๊ด๋ฆฌํ๋ ค๊ณ ํ๋๋ฐ, ์๊ฐ๋ณด๋ค CSS์์ ๋๋ฌด ๋ง์ ์๊ฐ์ ํฌ์ํ๊ฒ ๋์ state ๊ด๋ฆฌ๋ฅผ ์์ํ์๋ ์๊ฐ์ด ๊ต์ฅํ ์ด๋ฐํ๊ฒ ๋๊ปด์ก๋ค.
- state๋ฅผ redux๋ฅผ ํตํด ๊ด๋ฆฌํ๋ ค๊ณ ํ๋๋ฐ, styled-component ๋์์ธ์ ์๊ฐ์ ๋ค ์จ๋ฒ๋ ค์ ๋ฆฌ๋์ค๋ฅผ ์ฌ์ฉํ ์๊ฐ ์์๋ค. ๊ทธ๋์ ๊ฒฐ๊ตญ์ ํ๋กญ์ค๋ก ์ ๋ฌํ๋ ๋ฐฉ์์ผ๋ก ์งํํ๋๋ฐ, ๊ทธ๋ฌ๋ค๋ณด๋ ๋ ์ฝ๋๊ฐ ๋ณต์กํด์ง๊ณ ์งํด์๋์ด์๋ค. ์ฝ๋๋ฅผ ์์ฑํ๋ฉด์๋ ์ค๊ฐ์ค๊ฐ ๋ฆฌ๋์ค๋ฅผ ์ผ์ผ๋ฉด ์กฐ๊ธ์ ํธํ์ํ ๋ฐ ๋ผ๋ ์๊ฐ์ด ๋ง์ด ๋ค์๋ค.
- ์งํํ๋ฉด์ ์ด๋ค ๋ถ๋ถ์ styled-component๋ CSS๋ฅผ ์์ ํ๊ฒ ๋๋ฉด ๊ทธ๊ฒ ๋ค๋ฅธ ๋ถ๋ถ์ ์ํฅ์ ๋ผ์ณ ์๋ํ๋ ๋์์ธ์ด ๋์ค์ง ์์ ๋๋ผ๋์ง, ์๋๋ฉด ์๋ํ๋๋ก ๋์์ธ์ ๋ง๋ค์์ผ๋ ๋ง์์ ๋ค์ง ์์ ์์ ์ ํ๊ฒ ๋๋ ๊ฒฝ์ฐ๊ฐ ์์ฃผ ์๊ฒผ๋๋ฐ, ๊ทธ๋ด๋ ํด๋น styled-component๋ฅผ ์ฐพ์ผ๋ ค๊ณ ์ค๋ ์๊ฐ์ ์ฐ๊ฒ ๋๋ฉด์ styled-component๊ฐ ์ข์๊ฒ ๋ง๋ ๋ผ๋ ์๋ฌธ๋ ์๊ฒผ์๋ค.
Try (Action Items)
- SR ์์ ํ ๋ ๋์์ธ ๋ฟ๋ง ์๋๋ผ ํ์ํ ์ํ ๊ฐ์ด๋ผ๋์ง, ๊ทธ ์ํ๊ฐ์ด ์ด๋ค ๋์ ์ฐ์ด๋์ง, ์ด๋ป๊ฒ ์ ๋ฐ์ดํธ ๋๋์ง ๊ผผ๊ผผํ ํ์ ํ๊ธฐ
- JSX + styled-component(๋๋ CSS)๋ฅผ ์์ฑํ๊ธฐ ์ ์ JSX + ์ํ๊ฐ ํ๋ก์ฐ ํ์ธํ๊ณ ํ๊ธฐ
- styled-component ์ด์ธ์ ๋ค๋ฅธ CSS ๋ฐฉ๋ฒ๋ก (tailwind CSS)์ ๋ํด์๋ ๊ณต๋ถํ๊ณ ์ ์ฉํด๋ณด๊ธฐ
- ํ๋ก์ ํธ ์ด๋ฐ์ redux ์ฌ์ฉํ ์ ์๋๋ก ํ๊ธฐ
- ๋ฐฐํฌ ์๋ํ ๋ฐ cloudfront์ route53 ์ฌ์ฉํด์ ๋๋ฉ์ธ์ผ๋ก ๋ฐฐํฌํด๋ณด๊ธฐ
Metadata
Metadata
Assignees
Labels
KPTKPTKPT