์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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 |
- ๊นํ๋ธ
- tableau
- react
- ์๋ฐ์คํฌ๋ฆฝํธ
- ์ธ๊ณต์ง๋ฅ
- ํ๋ธ๋ฃจ
- Git
- ํ๋ธ๋ก
- erp
- ์ฝํ
- github
- ์๊ณ ๋ฆฌ์ฆ
- ๋น ๋ฐ์ดํฐ
- abap
- ์๋ง์กด์น์๋น์ค
- AWS
- DFS
- ๋ฐ์ดํฐ ๋ถ์
- ๋ฐ์ดํฐ๋ถ์
- ํ ์คํธ๋ง์ด๋
- ์ฝ๋ฉํ ์คํธ
- nlp
- ์์ฐ์ด์ฒ๋ฆฌ
- sap
- ๋ฅ๋ฌ๋
- ํ ์คํธ๋ถ์
- ๋ฆฌ์กํธ
- AI
- ํ์ด์ฌ
- ๋ฐฑ์ค
- Today
- Total
๋ชฉ๋กjavascript (5)
DATA101
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ciGUTs/btrGzt8SqMi/jxa5pybK0nDjVFoscKYrqK/img.png)
๐ ํ ์คํธ์ฉ ์ซ์ 100์กฐ๋ฅผ ์ค๋นํด ๋ดค์ต๋๋ค. let testNum = 100000000000000; ์ซ์ํ ๋ณ์๋ฅผ ์ฝ๋ ๋งจ ์์ ์ ๋ ฅํด ์ค๋๋ค. [Number].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') โ ์คํ ๊ฒฐ๊ณผ ์๋์ ๊ฐ์ด ์ ์์ ์ผ๋ก ์ฝค๋ง๋ฅผ ๋ถ์ฌ์ค ๊ฒ์ ํ์ธํ์ค ์ ์์ต๋๋ค. ํฌ์คํ ๋ด์ฉ์ ์ค๋ฅ๊ฐ ์์ ๊ฒฝ์ฐ ๋๊ธ ๋จ๊ฒจ์ฃผ์๋ฉด ๊ฐ์ฌ๋๋ฆฌ๊ฒ ์ต๋๋ค. ๊ทธ๋ผ ์ค๋๋ ํ๋ณตํ ํ๋ฃจ ๋ณด๋ด์๊ธธ ๋ฐ๋๋๋ค๐ ๊ณ ๋ง์ต๋๋ค.
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bAA3sM/btrGfxRktBg/XBKmNfKnkIvOMsXQ0XrpO1/img.png)
โ๏ธ์๋ฌ ์ํฉ return์์ ์๋์ ๊ฐ์ด ์ฝ๋ ์์ฑ ํ ์คํ ์ ์๋ฌ ๋ฐ์ return ( {function} ) ๐์๋ฌ ๋ฉ์์ง Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. โ ํด๊ฒฐ์ฑ ๋ค์๊ณผ ๊ฐ์ด ํจ์๋ช ๋ค์ ๊ดํธ ๋ถ์ฌ์ฃผ๋ฉด ํด๊ฒฐ๋ฉ๋๋ค. return ( {function()} ) ํฌ์คํ ๋ด์ฉ์ ์ค๋ฅ๊ฐ ์๋ค๋ฉด ์๋์ ๋๊ธ ๋จ๊ฒจ์ฃผ์ธ์. ๊ทธ๋ผ ์ค๋๋ ์ฆ๊ฑฐ์ด ํ๋ฃจ ๋ณด๋ด์๊ธธ ๋ฐ๋๋๋ค :) ๊ณ ๋ง์ต๋๋ค๐
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/elCPJ1/btrGcVDs4i1/KbaKKF1KRf3RdaUac4NXoK/img.png)
Step 1. ๋๋ ํ ๋ฆฌ ์ ๊ทผ ํฐ๋ฏธ๋์ ํตํด package-lock.json๊ณผ node_modules ํด๋๊ฐ ์์นํ ๋๋ ํ ๋ฆฌ๋ก ์ด๋ํฉ๋๋ค. Step 2. package-lock.json ์ญ์ rm -rf package-lock.json Step 3. node_modules ์ญ์ rm -rf node_modules Step 4. npm ๋ชจ๋ ์ฌ์ค์น npm install ํฌ์คํ ๋ด์ฉ์ ์ค๋ฅ๊ฐ ์๋ค๋ฉด ์๋์ ๋๊ธ ๋จ๊ฒจ์ฃผ์ธ์. ๊ทธ๋ผ ์ค๋๋ ์ฆ๊ฑฐ์ด ํ๋ฃจ ๋ณด๋ด์๊ธธ ๋ฐ๋๋๋ค :) ๊ณ ๋ง์ต๋๋ค๐
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/IZFME/btrD8jBy2e0/xkfsn1MzpUcJjMeeXcd0c1/img.png)
๐ ์๋ฆฌ์ฆ ํฌ์คํ 1. ํ์ผ ์ ๋ก๋ ์น ํ์ด์ง ๊ตฌ์ถ: (1) React ๊ธฐ๋ฐ Frontend ๊ฐ๋ฐ 2. ํ์ผ ์ ๋ก๋ ์น ํ์ด์ง ๊ตฌ์ถ: (2) AWS IAM ์ญํ ์์ฑ 3. ํ์ผ ์ ๋ก๋ ์น ํ์ด์ง ๊ตฌ์ถ: (3) AWS Lambda ์์ฑ 4. ํ์ผ ์ ๋ก๋ ์น ํ์ด์ง ๊ตฌ์ถ: (4) AWS S3 ์์ฑ 5. ํ์ผ ์ ๋ก๋ ์น ํ์ด์ง ๊ตฌ์ถ: (5) AWS API Gateway ์์ฑ 6. ํ์ผ ์ ๋ก๋ ์น ํ์ด์ง ๊ตฌ์ถ: (6) AWS Lambda ํจ์ ์์ฑ 7. ํ์ผ ์ ๋ก๋ ์น ํ์ด์ง ๊ตฌ์ถ: (7) Axios ๊ธฐ๋ฐ API Call 8. ํ์ผ ์ ๋ก๋ ์น ํ์ด์ง ๊ตฌ์ถ: (8) ํ์ผ ์ ๋ก๋ ํ ์คํธ 9. ํ์ผ ์ ๋ก๋ ์น ํ์ด์ง ๊ตฌ์ถ: (9) AWS S3 ๊ธฐ๋ฐ ์น ํธ์คํ ๐จ๐ป ๋ค์ด๊ฐ๋ฉฐ ๋ณธ ํฌ์คํ ์์๋ React๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์ผ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bKmmEN/btrpP2MGMGB/2ym31xzQIuxjomH1SfHkFk/img.png)
์๋ฌ ์ํฉ React ๊ธฐ๋ฐ ํ๋ฉด UI ๊ตฌํ ์ค ์๋ ์๋ฌ ๋ฉ์์ง ํ์ธ ์๋ฌ ๋ฉ์์ง JSX expressions must have one parent element. ์๋ฌ ์์ธ - JSX ๋ฌธ๋ฒ์์ Component๊ฐ ์ฌ๋ฌ ๊ฐ ์๋ค๋ฉด ๋ฐ๋์ parent element๋ก ๊ฐ์ธ์ผ ํ๋๋ฐ ๊ทธ๋ ์ง ์์์ ๋ฐ์ํ ์ด์ - Component ๋ด๋ถ๋ ํ๋์ DOM Tree ๊ตฌ์กฐ๋ก ์ด๋ฃจ์ด์ ธ์ผ ํ๋ค๋ ๊ท์น์ ๋ฐ๋ผ์ผ ํจ ํด๊ฒฐ์ฑ ๊ฐ๋จํ๊ฒ div ํ๊ทธ ๋๋ fragment ํ๊ทธ ๋๋ ์ค๊ดํธ{}๋ก ์ฌ๋ฌ Component๋ฅผ ๊ฐ์ธ๋ parent element๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝ๊ฒ ํด๊ฒฐ ๊ฐ๋ฅ ํด๊ฒฐ์ฑ ์์1: div ํ๊ทธ ... ํด๊ฒฐ์ฑ ์์2: fragment ํ๊ทธ ... ํด๊ฒฐ์ฑ ์์3: ํ๊ทธ๋ช ์๋ต๊ฐ๋ฅ ... ํฌ์คํ ๋ด์ฉ์ ์ค๋ฅ๊ฐ ์๋ค๋ฉด ์..