๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿคธ‍โ™‚๏ธ Project Deep-Dive/๐Ÿ’ŽAOAS ํŒ€ํ”„๋กœ์ ํŠธ ๋‹ค์ด์–ด๋ฆฌ

[ํ•ญํ•ด์ผ์ง€ ๋ฒ„์ „์—… ํ”„๋กœ์ ํŠธ] ์—ด์‹ฌํžˆ HEROWS ์›น์„œ๋น„์Šค ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ค‘(github, ๊ธฐ๋Šฅ๋ช…์„ธ์„œ, git commit, frontend, html/css/javascript, bootstrap)

728x90
๋ฐ˜์‘ํ˜•

์กฐ์šฉํ•˜๋˜ ๋‚˜์˜ github, 4๋…„๋งŒ์— ๋‹ค์‹œ ๊บผ๋‚ด๋“ค๋‹ค

2016๋…„ ๋ฉ‹์Ÿ์ด ์‚ฌ์ž์ฒ˜๋Ÿผ ํ™œ๋™ ์ดํ›„๋กœ ์ƒˆํ•˜์–—๋˜ github์— ๋‚ด commit log๋“ค์ด ์ฐจ๊ณก์ฐจ๊ณก ๋‹ค์‹œ ์Œ“์ด๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ๋ณธ๊ฒฉ์ ์œผ๋กœ ๋งค์ผ๋งค์ผ ์„œ๋น„์Šค ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ๋‹ค. ์ง€๋‚œ ํ•ด์ปคํ†ค๊ณผ ๋‹ค๋ฅด๊ฒŒ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ๋‚˜๋„ figma ๋””์ž์ธ ๋‹ค์Œ ๋‹จ๊ณ„์—์„œ, ๊ฐœ๋ฐœ์„ ํ•จ๊ป˜ํ•˜๊ณ ์ž ๊ทธ๊ฐ„ ์ฝ”๋”ฉ ๊ณต๋ถ€๋ฅผ ํ•ด์˜ค๊ณ  ์žˆ์—ˆ๋‹ค. ๊ฒฐ๋ก ๋ถ€ํ„ฐ ๋งํ•˜์ž๋ฉด ๊ทธ๋ฆฌํ•˜์—ฌ ํ˜„์žฌ, ์˜์ฐจ์˜์ฐจ ๋‹ค์‹œ ๋ฐ”๋‹ฅ๋ถ€ํ„ฐ ๊ณต๋ถ€ํ•ด์„œ ํ”„๋ก ํŠธ์—”๋“œ ์—ด์ผ์ค‘์ด๋‹ค.

 

์ปค๋ฐ‹ ์ผ๋“ฑ~~! ์‚ฝ์งˆ๋งŒํผ commit๋„ ๋งŽ์ด ํ–ˆ๋‹ค

๊นƒํ—™์—์„œ ์šฐ๋ฆฌํŒ€์˜ repositorty๋ฅผ ๋งŒ๋“ค๊ณ , git clone์„ ํ•œ ๋’ค terminal์„ ์ด์šฉํ•ด git push๋ฅผ ํ•˜๊ณ  ์žˆ๋‹ค. 

 

git push/pull ํ•˜๋Š” ๋ฐฉ๋ฒ•

git status
git add *
git commit -m ""
git push origin master
/
git pull origin master

 


 

๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๋ฒ ์ด์Šค, ๊ธฐ๋Šฅ๋ช…์„ธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๋‹ค.

ํ•จ๊ป˜ ๊ฐœ๋ฐœ ์—…๋ฌด๋ฅผ ๋ถ„๋‹ดํ•˜๊ณ  ๋ณด๋‹ค ์ฒด๊ณ„์ ์œผ๋กœ ์ง„ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด, ์šฐ๋ฆฌ๋Š” ๊ธฐ๋Šฅ๋ช…์„ธ์„œ๋ฅผ ๋‹ค์‹œ ์ •๋ฆฌํ•˜๊ณ  ์ž‘์„ฑํ–ˆ๋‹ค. ์ผ์ „์— ์Šคํ† ๋ฆฌ๋ณด๋“œ์— ๊ฐ„low-fi ์™€์ด์–ดํ”„๋ ˆ์ž„๊ณผ ํ•จ๊ป˜ ์ž‘์„ฑํ•ด๋‘์—ˆ๋˜ ๊ธฐ๋Šฅ๋ช…์„ธ๋ฅผ ๋ณด๋‹ค ๊ฐœ๋ฐœ ์ž‘์—…์— ์šฉ์ดํ•˜๋„๋ก ๋”ฐ๋กœ ์—‘์…€์— ์ •๋ฆฌํ•˜์—ฌ, ๋ถ„์—… ๋ฐ ๊ฒฝ๊ณผ ๋ณด๊ณ  ํ™•์ธ์„ ํ•˜๊ณ ์ž ํ–ˆ๋‹ค.   

2020.08.07์— ์ž‘์„ฑ๋œ Storyboard v2.0.0

์œ„์™€ ๊ฐ™์€ ํ˜•ํƒœ๋กœ ๊ฐ๊ฐ์˜ ํŽ˜์ด์ง€๋ณ„๋กœ ์ •๋ฆฌํ•ด๋’€๋˜ ์Šคํ† ๋ฆฌ๋ณด๋“œ์˜ DescriptionํŒŒํŠธ๋ฅผ ๋‹ค์‹œ ๊ตฌ๊ธ€ ๊ณต์œ  ์—‘์…€ ์‹œํŠธ๋กœ ์˜ฎ๊ฒจ ์ •๋ฆฌํ–ˆ๋‹ค.

"์š”๊ตฌ์‚ฌํ•ญ ID์™€ ๊ธฐ๋Šฅ, ์„ธ๋ถ€๊ธฐ๋Šฅ, Front ๋‹ด๋‹น์ž, Front ์™„์„ฑ์—ฌ๋ถ€/์ง„ํ–‰์ƒํ™ฉ, ๋งˆ๊ฐ๊ธฐํ•œ, Cross check์—ฌ๋ถ€, Back ๋‹ด๋‹น์ž, Back ์™„์„ฑ์—ฌ๋ถ€/์ง„ํ–‰์ƒํ™ฉ, ๋งˆ๊ฐ๊ธฐํ•œ, Cross Check์—ฌ๋ถ€"๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ์ฐจ๊ณก์ฐจ๊ณก ์ •๋ฆฌํ–ˆ๋‹ค. ๋งค๋ฒˆ ์ž‘์—…์„ ์ง„ํ–‰ํ•˜๋ฉฐ, ๊ฐ ํŒŒํŠธ์˜ ์ƒํ™ฉ์„ ์—…๋ฐ์ดํŠธํ•˜๋ฉฐ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๊ณต์œ ํ•˜์˜€๋‹ค. 

 

์™„์„ฑ๋œ ์š”๊ตฌ์‚ฌํ•ญ๋“ค์€ ๋…น์ƒ‰์œผ๋กœ, ์ง„ํ–‰์ค‘์ธ ํŒŒํŠธ๋Š” ๋…ธ๋ž€์ƒ‰, ์•„์ง ์ค€๋น„์ค‘์ธ ํŒŒํŠธ๋Š” ๋ถ‰์€์ƒ‰์œผ๋กœ ํ‘œ์‹œํ•˜๊ณ , ๊ทธ ์œ„์— ์–ด๋Š์ •๋„ ์–ด๋–ป๊ฒŒ ์ง„ํ–‰๋˜๊ณ  ์žˆ๋Š”์ง€ ๋‹ด๋‹น์ž๋“ค์ด ๋ฉ”๋ชจ๋ฅผ ๋‚จ๊ธฐ๋ฉฐ ์ƒํ™ฉ์„ ์ฒดํฌํ–ˆ๋‹ค. ํ˜„์žฌ ๊ฐ๊ฐ์˜ ๋ฉ”์ธ ํŽ˜์ด์ง€ ํ”„๋ก ํŠธ ํ‹€์€ ์–ด๋Š์ •๋„ ๊ฐ–์ถ”์–ด์กŒ๊ณ , ๋””ํ…Œ์ผํ•œ ํŒ์—…/๋ชจ๋‹ฌ ์ฐฝ๋“ค์„ ๋งŒ๋“ค๊ณ  ์žˆ๋‹ค. ์กฐ๊ธˆ ๋Š๋ฆฌ์ง€๋งŒ ๋‚˜๋„ 1์ธ๋ถ„ ์–ด์น˜๋Š” ํ•˜๊ณ  ์žˆ๋‹ค.

 

 

ํ”„๋ก ํŠธ์—”๋“œ ํ˜„์žฌ์ง„ํ–‰ํ˜• ์ค‘

์•„์ง์€ ์ฝ”๋“œ๊ฐ€ ๋งŽ์ด ์ง€์ €๋ถ„ํ•˜๊ณ ......๋ฌด์—‡์ด ๋” ์ตœ์„ ์˜ ํ˜•ํƒœ์ธ์ง€๋Š” ์ž˜ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ์–ด์ฐŒ์ €์ฐŒ ์›น์˜ ํ˜•์ƒ์„ ๋งŒ๋“ค๊ณ  ์žˆ๋‹ค. 

ํ”„๋ก ํŠธ ์ฒซ๋‚  ๋‚ด๊ฐ€ ์™„์„ฑํ•œ storage ํŽ˜์ด์ง€ 

์•ˆ์ชฝ ๋ธ”๋Ÿญ ๋‚ด์—์„œ ์Šคํฌ๋กค์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๊ณ„์†ํ•ด์„œ ์Œ“์ด๋Š” ํ˜•ํƒœ๋‹ค. ๊ณต์œ ํ•˜๋Š” ๋งํฌ๋Š” ๊ธธ์–ด์ง€๋ฉด ์•Œ์•„์„œ ๋ง์ค„์ž„์ด ๋œ๋‹ค. ์œ„์— ์Šฌ์ฉ ๋‚˜์™€์žˆ๋Š” ์šฐ๋ด‰์ด๋ฅผ ๋ˆ„๋ฅด๋ฉด ๊ท€์—ฌ์šด ๋ฉ”์‹œ์ง€๊ฐ€ pop over ํ•œ๋‹ค. ๋„ค๋น„๋ฐ”์˜ announcement ์•„์ด์ฝ˜์„ ๋ˆ„๋ฅด๋ฉด ์•„๋ž˜ ์šฐ์ธก ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ alert ๋ชจ๋‹ฌ์ฐฝ์ด ๋œฌ๋‹ค. ๋ฉ”์‹œ์ง€๋Š” ์ž„์˜๋กœ ๋„ฃ์–ด๋‘์—ˆ๋‹ค. 

ํ•˜๋‹จ์˜ ๋ฌผ๊ฒฐ๊ณผ ๊ทธ ์œ„์— ๋‘ฅ๋‘ฅ ๋–  ์žˆ๋Š” ๋ฉ”์‹œ์ง€ ๋ฐ•์Šค๋“ค๋„, ๋ชจ๋“  ์‚ฌ์šฉ์ž๋“ค์˜ ํ™”๋ฉด์—์„œ ๋™์ผํ•œ ์œ„์น˜์™€ ๋ชจ์–‘์œผ๋กœ ๋ณด์ด๋„๋ก ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ๊ฐ์˜ ๋ฐ•์Šค๋“ค์— ์„ค์ •๊ฐ’์„ ์ฃผ์—ˆ๋‹ค. ๋‚˜๋Š” ์ด๋ ‡๊ฒŒ storage front๋ฅผ ์–ผ์ถ” ์™„์„ฑํ•˜๊ณ , ๋‹ค๋ฅธ ๋ฉ”์ธ ํŽ˜์ด์ง€์—์„œ ํ•„์š”ํ•œ ๋ชจ๋‹ฌ์ฐฝ๋“ค์„ ์ œ์ž‘ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. 

 

์–ด์ œ๋Š” ํ•˜๋ฃจ์ข…์ผ ์‚ฝ์งˆํ•ด์„œ ๋ชจ๋‹ฌ์ฐฝ์— ์ด๋ชจ์ง€ ๋‹ฌ๊ณ , cancle ๋ฒ„ํŠผ/submit๋ฒ„ํŠผ, ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ๋‹ฌ๊ณ , ์ž ์‹œ ๊ธฐ๋ปํ–ˆ๋‹ค. ํ˜ธ๋ฒ„์‹œ ๊ธ€์ž ์ƒ‰์ด ๋ฐ”๋€๋‹ค. 

 

Map Page์˜ destination ์„น์…˜

 

์ด๋ฒˆ์— ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ์ ์ ˆํ•˜๊ฒŒ ํ™œ์šฉํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋Š”๋ฐ, ์ƒ๊ฐ๋ณด๋‹ค ์žฌ๋ฏธ์žˆ๊ธฐ๋„ ํ•˜๊ณ  ์–ด๋ ต๊ธฐ๋„ ํ•˜๋‹ค. ๋‚ด๊ฐ€ ์งค ์ˆ˜ ์—†๋Š” js ์ฝ”๋“œ๋ฅผ ๋š๋”ฑ ๋งŒ๋“ค์–ด์ค€๋‹ค๋Š” ์ ์— ์žˆ์–ด์„œ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ์ ์ ˆํžˆ ํ™œ์šฉํ•˜๋‹ˆ ์‹œ๊ฐ„์„ ๋งŽ์ด ๋‹จ์ถ•ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. map page์—์„œ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ datepicker๋ฅผ ์ด์šฉํ•ด, ์บ˜๋ฆฐ๋”์—์„œ ๋‚ ์งœ๋ฅผ ์„ ํƒํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค๊ณ  css๋ฅผ ์ˆ˜์ •ํ–ˆ๋‹ค. ์—ฌ๊ธฐ์— ์ค€์ด๊ฐ€ js๋ฅผ ์ˆ˜์ •ํ•ด์ฃผ์–ด, datepicker์—์„œ ๋‚ ์งœ๋ฅผ ์„ ํƒํ•˜๋ฉด ๋ฐ”๋กœ D-day๋ฅผ ๊ณ„์‚ฐํ•ด์„œ ๋…ธ์ถœ์‹œ์ผœ์ฃผ๋Š” ๊ธฐ๋Šฅ์œผ๋กœ ์™„์„ฑํ–ˆ๋‹ค! ๐Ÿ‘๐Ÿ‘ ๐Ÿ‘

 

http://bootstrapk.com/

 

๋ถ€ํŠธ์ŠคํŠธ๋žฉ · ์„ธ์ƒ์—์„œ ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๋Š” ๋ชจ๋ฐ”์ผ ์šฐ์„ ์ด๋ฉฐ, ๋ฐ˜์‘ํ˜•์ธ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ.

ํ”„๋ฆฌํ”„๋กœ์„ธ์„œ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ํ‰๋ฒ”ํ•œ CSS ๋กœ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค๋งŒ, ๊ทธ๊ฒƒ์˜ ์†Œ์Šค์ฝ”๋“œ๋Š” 2๊ฐœ์˜ ์ธ๊ธฐ์žˆ๋Š” CSS ํ”„๋ฆฌํ”„๋กœ์„ธ์„œ์ธ Less ์™€ Sass ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์‹ ์†ํ•˜๊ฒŒ ํ”„๋ฆฌ์ปดํŒŒ์ผ๋œ CSS ๋กœ ์‹œ์ž‘ํ•˜๊ฑฐ๋‚˜ ์†Œ์Šค๋ฅผ ๋นŒ๋“œ

bootstrapk.com

๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„์˜ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๊ฐ€์ ธ์™€์„œ ๋˜ ์šฐ๋ฆฌ ์„œ๋น„์Šค์— ๋งž๊ฒŒ ๋””์ž์ธ์„ ์ˆ˜์ •ํ•˜๊ณ  ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด ๊ตฌ๊ธ€๋ง์„ ํ•˜๋ฉด์„œ ๋ฐฐ์›Œ๊ฐ”๋‹ค. ๊ฑฐ์˜ ์ฝ”๋”ฉ ์ผ์ž๋ฌด์‹์—์„œ ๋ญ”๊ฐ€๋ฅผ ๋งŒ๋“ค์–ด๋‚ด๊ณ  ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์— ์กฐ๊ธˆ ๋ฟŒ๋“ฏํ•ดํ•˜๊ณ  ์žˆ๋‹ค. 

 

 

 

์šฐ๋ด‰์ด ์ตœ์ตœ์ข…!

์šฐ๋ฆฌ์˜ ์ตœ์ข… ์šฐ๋ด‰์ด

์šฐ๋ฆฌ์˜ ๋ธŒ๋žœ๋“œ ์บ๋ฆญํ„ฐ ์šฐ๋ด‰์ด๊ฐ€ ์ตœ์ข… ์™„์„ฑ๋˜์—ˆ๋‹ค. ์ข€๋” ๋‘ฅ๊ธ€๊ณ  ํฐ ๋ˆˆ์œผ๋กœ ๋…ธ๋ฅผ ์ €์œผ๋Ÿฌ ๋– ๋‚˜๋Š” ์šฐ๋ด‰์ด์˜ ๋ชจ์Šต์„ ๋‹ด์•˜๋‹ค. ์„œ๋น„์Šค ๊ณณ๊ณณ์—์„œ ์šฐ๋ด‰์ด์˜ ๋ชฉ์†Œ๋ฆฌ๋ฅผ ๋“ค์„ ์ˆ˜ ์žˆ๋‹ค. ์–ด์ฐŒ์ €์ฐŒ ์„ฑ์žฅ์ค‘์ธ ์šฐ๋ฆฌ์˜ ์—ฌ์ •์„ ์šฐ๋ด‰์ด๊ฐ€ ํ•จ๊ป˜ ํ•˜๊ณ  ์žˆ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•