degit์ ๊น ์ ์ฅ์์ ๋ณต์ฌ๋ณธ์ ๋ง๋ ๋ค.์ ์ฒด git ๊ธฐ๋ก์ ๋ค์ด๋ก๋ ํ๋ ๊ฒ์ด ์๋, ์ต์ ์ปค๋ฐ์ ์ฐพ์ ๋ค์ด๋ก๋ํ๊ธฐ ๋๋ฌธ์ git clone๋ณด๋ค ํจ์ฌ ๋น ๋ฅด๋ค.๋จผ์ ์๋ ๋ช ๋ น์ด๋ฅผ ํตํด degit์ ์ค์นํด์ค๋ค.๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ๋ฒ์ ํด๋น ์ ์ฅ์์ ๋ฉ์ธ ๋ธ๋์น๋ฅผ ๋ค์ด๋ก๋ํ
UI(user interface)๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ ์ ์ธ์ ์ด๊ณ ํจ์จ์ ์ด๋ฉฐ ์ ์ฐํ javascript ๋ผ์ด๋ธ๋ฌ๋ฆฌReact ๊ณต์ ๋ฌธ์ - React๋ ๋ฌด์์ธ๊ฐ์?(https://ko.reactjs.org/tutorial/tutorial.htmlreact๋ DOM์
http๋ stateless ํ๋กํ ์ฝ์ด๊ธฐ ๋๋ฌธ์ ์์ฒญ๊ณผ ์๋ต์ ์ํ๋ฅผ ๊ด๋ฆฌํ์ง ์๋๋ค. ์ฆ, ๊ณผ๊ฑฐ ์ํ๋ฅผ ๊ทผ๊ฑฐ๋ก ํ์ฌ ์์ฒญ์ ์ฒ๋ฆฌํ ์ ์๋ค.์ธ์ฆ์ด ํ์ํ ์น ํ์ด์ง์์ ์ํ ๊ด๋ฆฌ๋ฅผ ํ๊ธฐ ์ํด์๋ ์ธ์ฆํ์ ๋์ ์ํ๋ฅผ ๊ธฐ์ตํ ํ์๊ฐ ์๋ค.์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ฟ
๋์ผ ์ถ์ฒ ์ ์ฑ protocol(scheme), host, port๊ฐ ์ผ์นํ๋ฉด ๋์ผํ ์ถ์ฒ(origin)๋ก ๋ณธ๋ค. \- path ์ดํ๊ฐ ๋ค๋ฅธ ๊ฒ์ ๋์ผํ ์ถ์ฒ๋ก ๋ณธ๋ค.๋ฌธ์๋ ์คํฌ๋ฆฝํธ๊ฐ ๋ค๋ฅธ ์ถ์ฒ์์ ๊ฐ์ ธ์จ ๋ฆฌ์์ค์ ์ํธ์์ฉํ๋ ๊ฒ์ ์ ํํ๋ ์ค์ํ ๋ณด์ ๋ฐฉ์์ด๋ค.์ ์ฌ์
๋๋ฐ์ด์ค๋ ์งฆ์ ์๊ฐ ๊ฐ๊ฒฉ์ผ๋ก ์ด๋ฒคํธ๊ฐ ์ฐ์ํด์ ๋ฐ์ํ๋ฉด ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ํธ์ถํ์ง ์๋ค๊ฐ ์ผ์ ์๊ฐ์ด ๊ฒฝ๊ณผํ ์ดํ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ํ ๋ฒ๋ง ํธ์ถ๋๋๋ก ํ๋ค.debounce์ค๋กํ์ ์งง์ ์๊ฐ ๊ฐ๊ฒฉ์ผ๋ก ์ด๋ฒคํธ๊ฐ ์ฐ์ํด์ ๋ฐ์ํ๋๋ผ๋ ์ผ์ ์๊ฐ ๊ฐ๊ฒฉ์ผ๋ก ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์ต
DOM ํธ๋ฆฌ ์์ ์กด์ฌํ๋ DOM ์์ ๋ ธ๋์์ ๋ฐ์ํ ์ด๋ฒคํธ๊ฐ DOM ํธ๋ฆฌ๋ฅผ ํตํด ์ ํ๋๋ ๊ฒ์ด๋ฒคํธ ์ ํ๋ ์ด๋ฒคํธ ๊ฐ์ฒด๊ฐ ์ ํ๋๋ ๋ฐฉํฅ์ ๋ฐ๋ผ 3๋จ๊ณ๋ก ๊ตฌ๋ถํ ์ ์์์ด๋ฒคํธ ์ ํ<span style="color:: window์์ ์์ํด์ ์ด๋ฒคํธ ํ๊น ๋ฐฉํฅ์ผ๋ก
๋ธ๋ผ์ฐ์ ๋ ๋๊ธฐ์ ์ผ๋ก ์คํ๋๊ธฐ ๋๋ฌธ์ ์์์ ์๋ ๋ฐฉํฅ์ผ๋ก ์์ฐจ์ ์ผ๋ก ํ์ฑํ๊ณ ์คํ๋๋ค. ๋ฐ๋ผ์ ํ์ผ ํฌ๊ธฐ๊ฐ ํฐ javascript ํ์ผ์ด body ํ๊ทธ ์์์ ์์นํ๋ค๋ฉด DOM ์์ฑ์ด ์ง์ฐ๋ ์ ์๋ค.javascript ํ์ผ์ ๋ค์ด๋ก๋ ๋ฐ๊ณ ์คํ๋๊ธฐ๊น์ง script
ํ๋กํ ํ์ ์ ์ด๋ค ๊ฐ์ฒด์ ์์ ๊ฐ์ฒด ์ญํ ์ ํ๋ ๊ฐ์ฒด์ด๋ค. ์ด๋ค ๊ฐ์ฒด์ ์ด๋ค ๊ฐ์ฒด์ ํ๋กํผํฐ ๋๋ ๋ฉ์๋๋ฅผ ๋ค๋ฅธ ๊ฐ์ฒด๊ฐ ๊ทธ๋๋ก ์ฌ์ฉํ ์ ์๋ ๊ฒ์ ๋งํ๋ค.์๋ฐ์คํฌ๋ฆฝํธ๋ ํ๋กํ ํ์ ์ ๊ธฐ๋ฐ์ผ๋ก ์์์ ๊ตฌํํ๋ค. ์ด๋ค ๊ฐ์ฒด์ ์์ ๊ฐ์ฒด์ ์ญํ ์ ํ๋ ๊ฐ์ฒด๋ก์ ๋ค๋ฅธ ๊ฐ์ฒด์
์ฆ์ ์คํ ํจ์๋ ?์ ์๋์๋ง์ ์ฆ์ ์คํ๋๋ ํจ์ (Self-Executing Anonymous Function)์ฆ์ ์คํ ํจ์๋ ํฌ๊ฒ <span style="color:์ต๋ช ํจ์(Anonymous Function)๋ ์ ์ญ ์ค์ฝํ์ ๋ถํ์ํ ๋ณ์๋ฅผ ์ถ๊ฐํด์ ์ค์ผ
: ํ์ง ์งํ์ ๋ํ ํตํฉ์ ์ง์นจ์ ์ ์Chrome UX Report : ์ค์ Chrome ์ฌ์ฉ์๊ฐ ๊ฒฝํํ๋๋๋ก, ๊ฐ Web Vital์ ๋ํด ์ฌ์ดํธ์ ์ฑ๋ฅ์ ๋น ๋ฅด๊ฒ ํ๊ฐํ ์ ์์: ํต์ฌ ์ฌ์ฉ์ ๊ฒฝํ ์๊ตฌ์ฌํญ. ๋ชจ๋ ์น ๊ฒฝํ์์ ์ค์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ณตํต ์งํฉ\[ht
์๊ฐ, ์ฒญ๊ฐ, ์ ์ฒด, ์ธ์ด, ์ธ์ง, ํ์ต ๋ฐ ์ ๊ฒฝ ์ฅ์ ๋ฑ ๊ด๋ฒ์ํ ์ฅ์ ๋ฟ๋ง ์๋๋ผ ๋ ธํ๋ก ์ธํด ์ ์ฒด ๋ฅ๋ ฅ์ด ๋ณํ๋ ๋ ธ์ธ์ ๋น๋กฏํ ๋น์ฅ์ ์ธ๋ค์ ์ ๊ทผ์ฑ์ ์ฆ์ง์ํค๋ ๋ฐฉ๋ฒ์ ์ ์ํ๋ค.์น ์ ๊ทผ์ฑ์ ์ ๊ทผ ๊ฐ๋ฅํ ์ฝํ ์ธ ๋ฟ๋ง ์๋๋ผ ์น ๋ธ๋ผ์ฐ์ ๋ฐ ๋ค๋ฅธ ์ฌ์ฉ์ ์์ด์ ํธ๋ค์๋ ์ํฅ
๊ฐ๋ฅํ ๋ง์ ์ฌ๋์ด ์น ์ฌ์ดํธ๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ๋ฐฉ๋ฒํต์์ ์ผ๋ก ์ฅ์ ์ธ๋ง์ ๋์์ผ๋ก ํ๋ค๊ณ ์๊ฐํ์ง๋ง ์ค์ ๋ก๋ ๋ชจ๋ฐ์ผ ์ฅ์น๋ฅผ ์ฌ์ฉํ๋ ์ฌ๋์ด๋ ๋๋ฆฐ ๋คํธ์ํฌ ์ฐ๊ฒฐ์ ์ฌ์ฉํ๋ ์ฌ๋๋ค๋ ํฌํจํ์ฌ ๋ชจ๋ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ํจ์๋งจํฑํ HTML์ \*SEO ํฅ์์ํด์ ๊ทผ์ฑ์
์นํ์ด์ง๋ฅผ ์ํ ์ด์ฐจ์ ๋ ์ด์์ ์์คํ (flex๋ ์ผ์ฐจ์) ์ฝํ ์ธ ์ ํ๊ณผ ์ด ๋ฐฐ์นํ ์ ์์gutters or gaps : ๊ฐ ํ๊ณผ ์ด ์ฌ์ด ๊ณต๋ฐฑtable vs gridํํ๋ ๊ฐ์ผ๋ grid๋ ๋ ์ด์์์ ์ฌ์ฉtable์ ๋ฐ์ดํฐ์ ๊ดํ ์์ ์ ์ํํ ๋ ์ฌ์ฉ (t
1\. CSS CH 6-910์ 04์ผ ZEROBASE NKLCB 6์ผ์ฐจ๐ฃtransition โก user์ ํน์ action์ ๋ฐ๋ผ ํจ๊ณผ๊ฐ ์ ์ฉ๋จanimation โก ์๋์ผ๋ก ์์๊ฐ ์์ง์ด๊ฒ ํ ์ ์์ ๋ค์์ ์คํ์ผ์ ๋ํด์๋ ์ ์ฉํ ์ ์์ keyframe์
inline์์์ block์์๋ฅผ ๋ฐ๊ฟ ์ ์์inlinewidth, height, margin, padding์ ์ง์ ํ ์ ์์์ฌ๋ฌ ์์๊ฐ ๊ฐ๋ก ๋ฐฐ์น๋จblockwidth๋ฅผ ์ง์ ํ์ง ์์ผ๋ฉด ๊ฐ๋ก ์ ์ฒด๋ฅผ ์ฐจ์งํจwidth, height, margin, padding์ ์ง์
mv๋ก ์ด๋ฆ์ ๋ฐ๊พธ๊ฑฐ๋ ์ด๋์ ์์ผฐ์ ๋mv๋ฅผ ํ๋ฉด ํ์ฌ ์์น์ file์ ์ญ์ ํ, ์ ํ์ผ์ ์์ฑํ๊ธฐ ๋๋ฌธ์ด ๊ฒฝ์ฐ, ๋ค์ ์๋ ์ด๋ฆ์ผ๋ก ๋๋๋ฆฌ๊ฑฐ๋, ์ด๋์ํค๋ฉด ๋จ์๋ํ๋ฉด, ์ด์ ์ํ์ ๊ฐ์ฅ ๋ง์ง๋ง ์ํ๋ง ๋น๊ตํ๊ธฐ ๋๋ฌธ์ ! (์ด๋ฆ์ด ๊ฐ์์ ธ์ ๋น๊ตํ ๋๋ ์ด์ ๊ณผ ๊ฐ์
clone && initdevelop์์ feature branch ์์ฑ ํ, ํด๋น branch์์ ์์ ์์ ์ด ์ข ๋ฃ๋๋ฉด ๋ค์ develop ์ผ๋ก ๋์๊ฐ๐โโ๏ธ develop์์ ์๋์ผ๋ก feature branch ๋ด์ฉ์ merge ํจremove feature bra
1) install && posting2) themes๐โโ๏ธ ์น ์๋ก๊ณ ์นจctrl+ shift + r3) custom4) deployHEXOtheme
initclonebranch rename๋ฐ๊ฟ ๋ธ๋์น ์์น์์ $ git branch -M \[๋ฐ๊ฟ ๋ธ๋์น ๋ช ]create remote$ git remote add \[remote-name] \[git-repo-address]first push$ git push -u \