728x90 ์ ์ฒด ๊ธ118 JavaScript์ preventDefault ๋ฉ์๋: ๊ฐ๋ , ํ์ฉ, ์ฅ๋จ์ JavaScript์ preventDefault ๋ฉ์๋: ๊ฐ๋ , ํ์ฉ, ์ฅ๋จ์ 1. preventDefault๋? preventDefault๋ ์ด๋ฒคํธ์ ๊ธฐ๋ณธ ๋์์ ์ทจ์ํ๋ ๋ฉ์๋๋ก, ์ผ๋ฐ์ ์ผ๋ก ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ด์์ ํธ์ถ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ํน์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ํํ๋ ๊ธฐ๋ณธ ๋์์ ์ค๋จํ๊ณ ์์ฒด์ ์ผ๋ก ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. 2. preventDefault์ ์ญํ ๊ธฐ๋ณธ ๋์ ์ฐจ๋จ: preventDefault๋ ์ด๋ฒคํธ์ ๊ธฐ๋ณธ ๋์(์: ๋งํฌ ํด๋ฆญ ์ ํ์ด์ง ์ด๋)์ ์ฐจ๋จํ์ฌ ์์ฒด์ ์ธ ๋์์ ์ํํ ์ ์๊ฒ ํฉ๋๋ค. 3. ์ด๋ ์ํฉ์ preventDefault๋ฅผ ์ฌ์ฉํด์ผํ๋๊ฐ? ํผ ์ ์ถ ์ด๋ฒคํธ: ํผ ์ ์ถ ์ ๊ธฐ๋ณธ์ ์ผ๋ก ํ์ด์ง๊ฐ ์๋ก๊ณ ์นจ๋๋ ๊ฒ์ ๋ง๊ณ , JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋๊ธฐ์์ผ๋ก .. 2024. 3. 13. JavaScript Shallow Copy์ Deep Copy: ๊ฐ๋ , ํ์ฉ, ์ฅ๋จ์ JavaScript Shallow Copy์ Deep Copy: ๊ฐ๋ , ํ์ฉ, ์ฅ๋จ์ 1. Shallow Copy์ Deep Copy๋? ์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ฐ์ฒด๋ ๋ฐฐ์ด์ ๋ณต์ฌํ ๋, Shallow Copy์ Deep Copy๋ ๋ ๊ฐ์ง ์ฃผ์ํ ๋ฐฉ๋ฒ์ ๋๋ค. Shallow Copy(์์ ๋ณต์ฌ): ๊ธฐ์กด ๊ฐ์ฒด์ ๋ ํผ๋ฐ์ค๋ฅผ ๋ณต์ฌํ์ฌ ์๋ก์ด ๊ฐ์ฒด๋ฅผ ์์ฑํฉ๋๋ค. ๋ด๋ถ ๊ฐ์ฒด๋ ๊ฐ์ ๋ ํผ๋ฐ์ค๋ฅผ ๊ณต์ ํฉ๋๋ค. Deep Copy(๊น์ ๋ณต์ฌ): ๊ฐ์ฒด์ ๋ชจ๋ ๋ ๋ฒจ์ ๋ํด ์์ ํ ๋ณต์ฌ๋ฅผ ์ํํฉ๋๋ค. ์๋ก์ด ๊ฐ์ฒด๋ ๊ธฐ์กด ๊ฐ์ฒด์ ์์ ํ ๋ ๋ฆฝ์ ์ ๋๋ค. 2. Shallow Copy์ Deep Copy์ ์ญํ Shallow Copy: ๊ฐ์ฒด์ ์ผ๋ถ๋ถ๋ง ์์ ํ๊ณ ์ถ์ ๋ ์ ์ฉํ๋ฉฐ, ๋ณต์ฌ๊ฐ ๋น ๋ฆ ๋๋ค. ๊ทธ๋ฌ๋ ๋ด๋ถ ๊ฐ์ฒด์ ๋ณ๊ฒฝ์ ๊ณต์ ๋์ด ๋ฌธ์ ๊ฐ ๋ฐ.. 2024. 3. 12. Cascade: ํ๋ก๊ทธ๋๋ฐ์์ ๊ฐ๋ ์ฑ๊ณผ ํํ๋ ฅ ํฅ์์ ์ํ ๊ธฐ๋ฒ Cascade: ํ๋ก๊ทธ๋๋ฐ์์ ๊ฐ๋ ์ฑ๊ณผ ํํ๋ ฅ ํฅ์์ ์ํ ๊ธฐ๋ฒ 1. Cascade๋? Cascade(์นด์ค์ผ์ด๋)๋ ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ์์ ๋ฉ์๋ ํธ์ถ์ ์ฐ๊ฒฐํ์ฌ ํ ์ค๋ก ํํํ๋ ๊ธฐ๋ฒ์ ๋๋ค. ์ด๋ ์ฝ๋์ ๊ฐ๋ ์ฑ์ ํฅ์์ํค๊ณ ์์ ์ ๊ฐ๊ฒฐํ๊ฒ ํํํ ์ ์๋ ์ฅ์ ์ด ์์ต๋๋ค. 2. Cascade์ ์ญํ ๊ฐ๋ ์ฑ ํฅ์: ์ฌ๋ฌ ๋ฉ์๋ ํธ์ถ์ ํ ์ค๋ก ์ฐ๊ฒฐํ๋ฏ๋ก ์ฝ๋๊ฐ ๊ฐ๊ฒฐํด์ง๊ณ , ๋ฉ์๋ ํธ์ถ์ ํ๋ฆ์ ํ ๋์ ํ์ ํ ์ ์์ต๋๋ค. ํํ๋ ฅ ํฅ์: ์ฐ์๋ ๋ฉ์๋ ํธ์ถ์ ํตํด ์์ ์ ์ฐ์ด์ด ์ํํ ์ ์์ด, ๋ ผ๋ฆฌ์ ์ธ ํ๋ฆ์ ํํํ๊ธฐ ์ฉ์ดํฉ๋๋ค. 3. ์ธ์ Cascade๋ฅผ ์ฌ์ฉํด์ผํ๋๊ฐ? Cascade๋ ๋ค์๊ณผ ๊ฐ์ ์ํฉ์์ ํนํ ์ ์ฉํฉ๋๋ค: ๋น๋ ํจํด์์: ๋น๋ ํจํด์์ ์ฌ๋ฌ ์์ฑ์ ์ค์ ํ๊ณ ๊ฐ์ฒด๋ฅผ ์์ฑํ ๋ ๊ฐ .. 2024. 3. 11. Bastion ์๋ฒ: ์์ ํ ๋คํธ์ํฌ ์ ์์ ์ํ ํต์ฌ ๋ณด์ ์์ Bastion ์๋ฒ: ์์ ํ ๋คํธ์ํฌ ์ ์์ ์ํ ํต์ฌ ๋ณด์ ์์ 1. Bastion์ด๋? Bastion ์๋ฒ๋ ๋คํธ์ํฌ์ ์์ ํ ์ ๊ทผ์ ์ ๊ณตํ๋ ์ค๊ฐ ์๋ฒ๋ก, ์ธ๋ถ์์ ๋ด๋ถ ๋ฆฌ์์ค์ ์ ๊ทผํ๊ธฐ ์ํ ๊ฒ์ดํธ์จ์ด ์ญํ ์ ์ํํฉ๋๋ค. ์ด๋ ๋ณด์์ ๊ฐํํ๊ณ ์ธ๋ถ ๊ณต๊ฒฉ์ผ๋ก๋ถํฐ ๋ด๋ถ ์์คํ ์ ๋ณดํธํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. 2. Bastion ์๋ฒ์ ์ญํ ์ ๊ทผ ์ ์ด: ์ธ๋ถ์์ ๋ด๋ถ ๋ฆฌ์์ค์ ์ง์ ์ ๊ทผํ์ง ๋ชปํ๋๋ก ํ๊ณ , ํ๊ฐ๋ ์ฌ์ฉ์๋ง์ด Bastion์ ํตํด ์ ์ํ ์ ์๋๋ก ํฉ๋๋ค. ๋ณด์ ๊ฐํ: Bastion ์๋ฒ๋ ๊ฐ๋ ฅํ ๋ณด์ ์ ์ฑ ์ ์ ์ฉํ์ฌ ์ธ๋ถ์์ ๋ด๋ถ๋ก์ ์ ๊ทผ์ ๋ชจ๋ํฐ๋งํ๊ณ ํต์ ํจ์ผ๋ก์จ ๋ณด์์ ๊ฐํํฉ๋๋ค. 3. ์ธ์ Bastion์ ์ฌ์ฉํด์ผํ๋๊ฐ? Bastion ์๋ฒ๋ ๋ค์๊ณผ ๊ฐ์ ์ํฉ์์ ํนํ ์ ์ฉํฉ๋๋ค: .. 2024. 3. 7. ๋๋ฒ๊น (Debugging)์ ๊ฐ๋ ๊ณผ ํ์ฉ ๋๋ฒ๊น (Debugging)์ ๊ฐ๋ ๊ณผ ํ์ฉ ๋๋ฒ๊น ์ด๋? ๋๋ฒ๊น ์ ์ํํธ์จ์ด์์ ๋ฐ์ํ๋ ๋ฒ๊ทธ, ์ค๋ฅ, ํน์ ์์น ์๋ ๋์์ ์ฐพ์๋ด๊ณ ์์ ํ๋ ๊ณผ์ ์ ์๋ฏธํฉ๋๋ค. ์ด๋ ๊ฐ๋ฐ์๊ฐ ์ฝ๋์ ์ ํ์ฑ์ ๊ฒ์ฆํ๊ณ ํ๋ก๊ทธ๋จ์ด ์๋ํ ๋๋ก ์๋ํ๋๋ก ํ๋ ๋ฐ ์ค์ํ ์ญํ ์ ํฉ๋๋ค. ๋๋ฒ๊น ์ ์ฝ๋๋ฅผ ์ดํดํ๊ณ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐ ๋์์ด ๋๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๊ธฐ์ ์ ํฌํจํ๊ณ ์์ต๋๋ค. ๋๋ฒ๊น ์ ์ญํ 1. ์ค๋ฅ ํด๊ฒฐ ๋๋ฒ๊น ์ ์ฝ๋์์ ๋ฐ์ํ ์ค๋ฅ๋ฅผ ์ฐพ์๋ด๊ณ ์ด๋ฅผ ์์ ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ์ค๋ฅ ํด๊ฒฐ์ ํตํด ์์ ์ ์ด๊ณ ์ ๋ขฐ์ฑ ์๋ ์ํํธ์จ์ด๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. 2. ์ฝ๋ ์ดํด ๋๋ฒ๊น ์ ์ฝ๋์ ๋์์ ๋จ๊ณ๋ณ๋ก ์ดํด๋ณด๊ณ ์ดํดํ๋ ๋ฐ ๋์์ ์ค๋๋ค. ๊ฐ๋ฐ์๋ ๊ฐ ์ฝ๋ ๋ผ์ธ์์ ๋ณ์์ ๊ฐ์ ํ์ธํ๊ณ ์คํ ํ๋ฆ์ ์ถ์ ํ์ฌ ์ฝ๋์ ๋์์ ํ.. 2024. 3. 6. Visual Studio Code์ Run and Debug ๊ธฐ๋ฅ Visual Studio Code์ Run and Debug ๊ธฐ๋ฅ ์๊ฐ Visual Studio Code(VSCode)๋ ํ๋์ ์ด๊ณ ๊ฒฝ๋ํ๋ ์ฝ๋ ํธ์ง๊ธฐ๋ก, ๋ค์ํ ๊ฐ๋ฐ ์ธ์ด์ ํ๋ซํผ์ ๋ํ ํ๋ถํ ํ์ฅ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์ด ์ค์์ 'Run and Debug' ๊ธฐ๋ฅ์ ์ํํธ์จ์ด ๊ฐ๋ฐ์๋ค์ด ์ฝ๋๋ฅผ ์คํํ๊ณ ๋๋ฒ๊น ํ๋ ๋ฐ ํ์์ ์ธ ๋๊ตฌ์ ๋๋ค. VSCode Run and Debug์ ์ญํ 1. ์ฝ๋ ์คํ VSCode์ Run and Debug๋ ์ฝ๋๋ฅผ ์ ํํ ํ๊ฒฝ์์ ์คํํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ์ฌ์ฉ์๋ ๋จ์ถํค ๋๋ ๋ฉ๋ด๋ฅผ ํตํด ์ฝ๋๋ฅผ ์คํํ ์ ์์ผ๋ฉฐ, ์คํ ์ค์ธ ํ๋ก์ธ์ค์ ์ถ๋ ฅ์ ํ์ธํ ์ ์์ต๋๋ค. 2. ๋๋ฒ๊น ๋๋ฒ๊น ์ ์ฝ๋ ๋ด์ ์ค๋ฅ๋ฅผ ์ฐพ์๋ด๊ณ ์์ ํ๋ ๊ณผ์ ์ผ๋ก, VSCode๋ ์ฌ์ฉ์์๊ฒ ์ง๊ด์ ์ด๊ณ ๊ฐ๋ ฅ.. 2024. 3. 5. JavaScript Callstack: ์คํ ์ปจํ ์คํธ์ ํต์ฌ JavaScript Callstack: ์คํ ์ปจํ ์คํธ์ ํต์ฌ ์๊ฐ JavaScript Callstack(ํธ์ถ ์คํ)์ JavaScript ์์ง์ด ํจ์ ์คํ์ ๊ด๋ฆฌํ๋ ๋ฉ์ปค๋์ฆ ์ค ํ๋๋ก, ์ฝ๋์ ์คํ ์ปจํ ์คํธ๋ฅผ ์คํ ํํ๋ก ์ถ์ ํ๋ ๋ฐฉ์์ ๋๋ค. ์ด๋ ํจ์ ํธ์ถ๊ณผ ๋ฐํ์ ๊ด๋ฆฌํ๋ฉฐ, ์ฝ๋์ ์คํ ์์๋ฅผ ๊ฒฐ์ ํฉ๋๋ค. JavaScript Callstack์ ์ญํ 1. ํจ์ ํธ์ถ๊ณผ ๋ฐํ ๊ด๋ฆฌ Callstack์ ํจ์๊ฐ ํธ์ถ๋ ๋ ํด๋น ํจ์๋ฅผ ์คํ์ ์๊ณ , ํจ์์ ์คํ์ด ์๋ฃ๋๋ฉด ์คํ์์ ์ ๊ฑฐํฉ๋๋ค. ์ด๋ฅผ ํตํด ํ์ฌ ์ด๋ค ํจ์๊ฐ ์คํ ์ค์ธ์ง ์ถ์ ํ ์ ์์ต๋๋ค. 2. ์คํ ์ปจํ ์คํธ ๊ด๋ฆฌ ๊ฐ ํจ์ ์คํ์ ๋ํ ์คํ ์ปจํ ์คํธ๋ฅผ ์์ฑํ๊ณ ๊ด๋ฆฌํฉ๋๋ค. ์คํ ์ปจํ ์คํธ๋ ๋ณ์, ํจ์ ์ ์ธ ๋ฑ์ ์ ๋ณด๋ฅผ ๋ด๊ณ ์์ด ์ฝ๋ ์คํ์ .. 2024. 3. 5. Pinpoint: ๋ถ์ฐ ์์คํ ๋ชจ๋ํฐ๋ง ๋๊ตฌ Pinpoint: ๋ถ์ฐ ์์คํ ๋ชจ๋ํฐ๋ง ๋๊ตฌ ์๊ฐ Pinpoint๋ ์๋ฐ ๊ธฐ๋ฐ์ ๋๊ท๋ชจ ๋ถ์ฐ ์์คํ ์์์ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋ฐ ๋ฌธ์ ํด๊ฒฐ์ ์ง์ํ๋ ๋๊ตฌ๋ก, ๋ค์ด๋ฒ์์ ๊ฐ๋ฐ๋ ์คํ ์์ค ํ๋ก์ ํธ์ ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ ์ด์๋ฅผ ์ ํํ๊ฒ ํ์ ํ๊ณ ํด๊ฒฐํ๋ ๋ฐ ๋์์ด ๋๋ฉฐ, ๋ณต์กํ ๋ถ์ฐ ํ๊ฒฝ์์์ ํธ๋์ญ์ ์ถ์ , ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง, ๋ฃจํธ ์์ธ ๋ถ์ ๋ฑ์ ์ ๊ณตํฉ๋๋ค. Pinpoint์ ์ญํ 1. ํธ๋์ญ์ ์ถ์ Pinpoint๋ ๋ถ์ฐ ํ๊ฒฝ์์ ๋ฐ์ํ๋ ํธ๋์ญ์ ์ ์ถ์ ํ๊ณ ๊ฐ ํธ๋์ญ์ ์ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ฒด์ ์ธ ํ๋ฆ์ ์ดํดํ๊ณ ๋ณต์กํ ์์คํ ์์ ๋ฐ์ํ๋ ๋ฌธ์ ๋ฅผ ์ ์ํ๊ฒ ํด๊ฒฐํ ์ ์์ต๋๋ค. 2. ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋ถ์ฐ๋ ์๋ฒ, ์์ฉ ํ๋ก๊ทธ๋จ, ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ฑ์ ์ฑ๋ฅ์ ์ค์๊ฐ์ผ๋ก ๋ชจ๋ํฐ๋ง.. 2024. 3. 5. ์ด์ 1 2 3 4 5 ยทยทยท 15 ๋ค์