๋ชฉ๋กTIL (83)
Bibi's DevLog ๐ค๐
์ค๋์ ๊ฑด๊ฐ๊ฒ์ง ๋ค๋ ์ค๊ณ ์ด๋ฐ ์๋ฐ๋ ํด์ผ ํ๋ค! ๋ณต์ต์ ์ต๋ํ ๋๋ด๊ณ ์ ๋ฆฌ๋ ํ๊ณ ๊ฐ์. ์ค๋ ํ ์ผ ์ด์ ์คํ๋ฅดํ(7-1์ฃผ์ฐจ) ์์ ๋ด์ฉ ๋ณต์ตํ๊ณ , ์๋ก ์๊ฒ ๋ ๋ด์ฉ ์ ๋ฆฌํ๊ธฐ TIL -๋ด aws ec2์๋ฒ์ mongoDB์ค์น, ์๋ฒ์์ ํ์ด์ฌ ํ๋ก๊ทธ๋จ ์คํ, ์ ์ ์์ ๋์ด๋ ํ๋ก๊ทธ๋จ ์คํํ๊ธฐ, ip์ฃผ์ ๋ค์ ํฌํธ๋ฒํธ ์์ ๊ธฐ. ๋ณต์ต์ ๋๋๊ณ ์ ๋ฆฌ๋ ๋ด์ผ ์ด์ด์ ํ๊ธฐ๋ก. ์ฌ์ค ์ ๋ฆฌํ ์๊ฐ์ ์นด์นด์ค ์ฑ์ฉ, ์ฝ๋ฉํ ์คํธ ๊ด๋ จ ๋ฌธ์๋ฅผ ๋ณด๋ ๋ฐ ์๊ฐ์ ์ผ๋ค. ใ -๋ด๊ฐ ๊ฐ๊ณ ์ถ์ ๊ธฐ์ ์ค ํ๋์ธ ์นด์นด์ค์์ ์ ์ ๊ฐ๋ฐ์ ์ฑ์ฉ์ ์์ํ๋ค. ํฌ๋ฃจ์ธํฐ๋ทฐ์ ์ฝ๋ฉํ ์คํธ ๊ธฐ์ถ๋ฌธ์ ๋ฅผ ๋ดค๋๋ฐ ๋ฌธ์ ๋ฅผ ์ดํดํ๋๊ฒ์กฐ์ฐจ ์ด๋ ต๋ค(ใ ใ ) ํํฐ๋์ด ๋ง์ํ์ ๋๋ก ํ์คํ ์ปดํจํฐ๊ณตํ, ์๊ณ ๋ฆฌ์ฆ, ์๋ฃ๊ตฌ์กฐ ๋ฑ์ ๋ํ ๊ณต๋ถ๊ฐ ํ์ํด ๋ง์ด ๋ฐฐ์ ๋ค๊ณ ์..
์์ ๊ฐ๊ธฐ ์ ๊น์ง ์ต๋ํ ๋ง์ด ํด๋์! ์ค๋ ํ ์ผ API ์์ฑ -์ผ์ ๊ฒ์API์์ฑ(๋๋ฒ๊น ) -์ผ์ ํธ์งAPI ๋ง๋ค๊ธฐ -๊ทธ์ธ API ์ค๊ณ, ๋ง๋ค๊ธฐ TIL ์ผ์ ์กฐํ API ์์์ผ, ์ข ๋ฃ์ผ๊ณผ ํจ๊ป ์์ผ์ด ํ์๋๋ฉด ์ข๊ฒ ์ด์ ์์ผ์ฐพ๋ ํจ์(show_day)๋ฅผ ์ผ์ ์กฐํAPI์ ์ ๋นํ ์ฝ์ , ์กฐ์ ํด๋ดค๋๋ฐ ์ ์ ๋๋ค. ใ ใ API ๋ค ๋ง๋ ๋ค์์ ๋ค์ ๊ตฌ๊ธ๋งํด์ ๋ง๋ค์ด์ผ๊ฒ ๋ค. ์ผ์ ๊ฒ์API -์ฌ์ ํ ๊ฒ์์ด๋ก ์๋ฒ์์ ์ ์ก๋ ๋๊ณ console์ฐฝ์๋ ์ฐํ๋๋ฐ ํ๋ก ํธ์๋์ ๊ฒฐ๊ณผ๊ฐ์ด card๋ก append๊ฐ ์ ๋๋ค. ใ ใ + ๋ณด์์ ๊ฒ์๊ฒฐ๊ณผ ์์ผ๋ฉด ์๋ค๊ณ ์ผ๋ฟ ๋์ฐ๊ธฐ ๊ฒ์๋๋ ์กฐ๊ฑด ์ธ๋ถํํ๊ธฐ-๊ตฌ๊ธ๋ง. '๋ฐฅ์ ๋จน๊ธฐ'์ผ์ -> '๋จน๊ธฐ'๋ง ๊ฒ์ํด๋ ๋์ค๊ฒ.. ์ผ์ ํธ์งAPI(Update)-post๋ฐฉ์. ๋ด๊ฐ ์๊ฐํ ์ผ์ ํธ์ง์ ์..
์ฝ๋ฉํ๋ ค๊ณ ์๋ฐ ํด๊ทผํ์๋ง์ ๋ฐฅ๋ ๋นจ๋ฆฌ ํด๋จน๊ณ ์๋ค. ์ด์ฌํ ํด์ผ์ง๐ช ์ค๋ ํ ์ผ!-> api ์์ฑํ๊ธฐ (์ต์ CRUD ์ ๋ถ, ๊ฐ๋ฅํ ๊ณํํ API์ ๋ถ)์์ผ๋ก ๋ง๋ค์ด์ผ ํ API : 3.์ผ์ ๊ฒ์ 4.์ผ์ ๋ณ๊ฒฝ 5. ์ผ์ ์ญ์ // (์์ ๊ธฐ๋ฅ ์์ฑ๋๋ฉด) 6. ์๋ฆผ์ ์ก(์นดํก/๋ฉ์ผ) 7.๋ ์จ์กฐํ-ํ๋ฒ ๋ฐฐ์๋ณธ ์ ์๋ ์ผ์ ์ญ์ , ๊ตฌํํ๊ธฐ ์ฌ์ด ์ผ์ ๊ฒ์ API ๋ฅผ ๋จผ์ ๋ง๋ค์ด์ผ๊ฒ ๋ค. TIL - ์ผ์ ์์ฑ api์ ์กฐ๊ฑด๋ฌธ์ ์ฌ์ฉํด 'ํ ์ผ(todo), ์์์ผ(start_date)'์ ๊ฐ์ด ์์ผ๋ฉด ์ ์ถ๋์ง ์๊ณ ์ผ๋ฟ์ ๋์ฐ๋๋ก ํ๋ค. - ๋ง์ API๋ฅผ ๋ง๋๋ ค๊ณ ๋ณด๋, API๋ฅผ ์ฌ์ฉํ ์ ์๋ ๋ฒํผ์กฐ์ฐจ ํ๋ก ํธ์๋์ ๋ง๋ค์ด๋์ง ์์๋ค..ใ ใ ใ ใ ๊ฒ์์ฐฝ๋ ๋ง์ฐฌ๊ฐ์ง. ๊ทธ๋์ ์ผ์ ํธ์ง, ์ญ์ ๋ฒํผ๊ณผ ๊ฒ์์ฐฝ์ ๋จผ์ ๋น ๋ฅด๊ฒ ๋ง๋ค๊ณ ..
์๋ฐํ๊ณ ์ฅ๋ณด๊ณ ๋ฐฅํด๋จน๋๋ผ ๋ฐ๋นด์ง๋ง ์๊ธฐ ์ ์ ์กฐ๊ธ์ด๋ผ๋ ์ง๊ธ ํ๊ณ ์์ผ๊ฒ ๋ค! ์ค๋ ํ ์ผ API ๋ง๋ค๊ธฐ - ์ผ์ ์กฐํ๊ธฐ๋ฅ(Read)๋ง๋ค๊ธฐ TIL ๋๋ฒ๊น 1. ํ์ด์ฌ-db์์ ์ ๋ณด ๊บผ๋ด์ฌ ๋ db.todo.find({},{}); ๊ตฌ๋ฌธ์ ๋ฐ๋์ list()๋ก ๊ฐ์ธ์. db์ ์ ๋ณด๊ฐ ํ ๋ ๊ฐ๋ ์๋๊ณ .. 2. ์๋ฐ์คํฌ๋ฆฝํธ-db์์ ajax๋ก ์ ๋ณด ๊บผ๋ด์ค๋ฉด ์ญ์ ์ฌ๋ฌ๊ฐ์ด๋ฏ๋ก '๊ฐ ์ ๋ณด๋ฅผ ํ๋์ฉ ์กฐํํ๋ฉด์ ํ๋ฉด์ ๋ณด์ฌ์ฃผ์ด์ผ'. ->for๋ฌธ ์ฌ์ฉํ์!! ๋น์ทํ ์ค์๋ฅผ ๋ฐ๋ณตํ๊ณ ์๋ค.. api 6,7๊ฐ ๋ง๋ค๋์ฏค์๋ ์ค์ ๋ ํ๊ธฐ!!! ๊นํ๋ธ ์ด๋ก๋ถ ์๋จ๋ ์ด์ github์ commit์ ํด๋ ์ด๋ก๋ถ์ด ์ ๋จ๊ธธ๋ ์ ๊ทธ๋ด๊น.. ํ๋๋ฐ ํ์์๊ฐ์ ํ์ฉํด ๊ตฌ๊ธ๋งํด๋ณด์๋ค. ์ด์ ๋ ์ด๋ฉ์ผ ๊ณ์ ์ ๋ฌธ์ ์๊ณ ๊ณ์ ์ ์์ ํ๋ ..
์ด์ ๋ ์ฝ์, ๊ธํ ์ผ(์ง ๊ตฌํ๋ ๋ฌธ์ ) ๋๋ฌธ์ TIL ํ์ด์ง๋ง ์ผ๋จ๋ค๊ฐ ๊ฐ๋ฐ์ ์์ ๋ชป๋๋ค.ใ ใ ์ด์ ๊ธํ ์ผ์ ํด๊ฒฐ๋์์ผ๋ ์๋ฐ ์ถ๊ทผ ์ ๊น์ง ๋ค์ ์ด์ฌํ!! ํ๋ค๊ฐ ์ฃผ๋ฏผ์ผํฐ ๊ฐ์ผ์ง. (์ง๋ ์์ - ๋ค์ ์์ ๊น์ง ํฌ๋๋ฆฌ์คํธ์ ์ง๋ฌธํผ๋๋ฐฑ) -api ํฐ ํ ๋ง๋ค๊ธฐ(์ด์ด์) -์ข ์ผ'๊ธฐ๋ฅ ๊ตฌํํ๊ธฐ(์๋ฐ์คํฌ๋ฆฝํธ) ์ข ์ผ : ์ฒดํฌ๋ฐ์ค์ ์จํด๋ฆญ ํจ์๋ก ๊ตฌํ. ์ฒดํฌ๋์ด์์ ๋ ์คํํ if๋ฌธ, ์ฒดํฌํด์ ๋์ด์์ ๋ ์คํํ else๋ฌธ์ผ๋ก ๊ตฌ์ฑํ๊ธฐ ๊ตฌ์ฒด์ ์ผ๋ก ์ด๋ป๊ฒ ์ฌ์ฉํ๋์ง๋ ๊ตฌ๊ธ๋ง! (์์ ) ๊ฐ๋ฐ์ผ์ง 1ํธ ์ด์ ์์ฑํ๊ธฐ! ์ค๋ ํ ์ผ -์ด์ (6-2)์์ ๋ด์ฉ ๋ณต์ตํ๊ธฐ -API ํ ๋ง๋ค๊ณ ํต์ ํ์ธํ๊ธฐ TIL -์คํ๋ฅดํ 6-2์์ ์๋ฃ ๋ณต์ต ์๋ฃ - ๋งํฌ๋ค์ดํํ ๋ฆฌ์ผ ํตํด ๋งํฌ๋ค์ด ์ธ์ด ๋ฐฐ์! https://www.markd..
์ค๋ ํ ์ผ-์๋ง์กด ์๋ฒ ์ ์, ๋ฆฌ๋ ์ค ๋ช ๋ น์ด ๋ณต์ตํด๋ณด๊ธฐ -form input๋ฐ์ค ์ด๊ณ ๋ซ๋ ๊ธฐ๋ฅ ์ถ๊ฐํ๊ธฐ -์คํ๋ฅดํ ์์ ๊ฐ๊ธฐ ์ ๊น์ง 30์ผ๋ฌ๋ ฅ, API ๋ง๋ค์ด๋ณด๊ธฐ TIL - ์๋ง์กด ์๋ฒ ์ ์, ๋ฆฌ๋ ์ค ๋ช ๋ น์ด ์ค์ต-> ๊ฐ์๊ธฐ ์๋ฒ ์ ์์ด ์ ๋์ด์, ํํฐ๋๊ป ์ง๋ฌธ์ ์ฌ๋ฆฌ๊ณ ๋ค๋ฅธ ํ ์ผ์ ๋จผ์ ํ๊ธฐ๋ก ํ๋ค. connection timed out ์ด๋ผ๋ ์๋ฌ์ธ๋ฐ, ์๋ฒ๋ ์ผ์ ธ์์๊ณ ํน์ ๋ชฐ๋ผ ์ฌ๋ถํ ๋ ํ๋๋ฐ ์ ์ ์์ด ์๋๋ ๊ฑด์ง ๋ชจ๋ฅด๊ฒ ๋ค.. ์์ ์๊ฐ์ ๋ฐฐ์ด ๊ทธ๋๋ก ๋ฐ๋ผํ๋๋ฐใ - input ์์ญ ์ ๊ณ ํด๊ธฐ : ์ ์ ๋ ๊น?-> ํผ์์ ํด๊ฒฐ! ํจ์ ๋ถ๋ถ์ ๋ซ๋ ๊ดํธ๋ฅผ ์๋ชป ์ ๋ ฅํ ์ค๋ฅ์๋ค. ์ด๊ณ ๋ซ๋ ํจ์๊ฐ ๋ฐ๋ก ์์ ๋ฌ๋ ฅํจ์์ ์ค์ฒฉ๋์ด ์์๋ค..- ๋ฒ๊ทธ ๋ฐ๊ฒฌ - ๊ฐ์๊ธฐ ์์ผ์ด ์ ๋๋ก ํ์๋์ง ์๋๋ค!์ค๋์ ..
์ค๋์ ๋ด ์์ผ! ๐ ์ด์ง๋ง ํ ์ผ์ด ๋ง์ ํ๋ก์ ํธ ๋ง๋ฌด๋ฆฌ์ง๊ณ ๋๊ธฐ๋ก ํ๋ค. ํ์ดํ ..! ์ค๋ ๋ชฉํ : ๋ฆ์ +์ ๋ ์๋ฐ ๋๋ฌธ์ ์ค๋์ ๊ณต๋ถ์๊ฐ์ด ๋ง์ง ์๋ค. ใ ใ - ์ด์ (์คํ๋ฅดํ 6-1์ฃผ์ฐจ) ์์ ๋ด์ฉ ๋ณต์ต! - ๊ฐ๋ฅํ๋ฉด 30์ผ ๋ฌ๋ ฅ ํจ์(์๋ฐ์คํฌ๋ฆฝํธ) ์๋ํด๋ณด๊ธฐ. ์ด์ ํํฐ๋์ ํผ๋๋ฐฑ - ํ๋ก ํธ์๋ ๊ตฌ์ฑ, ๋ ์ด์์ ์ข๋ค. - API๋ ์ค๊ณํ ๋๋ก ์งํํ๋ฉด ๋ ๋ฏ. (+์ฝ๊ฐ์ ์ฒจ์ญ) - DB๋ฐ์ดํฐ๋ฅผ ์ด๋ค ํํ๋ก ์ ์ฅํ ์ง๋ ํจ๊ป ์ค๊ณํ ๋ค ์ฝ๋ฉ์ ์์ํ๋ฉด ์ข์ ๊ฒ์ด๋ค. + API, DB ์ค๊ณํ ๋ ํ๊ธ๋ง ์ ์ง ๋ง๊ณ API๋ผ๋ฉด ๊ฐ๊ฐ์ ๋ณ์๋ช , DB๋ผ๋ฉด ๊ฐ๊ฐ์ ๋ฐ์ดํฐ๋ช ์ ์์ด๋ก ํจ๊ป ์ ์ผ๋ฉฐ ์ค๊ณํ๋ฉด ์ข๋ค. ์ฝ๋ฉ ์์ํ๊ณ ๋์ ๋ณ์๋ช ์ ์ง๊ณ ์์ผ๋ฉด ์๊ฐ๋ ๊ฑธ๋ฆฌ๊ณ ๋์ค์ ๋ณ์๋ช ์ด ๋ง์์ ธ์ ํท๊ฐ๋ฆฌ๊ธฐ๋ ํ๊ธฐ ๋๋ฌธ. - ..
์ด์ ์๋ฐํ๊ณ ๋ ธ๋๋ผ ๊ฐ๋ฐ๊ฐ๋ฐ์ ์์ ๋ชป๋์ผ๋ ์ค๋์ ๋ ์ด์ฌํ!! ์ด๋ฒ์ฃผ์ ๊ฐ๋ฐ๋ชฉํ 1.30์ผ ๋ ์ด์์ ๋ง๋ค๊ธฐ. ๋๋๋ก ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐ๋ณต๋ฌธ, ํจ์ ์ฌ์ฉํด์! 2.์์ input์์ญ ๋ง๋ค๊ธฐ. (๋ ์ง, ์๊ฐ) 3.app.py ์๋ฒํ์ผ ๋ง๋ค๊ณ api๋ง๋ค์ด ํด๋ผ์ด์ธํธ-์๋ฒ-DB ๊ตฌํํ๊ธฐ ์ค๋์ ์ฝ๋ฉ 1. 30์ผ ๋ ์ด์์ ๋ง๋ค๊ธฐ -ํํฐ๋์ด ๊ฒฝ๊ณ ํ๊ธด ํ์ง๋ง 30์ผ ๋ ์ด์์ (๋ฌ๋ ฅ ํํ) ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ํํํ๋ ๊ฒ ์๋นํ ํ๋ค๋ค.. '์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ'๋ก ๊ตฌ๊ธ๋งํ๋ฉด ๋ค์ํ ์์๊ฐ ๋์จ๋ค. ํผ์ ํ์ผ๋ก๋ ์ข ํ๋๋ ๋ด๊ฐ ๋ง๋ ํจ์์ ํํฐ์ ํผ๋๋ฐฑ์ ๋ฐ๊ฑฐ๋, ๊ทธ๋ฅ ๊ตฌ๊ธ๋งํด์ ์ฒ์๋ถํฐ ๋ฐ๋ผํด์ผ๊ฒ ๋ค. (htmlํ๊น์ง๋ ๋ง๋ค์๋ค) -30์ผ ๋ ์ด์์์ ํ ์ ๋๋น ๊ณ ์ ์ฑ๊ณต! ๋ก ๋ฐ๊พธ๊ณ css์์ table{ta..