๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋กjavascript (5)

DATA101

ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (1) React ๊ธฐ๋ฐ˜ Frontend ๊ฐœ๋ฐœ

๐Ÿ“Œ ์‹œ๋ฆฌ์ฆˆ ํฌ์ŠคํŒ… 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๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํŒŒ์ผ..

[์—๋Ÿฌ ํ•ด๊ฒฐ] JSX expressions must have one parent element.

์—๋Ÿฌ ์ƒํ™ฉ 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: ํƒœ๊ทธ๋ช… ์ƒ๋žต๊ฐ€๋Šฅ ... ํฌ์ŠคํŒ… ๋‚ด์šฉ์— ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋‹ค๋ฉด ์•„..

SW ๊ฐœ๋ฐœ/React JS 2022. 1. 5. 09:35