npm install axiosnpm install -g @vue/cliํ์ง๋ง.. ํ๋ฒ์ ๋๋ฉด ๋๋ฌด ๋ญ๋ง์ ์ด๊ฒ ์ฃ ?์ฃผ๋ณ ๋๊ธฐ๋ถ๋ค์ ์ด ๋ช ๋ น์ด ํ๋๋ก ์ฝ๊ฒ ์ค์น๋๊ณ ํ๋ฉด ๋์ฐ๋๋ฐ ์ผ๋ง ์๊ฑธ๋ ธ๋๋ฐ ์ ๋ ํ๋ฃจ ๊ผฌ๋ฐ๊ฑธ๋ ธ์ต๋๋ค.zsh: vue not found๋ผ๊ณ ๊ณ์ ์ปค๋งจ๋์ฐฝ์
์์ ์ปดํฌ๋ํธ ---> ํ์ ์ปดํฌ๋ํธprops ์ ๋ฌํ์ ์ปดํฌ๋ํธ ---> ์์ ์ปดํฌ๋ํธevent ๋ฐ์props์์ฑ์ ์ปดํฌ๋ํธ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌ ํ ์ ์๋ ์ปดํฌ๋ํธ ํต์ ๋ฒ์ด๋ค.props์์ฑ์ ๊ธฐ์ตํ ๋ ์์ ์ปดํฌ๋ํธ์์ ํ์ ์ปดํฌ๋ํธ๋ก ๋ด๋ ค์ฃผ๋ ์์ฑ์ด๋ผ ๊ธฐ์ตํ์pro
Vue ๊ธฐ๋ณธ ๊ตฌ์กฐ > instance ์์ฑ , API๋ค > >- el:์ธ์คํด์ค๊ฐ ๊ทธ๋ ค์ง๋ ํ๋ฉด์ ์์์ template: ํ๋ฉด์ ํ์ํ ์์(html,css๋ฑ) data: vue์ ๋ฐ์์ฑ์ด ๋ฐ์๋ ๋ฐ์ดํฐ ์์ฑ methods: ํ๋ฉด์ ๋์๊ณผ ์ด๋ฒคํธ๋ก ๋ก์ง์ ์ ์ดํ๋
์ด๋ฒ ํ๋ก์ ํธ์์ ๋ง์ง๋ง๋ ๊ธํ๊ฒ ๋ง๋ค์ด๋ธ ํ์ด์ง์ธ ์กํฐ๋นํฐ ํ์ด์ง...์ฌ๊ธฐ์ ๊ธฐ๋ฅ์ ํ์ด์ง๋ค์ด์ /ํํฐ๋ง๋ ๋ฐ์ดํฐ ๊ฐ๊ฐ๋ฐ์์ค๊ธฐ์๋ค.์ฐ์ limit์ 20์ ์ค์ ๊ฐ๊ฐ์ ํ์ด์ง์์ 20๊ฐ์ ์ํ ์นด๋๊ฐ ๋์ค๊ฒ ์ค์ ํ์๋ค์ฒ์์๋ const userOrder, setUser
๋ฐ๋ก ์ฝ๋๋ฅผ ๋ณด์!์ฐ์ ํธ๋ํฐ ๋ฒํธ๋ฅผ ๋ฐฑ์๋์ ์ ์กํด์ค์ผํ๋คํธ๋ํฐ๋ฒํธ์ ๋ฌธ์๊ฐ ์ผ์นํ๋์ง ํ์ธ์ ์ํด์ ๋ฐฑ์๋์ ํต์ ํ์ฌ๋์ ํด๋ํฐ ๋ฒํธ ๊ทธ๋ฆฌ๊ณ sms๋ฒํธ๋ฅผ ๋ฐฑ์๋์ ๋ณด๋ด์ค๋ค๊ทธ๋ฆฌ๊ณ ๋ง์ฝ ์ธ์ฆ๋ฒํธ๊ฐ ์ผ์นํ๋ฉด ์ฑ๊ณต ๋ฉ์ธ์ง๋ฅผ ๋ฐ๊ฒ๋์ด ๋ฌธ์์ธ์ฆ์ ์ฑ๊ณตํ๋ค.์ต์ข ์ ์ผ๋ก ์ง๊ธ๊น์ง
๋งํฌํ ์คํธํด๋ก ์ฝ๋ฉ ๋์์ ๋ นํFRONT-END(react)๊น์์ฌ, ๊น๊ท๋นFRONT-END(react-native)๋ฐ์ฑํ, ํ์คํฌBACK-END๊น์ํฌ(PM), ์ดํ์ฃผ์ฐ์ ์นํ์ด์ง ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ ์ ๊ท๋น๋ ๋ฑ ๋์ธ์ ์์ ์ด์ง ๊ฑฑ์ ์ ๋ฌ์ง๋ง ์คํ๋ ค ๋์ด์ ํ๋ค๋ณด๋ ์
promise chaning์ ๊ณ์ํ๋ค๋ณด๋ฉด ์ฝ๋ ๊ฐ๋ ์ฑ์ด ๋จ์ด์งasync & await๋ promise๋ฅผ ๊ฐ๊ฒฐ/๊ฐํธํ๊ณ ๋๊ธฐ์ ์ผ๋ก ์คํ๋๋๊ฒ ์ฒ๋ผ ๋ณด์ด๊ฒ ๋ง๋ค์ด์ฃผ๋ APIasync์ await๋ ์๋ก์ด ๊ฒ์ด ์ถ๊ฐ๋๊ฒ์ด ์๋๋ผ ๊ธฐ์กด์ ์กด์ฌํ๋ promise์์ ์กฐ๊ธ๋ ๊ฐ
2์ฐจ ํ๋ก์ ํธ๊ฐ ์์๋๋ฉด์ ํจ์ํ ์ปดํผ๋ํธ ํด๋์คํ ์ปดํผ๋ํธ ๋๊ฐ์ค ํ๋๋ฅผ ์ฌ์ฉํ๋ผํ๋ค.์ ๋ ์ด๋ฒ์ ํจ์ํ ์ปดํผ๋ํธ์ ๋ํด์ ๊ณต๋ถํ ์ ์๋ ์ข์๊ธฐํ๋ผ ์๊ฐ๋ฌ๊ธฐ ๋๋ฌธ์ ์ด๋ฒํ๋ก์ ํธ๋ ํจ์ํ์ผ๋ก ์งํํ๊ธฐ๋ก ํ์๋ค.2019๋ ๋ ๋ถํฐ ๋ฆฌ์กํธ ํ (hook)์ ์ง์ํ๊ฒ ๋์๋ค.
์ฃผ๋ง๊ฐ ํน ์ฌ๋ฉด์ ํ๋ ๋ด์ฉ ๋ณต์ต์ ํ๋ค๋ณด๋ ์ด๋๋ง 2์ฐจ ํ๋ก์ ํธ๋ฅผ ์์ํ๊ฒ๋์๋ค.1์ฐจ๋ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ์ ๋ณด๋ค ์ฝ๋์ ์ง๋ ๋์์ก์ผ๋ฉด ์ข๊ฒ ๊ณ ์กฐ๊ธ๋ ๋ค์ํ ํ์ด์ง๋ฅผ ๋งก์์ ํด๋ณด๊ณ ์ถ์๋ค.๊ทธ๋ฆฌ๊ณ 2์ฐจ๋๋ ์ฌ๋ฌ ๊ธฐ๋ฅ์ ๋ค๋ค๋ณด๋ฉด์ ๋ก์ง์ ์ง๋ ์ ๋ฐ์ ์ธ ํ์ ์ก์์ผ๊ฒ ๋ค
์ด๋ฒ velog๋ํ 1์ฐจ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ๋๋ฌด ๋ง์ด ์ฐ์ด๊ณ ๋๋ฌด ์ค์ํ์ง๋ง ์๊ฐ๋ณด๋ค ๊ฐ๋ ์ด ๊ฐ๋จํ ๊ฒ์ค map๊ณผ reduce๋ฅผ ๋ฝ์๊ฒ ๊ฐ๋ค.๊ทธ๋ฌํ ์ด์ ๋ก ์ด๋ฒ์๋ map๊ณผ reduce๋ฅผ ์์ธํ ์์๋ณด๋ ค๊ณ ํ๋ค.map์ด๋ ํจ์๋ ๊ฐ๋จํ ์ค๋ช ํ๋ฉด ๋ฐ๋ณต๋ฌธ์ ๋๋ฉด์ ๋ฐฐ์ด์์
์ด๋ฒ์ 1์ฐจ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ๋๋ฌด ์ค์ํ๊ณ ๋ง์ด ์ฐ์์ง๋ง ์ดํด๋๊ฐ ์กฐ๊ธ ๋ถ์กฑํ๋ ๊ฒ์ค ์ ๋ fetch๋ผ๋ ๋ฉ์๋๋ฅผ ๋ฝ์์ต๋๋ค.๊ทธ๋์ velog ์์ ๊ฐ๋ ์ ๋ฆฌ ๋ฐ ๋ณต์ต์ฉ์ผ๋ก ์์ฑํด ๋ณด๋ ค ํฉ๋๋ค.1์ฐจ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ fetch๋ผ๋ ๋ฉ์๋๋ ์ฒ์์ ๋ญ์ง ์ ๋ชฐ๋๋ค.๊ทธ๋ฐ๋ฐ
๋ฒ์จ ํ๋ฌ์ด ์ง๋ฌ๋ค์...์์ฝ๋๋ฅผ ์ค๊ธฐ์ ๊ฑด์คํ์ฅ์์ ์ค๋ฌ๋์ ์ผํ๊ณ ์์์ ๊ด๋ จํด์๋ ์ผ์ ํ์ต๋๋ค.์ผ๋ ์ฌ๋ฐ๊ณ ๋๋ ๊ด์ฐฎ๊ฒ ๋ฒ์๋๊ฒ ๊ฐ๊ณ ํญ์ ์ฆ๊ฒ๊ฒ ์ด์์ต๋๋ค.์์ฝ๋๋ฅผ ์จ์ด์ ... ๋ค๋ค ์ฝ๋ฉ์ด ์ข์์ ์๋๋ฉด ์ปดํจํฐ ์ฌ์ฉํ๋๊ฒ ์ข์์ ๋ง์ ์ด์ ๊ฐ ์๋๊ฒ ๊ฐ์ต๋๋ค.๊ทธ์
์ฐ์ ์ง๊ธ ์๊ฐํ๋ฉด 2๊ฐ์ subnav์ปดํผ๋ํธ๋ฅผ ๋ชจ๋ ์ถ๋ ฅ ์ํค๊ณ ํธ๋ฒ๋ฅผ ์ด๋ค๊ณณ์ ํ๋์๋ฐ๋ผ ํ์ชฝ์ display:none;์ด๋ผ๋ css์์ฑ ๋ง์ผ๋ก๋ ๊ตฌํ ํ ์ ์๋ค๋ ๊ฑธ ์์์ง๋ง ์ ๋ javascript๋ก ํด๊ฒฐํด ๋ณด์์ต๋๋ค.์ฝ๋๋ฅผ ๋ฐ๋ก ๋ณด๋๋ก ํ์์์ ์ฝ๋์์ st
์์์ ๋ณด์ด๋ ๊ฒ ์ฒ๋ผ ๋นํ์ ์ฃผ๋ฌธ ์กฐํํ๊ธฐ๋ฅผ ๋๋ฅด๋ฉด ์จ๊ฒจ์ง div์ ๋ด์ฉ์ด ๋์ฌ ์ ์๊ฒ ๊ตฌํํ์๋ค.์๊ฐ๋ณด๋ค ๊ต์ฅํ ๊ฐ๋จํ๊ฒ ์ฒ๋ฆฌ ํ ์ ์์ต๋๋ค.์ฝ๋๋ฅผ ๋ณด์๋ฉด์์ ์ฝ๋์์ showGuestBox์ state๊ฐ์ false๋ก boolean๊ฐ์ ์ฃผ์์ต๋๋ค.์์ ์ฝ๋๋ฅผ
๋ก๊ทธ์ธ ํ์ด์ง์ ํ์๊ฐ์ ํ์ด์ง๋ฅผ fetch๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฑ์๋์ ํต์ ํ๋ ๊ฒ์ ๋ฐฐ์ ์ต๋๋ค.๋ฐ๋ก ์ฝ๋๋ฅผ ๋ณด๋๋กํ์.์์ ์ฝ๋์์๋ state๊ฐ์ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ก๊ทธ์ธ์ ํ์๋ก ํ๋ id, pw,๊ทธ๋ฆฌ๊ณ ๋ฐฑ์๋๋ก๋ถํฐ ์ ๋ณด๋ฅผ ๋ฐ์ ๋ก๊ทธ์ธ์ localStorage์ ํ ํฐ๊ฐ์ ์ ์ฅํ๊ธฐ
๐ฆ์ญ์ ๋ฐ๋ก ์ฝ๋๋ฅผ ๋ณด๋ฉด์ ์ด์ผ๊ธฐ ํ๋๊ฒ์ด ์ ์ผ ์ข์ ๋ฐฉ๋ฒ์ธ๊ฒ ๊ฐ๋ค!commentList๋ผ๋ ๋ฐฐ์ด commentValue๋ผ๋ value๊ฐ์ ์ ์ธํ๋คhandleCommenmtValue๋ผ๋ ์ด๋ฒคํธ๋ฅผ ํตํด ๋ณํํ๋ value๊ฐ์ e.target.value๋ฅผ ํตํด ์ ์ธํด์ค๋ค
Call back ํจ์ >call back ํจ์๋ ๋ค๋ฅธ ํจ์์ ๋งค๊ฐ๋ณ์๋ก ํจ์๋ฅผ ์ ๋ฌํ๊ณ , ์ด๋ ํ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์ ๋งค๊ฐ๋ณ์๋ก ์ ๋ฌํ ํจ์๊ฐ ๋ค์ ํธ์ถ๋๋ ๊ฒ์ด๋ค. map ` >์์ ์ฝ๋์์ ์ฒ๋ผ map()๋ฉ์๋๋ ๋ฐฐ์ด๋ด์ ๋ชจ๋ ์์ ๊ฐ๊ฐ์ ๋ํด ์ฃผ์ด์ง ํจ์๋ฅผ ํธ
์์คํ ๊ทธ๋จ ํด๋ก ์ ํ๋ฉด์ ๋ก๊ทธ์ธ ํ์ด์ง ๋ง๋ฌด๋ฆฌ ์์ ์ ํ์๋ค.๋ฐ๋ก ์ฝ๋๋ฅผ ๋ณด๋ฉด์ ์ ๋ฆฌ ํ๋๋ก ํ๊ฒ ์ต๋๋ค.๐์ฐ์ ๋ก๊ทธ์ธ ํ์ด์ง์ id์ password์ ๊ฐ์ด ๋ค์ด์ฌ ์ ์๊ณ ๊ทธ๊ฒ์ ํ์ฉ ํ ์ ์๋๋ก ํจ์๋ฅผ ์ ์ธํ์๋ค๐์์ id์ password๋ฅผ ๋น๊ตฌ์กฐํ ํ ๋น์ผ
๐React๋ Component๋ก ๊ตฌ์ฑ๋๋ค. component๋ ํ๊ธ ํด์ํ ๊ฒ๊ณผ ๊ฐ์ด ๊ตฌ์ฑ์์๋ฅผ ์๋ฏธํ๋ค.์ด๋ฌํ ์ปดํผ๋ํธ๋ ํ์ด์ง๋ฅผ ๊ตฌ์ฑํ๊ณ ์ฌ๋ฌ๋จ์๋ก ์ชผ๊ฐ๋ฉด component์์ component๊ฐ ์๊ธฐ๋ฏ๋ก ๋ถ๋ชจ-์์ ๊ตฌ์กฐ์ ๊ด๊ณ๊ฐ ์์ฑ๋๋ค.๐์ปดํผ๋ํธ์ ์ํ๐
LifeCycle API๋ฅผ ์ฌ์ฉํ ๋๋ ์ธ์ ์ผ๊น?์ปดํผ๋ํธ๊ฐ ์ฐ๋ฆฌ ๋ธ๋ผ์ฐ์ ธ์ ๋ํ๋ ๋, ์ ๋ฐ์ดํธ ๋ ๋, ์ฌ๋ผ์ง๋ ์ฐ๋ฆฌ๋ LifeCycle API๋ฅผ ์ฌ์ฉํฉ๋๋ค.LifeCycle API ์ฌ์ง์ ๋ณด๋ฉฐ ์ดํดํด๋ณด์์ถ์ฒ:http://projects.wojtekmaj.pl/