์นดํ…Œ๊ณ ๋ฆฌ ์—†์Œ

๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ_ํšŒ๊ณ 

ehddkDEV 2024. 8. 29. 16:57

๐Ÿ“Œํ”„๋กœ์ ํŠธ ๊ฐœ์š”

์˜ค๋ฆ„์บ ํ”„ ๋‚ด ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„์— ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๊ธฐ๊ฐ„์€ ์ด 2024.08.20~ 2024.08.27 ์ด 7์ผ๊ฐ„ ์ง„ํ–‰๋˜์—ˆ๊ณ , ๊ณต๊ณต API๋ฅผ ํ™œ์šฉํ•œ ๋ฏธ๋‹ˆ ์•ฑ์„ ๊ตฌํ˜„ํ•ด๋ณด๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ์˜€์Šต๋‹ˆ๋‹ค.

์ „ ํŒ€์žฅ์„ ๋งก์•„ ์ด๊ด„ ๊ด€๋ฆฌ ๋ฐ localstorage ์—ฐ๊ฒฐ ๋ฐ ๋‚ ์”จ ์˜์—ญ ๋งˆํฌ์—… ๋ฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

 

๐Ÿ“Œํ”„๋กœ์ ํŠธ ๋ชฉํ‘œ

1. ์˜ค๋Š˜์˜ ๋‚ ์”จ, ์˜ค๋Š˜์˜ ํ•  ์ผ, ์˜ค๋Š˜์˜ ์ถ”์ฒœ ์˜ํ™”๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ธฐ๋Šฅ ๋งŒ๋“ค์–ด ๋ณด๊ธฐ

2. git ์‚ฌ์šฉ์œผ๋กœ ํšจ์œจ์ ์ธ ํ˜‘์—…ํ•˜๊ธฐ

3.  API ํŒจ์นญ์„ ํ•˜๋ฉด์„œ ํ™”๋ฉด์— ๋ฐ์ดํ„ฐ ํ‘œ์‹œํ•˜๊ธฐ

4.  ๋ฐ˜์‘ํ˜• ์ตํžˆ๊ธฐ

5. Scrum ๋ฐฉ์‹ ์—…๋ฌด๋ฅผ ํ† ๋Œ€๋กœ ์ง‘์ค‘์ ์œผ๋กœ ๊ฐœ๋ฐœ ์ž‘์—…ํ•˜๊ธฐ

 

๐Ÿ“Œ๊ธฐ์ˆ  ์Šคํƒ

HTML,CSS,JS, Typescript, VITE

ํ”„๋ ˆ์ž„์›Œํฌ ์—†์ด ์˜ค์ง ๋ฐ”๋‹๋ผ ์Šคํฌ๋ฆฝํŠธ๋กœ ์ง„ํ–‰ํ•˜๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ๋ผ์„œ ์œ„ ์Šคํƒ์„ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.

 

๐Ÿ“Œํˆด

   Git

   ํšจ์œจ์ ์ธ ์ฝ”๋“œ ๊ด€๋ฆฌ ๋ฐ ๊ณต์œ ๋ฅผ ์œ„ํ•ด Github๋ฅผ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.

     https://github.com/ehddk/mini_project

   

   POSTMAN

   API ๊ด€๋ จ ์‘๋‹ต ๋ฐ ์š”์ฒญ์„  POSTMAN์œผ๋กœ ๋ฐ”๋กœ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

   

  

 

๐Ÿ“Œ๊ตฌํ˜„ ๊ธฐ๋Šฅ

  • ๋‚ ์”จ ์˜์—ญ

        1.  ๋งˆํฌ์—…  (๋””์ž์ธ,๋กœ๋”ฉ์ฒ˜๋ฆฌ)

             - ๋‚ ์”จ ์ •๋ณด(์˜จ๋„,์Šต๋„,๊ฐ•์ˆ˜๋Ÿ‰,ํ’์†,๋ฏธ์„ธ๋จผ์ง€) ์ œ๊ณต

        2. OpenweatherAPI , ๊ณต๊ณต๋ฐ์ดํ„ฐ์—์„œ ์ œ๊ณตํ•˜๋Š” API๋ฅผ fetchํ•˜์—ฌ DOM์— ์ ์šฉ.

            - ์‚ฌ์šฉ์ž ์œ„์น˜ ๊ธฐ๋ฐ˜์œผ๋กœ ์ œ๊ณต

        

  • ํ• ์ผ ์˜์—ญ

        1. localstorage์— ํ•  ์ผ ๋“ฑ๋ก/์‚ญ์ œ 

        2. home์— ๋“ฑ๋กํ•œ ํ•  ์ผ ๋‚˜์˜ค๋„๋ก ๋งค์นญ

 

   

๊ฒฐ๊ณผ๋ฌผ(๋ชจ๋ฐ”์ผ)

๐Ÿ“Œ ํšŒ๊ณ 

  • Keep( ์ข‹์•˜๋˜ ์ )

       ๋ฐฉํ–ฅ์„ฑ ์ œ์‹œ       

      ํŒ€์žฅ์œผ๋กœ์จ ์ค‘๊ฐ„ ํšŒ์˜ ๋ฐ ์ง„ํ–‰ ์ฒดํฌ๋ฅผ  ์ฃผ๋„ํ•จ์œผ๋กœ์จ ํšจ์œจ ๋ฐ ๋น ๋ฅธ ๊ฐœ๋ฐœ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

       API ์‚ฌ์šฉ

      ์ง์ ‘ API๋ฅผ ํ˜ธ์ถœํ•ด ์„œ๋น„์Šคํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•ด๋ณด๋ฉด์„œ fetch ๊ณผ์ •๊นŒ์ง€ ํ•ด๋ณผ ์ˆ˜ ์žˆ์–ด์„œ  ์žฌ๋ฐŒ์—ˆ์Šต๋‹ˆ๋‹ค.

      

      Postman ์‚ฌ์šฉ

      ํ•ด๋‹น API๊ฐ€ ์ž˜ ์š”์ฒญ,์‘๋‹ต๋˜๋Š”์ง€ Postman์„ ํ†ตํ•ด ํ™•์ธํ•จ์œผ๋กœ์จ ์š”์ฒญ parameter๋„ ์‰ฝ๊ฒŒ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

      

 

  • Problem( ์•„์‰ฌ์šด ์ )

       ๋ฆฌํŽ™ํ† ๋ง ๋ถ€์กฑ

       ๋‚ ์”จ API์—์„œ๋„ ์ค‘๋ณต๋˜์„œ ์“ฐ์ด๋Š” ์ฝ”๋“œ๊ฐ€ ๋งŽ์•„์„œ ์ด๋ฅผ ์ข€ ๊ณตํ†ต์œผ๋กœ ๋ฌถ๊ฑฐ๋‚˜ ๋ชจ๋“ˆํ™”ํ•  ์ˆ˜๋Š” ์—†์„๊นŒ ๋ผ๋Š” ๊ณ ๋ฏผ์ด 

       ๋งŽ์•˜์Šต๋‹ˆ๋‹ค.  ๋ฐœํ‘œ ์ „ ํ”„๋กœ์ ํŠธ ์ง„ํ–‰์„ ๋งˆ๋ฌด๋ฆฌํ• ์ฏ”์Œ์— ๊ฐ•์‚ฌ๋‹˜์œผ๋กœ๋ถ€ํ„ฐ ์กฐ์–ธ์„ ๋ฐ›์•˜๊ธฐ์— ์ฐจ์ฐจ ๋ฆฌํŽ™ํ† ๋ง ํ•ด๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค! 

      

       git ์„ธ๋ถ€ ๊ธฐ๋Šฅ ์‚ฌ์šฉ

       ์–ด๋–ค ์ž‘์—…์„ ํ•˜๋‚˜์”ฉ ์ˆ˜ํ–‰ํ•ด์•ผํ• ์ง€๋ฅผ  issue ๊ด€๋ฆฌ๋กœ ํ•จ์œผ๋กœ์จ ์ง„ํ–‰์ƒํ™ฉ์„ ์ข€ ๋” ๊ธฐ๋ก ๋ฐ ๋ฌธ์„œํ™”์‹œํ‚ฌ ์ˆ˜ ์žˆ์—ˆ๋˜ ์ ์„ ๋†“์ณ์„œ

       ์•„์‰ฌ์› ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ฒˆ ๊ธฐํšŒ์— push,pull,merge๋ฅผ ๋‹ค๋ฃธ์œผ๋กœ์จ ํšจ์œจ์ ์ธ ์ฝ”๋“œ ๊ณต์œ ๊ฐ€ ๊ฐ€๋Šฅํ–ˆ๊ณ  git์˜ ์žฅ์ ์„

        ์ฒด๊ฐํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.        

  • Try( ์‹œ๋„ํ•  ์ )

        API ํ˜ธ์ถœ ๊ด€๋ จ ๋ฆฌํŒฉํ† ๋ง

        ํ•œ ํŽ˜์ด์ง€์— ๋‚ ์”จ API๋ฅผ  2๊ฐœ์ด์ƒ ๋ถˆ๋Ÿฌ์˜ค๋ฉด์„œ  ๋ฐ›์•„์˜ค๋Š” ์†๋„๊ฐ€ ๋А๋ ค์„œ ๋กœ๋”ฉํŽ˜์ด์ง€๊ฐ€ ๋‚˜์˜ค๋„๋ก ๊ตฌํ˜„์„ ํ–ˆ์ง€๋งŒ 

        ์ข€ ๋” ๋น ๋ฅธ ์†๋„๋กœ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์œ„ํ•ด promise.all๋กœ ๋ฆฌํŒฉํ† ๋ง์„ ํ•ด๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

 

        ์ฝ”๋“œ ๋ชจ๋“ˆํ™”

        ํ˜„์žฌ๋Š” ๋”ฐ๋กœ ๋ชจ๋“ˆํ™”ํ•˜์ง€ ์•Š๊ณ  ํ•œ ํŒŒ์ผ์— ์—ฌ๋Ÿฌ ํ•จ์ˆ˜๋‚˜ ์ธ์Šคํ„ด์Šค๋ฅผ ๋‚˜์—ดํ–ˆ์ง€๋งŒ, ๊ณตํ†ต ์—ญํ• ์„ ํ•˜๊ณ  ์žˆ๋Š” ๋ถ€๋ถ„์„ ๋”ฐ๋กœ ๋ชจ๋“ˆํ™”ํ•ด์„œ

        ๊ด€๋ฆฌํ•  ๊ฒƒ ์ž…๋‹ˆ๋‹ค.

       

 


       ์ฒซ ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉด์„œ ํŒ€์›๋“ค๊ณผ ์†Œํ†ต,๊ณต์œ ๊ฐ€ ๋งค์šฐ ์ค‘์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ๊นจ๋‹ฌ์•˜๋˜ ๊ฒƒ ๊ฐ™์•„์š”!

       ์„œ๋กœ ์–ด๋А ๋ถ€๋ถ„์ด ๋ง‰ํžˆ๋Š”์ง€ ๋ฐ”๋กœ ๊ณต์œ ํ•ด์•ผ ๋”œ๋ ˆ์ด๋„ ์•ˆ์ƒ๊ธฐ๊ณ  ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ ๋ฒ”์œ„์—์„œ๋„ ์„œ๋กœ ์กฐ์œจํ•˜๋ฉด์„œ ํ• ์ˆ˜๋ก ๋” ์ข‹์€

       ํ€„๋ฆฌํ‹ฐ์˜  ์ž‘์—…๋ฌผ์ด ๋‚˜์˜ค๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค :ใ…‡

       ํŒ€์›๋ถ„๋“ค์ด ๋„ˆ๋ฌด ๋‹ค ์ข‹์•„์„œ ์งง์ง€๋งŒ ์žฌ๋ฏธ์žˆ๊ฒŒ ํ”„๋กœ์ ํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋˜๊ฑฐ์— ํ–‰์šด์ด์—ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ๐Ÿ€