์ค๋ ๋๋์ด ๊ธธ๊ณ ๊ธธ์๋ CSS ํ์ต์ ๋ง์น๊ณ ,
javascript์ ๋ํด ํ์ตํ์์ต๋๋ค! ๐
์ด์ ๋ฐฐ์ด Form ํ์ต์ ๊ธฐ๋ฐ์ผ๋ก, ๋ค์๊ณผ ๊ฐ์ ํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ณด๋ ์ฑ๋ฆฐ์ง๋ฅผ ์งํํ์์ต๋๋ค.
๐ค
์ค๋์ ์ฑ๋ฆฐ์ง๋ฅผ ์งํํ๋ฉด์ CSS์์ ์ด๋ ค์์ ๊ฒช์๋ ๋ถ๋ถ์ด๋ค.
radio , checkbox์ ํํธ๋ฌ์ง ์ ๋ ฌ์ ์ํด, flex box๋ก ๋ง๋ค๊ณ , ์์ง์ ๋ ฌ์ ๋ง์ถ๋ฉด ๋๊ฒ ๋ค๊ณ ์๊ฐํ๋ค.
๋ ๋ค๋ฅธ ๋ฌธ์ ๋, input์์๊ฐ label ์์ด ์๋ ๋ค๋ก ์ด๋ํด๋ฒ๋ฆฌ๋ ๋ฌธ์ ์๋ค..
๐ก
.inline-control {
display: flex;
}
.inline-control input {
width: auto;
}
.inline-control label {
margin: 0;
margin-left: 0.5rem;
}
์์, input์์๋ค์ ๋ชจ๋ width๋ฅผ 100%๋ก ์ง์ ํด๋์๊ธฐ ๋๋ฌธ์, radio์ checkbox๊ฐ ํ์ค์ ๋ค ์ฐจ์งํ๋ ค๊ณ ํ๊ณ , ์ค๋ฐ๊ฟ์ด ์ผ์ด๋ ์ ๋ ฌ์ด ํํธ๋ฌ์ ธ๋ฒ๋ฆฐ๊ฒ์ด์๋ค.
→ input์ width:100%๋ฅผ ํด์ ํ๊ธฐ ์ํด, auto๋ก ๋ณ๊ฒฝํด์ค์ผํ๋ค.
button → inline
label → inline
input → inline-block
์์ง๋, ํท๊ฐ๋ฆฐ๋ค..๐ต๐ซ
๊ธฐ์ตํด๋์!
์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ธ๋ผ์ฐ์ ์์ ์คํ๋ ์ ์๋ ์ธ์ด๋ก, HTML๊ณผ CSS๋ฅผ ํตํด์๋ ํ๋ฉด์ ๋ ๋๋ง ํ ์๋ ์์ง๋ง,
ํ๋ฉด์ ์กฐ์, ์ ๋ฐ์ดํธ ๋ฑ ๋์ ์ผ๋ก ๋ณ๊ฒฝํ๊ธฐ ์ํด์ , javascript๋ฅผ ์ฌ์ฉํด์ผํ๋ค!
โ๏ธJavaScript์ convention
์ฝ๋์ ๊ฐ๋ ์ฑ, ์ผ๊ด์ฑ, ํ์ ์ ํธ์์ฑ์ ์ฆ์งํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ๊ท์น๊ณผ ๊ด๋ก๋ก์จ,
- ๋ณ์ ๋ฐ ํจ์๋ช : ์นด๋ฉ ์ผ์ด์ค ์ฌ์ฉ (์: myVariable, calculateTotal()).
- ์์ (const): ๋๋ฌธ์ ์ค๋ค์ดํฌ ์ผ์ด์ค ์ฌ์ฉ (์: MAX_SIZE).
- ์์ฑ์ ํจ์: ํ์ค์นผ ์ผ์ด์ค ์ฌ์ฉ (์: MyConstructor)
โ ๋ณ์ let, const vs var
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฐ์ธ ๋, var ๋ณ์๋ ๋ฌด์กฐ๊ฑด ์ง์ํด์ผํ๋ค๊ณ ๋ฐฐ์ด๋ค.
์ด์ ๋ฅผ ์ ๋ฆฌํด๋ณด์๋ค.
let
- ๋ณ์ ์ค๋ณต ๋ถ๊ฐ๋ฅ
- ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ
- ๋ณ์ Hoisting์ด ๋ฐ์ํ์ง ์๋ ๊ฒ์ฒ๋ผ ๋์
- window ์ ์ญ๊ฐ์ฒด์ ํ๋กํผํฐX
const
- ๋ณ์ ์ค๋ณต ๋ถ๊ฐ๋ฅ
- ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ
- ๋ณ์ Hoisting์ด ๋ฐ์ํ์ง ์๋ ๊ฒ์ฒ๋ผ ๋์
- window ์ ์ญ๊ฐ์ฒด์ ํ๋กํผํฐX
- ์ ์ธ&์ด๊ธฐํ๋ฅผ ๋์์ ์์ฑํด์ผ ํจ (์ฌํ ๋น์ด ๋ถ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ)
- ์ฌํ ๋น ๋ถ๊ฐ๋ฅ
์ฌ์ง๊ณผ ๊ฐ์ด.. ์ฌํ ๋น์ ํ ์๊ฐ ์๋ค.
๊ทธ๋ผ const๋ฅผ ์ฌ์ฉํ ์ ์๋๊ฑฐ ์๋๊ฐ? ๋ผ๊ณ ์๊ฐํ ์ ์๊ฒ ์ง๋ง!
ํ๋กํผํฐ ์ ๊ทผ๋ฒ์ผ๋ก ํ ๋นํ๋ฉด ๊ฐ์ฒด์ ๊ฐ์ ๋ณ๊ฒฝํ ์ ์๋ค.
'์ฌํ ๋น๋ง ์๋๋๊ตฌ๋' ๋ผ๊ณ ์๊ฐํ๋ฉด ์ข๋ค!
โ๏ธvar์ ๋ฌธ์ ์
- ์ค๋ณต ์ ์ธ์ด ํ์ฉ
- ํจ์ ๋ ๋ฒจ ์ค์ฝํ
- window ์ ์ญ๊ฐ์ฒด์ ํ๋กํผํฐO
- ๋ณ์ Hositing ๋ฐ์
์ด๋ฌํ ์ด์ ๋ค๋ก, ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฐ์ฐ๋ฉด์ var๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๋ฅผ ๋ณธ์ ์ด ์๋ค.
var์ ์ฌ์ฉํ์์๋, ๋ง์ง๋ง console์ด '์ง์ญ'์ผ๋ก ์ถ๋ ฅ๋๋ ๊ฒ์ ํ์ธ ํ ์ ์๋ค.
์ด์ ๋ ๋ฐ๋ก, var๋ ํจ์ ๋จ์ ์ค์ฝํ์ด๊ธฐ ๋๋ฌธ์ด๋ค.
if๋ ํจ์๊ฐ ์๋ ๋ถ๊ธฐ๋ฌธ์ด๊ธฐ ๋๋ฌธ์, '์ง์ญ'์ผ๋ก global๋ณ์๋ฅผ ์ฌํ ๋น ํ๋ฉด ์ ์ญ ๋ถ๋ถ๊น์ง ์ค์ผ๋๋ ๊ฒ์ด๋ค.
โ โญ๏ธ Hoisiting
๊ณ์ ํธ์ด์คํ ์ ๋ํ ์ธ๊ธ์ด ๋์ค๋๋ฐ, ์ค์ํ ๊ฐ๋ ์ค ํ๋๋ค!
ํธ์ด์คํ (Hoisting)์ ๋ณ์์ ํจ์ ์ ์ธ์ด ์ฝ๋์ ์ต์๋จ์ผ๋ก ๋์ด์ฌ๋ ค์ง๋ ๋์์ ๋งํฉ๋๋ค.
์ฝ๋ ์คํ ์ ์ JavaScript ์์ง์ ์ํด ์ฒ๋ฆฌ๋๋ฉฐ, ์ฝ๋๊ฐ ์คํ๋๊ธฐ ์ ์ ๋ณ์์ ํจ์๊ฐ ๋ฉ๋ชจ๋ฆฌ์ ํ ๋น๋๊ณ ์ด๊ธฐํ๋๋ ํน์ง์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
๋ณ์ ํธ์ด์คํ
๋ณ์ ์ ์ธ์ ํธ์ด์คํ ์ ์ํด ์ ์ธ ๋จ๊ณ์ ์ด๊ธฐํ ๋จ๊ณ๋ก ๋๋์ด์ง๋๋ฐ,
๋ณ์๋ ์ ์ธ ๋จ๊ณ์์ ๋ฉ๋ชจ๋ฆฌ์ ๊ณต๊ฐ์ ํ ๋น๋ฐ์ง๋ง, ์ด๊ธฐํ ๋จ๊ณ์์ ์ค์ ๊ฐ์ด ํ ๋น๋ฉ๋๋ค.
var
console.log(myVar); // undefined
var myVar = 'I am hoisted';
console.log(myVar); // ์ถ๋ ฅ: I am hoisted
myVar์ ์ ์ธ ์ ์, console์ ์ถ๋ ฅํ๋ฉด ์์ง ์ ์ธ๋ ์ํ์ผ๋๊น Reference Error๊ฐ ๋ฐ์ํ ๊ฒ ๊ฐ์ง๋ง?!
ํธ์ด์คํ ์ ์ํด ์ ์ธ ๋จ๊ณ์์ ๋ฉ๋ชจ๋ฆฌ์ ํ ๋น๋์ด undefined๊ฐ ์ถ๋ ฅ๋๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
let / const
let๊ณผ const๋ ํธ์ด์คํ ์ด ๋ฐ์ํ์ง๋ง, var์๋ ๋์ ๋ฐฉ์์ด ์ฝ๊ฐ ๋ค๋ฅด๋ค!
๋ณ์๊ฐ ํธ์ด์คํ ๋๊ธดํ์ง๋ง, ์ด๊ธฐํ ์ ๊น์ง ์ผ์์ ์ฌ๊ฐ์ง๋(Temporal Dead Zone, TDZ)์ ๋์ธ๋ค.
let,const๋ ์ ์ธ์ ๋์ง๋ง, ์ด๊ธฐํ ๊ณผ์ ์ ๊ฑฐ์น์ง ์๊ธฐ ๋๋ฌธ์, ์ด๊ธฐํ ์ ์ ๋ณ์์ ์ ๊ทผํ๋ฉด TDZ ์ํ๊ฐ ๋์ด Reference Error๊ฐ ๋ฐ์ํ๋ค!
console.log(myVar); // ์ค๋ฅ: Cannot access 'myVar' before initialization
let myVar = 'I am declared with let';
→ var: ์ ์ธ+์ด๊ธฐํ , let/const : ์ ์ธ (by Hoisting)
ํจ์ ํธ์ด์คํ
ํจ์ ์ ์ธ๋ ํธ์ด์คํ ์ ์ํฅ์ ๋ฐ๋๋ค.
ํจ์ ์ ์ธ๋ฌธ์ ์ ์ฒด๊ฐ ํธ์ด์คํ ๋์ง๋ง, ํจ์ ํํ์์ ๋ณ์๋ง์ด ํธ์ด์คํ ๋๋ค.
ํจ์ ์ ์ธ๋ฌธ
sayHello(); // ์ถ๋ ฅ: Hello
function sayHello() {
console.log('Hello');
}
ํจ์ ์ ์ฒด๊ฐ ํธ์ด์คํ ๋์ด, ํจ์๊ฐ์ด ์ถ๋ ฅ๋ ์ ์๋ค.
ํจ์ ํํ์ โญ๏ธ
sayHi(); // ์ค๋ฅ: sayHi is not a function
var sayHi = function() {
console.log('Hi');
};
ํํ์์ ๋ณ์(var sayHi)๋ง์ด hosting๋๊ธฐ ๋๋ฌธ์, TypeError๊ฐ ๋ฐ์ํ๋ค!
โ ๋ณ์ ์๋์(Variable Shadowing)
๋ ๊ฐ ์ด์์ ๋์ผํ ์ด๋ฆ์ ๊ฐ์ง ๋ณ์๊ฐ ์๋ก ๋ค๋ฅธ ์ค์ฝํ์์ ์ ์ธ๋ ๋ ๋ฐ์ํ๋ ํ์
๋ด๋ถ ์ค์ฝํ์์ ์ ์ธ๋ ๋ณ์๊ฐ ์ธ๋ถ ์ค์ฝํ์์ ์ ์ธ๋ ๋ณ์๋ฅผ ์ฐธ์กฐํ๋ค. (๋ด๋ถ→์ธ๋ถ)
์ธ๋ถ ๋ณ์๋ ์์ ์ด๋ ์ญ์ ์์ด! ํจ์ ์์์๋ง ์ฌ์ฉ ๊ฐ๋ฅํ ๋๋ช ์ ๋ณ์๋ฅผ ์์ฑํ๋ ๊ฒ์ด๋ค.
์ฝ๋๋ฅผ ์ดํดํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ค ์ ์์ผ๋ฏ๋ก, ์๋์์ ์ต์ํ์ผ๋ก ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
โ ์ ์ญ ๋ณ์ vs ์ง์ญ ๋ณ์
์ด ๋์ ๋ณ์๊ฐ ์ ์ธ๋ ์์น์ ์ค์ฝํ(scope)์ ๋ฐ๋ผ ๊ตฌ๋ถ๋๋ค.
์ ์ญ ๋ณ์ (Global Variable)
์ ์ญ ๋ณ์๋ ์ด๋์์๋ ์ ๊ทผ ๊ฐ๋ฅํ ๋ณ์๋ก, ์ ์ญ ์ค์ฝํ(Global Scope)์์ ์ ์ธ๋๋ฉฐ, ๋ณดํต ์ต์์์์ ์ ์ธ๋ฉ๋๋ค.
์ง์ญ ๋ณ์ (Local Variable)
์ง์ญ ๋ณ์๋ ํน์ ๋ธ๋ก ๋๋ ํจ์ ๋ด์์๋ง ์ ๊ทผ ๊ฐ๋ฅํ ๋ณ์๋ก, ํด๋น ๋ณ์๊ฐ ์ ์ธ๋ ๋ธ๋ก ๋๋ ํจ์์ ์ค์ฝํ ๋ด์์๋ง ์ ํจํฉ๋๋ค.
์ ์ญ์ ์ด๋์๋ ์ ๊ทผ์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์, ์๋ฅผ ๋ค๋ฉด ํ์ผ์ ๋ฐ๋ก ์์ฑํ์ฌ ์ค์ฝํ๋ฅผ ๋ถ๋ฆฌํ๋ค๊ณ ์๊ฐํ์ง๋ง?! ์ ์ญ์ผ๋ก ๋ถ๋ฆฌ๊ฐ ๋์ง ์๋ ์ํ์ด ์กด์ฌํ ์ ์๊ธฐ ๋๋ฌธ์, ์ ์ญ๋ณ์๋ณด๋จ ์ง์ญ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ํธ์ด ์ข๋ค.