/MilitaryFE

Primary LanguageJavaScript

Soldier Challengers

๐Ÿ™‹โ€โ™‚๏ธ '์†”์ € ์ฑŒ๋ฆฐ์ €์Šค'๋Š”

์„ฑ๊ณต์ ์ธ ์ „์—ญ์„ ์œ„ํ•œ ์ฑŒ๋ฆฐ์ง€ ํ”Œ๋žซํผ ์ž…๋‹ˆ๋‹ค. ์†”์ €์ฑŒ๋ฆฐ์ง€ํ•˜๊ณ  ๊ตฐ์ƒํ™œ์„ ์•Œ์ฐจ๊ฒŒ!

๐Ÿช– ์†”์ €์ฑŒ๋ฆฐ์ €์Šค url

url : https://soldierchallengers.com/
notion : https://www.notion.so/9bcf0f86055e4ccdb3e8cdd7ab811a03

๐Ÿง‘โ€๐Ÿ’ป ๊ฐœ๋ฐœ๊ธฐ๊ฐ„

2022.04.22 ~ 2022.06.02
FrontEnd : ํ•œ์œ ์ •, ์ด์„ฑ์˜ (React)
BackEnd : ํ™ฉ์ธํ˜ธ, ๊น€ํƒœ๊ท , ์ •๋Œ€๊ทœ (Node js)
Designer : ํ•˜ํ˜œ๋ฆผ, ์ดํ™€๋ฆฐ

๐Ÿ“Š ์‚ฌ์šฉ ๊ธฐ์ˆ  ์Šคํƒ

Framework : React
์ƒํƒœ๊ด€๋ฆฌ : Redux
CSS : Styled-component
API:Axios
CD:Amplify

๐Ÿ›  ์‚ฌ์šฉ Tool

VSCode
Git
AWS-Route53, Amplify

โš™๏ธ ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…

1. ์†Œ์…œ๋กœ๊ทธ์ธ์„ ํ–ˆ์„ ๋•Œ, ์œ ์ € ์ถ”๊ฐ€์ •๋ณด๋ฅผ ์ž…๋ ฅ๋ฐ›์ง€ ๋ชปํ•ด ๋ฉ”์ธํ™”๋ฉด์—์„œ ๋…ธ์ถœ์‹œํ‚ฌ data๋ฅผ ์ฐพ์ง€ ๋ชปํ–ˆ๋˜ ๋ฌธ์ œ
โ†’ ์†Œ์…œ๋กœ๊ทธ์ธ ์งํ›„ ์ถ”๊ฐ€์ •๋ณด๋ฅผ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ผ์šฐํŒ…ํ•˜์—ฌ ์ถ”๊ฐ€์ •๋ณด๋ฅผ ํ•„์ˆ˜๋กœ ์ž…๋ ฅํ•˜๋„๋ก ์œ ๋„ํ•œ ํ›„ ์—๋Ÿฌ๊ฐ€ ํ•ด๊ฒฐ๋จ
2. Nav ๋ฐ”์—์„œ, onClick ํ›„ ๋ Œ๋”๋ง์ด ๋˜๋”๋ผ๋„ nav๋ฐ” ์ƒ‰์„ ์œ ์ง€์‹œํ‚ค๋ คํ–ˆ์œผ๋‚˜ ๋กœ๋”ฉ์— ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๋Š” ๋ฌธ์ œ
โ†’๋ณ€ํ•œ ๊ฐ’์ด ์œ ์ง€๋˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด db์— data๋ฅผ ์ž…๋ ฅํ•˜์—ฌ nav๋ฐ” ์ƒ‰ ์œ ์ง€๋ฅผ ์‹œํ‚ด. ํ”„๋ก ํŠธ๋‹จ์—์„œ nav์ƒ‰์ƒ์„
url์ฃผ์†Œ์— ๋”ฐ๋ผ ๋ณ€๊ฒฝ์‹œํ‚จ ํ›„ ๋ Œ๋”๋ง์ด ๋˜๋”๋ผ๋„ ์œ ์ง€์‹œ์ผœ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ํŽ˜์ด์ง€ ๋กœ๋”ฉ ํšจ์œจ์„ ๋†’์ž„
3. ๋ Œ๋”๋ง ์งํ›„ ์ƒˆ๋กœ๊ณ ์นจ ์‹œ data๊ฐ€ ๋‚ ์•„๊ฐ€๋Š” ๋ฌธ์ œ
โ†’ useEffect์˜ ์˜์กด์„ฑ๋ฐฐ์—ด์„ ์ œ๊ฑฐํ•˜์—ฌ ์ง€์†์  ํ˜ธ์ถœ์„ ์œ ๋„ํ•จ์œผ๋กœ ํ•ด๊ฒฐ