์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

My Location - ionic3 ์™€ Google Map Api ๋ฅผ ํ™œ์šฉํ•œ ๋‚ด ์œ„์น˜ ์ •๋ณด ์ฐพ๊ธฐ

ionic์— ๋Œ€ํ•œ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด ์žˆ๋Š” ๊ฐœ๋ฐœ์ž ๋ฟ๋งŒ์•„๋‹ˆ๋ผ ์ „์ฒด์ ์ธ ionic project์˜ ๊ตฌ์„ฑ ๋ฐ ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•๋“ฑ์— ๋Œ€ํ•œ ์ „๋ฐ˜์ ์ธ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋ฏ€๋กœ ionic ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด ์—†๋Š” ์ดˆ๋ณด์ž๋“ค์—๊ฒŒ๋„ ๋งŽ์€ ๋„์›€์ด ๋˜๋Š” ionic3 ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค.

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Ionic 3 ํ”„๋กœ์ ํŠธ ํ™˜๊ฒฝ ์„ค์ •

  • Google Map API ์„ค์ • ๋ฐ ํ™œ์šฉ

  • ์ง€๋„์— ์ปค์Šคํ…€ ๋งˆ์ปค ํ‘œ์‹œ

1. ๊ฐ•์˜ ์†Œ๊ฐœ

ionic3 ์™€ google์—์„œ ์ œ๊ณตํ•˜๋Š” map api๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. app์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ฐœ๋ณ„์ ์ธ ๋ถ€๋ถ„๋“ค(component,module,function)์— ๋Œ€ํ•œ ์„ค๋ช…๋ณด๋‹ค๋Š” app ๊ฐœ๋ฐœ์— ๊ด€ํ•œ ์ „๋ฐ˜์ ์ธ ๋‚ด์šฉ ์ฆ‰, ๊ฐ๊ฐ์˜ component๋“ค์ด ์–ด๋–ป๊ฒŒ ๊ตฌ์„ฑ์ด ๋˜๊ณ , ์–ด๋–ค์‹์œผ๋กœ ์›ํ•˜๋Š” ์ •๋ณด๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ณ , ๋‚ด๋ณด๋‚ด๋Š”์ง€...  ๋“ฑ๋“ฑ, ์ •๋ณด์˜ ํ๋ฆ„์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ์„ค๋ช…ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰์ด ๋˜๋ฏ€๋กœ, ionic ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด ์žˆ๋Š” ์‚ฌ์šฉ์ž๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ฒ˜์Œ ionic์„ ์ ‘ํ•˜๋Š” ์ดˆ๋ณด์ž์—๊ฒŒ๋„ ionic project์˜ ๊ตฌ์„ฑ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ์ „๋ฐ˜์ ์œผ๋กœ ํŒŒ์•…ํ•˜๋Š”๋ฐ ๋„์›€์ด ๋˜๋ฆฌ๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

2. ๋„์›€์ด ๋˜๋Š” ๋ถ„๋“ค

์ด๋ฏธ ionic์— ๋Œ€ํ•œ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๋ฟ๋งŒ์•„๋‹ˆ๋ผ ์ „์ฒด์ ์ธ ionic project์˜ ๊ตฌ์„ฑ ๋ฐ ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•๋“ฑ์— ๋Œ€ํ•œ ์ „๋ฐ˜์ ์ธ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋ฏ€๋กœ ionic ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด ์—†๋Š” ์ดˆ๋ณด์ž๋“ค์—๊ฒŒ๋„ ๋งŽ์€ ๋„์›€์ด ๋ ๊ฒƒ์œผ๋กœ ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค.

3. ํ™˜๊ฒฝ

main feature

ionic 3 / Google Map APi  / ionic native Geolocation plugin / AlertController

๊ฐœ๋ฐœํ™˜๊ฒฝ

cli packages: (/usr/local/lib/node_modules) - @ionic/cli-utils  : 1.19.0 - ionic (Ionic CLI) : 3.19.0 global packages: - cordova (Cordova CLI) : 7.1.0 local packages: - @ionic/app-scripts : 3.1.4 - Cordova Platforms  : android 6.3.0 - Ionic Framework    : ionic-angular 3.9.2

System

ios-deploy : 1.9.2 Node       : v8.6.0 npm        : 5.5.1 OS         : macOS High Sierra Xcode      : Xcode 9.2 Build version 9C40b

 4. ์ง€์‹๊ณต์œ ์ž ์†Œ๊ฐœ


๊น€ ์ฒ ํ˜„ 

SDS LGAd ์‹ฌ๋งˆ๋‹ˆ(๊ฒ€์ƒ‰์—”์ง„) Mnet Media(ํ˜„ CJ E&M) ์„ ๊ฑฐ์ณ ํ˜„์žฌ ํ”„๋ฆฌ๋žœ์„œ/์ปจ์„คํ„ดํŠธ๋กœ ํ™œ๋™์ค‘

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • Ionic 3์— ๊ด€์‹ฌ ์žˆ๋Š” ๋ถ„

  • ์œ„์น˜ ๊ธฐ๋ฐ˜ ์„œ๋น„์Šค ๊ฐœ๋ฐœ์„ ์›ํ•˜๋Š” ๋ถ„

  • Google Map API๋ฅผ ํ™œ์šฉํ•˜๊ณ  ์‹ถ์€ ๋ถ„

์•ˆ๋…•ํ•˜์„ธ์š”
๊น€์ฒ ํ˜„์ž…๋‹ˆ๋‹ค.

2,057

๋ช…

์ˆ˜๊ฐ•์ƒ

44

๊ฐœ

์ˆ˜๊ฐ•ํ‰

25

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

3

๊ฐœ

๊ฐ•์˜

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

5๊ฐœ โˆ™ (26๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!

๋ฌด๋ฃŒ