๐ค ๋ ์ค๋ ๋ญํจ?
- ์ธํ๋ฐ - React๋ก NodeBird SNS ๋ง๋ค๊ธฐ
1-1. antd์ styled-components
1-2. _app.js์ Head
1-3. ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ์ฌ์ฉํ๊ธฐ
1-4. ๋ก๊ทธ์ธ ํผ ๋ง๋ค๊ธฐ
1-5. ๋ฆฌ๋ ๋๋ง ์ดํดํ๊ธฐ
1-6. ๋๋ฏธ ๋ฐ์ดํฐ๋ก ๋ก๊ทธ์ธํ๊ธฐ
๐ฑ ์๋กญ๊ฒ ์๊ฒ ๋ ์
- ๋ฆฌ์กํธ์ children props: ์ปดํฌ๋ํธ ํ๊ทธ ์ฌ์ด์ ๋ด์ฉ์ ๋ณด์ฌ์ค. https://ko.reactjs.org/docs/composition-vs-inheritance.html ์ฌ๊ธฐ ์ฝ๋ํ ์์ ์์.
- propTypes: ์ปดํฌ๋ํธ์์ props์ ํ์
์ ์ง์ ํ ๋ ์ฌ์ฉํ๋ค. ํ์ผ ์๋จ์
import PropTypes from 'prop-types';
ํด์ฃผ๊ณ [์ปดํฌ๋ํธ์ด๋ฆ].propTypes = { [propName]: PropTypes.[type] };
์ด๋ ๊ฒ ์ค์ ํด์ฃผ๋ฉด ๋๋ค.
๋๊ดํธ ์์ ์๋ ๋ถ๋ถ์ ๋ณธ์ธ์ด ์ํ๋ ์ด๋ฆ์ผ๋ก ๋ฐ๊ฟ์ค์ผ ํจ
- ๋ฐํ, ๋ชจ๋ฐ์ผ ๋ ๋ค ๋ฐ์ํ์ผ๋ก ์ง์ํ๋ ค๋ฉด ๋ชจ๋ฐ์ผ๋ถํฐ ๊ฐ๋ฐํ๋๊ฒ ๋ซ๋ค๊ณ ํจ.
- xs: ๋ชจ๋ฐ์ผ, sm: ํ๋ธ๋ฆฟ, md: ์์ ๋ฐ์คํฌํ
- a ํ๊ทธ๋ก
href target='_blank'
์ฐ๊ฒฐํด์ค ๋ rel='noreferrer noopener'
์์ฑ๋ ๋ฃ์ด์ค์ผ ๋ณด์ ์ํ์ด ์ฌ๋ผ์ง๋ค.
- ์ปดํฌ๋ํธ์ props๋ก ๋๊ฒจ์ฃผ๋ ํจ์๋ useCallback์ ๊ผญ ์ฐ์!!!!!!!!! ์์ง๋ง์.
- styledComponents ์ธ ๋ inline์ผ๋ก ์ฐ์ง๋ง์
โจ ๋๋์
์ด์ ๋ถํฐ ๋ค์ ๋ฐํ์ผ๋ก ๋์์์ ๊ณต๋ถ ์ค์ธ๋ฐ ํ์คํ ๋ชจ๋ํฐ 2๊ฐ๋ผ ํธํ๊ธด ํ๋คใ
ใ
๊ทธ๋์ bootstrap๋ง ์์๋๋ฐ antd, emotion์ ํ๋ ์์ํฌ๋ฅผ ์๊ฒ ๋์๋ค! ๋์์ธ๋ ๊น๋ํด์ ์ข๋ค.. ๊ฐ์ ๋ค์ผ๋ฉด์ ๋ชจ๋ฅด๋ ๋ถ๋ถ์ ์ฑ
์ฐธ๊ณ ํ๋ฉด์ ๋ณด๋๊น ๋์์ด ๋ง์ด ๋๋ค. ๋
ธ๋๋ฒ๋ ๊ฐ์๋ ์ฌ๋ฐ๊ณ !!