ํฐ์คํ ๋ฆฌ ๋ทฐ
๋ชจ๋ํ๋ฅผ ์ํด ๋ค์๊ณผ ๊ฐ์ด button ํ๊ทธ์ ํด๋์ค ์ดํธ๋ฆฌ๋ทฐํธ์ธ btn์ ๋ ธ๋ ์์ฑ๊ณผ ์ด๋ฒคํธ ๋ฆฌ์ค๋ ๋ฑ๋ก์ Button ํด๋์ค ๋ด์ ์์ฑ์์
์ ์ธํ์ฌ ์ฃผ์๋ค. btn ์์์ ์ง์ ์ ์ผ๋ก addEventListener์ ๋ฑ๋กํ์ง ์์์์๋ ์ฝ์์ Hello๊ฐ ์ถ๋ ฅ๋๋ค.
์์ ๋์ ๋ฐฉ์์ ์ดํดํ๊ธฐ ์ํด์๋ ํฌ๊ฒ ๊ฐ์ง๊ฐ ํ์ํ๋ค.
1. this ๋ฐ์ธ๋ฉ
this๋ ์๊ธฐ ์ฐธ์กฐ ๋ณ์๋ก์, ์์ ์ด ์ํ ๊ฐ์ฒด ๋๋ ์์ฑํ ์ธ์คํด์ค๋ฅผ ๊ฐ๋ฆฌํจ๋ค. ์ฌ๊ธฐ์ ์์ฑํ ์ธ์คํด์ค๋ btn์ ๊ฐ๋ฆฌํค๋ฉฐ ํจ์ ํ๊ฐ ๊ณผ์ ์ด ๋๋๊ณ ์ค์ ์ฝ๋๊ฐ ์คํ๋ ๋ ๋ฐ์ธ๋ฉ๋๋ค.
2. constructor ์์ฑ์ ํจ์
constructor ์์ฑ์ ํจ์๋ ํจ์ ๋ด์ ์ฝ๋์๋ค์ ์ด๊ธฐํ ํด์ฃผ๊ณ ์๋ฌต์ ์ผ๋ก this, ์ฆ ์ธ์คํด์ค๋ฅผ ๋ฐํํ๋ค.
3. ๊ฐ๋น์ง ์ปฌ๋ ์
๋ฐํ ๋ ์ธ์คํด์ค๋ ๊ฐ์ฒด btn์ ์ํด ์ฐธ์กฐ๋๋ค. ์ฆ, ์ ์ญ๋ณ์ btn์ด๋ผ๋ ์๋ณ์๊ฐ ์์ฑ ๋ ์ธ์คํด์ค๋ฅผ ๊ณ์ ์ฐธ์กฐํ๊ณ ์๊ธฐ ๋๋ฌธ์ ๊ฐ๋น์ง ์ฝ ๋ ํฐ์ ์ํด ์๋์ผ๋ก ํด์ ๋์ง ์๋๋ค. ํด์ ๋์ง ์๊ณ ๋ฉ๋ชจ๋ฆฌ ์์ ๋ฐ์ดํฐ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ์ค์ ๋ฒํผ์ ํด๋ฆญํ์์ ๋๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋ ์ ๋ฑ๋กํ ์ฝ๋ฐฑ ํจ์๊ฐ ํธ์ถ ๋ ์ ์๋ค.
>(์์ 2021.03.11)
์ธ์คํด์ค ๊ฐ์ฒด btn์ ์ํด ์ฐธ์กฐ๋๊ณ ์์ด์ ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ์ ์ฉํ ๊ฒ์ด ์๋๋ผ ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ํธ์ถ๋๋ ์๊ฐ, Web APIs์ ๋ฑ๋กํ๊ฒ ๋๊ณ ์ดํ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋๋ง๋ค ์ด๋ฒคํธ ๋ฆฌ์ค๋์ ๋ฑ๋กํ ์ฝ๋ฐฑํจ์๊ฐ ํ ์คํฌ ํ์ ์ ์ฌ๋๊ณ ์ด๋ฒคํธ ๋ฃจํ์ ์ํด ์ฝ ์คํ์์ ์คํ๋๋ ๋์์ด๋ค.
'JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋น๋ ํจํด(Builder Pattern)์ผ๋ก ๊ฐ์ฒด ์์ฑ์ ๋ช ์์ ์ด๊ณ ๊น๋ํ๊ฒ ๊ตฌํ (0) | 2021.03.11 |
---|---|
ํด๋์ค ๋ด์์ this๋ฐ์ธ๋ฉ์ด ์ ๋๋ก ์๋๋ ๋ฌธ์ (0) | 2021.03.11 |
module.exports์ exports์ ๊ด๊ณ (0) | 2021.02.28 |
์๋ฐ์คํฌ๋ฆฝํธ ํ์ฑ๊ณผ ์คํ (0) | 2021.02.28 |
๋๊ธฐ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ ๋ฐฉ์์ ํธ์ถ ์์ (0) | 2021.02.27 |