๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์ „์ฒด ๊ธ€

(112)
์›Œ๋ฐ์—… ์นผ๋Ÿผ 3 - ์•„ํ† ๋ฏน ํ•ด๋น— ๋‚ด์šฉ ์š”์•ฝ ์šฐ๋ฆฌ๊ฐ€ ๋‹ค์งํ•œ ๋ชฉํ‘œ๋ฅผ ์ž˜ ์‹คํ–‰ํ•˜์ง€ ๋ชปํ•˜๋Š” ์ด์œ ๋Š” ์‹œ์ž‘๋ถ€ํ„ฐ ๋„ˆ๋ฌด ํฐ ๊ณ„ํš์„ ์„ธ์› ๊ธฐ ๋•Œ๋ฌธ์ผ ์ˆ˜๋„ ์žˆ๋‹ค.์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ชฉํ‘œ์— ๋„๋‹ฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๊ธธ๊ฒŒ ๋ณด๊ณ , 1๋„๋งŒ ํ‹€์–ด์ง€๋„๋ก ์ž‘๊ฒŒ ๋‚˜๋ˆ  ์Šต๊ด€์„ ๋ฐ”๊ฟ”๊ฐ€๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค. 1) ํ–‰๋™์— ๋Œ€ํ•œ ๋งˆ์ฐฐ์ข‹์€ ์Šต๊ด€์„ ๋“ค์ด๋ ค๋ฉด ํ–‰๋™์˜ ๋Œ€ํ•œ ๋งˆ์ฐฐ์„ ์ค„์ด๊ณ , ๋ฐ˜๋Œ€๋กœ ๋‚˜์œ ์Šต๊ด€์„ ์—†์• ๋ ค๋ฉด ํ–‰๋™์— ๋Œ€ํ•œ ๋งˆ์ฐฐ์„ ๋†’์ด๋ฉด ๋œ๋‹ค๊ณ  ํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋…์„œ๋Ÿ‰์„ ๋Š˜๋ฆฌ๊ณ  ์‹ถ๋‹ค๋ฉด ์ฑ…์„ ๋“ค๊ณ  ๋‹ค๋‹ˆ๋Š” ์Šต๊ด€์„ ๋“ค์ด๊ณ , ์›นํˆฐ์„ ๋Š๊ณ  ์‹ถ์„ ๋•Œ๋Š” ์›นํˆฐ ์–ดํ”Œ์„ ์‚ญ์ œํ•ด ์Šต๊ด€์ด ์ง€์†๋˜๊ธฐ ํž˜๋“ค๊ฒŒ ํ•˜๋Š” ์‹์ด๋‹ค. 2) ์ •์ฒด์„ฑ์˜ ๋ณ€ํ™”๋ˆ„๊ตฌ๋“  ๋ชฉํ‘œ๋Š” ์„ค์ •ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๋ชฉํ‘œ๊นŒ์ง€ ๊ฐ€๊ธฐ ์œ„ํ•ด์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์‹œ์ž‘์€ ๋ฐ”๋กœ ์ •์ฒด์„ฑ์„ ๋ณ€ํ™”์‹œํ‚ค๋Š” ๊ฒƒ์ด๋‹ค. ์ฆ‰ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค ํ•œ๋‹ค๋ฉด ์ปดํ“จํ„ฐ๊ฐ€ ์ข‹์•„์ ธ์•ผ๋งŒ ์ปดํ“จํ„ฐ์™€ ์นœ์ˆ™ํ•ด์งˆ ์ˆ˜ ์žˆ๋‹ค. ๊ฒŒ์ž„ํ•˜๋Š”..
๋น„๊ธฐ๋„ˆ ํŠธ๋ž™ 8 - CSS ์ด๋ก  (1) ๋‚ด์šฉ ์š”์•ฝ CSS(Cascading Style Sheets) : HTML, XML๊ฐ™์€ ๋งˆํฌ์—… ์–ธ์–ด ๋ฌธ์„œ์˜ ์Šคํƒ€์ผ์„ ๊พธ๋ฏธ๊ธฐ ์œ„ํ•œ ์Šคํƒ€์ผ ์‹œํŠธ ์–ธ์–ดCSS ์†์„ฑ ํ•™์Šต ์‚ฌ์ดํŠธ : w3schools  css ์ •์˜ํ•˜๊ธฐ1. ์ธ๋ผ์ธ ์Šคํƒ€์ผ :  2. ์™ธ๋ถ€ css ํŒŒ์ผ (๊ถŒ์žฅ) : ์š”์†Œ์— href ์†์„ฑ์œผ๋กœ css ํŒŒ์ผ๋ช…์„ ์ž…๋ ฅํ•˜๋Š” ๋ฐฉ์‹ style.css@charset "UTF-8";body { margin : 0; padding : 20px; font-family: Arial, sans-serif;}h1 { background-color : black; color : #fff;}h1, h2 { text-align: center;}a { text-decoration: none; ..
๋น„๊ธฐ๋„ˆ ํŠธ๋ž™ 7 - HTML ์ด๋ก  ๋‚ด์šฉ ์š”์•ฝ HTML(HyperText Markup Language) : ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๊ธฐ๋ณธ์ ์ธ ๋งˆํฌ์—… ์–ธ์–ดHTML ํ•™์Šต ์‚ฌ์ดํŠธ : MDN, W3school ์•„๋ž˜๋Š” ๊ธฐ๋ณธ์ ์ธ html ํŒŒ์ผ์˜ ํ‹€์ด๋‹ค.   html ๋ฌธ์„œ ์•ˆ์—๋Š” ํฌ๊ฒŒ  ๊ฐœ์ธ์ ์œผ๋กœ ๋ฉ”ํƒ€ ํƒœ๊ทธ๋Š” ์ž˜ ๋ชฐ๋ผ์„œ ์ฐพ์•„๋ดค๋‹ค → https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name  : ์‹ค์ œ๋กœ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” ๋ถ€๋ถ„ ์˜ค๋Š˜ ํ•  ์ผ ๊ณต๋ถ€ํ•˜๊ธฐ..... ๋จน๊ธฐ..... ์ž๊ธฐ.....   ์•„๋ž˜์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ๋ธŒ๋ผ์šฐ์ €์— ๋ Œ๋”๋งํ–ˆ์„ ๋•Œ ์˜ค๋Š˜ ํ•  ์ผ ๊ณต๋ถ€ํ•˜๊ธฐ..... ๋จน๊ธฐ..... ..
๋น„๊ธฐ๋„ˆ ํŠธ๋ž™ 6 - Git๊ณผ GitHub ๋‚ด์šฉ ์š”์•ฝ - Git๋ฒ„์ „ ๊ด€๋ฆฌ ์‹œ์Šคํ…œ์œผ๋กœ, ์ฝ”๋“œ์˜ ๋ณ€๊ฒฝ์ด๋ ฅ์„ ์ถ”์  ๋ฐ ๊ด€๋ฆฌํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.๋กœ์ปฌ(๊ฐœ์ธ ์ปดํ“จํ„ฐ)์—์„œ ๋™์ž‘ํ•˜๋ฉฐ, ์ธํ„ฐ๋„ท ์—ฐ๊ฒฐ ์—†์ด๋„ ๋ฒ„์ „ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค. - GitHubGit์„ ์‚ฌ์šฉํ•œ ์ฝ”๋“œ ํ˜ธ์ŠคํŒ… ํ”Œ๋žซํผ์œผ๋กœ, Git์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์˜จ๋ผ์ธ์— ์ €์žฅํ•˜๊ณ  ๊ณต์œ ํ•˜๋Š” ๊ณต๊ฐ„์ด๋‹ค.GitHub๋กœ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ์ˆ˜์ • ์š”์ฒญ์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ์ ํŠธ์— ์ฃผ๋กœ ์“ฐ์ธ๋‹ค.GitLab, Bitbucket, SourceForge, AWS CodeCommit, Gitea, Azure Repos ๋“ฑ์˜ ์œ ์‚ฌ ํ”Œ๋žซํผ์ด ์žˆ๋‹ค.  ์„ค์น˜ ํ™•์ธ  Git์€ ์˜ˆ์ „์— ์„ค์น˜ํ–ˆ์–ด์„œ ํ™•์ธ๋งŒ ํ•ด์คฌ๋‹ค.  GitHub CLI ์„ค์น˜ - https://git-scm.com/  GitHub ์ž”๋””์‹ฌ๊ธฐ 1. GitHub์— ๋กœ๊ทธ์ธ → ์šฐ์ธก ์ƒ..
๋น„๊ธฐ๋„ˆ ํŠธ๋ž™ 5 - CLI(Command Line Interface) ๋‚ด์šฉ ์š”์•ฝ - ํ„ฐ๋ฏธ๋„ : ์ปดํ“จํ„ฐ์™€ ์‚ฌ์šฉ์ž ๊ฐ„์˜ ์†Œํ†ต์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ๋ช…๋ น์ค„ ์ธํ„ฐํŽ˜์ด์Šค(CLI)์‚ฌ์šฉ์ž๊ฐ€ ํ…์ŠคํŠธ ๊ธฐ๋ฐ˜ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜๊ณ , ์ž…๋ ฅ๋œ ๋ช…๋ น์–ด๋Š” ์šด์˜์ฒด์ œ์˜ ์‰˜์„ ํ†ตํ•ด ํ•ด์„๋ผ ์‹œ์Šคํ…œ์˜ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์ œ์–ด, ์‹คํ–‰ํ•œ๋‹ค.๋ช…๋ น์–ด๋ฅผ ์ง์ ‘ ์ž…๋ ฅํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ํ™˜๊ฒฝ๊ณผ๋Š” ๋ฉ€์ง€๋งŒ ๋ณต์žกํ•œ ์ž‘์—…, ๋Œ€๊ทœ๋ชจ ์‹œ์Šคํ…œ ๊ด€๋ฆฌ ๋“ฑ์„ ๊ฐ„๋‹จํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.๋งŽ์€ ๊ฐœ๋ฐœ ๋„๊ตฌ๋‚˜ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ CLI ๋„๊ตฌ๋ฅผ ์ œ๊ณตํ•˜๋ฉฐ, ๋งŽ์€ ์„œ๋ฒ„๊ฐ€ CLI ํ™˜๊ฒฝ์—์„œ ๊ด€๋ฆฌ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์•Œ์•„๋‘ฌ์•ผ ํ•œ๋‹ค.  - ํ„ฐ๋ฏธ๋„ ์‹คํ–‰ 1. Windowscmd(๊ธฐ๋ณธ์ ์ธ ์œˆ๋„์šฐ ๋ช…๋ น์–ด๋กœ ํŒŒ์ผ ๋ฐ ๋””๋ ‰ํ† ๋ฆฌ ๊ด€๋ฆฌ, ๋„คํŠธ์›Œํฌ ์„ค์ • ๋“ฑ ๊ฐ€๋Šฅ) : Win+R cmd Enter Powershell(๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ง€์›, ์Šคํฌ๋ฆฝํŠธ ์ž‘์„ฑ ๋ฐ ์ž๋™ํ™” ์ž‘์—…์— ์œ ๋ฆฌ..
๋น„๊ธฐ๋„ˆ ํŠธ๋ž™ 4 - VSCode ๋‚ด์šฉ ์š”์•ฝ - IDE : ํ†ตํ•ฉ ๊ฐœ๋ฐœ ํ™˜๊ฒฝํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ํ•„์š”ํ•œ ๋‹ค์–‘ํ•œ ๋„๊ตฌ๋ฅผ ํ†ตํ•ฉํ•œ SW๋กœ, ์ฝ”๋“œ ์ž‘์„ฑ/๋””๋ฒ„๊น…/ํ…Œ์ŠคํŠธ/๋นŒ๋“œ ๋“ฑ์ด ์ „๋ถ€ ๊ฐ€๋Šฅํ•˜๋‹ค.Visual Studio, IntelliJ IDEA, PyCharm, Eclipse ๋“ฑ์ด ์žˆ๋‹ค. - Code Editor : ์ฝ”๋“œ ํŽธ์ง‘ ๋„๊ตฌํ…์ŠคํŠธ ํŒŒ์ผ์„ ์ž‘์„ฑํ•˜๊ณ  ํŽธ์ง‘ํ•˜๋Š” ๋„๊ตฌ๋กœ, ์ฝ”๋”ฉ ์‹œ ์ฃผ๋กœ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š”๋ฐ ์‚ฌ์šฉํ•œ๋‹ค.ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๋Š” ์ œํ’ˆ์ด ์žˆ์œผ๋ฉฐ ์‹œ์Šคํ…œ ์ž์›์„ ๊ฑฐ์˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„ ์‹คํ–‰์†๋„๊ฐ€ ๋น ๋ฅด๋‹ค.Visual Studio Code, Notepad++, Vim ๋“ฑ์ด ์žˆ๋‹ค. - Visual Studio Code ๊ฐ€๋ณ๊ณ  ๋น ๋ฅธ Code Editor์ง€๋งŒ, ์—ฌ๋Ÿฌ ํ™•์žฅ ๊ธฐ๋Šฅ์„ ์„ค์น˜ํ•˜๋ฉด IDE์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.๋ชจ๋“  ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์— ๋งž์ถฐ ํ™˜๊ฒฝ์„ ์„ค..
๋น„๊ธฐ๋„ˆ ํŠธ๋ž™ 3 - ์›น ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ ๋‘ ํฌ์ง€์…˜ ๋‚ด์šฉ ์š”์•ฝ ์›น ๊ฐœ๋ฐœ์€ ์‚ฌ์šฉ์ž๊ฐ€ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•ด ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” SW์ธ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์œผ๋กœ, SNS, OTT ์„œ๋น„์Šค, ์Œ์•… ์ŠคํŠธ๋ฆฌ๋ฐ ์„œ๋น„์Šค, ์—ฌํ–‰ ์˜ˆ์•ฝ ์„œ๋น„์Šค ๋“ฑ ๋ชจ๋‘ ํฌํ•จ๋œ๋‹ค. ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ํด๋ผ์ด์–ธํŠธ - ์„œ๋ฒ„ ๊ฐ„ ์ƒํ˜ธ ์ž‘์šฉ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋™์ž‘ํ•˜๋ฉฐ, ์—ฌ๊ธฐ์„œ ํด๋ผ์ด์–ธํŠธ ์ชฝ์ด ํ”„๋ก ํŠธ์—”๋“œ, ์„œ๋ฒ„ ์ชฝ์ด ๋ฐฑ์—”๋“œ๋ผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. - ํ”„๋ก ํŠธ์—”๋“œHTML, CSS, JS๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ•ด ์›น ํŽ˜์ด์ง€์˜ ๋ ˆ์ด์•„์›ƒ, ๋””์ž์ธ ๋“ฑ์˜ ์ƒํ˜ธ ์ž‘์šฉ์„ ๋‹ด๋‹นํ•œ๋‹ค. ๋””์ž์ธ ๊ฐ๊ฐ, ์ฐฝ์˜์„ฑ, ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ์Šคํ‚ฌ, UX(์‚ฌ์šฉ์ž ๊ฒฝํ—˜) ์ดํ•ด, ๋ฌธ์ œ ํ•ด๊ฒฐ ๋Šฅ๋ ฅ, ์ง€์†์ ์ธ ํ•™์Šต ์˜์ง€ ๋“ฑ์˜ ์—ญ๋Ÿ‰์„ ๊ฐ€์ง€๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.  - ๋ฐฑ์—”๋“œ ์„œ๋ฒ„ ์ธก ๋™์ž‘์„ ๋‹ค๋ฃจ๋ฉฐ, DB์™€์˜ ์ƒํ˜ธ ์ž‘์šฉ, ์‚ฌ์šฉ์ž ์š”์ฒญ์— ๋”ฐ๋ฅธ ๋กœ์ง ์ฒ˜๋ฆฌ, ๋ณด์•ˆ, ์„ฑ๋Šฅ ์ตœ์ ํ™” ๋“ฑ์„ ๋‹ด๋‹นํ•œ๋‹ค. ๋…ผ..
์›Œ๋ฐ์—… ์นผ๋Ÿผ 2 - ๋ฉ”ํƒ€์ธ์ง€ ๋‚ด์šฉ ์š”์•ฝ ๋ฉ”ํƒ€์ธ์ง€๋ž€ ์„ฑ์žฅ์„ ์œ„ํ•ด ์ž์‹ ์„ ์ •ํ™•ํžˆ ๋ฐ”๋ผ๋ณด๊ณ  ์ธ์ •ํ•  ์ˆ˜ ์žˆ๋Š” ํƒœ๋„๋‚˜ ์ž๊ธฐ ์ธ์ง€ ๋Šฅ๋ ฅ์„ ๋งํ•œ๋‹ค. ๋‹ค๋งŒ ์„ฑ์žฅ์— ์žˆ์–ด์„œ ์ด ๋ฉ”ํƒ€์ธ์ง€๋ฅผ ๊ฐ€์ง€๋Š” ๊ฐ€์ง„ ์ƒํƒœ์—์„œ ๊ทธ๋Œ€๋กœ ์˜๊ธฐ์†Œ์นจํ•ด์ ธ์žˆ๊ฑฐ๋‚˜, ์ž์‹ ๊ฐ์„ ์žƒ๊ณ  ํฌ๊ธฐํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ์ด๋ฅผ ํ† ๋Œ€๋กœ ๊ฑธ์–ด๋‚˜๊ฐ€๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค. ์นผ๋Ÿผ์— ์ฒจ๋ถ€๋œ ๋ฆฌ์‚ฌ ์† ๊ต์ˆ˜๋‹˜์˜ ๊ฐ•์˜ ์˜์ƒ์—์„œ, ๊ต์ˆ˜๋‹˜์ด ์ฝ์œผ์…จ๋˜ ์ฑ…์— ๋ฉ”ํƒ€์ธ์ง€๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ ํ˜€์žˆ์—ˆ๋‹ค๊ณ  ํ•œ๋‹ค.- ๋ฉ”ํƒ€์ธ์ง€๋Š” ์ž๊ธฐ ์ž์‹ ์„ ๋ณด๋Š” ๊ฑฐ์šธ์ด๋‹ค.- ๊ฑฐ์šธ์„ ๋ณด๋ฉด์„œ ์ž๊ธฐ ์ž์‹ ์„ ๋ฏฟ๋Š” ๋Šฅ๋ ฅ์ด๋‹ค.- ๊ฑฐ์šธ์„ ๋ณด๋ฉด์„œ ๋‚˜์˜ ์™„๋ฒฝํ•˜์ง€ ์•Š์€ ๋ชจ์Šต์„ ์ธ์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๋А๋‚€ ์  ํ•™์ฐฝ์‹œ์ ˆ์—๋Š” ์ ๊ทน์ ์œผ๋กœ ์ˆ˜์—…์— ์ฐธ์—ฌํ–ˆ์—ˆ๋Š”๋ฐ, ํ•œ๋ฒˆ ์˜ค๋‹ต์„ ๋งํ•ด "๊ทธ๊ฑด ์•„๋‹ˆ๋‹ค" ๋ผ๋Š” ๋ง๊ณผ ํ•จ๊ป˜ ํฐ ์ฐฝํ”ผ๋ฅผ ์ฃผ๋˜ ์„ ์ƒ๋‹˜์ด ๊ณ„์…จ๋‹ค. ๊ทธ ์ดํ›„๋กœ๋Š” ์ง€๋ชฉ์„ ๋‹นํ•˜๋ฉด ๊ฒจ์šฐ ์–˜๊ธฐํ•˜๋Š” ์ •๋„๋กœ ์†Œ..