์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- ์๋ฐ์คํฌ๋ฆฝํธ
- history api
- useEffect
- ์๊ณ ๋ฆฌ์ฆ
- CSS
- REACT
- Flex
- ๋ฐ๋ธ์ฝ์ค
- ํ๋ก๊ทธ๋๋จธ์ค
- ์ฝ๋ฉํ ์คํธ
- ๋ธ๋ก๊ทธ
- position
- ๋ฐ๋ธ์ฝ์ค3๊ธฐ
- useRef
- Gatsby
- float
- fetch API
- ํ๋ก ํธ์๋
- Props
- Today
- Total
๋ชฉ๋ก์ ์ฒด ๊ธ (311)
Daehyunii's Dev-blog
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dLB44y/btr5UlqwbdC/Bd6H73cSAUYKbWlspll831/img.png)
์ ์ ๋ชฉํ ์ค ํ๋์๋ ๊ฐ์ธ ๋ธ๋ก๊ทธ๋ฅผ ๊ฐ์คํ์ต๋๋ค! ๐ ์ด๋ฆ์ "woodaelog" ์ ์ด๋ฆ์ ๊ทธ๋๋ก ์ฌ์ฉํ์ต๋๋ค~ ๋ถ์กฑํ ์ ์ด ๋ง์ง๋ง ๊ทธ๋๋ ์ ๋๋ฆ๋๋ก์ ์ํ๋ ๋ฐ๋ฅผ ์ด๋ค์ ๊ธฐ๋ถ์ด ์ข๋ค์! github login์ ํตํด ๋๊ธ๋ ๋ฌ ์ ์์ผ๋ ์ธ์ ๋ ์ง ๋๋ฌ์ค์ ์ ๋ถ์กฑํ ์ ๋ง์ด ๋ง์ด ๋ง์ํด์ฃผ์๋ฉด ์ด์ฌํ ์ด์ฌํ ์์ ํด ๋๊ฐ๋ณด๊ฒ ์ต๋๋ค~๐ ๋ง์ ๊ด์ฌ ๋ถํ๋๋ ค์~ URL: https://woodaelog.com/ WooDaeHyun Blog WooDaeHyun Dev-Blog woodaelog.netlify.app
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/TUgqv/btr6BfYyHLa/FtE1NGeZY2OVDKQRcZKfd0/img.png)
1. ๋ฐ์ดํฐ ์๊ฐํ๋? ๋ง ๊ทธ๋๋ก ๋ฐ์ดํฐ๋ฅผ ์๊ฐํ ํ๋ค๋ ๊ฒ์ด๋ค. ์๋ฅผ ๋ค๋ฉด ์ฝ๋ก๋ ์ง์ญ๋ณ ํ์ง์ ์๋ฅผ ๋ณด์ฌ์ฃผ๋ ์ง๋๋ ๋์๋ณด๋ ์ ๋ต์งํ ์์คํ ๋ชจ๋ํฐ๋ง ๋ฑ ์ผ๋ฐ์ ์ธ ์ค๋ฌด์์ ์ฌ์ฉ๋๋ ๋ฐ์ดํฐ ์๊ฐํ๋ฅผ ๋ค ์ ์๋ค. ์คํฌ๋กค๋ง ์๊ฐํ์ ์คํ ๋ฆฌํ ๋ง๋ ๋ง์ด ์ฌ์ฉ๋๋ ์์ ์ค ํ๋์ด๋ค. ๊ทธ๋ผ ์ ๋ฐ์ดํฐ๋ฅผ ์๊ฐํ ํด์ผํ ๊น? ์๋ํ๋ฉด ์๊ฐํ๊ฐ ๋ฐ์ดํฐ์ ํํ๋ฅผ ๋ถ์ฌํ์ฌ ๋ฐ์ดํฐ๋ฅผ ํ ๋์ ํ์ ํ ์ ์๊ฒ ํด์ฃผ๊ธฐ ๋๋ฌธ์ด๋ค. ๋ฐ์ดํฐ์ ํจํด์ ๋น๊ตํ์ฌ ํฌ์ธํธ ๋ฑ์ ํ์ ํ ์ ์๊ณ , ์๊ฐํ๋ฅผ ํตํด ์ธ์ฌํธ๋ฅผ ์ป์ ์ ์๊ฒ ํ๊ธฐ ๋๋ฌธ์ด๋ค. ๊ทธ๋ผ ์ด๋ป๊ฒ ๋ง๋ค์ด์ผ ํ ๊น? ์ผ๋ฐ์ ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ๋ฐ์ดํฐ ์๊ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ง์ด ์๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ ์ค ์ฐ๋ฆฌ๊ฐ ์์ผ๋ก ๋ด๊ฐ ๊ณต๋ถํ ๋ด์ฉ์ D3.js ๋ฐ์ดํฐ ์๊ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๊ณ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bbhhZU/btr6x95AD7S/i4tY9nfsAKKCnibR3DwBkk/img.png)
1. Redux Redux๋ Prop Drilling ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋ฑ์ฅํ๋ค. ๊ทธ๋ ๋ค๋ฉด Context API์ ๋ฌด์์ด ๋ค๋ฅผ๊น? Context API๋ React์ ๋ด์ฅ API์ฌ์ ๋ฐ๋ก ์ค์น์์ด ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๋ฐ๋ฉด, Redux๋ Third Party ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์ค์น๊ฐ ํ์ํ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ฐ ํธ์๋ฅผ ์ํ ๋ฏธ๋ค์จ์ด ๊ธฐ๋ฅ๊ณผ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ฝ๊ฒ ํด์ฃผ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค. 2. ๋์ ๋ฐฉ์ Redux๋ Action์ด ๋ฐ์ํ๋ฉด Reducer๋ฅผ ํธ์ถํ๊ณ Reducer๋ฅผ ํตํด store์ ์ํ๋ฅผ ์ ์ฅํ๋ค. store๊ฐ ๋ณ๊ฒฝ๋๋ฉด ๋ค์ view๋ฅผ ๋ฆฌ๋ ๋๋งํ๋ค. Context API์ useReducer๋ฅผ ์ฌ์ฉํ ๊ฒ๊ณผ ์ ์ฌํ๋ค. 3. 3๊ฐ์ง ์์น ์ง์ค์ ํ๋์ ๊ทผ์์ผ๋ก๋ถํฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ชจ๋ ์ํ๋ ํ๋์ ์ ์ฅ์ ์์ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/DBUrY/btr6BBmFIBC/kL7K6xbVKvuB6taPGJXGD1/img.png)
์ปดํฌ๋ํธ ์ฌํ 1. ์ํคํ ์ฒ ์ํคํ ์ฒ๋ ์ฐ๋ฆฌ๊ฐ ์ผ์ ์ ํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ด๋ค. ๊ทธ๋ฌ๊ธฐ ์ํด์๋ ๋ชจ๋์ ๊ตฌํ๊ณผ ๋๋๋ ๋ฐฉ๋ฒ์ ์ ์ ํ๋ ๊ฒ์ด ํ์ํ๋ค. ๋ชจ๋์์ ์ค์ํ ๊ฒ์ ์์ง๋์ ๊ฒฐํฉ๋๋ค. 2. ์์ง๋ ๋ชจ๋ ๋ด์ ํฌํจ๋ ์์๋ค์ด ์๋ก ์ฐ๊ด๋์ด ์๋ ์ ๋๋ฅผ ๋ปํ๋ค. ์ฆ, ๋ชจ๋ ๋ด ๊ธฐ๋ฅ๋ค์ด ํ๋์ ์ฑ ์์ผ๋ก ์ ๋ญ์ณ ์๋์ง๋ฅผ ๋ํ๋ธ๋ค. ์์ง๋๊ฐ ๋์ ์๋ก ์ข์ ์ค๊ณ๋ผ๊ณ ํ ์ ์๋๋ฐ, ํ๋์ ์ฑ ์์ ์ง์คํ๊ณ ๋ ๋ฆฝ์ฑ์ ๋์ด๋ฉฐ ์ฐ๋ฆฌ๊ฐ ์์ ํ๊ธฐ ์ํ ์์๋ฅผ ๋น ๋ฅด๊ฒ ์ฐพ์ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค. ๊ณตํต ํ์ ์์น ๊ฐ์ ์ด์ ๋ก ๋์ผํ ์์ ์ ๋ณ๊ฒฝ๋๋ ๊ธฐ๋ฅ์ ํ๋์ ๋ชจ๋๋ก ๋ฌถ์ด์ผ ํ๋ค๋ ์์น ๊ฐ์ฒด์งํฅ์ ์์น์ธ ๋จ์ผ ์ฑ ์ ์์น์ ์ปดํฌ๋ํธ ๊ด์ ์ผ๋ก ๋ฐ๋ผ๋ณธ ๊ฒ ๊ณผํ๊ฒ ์ ์ฉํ๋ฉด ์ฌ์ฌ์ฉ์ฑ์ด ์ค์ด๋ค ์ ์์ ๊ณตํต ์ฌ์ฌ์ฉ ์์น ๋ชจ๋ ๋ด์ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cU0Pgi/btr6ssc4a1e/YRYKtwZad7wXvA0GSqEKD0/img.png)
์น ๋ณด์ ์น ์ฌ์ดํธ์ ์ทจ์ฝ์ ์ ๊ณต๊ฒฉํ๋ ๊ธฐ์ ์ ์ํ์ผ๋ก, ์น ํ์ด์ง๋ฅผ ํตํด ๊ถํ์ด ์๋ ์์คํ ์ ์ ๊ทผํ๊ฑฐ๋ ๋ฐ์ดํฐ ์ ์ถ ๋ฐ ํ๊ดด์ ๊ฐ์ ํ์๋ฅผ ๋งํ๋ค. ์น ๋ณด์ ๊ณต๊ฒฉ ๊ธฐ๋ฒ 1. SQL Injection ์๋ฒ์์ ์คํ๋๋ SQL์ ์ ์์ ์ผ๋ก ์ด์ฉํ๋ ๊ณต๊ฒฉ์ด๋ค. ๊ธฐ์กด SQL์ ์ ์์ ์ธ SQL์ ์ฝ์ ํ๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๋ฐ์ดํฐ ํ์ทจ๋ ์ญ์ ๋ฑ์ด ๊ฐ๋ฅํ๋ค. ๋ฐฉ์ด ๋ฐฉ๋ฒ SQL์์ ํน๋ณํ ์๋ฏธ๋ฅผ ๊ฐ์ง๋ ๋ฌธ์๋ฅผ ์ด์ค์ผ์ดํํ๋ค. \\n, \\t, |, /, &, # … ์ค๋น๋ ์ ์ธ์ ์ฌ์ฉํ๋ค. placeholder๋ฅผ ๋ด์ SQL์ ๋จผ์ DB์ ๋ณด๋ธ ํ placeholder์ ํด๋นํ๋ ์ ๋ ฅ ๊ฐ์ DB์ ๋ณด๋ด๋ ๋ฐฉ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ํ๋ ์์ํฌ์์ ๊ฑฐ์ 100% ๋ง์์ค๋ค. ์ฌํ ๊ณต๊ฒฉ Error based SQL ********..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ck8Fmk/btr6EVYJSGo/6nQqVYUkRxS57AtyyygsBk/img.png)
Context API ์ปดํฌ๋ํธ๋ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ์ด๋ฃจ์ด์ ธ ์๋ค. ๋ง์ฝ ์ต์์ ์ปดํฌ๋ํธ์์ ๊ฐ์ฅ ํ์ ์ปดํฌ๋ํธ๋ก prop์ ๋๊ธฐ๊ณ ์ถ๋ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น? ํ์ ์ปดํฌ๋ํธ๋ฅผ ์ฐพ์ ๋ ๊น์ง ๊ณ์ ๋๊ฒจ์ฃผ์ด์ผ ํ ๊ฒ์ด๋ค. ์ด๋ฐ ๊ฒฝ์ฐ๋ฅผ Prop Drilling์ด๋ผ๊ณ ํ๋ค. Context API๋ ์ด๋ฅผ ํด๊ฒฐํด์ค ์ ์๋ค. 1. ๊ตฌ์ฑ Context API๋ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํด์ค Context Provider์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ Context Consumer๊ฐ ์๋ค. ๋ฐ์ดํฐ๋ Context Provider๊ฐ ๊ด๋ฆฌํ๊ณ , Context Consumer๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ ์ฒ๋ฆฌ๋ง ํด์ฃผ๋ฉด ๋๋ค. ์ค๋์ ๋ง๋ฌด๋ฆฌ ํ๋ฉฐ ์ค๋์ ์ ์ญ ์ํ ๊ด๋ฆฌ๋ฅผ ํ ์ ์๋ ContextAPI์ ๋ํด์ ๊ณต๋ถ๋ฅผ ํ์๋ค. ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ณต๋ถํ ๋ ํญ์ ๋ฌธ์ ๊ฐ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cdFOxK/btrUsqJEJN0/KfunBNKJ0GnaqXT2gMExX0/img.png)
MVC๋? (Model - View - Controller) MVC๋ ์ํํธ์จ์ด ๋์์ธ ํจํด์ ๋๋ค. ์ฐ์ ์ํํธ์จ์ด ๋์์ธ ํจํด์ด๋ ๊ฐ๋ฐ ๋ฐฉ์์ ๊ณต์ํํ ๋ฐฉ๋ฒ๋ก ์ ๋งํฉ๋๋ค. ๊ณผ๊ฑฐ๋ถํฐ ์ง๊ธ๊น์ง ๊ฐ๋ฐํ๋ ๊ณผ์ ์์ ๋ฐ์ํ ๊ณตํต์ ์ธ ๋ฌธ์ ๋ค์ ํด๊ฒฐํ๋ ๋ฐฉ์์ด๋ผ๊ณ ์ฝ๊ฒ ์๊ฐํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋์์ธ ํจํด์ ์ ํ์ฉํ๋ฉด ๊ฐ๋ ์ฑ, ๊ฐ๊ฒฐ์ฑ ๊ทธ๋ฆฌ๊ณ ํ์ฅ๊ณผ ์ ์ง ๋ณด์๊ฐ ์ฉ์ดํ์ฌ ํจ์จ์ ์ธ ์์ค ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ๋์์ธํจํด์ ์ข ๋ฅ๋ ๋งค์ฐ ๋ค์ํฉ๋๋ค. ๊ทธ๋ ๋ค๋ฉด MVC์์ ์ ํ ๊ฐ๋ฐ ๋ฐฉ์์ ๊ณต์ํํ ๋ฐฉ๋ฒ์ ๋ฌด์์ผ๊น์? ์ฑ ๊ฐ๋ฐ์ ์ธ ๊ฐ์ ์์ญ์ผ๋ก ๋๋๊ณ ๊ฐ ์์์ ๊ณ ์ ํ ์ญํ ์ ๋ถ์ฌํ๋ ๋ฐฉ์์ ์๋ฏธํฉ๋๋ค. Model : Controller์๊ฒ ๋ฐ์ ์์ฒญ์ ๋ฐ๋ผ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค. ํด๋น ๋ฐ์ดํฐ๋ ๋ค์ Control..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dxPsUg/btrUmhADFf4/AjIeyZeVBHYJxQ0FS9YYs1/img.png)
์ค๋์ ๋ฆฌ์กํธ ๋ฐ๋ณต๋ฌธ๊ณผ ๋ฆฌ์กํธ ๋ผ์ดํ์ฌ์ดํด ๋ฉ์๋๋ค์ ๋ํด์ ๊ณต๋ถํ๋ค. ๋ฐ๋ธ์ฝ์ค๋ฅผ ํตํด์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๊ฒ๋ค์ ๋ฐฐ์ฐ๊ณ ๋ ์์ง๋ง ๊ธฐ๋ณธ์ ์ธ ๋ด์ฉ์ ์๊ณ ์ฌ์ฉํ๋๊ฒ ๊ต์ฅํ ์ค์ํ๋ค๊ณ ์๊ฐํ๊ธฐ ๋๋ฌธ์ ๋ณ๋๋ก ๊ณต๋ถ๋ฅผ ํ๋ ์๊ฐ๋ณด๋ค ์๊ฐ์ด ๋ถ์กฑใ ํ์ง๋ง ใ ใ ใ ๊ทธ๋๋ ์ ๋ ๋น ์ ธ์๋ ์๋๋ ๊ณผ์ ์ด๋ผ๊ณ ์๊ฐํ๋ค. ๊ธฐ๋ณธ์ ์ธ ๊ฐ๋ ๋ค์ ๋ํด์๋ ์ ๋ฆฌ๋ฅผ ํด๋ณด์๋ค. 2022.12.23 - [๐ Language & CS knowledge/React] - ์ปดํฌ๋ํธ ๋ฐ๋ณต ์ปดํฌ๋ํธ ๋ฐ๋ณต map( ) ํจ์์ ํ์ฉ map ํจ์๋ ํ๋ผ๋ฏธํฐ๋ก ์ ๋ฌ๋ ํจ์๋ฅผ ์ฌ์ฉํด์ ๋ฐฐ์ด ๋ด ๊ฐ ์์๋ฅผ ์ํ๋ ๊ท์น์ ๋ฐ๋ผ ๋ณํํ ํ ๊ทธ ๊ฒฐ๊ณผ๋ก ์๋ก์ด ๋ฐฐ์ด์ ์์ฑํด ๋ฐํํ๋ค. map( ) ํจ์์ ๋ฌธ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค. pinetree93.tistor..