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

๋ชฉ๋ก์ปดํ“จํ„ฐ๊ณตํ•™ (14)

๐Ÿ’ป๐Ÿ’ญ๐ŸŽง๐ŸŒ

[์›น ๊ฐœ๋ฐœ ํ”„๋กœ์ ํŠธ] 7. ์Šคํ”„๋ง aws ec2 ๋ฐฐํฌ

#mood ์›๋ž˜ ๊ณ„ํš์€ aws ํ”„๋ฆฌํ‹ฐ์–ด๋„ ์–ผ๋งˆ ์•ˆ๋‚จ์•˜์„ํ…๋ฐ ๊ทธ๋ƒฅ ํ”„๋ก ํŠธ ์ชฝ์—์„œ ์Šคํ”„๋ง application ๋Ÿฐํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š”๊ฑธ๋ฃจ ํ•˜์ž.. ํ–ˆ๋Š”๋ฐ ์—ญ์‹œ๋‚˜ ์‰ฌ์šด ์ผ์ด ์•„๋‹ˆ์—ˆ๋‹ค. ์–ด์ฉŒ๋ฉด ๊ฑ ๋ฐฐํฌ ํ•œ๋ฒˆ ๋”ฑ ํ•ด๋†“๋Š”๊ฒŒ ์˜ค๋žซ๋™์•ˆ ํž˜๋“ค์ง„ ์•Š์„ ๊ฒƒ ๊ฐ™๋‹ค...! ๊ทธ๋ž˜์„œ ๊ทธ๋ƒฅ ๋ฐฐํฌ๋ฅผ ํ•˜๊ฒŒ ๋๋‹ค ํ”„๋ก ํŠธ์—”๋“œ๋กœ ๋ฆฌ์•กํŠธ ์ฝ”๋“œ๋Š” ์ด๋ฏธ ec2์— ๋ฐฐํฌํ•ด๋ณธ ๊ฒฝํ—˜์ด ์žˆ์œผ๋ฏ€๋กœ ๋Œ€์ถฉ ๋น„์Šทํ•˜๊ฒ ์ง€ ํ•˜๊ณ  ์‹œ์ž‘! ๊ทผ๋ฐ ๋ฐ”๋กœ ์ด์Šˆ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. ๋ฆฌ์•กํŠธ๋กœ ๊ฐœ๋ฐœ์„ ํ•  ๋• ๋ณด์•ˆ ์„ค์ •์ด ๋งŽ์ด ์—†๋‹ค๋ณด๋‹ˆ ๊ฑฐ์˜ ๋‹ค ๊นƒํ—ˆ๋ธŒ์— ๋ฐ”๋กœ ํ‘ธ์‹œ๋ฅผ ํ–ˆ์—ˆ๊ณ  gitignore ํ–ˆ๋˜ node_modules ๋งˆ์ €๋„ ๊ทธ๋ƒฅ npm installํ•˜๋ฉด ๋ฐ”๋กœ ์ƒ์„ฑ๋˜๋˜ ๊ฒƒ๋“ค์ด์—ˆ๋Š”๋ฐ, ์Šคํ”„๋ง์€ ์ผ๋‹จ gitignore ํ•ด๋‘”๊ฒŒ ๋งŽ์•˜๊ณ  ๊นƒํ—ˆ๋ธŒ ํด๋ก ํ•ด์„œ ์› ์ƒํƒœ๋กœ ๋ณต๊ตฌ์‹œํ‚ฌ ์ˆ˜๋„ (npm install ์ฒ˜๋Ÿผ..

[React Native] 03-5 ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ

FlatList ์ฝ”์–ด ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉํ•˜๊ธฐ ๋˜‘๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ ๋ Œ๋”๋งํ•  ๋•Œ๋Š” FlatList๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์†๋„๊ฐ€ ๋น ๋ฅด๋‹ค. import {FlatList} from 'react-native' keyExtractor ์†์„ฑ item๊ณผ index ๊ฐ’์ด ๋งค๊ฐœ๋ณ€์ˆ˜์ธ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์ง€์ •ํ•ด renderItem์— ์„ค์ •ํ•œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๊ฐ€ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์˜ key ์†์„ฑ์— ์„ค์ •ํ•  ๊ฐ’์„ ์–ป์Œ } keyExtractor={(item, index) => item.id} /> โœ… ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜๋ช…์ด ์—†์–ด๋„ ๋จ โœ… id ๊ฐ™์€ ์†์„ฑ์ด ์—†๋‹ค๋ฉด index.toString()์„ ๋ฐ˜ํ™˜ํ•ด๋„ ๋จ ItemSeparatorComponent ์†์„ฑ ์ด ์†์„ฑ์— ์„ค์ •ํ•œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๊ฐ€ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์•„์ดํ…œ๊ณผ ์•„์ดํ…œ ๊ฐ„์˜ ๊ตฌ๋ถ„์ž ์—ญํ• ์„ ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ..