ํ๋ก๊ทธ๋๋ฐ ์ธ๊ณ๋ฅผ ํ๊ตฌํฉ์๋ค.
์๋ก์ด ์ ๋ณด๋ฅผ ์๊ฒ ๋๋ฉด ๊ณ์ ์ถ๊ฐํ๊ฒ ์ต๋๋ค.
1. ์ ์ฉํ ํ๋ก๊ทธ๋จ
(1) Visual Studio Code
https://code.visualstudio.com/Download
์์นญ VS Code๋ผ๊ณ ๋ถ๋ฅด๋ Visual Studio Code์ ๋๋ค. ๋ง์ดํฌ๋ก์ํํธ์ ํ๋ก๊ทธ๋จ์ผ๋ก, ๋ฌด๋ฃ๋ก ์ด์ฉํ ์ ์์ต๋๋ค. HTML, CSS, Javascript ๋ฑ ๋ค์ํ ํ๋ก๊ทธ๋๋ฐ ๋ฐ ๊ฐ๋ฐ ์์ ์ ํ ์ ์์ต๋๋ค. ํ์ฅํฉ์ด ๋ค์ํ์ฌ ์ถ๊ฐ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ฏ๋ก, ์ฌ์ฉ์์ ํ์์ ๋ฐ๋ผ ๊ด๋ฒ์ํ๊ฒ ์ด์ฉํ ์ ์๋ ์ ์ฉํ ํ๋ก๊ทธ๋จ์ ๋๋ค.
(2) [VS Code ํ์ฅํ๋ก๊ทธ๋จ] Live Server & Chrome
Live Server๋ Visual Studio Code์์ ๋งค์ฐ ์ธ๊ธฐ ์๋ ํ์ฅํ๋ก๊ทธ๋จ ์ค ํ๋๋ก, ์น ๊ฐ๋ฐ์๋ค์๊ฒ ์ค์๊ฐ์ผ๋ก ์น ํ์ด์ง๋ฅผ ๋ฏธ๋ฆฌ ๋ณด๊ณ ์ ๋ฐ์ดํธํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. HTML ์ฝ๋๊ฐ ๋์ํ๋ ๊ฒ์ ์ค์๊ฐ์ผ๋ก ๋ณผ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ๋ฐ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์์ฃผ ์๋ก ๊ณ ์น๊ฑฐ๋ ๋ค์ ๋ก๋ํ์ง ์์๋ ๋๋ฏ๋ก ๊ฐ๋ฐ ์์ ์ด ํจ์จ์ ์ผ๋ก ์ด๋ฃจ์ด์ง ์ ์์ต๋๋ค.
[Live Server ์ค์น ๋ฐฉ๋ฒ]
1. VS Code๋ฅผ ์ค์นํ ํ ์ข์ธก ํ๋จ ๋ถ์์์ผ๋ก ํ์ ๋ ํ๋ธ ๋ชจ์์ ํด๋ฆญํฉ๋๋ค.
2. ํ์ฅํฉ ๋ชฉ๋ก์ด ๋์ค๋ฉด, ์ ๊ฒ์ ์ฐฝ์ Live Server๋ฅผ ๊ฒ์ํฉ๋๋ค.
3. Install์ ํด๋ฆญํด ์ค์นํฉ๋๋ค.
[Live Server ํ์ฉ ๋ฐฉ๋ฒ]
1. Live Server๋ฅผ ์คํํ๋ ๋ธ๋ผ์ฐ์ ๋ ๊ฐ๊ธ์ Chrome์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์ค์น ํ ๊ธฐ๋ณธ ํ๋ก๊ทธ๋จ์ผ๋ก ์ง์ ํ๋ ๊ฒ์ ๊ถ์ฅ๋๋ฆฝ๋๋ค.
Chrome ์น๋ธ๋ผ์ฐ์ (google.com) ๋ค์ด๋ก๋
2. ์ฐ์ธก ํ๋จ Go Live ๋ฒํผ์ ํด๋ฆญํ๊ฑฐ๋, ์ฝ๋ ์์์ ๋ง์ฐ์ค ์ฐํด๋ฆญ ํ Open with Live Server๋ฅผ ํด๋ฆญํ์ฌ ์คํํ ์ ์์ต๋๋ค.
3. ์์ฑํ HTML ์ฝ๋์ ๊ฒฐ๊ณผ๋ฌผ์ด ์ ์ฐฝ์ผ๋ก ์คํ๋๋๋ฐ, ์ค์๊ฐ์ผ๋ก ์ฝ๋๋ฅผ ์์ ํ๋ฉฐ ์์ ํ ์ ์์ต๋๋ค.
(3) W3Schools
w3schools๋ ์น ๊ฐ๋ฐ์๋ฅผ ์ํ ํ์ต ๋ฆฌ์์ค ๋ฐ ํํ ๋ฆฌ์ผ์ ์ ๊ณตํ๋ ์จ๋ผ์ธ ์น์ฌ์ดํธ์ ๋๋ค. ์ด ์ฌ์ดํธ๋ ์น ๊ธฐ์ ๋ฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๊ด๋ จ๋ ๋ค์ํ ์ฃผ์ ๋ฅผ ๋ค๋ฃจ๋ฉฐ, ์ด๋ณด์๋ถํฐ ์ ๋ฌธ๊ฐ๊น์ง ๋ค์ํ ์์ค์ ๊ฐ๋ฐ์๋ฅผ ๋์์ผ๋ก ํ์ต ์๋ฃ๋ฅผ ์ ๊ณตํฉ๋๋ค.
(4) Github
GitHub: Let’s build from here · GitHub
๊ฐ๋ฐ์๋ฅผ ์ํ ์ต๊ณ ์ ์ปค๋ฎค๋ํฐ์ ๋๋ค. ํ ๊ฐ๋ฐ์์ ์ ๋ณด๋ฅผ ๊ณต์ ํ ์ ์๊ณ ํ๋ก์ ํธ๋ฅผ ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
(5) Netlify
Develop and deploy websites and apps in record time | Netlify
๋คํ๋ฆฌํผ (Netlify)๋ ์ ์ ์น์ฌ์ดํธ๋ฅผ ๋ฐฐํฌํ๊ณ ๊ด๋ฆฌํ๊ธฐ ์ํ ํด๋ผ์ฐ๋ ํ๋ซํผ์ ๋๋ค. ์ ์ ์น์ฌ์ดํธ๋ ์๋ฒ ์ธก์์ ๋์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฑํ๊ฑฐ๋ ์ฒ๋ฆฌํ๋ ๋์ , ๋ฏธ๋ฆฌ ์์ฑ๋ HTML, CSS, JavaScript์ ๊ฐ์ ์ ์ ํ์ผ๋ก ๊ตฌ์ฑ๋ ์น์ฌ์ดํธ๋ฅผ ์๋ฏธํฉ๋๋ค. ์ด๋ฌํ ์น์ฌ์ดํธ๋ ์ฃผ๋ก ๋ธ๋ก๊ทธ, ํฌํธํด๋ฆฌ์ค, ํ์ฌ ์๊ฐ ํ์ด์ง ๋ฑ๊ณผ ๊ฐ์ ์ปจํ ์ธ ๋ฅผ ์ ๊ณตํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
(6) Google ๊ฒ์์ด : bootstrap Themes & Templates
Bootstrap ํ ํ๋ฆฟ์ ๋ฌด๋ฃ๋ก ๋ค์ด๋ก๋ ๋ฐ์ ์ ์์ต๋๋ค.
๋ถํธ์คํธ๋ฉ(Bootstrap)์ ์น ๊ฐ๋ฐ์ ์ฌ์ฉ๋๋ ๋ฌด๋ฃ ์คํ ์์ค ํ๋ฐํธ์๋ ํ๋ ์์ํฌ์ ๋๋ค. ์ด ํ๋ ์์ํฌ๋ ์๋ ํธ์ํฐ์์ ๋ง๋ค์ด์ก์ผ๋ฉฐ ํ์ฌ๋ ์คํ ์์ค ์ปค๋ฎค๋ํฐ์ ์์๋ด์ฌ์๋ค์ ์ํด ์ ์ง๋ณด์๋๊ณ ์์ต๋๋ค. ๋ถํธ์คํธ๋ฉ์ HTML, CSS ๋ฐ JavaScript ๊ตฌ์ฑ ์์์ ์ปฌ๋ ์ ๊ณผ ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ์์คํ ์ ์ ๊ณตํ์ฌ ์ผ๊ด๋ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ์น์ฌ์ดํธ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋์์ธํ๊ณ ๊ตฌ์ถํ๋ ๋ฐ ๋์์ ์ค๋๋ค.
(6) CSS ์ฐ์ต ์ฌ์ดํธ
Flexbox(Flexible Box)๋ผ๋ CSS ๋ ์ด์์ ๋ชจ๋ธ์ ๊ฐ๋ฅด์ณ์ฃผ๋ ์ธํฐ๋ํฐ๋ธํ ์จ๋ผ์ธ ํํ ๋ฆฌ์ผ ์ฌ์ดํธ์ ๋๋ค. Flexbox๋ ์น ํ์ด์ง์ ์์๋ค์ ์ ์ฐํ๊ฒ ๋ฐฐ์นํ๊ณ ์ ๋ ฌํ๊ธฐ ์ํ ๊ธฐ์ ๋ก, ๋ณต์กํ ๋ ์ด์์์ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋๋ก ๋์์ค๋๋ค.
(7) Google Colaboratory
Colaboratory์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค - Colaboratory (google.com)
Google Colaboratory (๋๋ ์ค์ฌ์ Colab)์ ๊ตฌ๊ธ์ด ์ ๊ณตํ๋ ํด๋ผ์ฐ๋ ๊ธฐ๋ฐ์ ๋ฌด๋ฃ Jupyter ๋ ธํธ๋ถ ํ๊ฒฝ์ ๋๋ค. Jupyter ๋ ธํธ๋ถ์ ๋ฐ์ดํฐ ๋ถ์, ๋จธ์ ๋ฌ๋, ๋ฅ๋ฌ๋ ๋ฑ ๋ค์ํ ์์ ์ ์ํํ๊ณ ๋ฌธ์ํํ ์ ์๋ ์ธํฐ๋ํฐ๋ธํ ํ๊ฒฝ์ ์ ๊ณตํ๋ ๋๊ตฌ์ ๋๋ค. Google Colab์ ์ด๋ฌํ ๋ ธํธ๋ถ ํ๊ฒฝ์ ๊ตฌ๊ธ์ ํด๋ผ์ฐ๋ ์๋ฒ์์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์๋ค์ด ์น ๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ์ฌ์ฉํ ์ ์๋๋ก ํด์ค๋๋ค.
(8) FLEX ์ฐ์ต ์ฌ์ดํธ
(9) jquery ํจ์ ์ฐธ๊ณ ์ฌ์ดํธ
(10) ํ๋ก๊ทธ๋๋ฐ ์ฐ์ต ์ฌ์ดํธ - ๋ฐฑ์ค
์ฝ๋ฉ ๋ฌธ์ ๋ฅผ ํ๋ฉฐ ํ๋ก๊ทธ๋๋ฐ์ ์ฐ์ตํ ์ ์์ต๋๋ค.
(11) ํ๋ก๊ทธ๋๋ฐ ์ฐ์ต ์ฌ์ดํธ - ํ๋ก๊ทธ๋๋จธ์ค
์ฝ๋ฉ ๋ฌธ์ ๋ฅผ ํ๋ฉฐ ํ๋ก๊ทธ๋๋ฐ์ ์ฐ์ตํ ์ ์์ต๋๋ค.
(12) nodejs
react ํ๋ก๊ทธ๋จ
(13) Eclipse Jee (Java Enterprise Edition)
https://www.eclipse.org/downloads/packages/release/kepler/sr2/eclipse-ide-java-ee-developers
(14) JDK ๋ฒ์ 8, 11 or 14, 21
https://github.com/ojdkbuild/ojdkbuild
(15) Apache Tomcat
'IT' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JavaScript] (์๊ฐ) ์ด๋ฅผ ๋ถ๊ณผ ์ด๋ก ๋ณํํ๊ธฐ (0) | 2023.08.31 |
---|---|
[JavaScript] ๋ชซ๊ณผ ๋๋จธ์ง ๊ตฌํ๊ธฐ (0) | 2023.08.31 |
[CSS] ์ฐ์ ์์ (0) | 2023.08.25 |
[CSS] ์ ํ์ (0) | 2023.08.25 |
[HTML] ํ๋ก๊ทธ๋๋ฐ ์ ์ ์ฉํ ๋จ์ถํค (0) | 2023.08.24 |