Frontend

๋ช…์‚ฌ ยท ์›น ๊ฐœ๋ฐœ

1.

์›น์‚ฌ์ดํŠธ๋‚˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ฐ€์‹œ์ ์ด๊ณ  ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•œ ๋ถ€๋ถ„ โ€” ์‚ฌ์šฉ์ž๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง์ ‘ ๋ณด๊ณ  ํ„ฐ์น˜ํ•˜๊ณ  ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์œผ๋กœ, HTML, CSS, JavaScript์™€ ๊ฐ™์€ ๊ธฐ์ˆ ๋กœ ๊ตฌ์ถ•๋ฉ๋‹ˆ๋‹ค.

2.

๊ทธ๋ž˜ํ”ฝ ๋ชฉ์—…์„ ๊ธฐ๋Šฅ์ ์ด๊ณ  ์„ฑ๋Šฅ์ด ๋›ฐ์–ด๋‚˜๋ฉฐ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐ ์ค‘์ ์„ ๋‘” ์›น ๊ฐœ๋ฐœ ๋ถ„์•ผ๋กœ, React๋‚˜ Next.js์™€ ๊ฐ™์€ ์ตœ์‹  ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์œ ๋ คํ•˜๊ณ  ๋ฐ˜์‘ํ˜•์ธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

3.

์‹œ๊ฐ์  ๋ Œ๋”๋ง, ์• ๋‹ˆ๋ฉ”์ด์…˜, ๋‚ด๋น„๊ฒŒ์ด์…˜ ๋ฐ ์‚ฌ์šฉ์ž ์ธํ„ฐ๋ž™์…˜์„ ๊ด€๋ฆฌํ•˜๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ ˆ์ด์–ด โ€” UX/UI ๋””์ž์ธ๊ณผ ๋ฐฑ์—”๋“œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง ์‚ฌ์ด์˜ ๋‹ค๋ฆฌ๋กœ, ๋””์ง€ํ„ธ ์ œํ’ˆ์˜ ์ฒด๊ฐ ํ’ˆ์งˆ์„ ์ง์ ‘์ ์œผ๋กœ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.

ํ•จ๊ป˜ ๋ณด๊ธฐ
HTML/CSSJavaScriptReactUX

๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ๋™ํ•˜๋Š” ์„œ๋ฒ„ ๋กœ์ง, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๋ฐ API๋ฅผ ์ „๋ฌธ์œผ๋กœ ํ•˜๋Š” ์—”์ง€๋‹ˆ์–ด์ž…๋‹ˆ๋‹ค. ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๊ณ , ์ธ์ฆ์„ ๊ด€๋ฆฌํ•˜๋ฉฐ, ๋ฐ์ดํ„ฐ ์˜์†์„ฑ์„ ๋ณด์žฅํ•˜๋Š” ๋ณด์ด์ง€ ์•Š๋Š” ์•„ํ‚คํ…์ฒ˜๋ฅผ ์„ค๊ณ„ํ•ฉ๋‹ˆ๋‹ค. Async Code์˜ ๋ฐฑ์—”๋“œ ํŒ€์€ Node.js์™€ RESTful ์•„ํ‚คํ…์ฒ˜์— ๋Šฅ์ˆ™ํ•˜์—ฌ ๊ฒฌ๊ณ ํ•˜๊ณ  ์•ˆ์ „ํ•˜๋ฉฐ ๊ณ ๊ฐ€์šฉ์„ฑ์ธ ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค.

ํ’€์Šคํƒ ๊ฐœ๋ฐœ์€ ํ”„๋ก ํŠธ์—”๋“œ(์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค)์™€ ๋ฐฑ์—”๋“œ(์„œ๋ฒ„, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค, API) ๋ชจ๋‘๋ฅผ ๋งˆ์Šคํ„ฐํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๋Š” ์™„์ „ํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์„ค๊ณ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Async Code์—์„œ React์™€ Node.js๋ฅผ ํ™œ์šฉํ•œ ํ’€์Šคํƒ JavaScript ์ „๋ฌธ์„ฑ์„ ํ†ตํ•ด ๊ฐ ๊ธฐ์ˆ  ๋ ˆ์ด์–ด๊ฐ€ ์™„๋ฒฝํ•˜๊ฒŒ ์ตœ์ ํ™”๋œ ์ผ๊ด€์„ฑ ์žˆ๋Š” ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๋ฉด ์›น์˜ ์„ธ ๊ฐ€์ง€ ํ•ต์‹ฌ ์ถ•์„ ๋งˆ์Šคํ„ฐํ•˜๋Š” ๊ฒƒ์ด ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค: ๊ตฌ์กฐ๋ฅผ ์œ„ํ•œ HTML, ์Šคํƒ€์ผ์„ ์œ„ํ•œ CSS, ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ๋ฅผ ์œ„ํ•œ JavaScript. React์™€ ๊ฐ™์€ ์ตœ์‹  ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ํ•™์Šตํ•˜๋ฉด ์ „๋ฌธ์ ์ธ ์ทจ์—…์ด ํฌ๊ฒŒ ๋นจ๋ผ์ง‘๋‹ˆ๋‹ค. ๋˜ํ•œ ์ ‘๊ทผ์„ฑ(RGAA/WCAG), Git๊ณผ ๊ฐ™์€ ๋ฒ„์ „ ๊ด€๋ฆฌ ๋„๊ตฌ, ์›น ์„ฑ๋Šฅ ๋ชจ๋ฒ” ์‚ฌ๋ก€์— ๋Œ€ํ•œ ๊ต์œก์„ ํ†ตํ•ด ์‹œ์žฅ์—์„œ ์ฐจ๋ณ„ํ™”ํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์š” ๋ฐฑ์—”๋“œ ์–ธ์–ด๋กœ๋Š” Node.js(์„œ๋ฒ„ ์‚ฌ์ด๋“œ JavaScript), Python, Java, PHP, Go๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. Node.js๋Š” ์ „์ฒด ์Šคํƒ์—์„œ JavaScript๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด ๊ฐœ๋ฐœ๊ณผ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ๊ฐ„์†Œํ™”ํ•˜๋Š” ๋Šฅ๋ ฅ ๋•๋ถ„์— ์ ์  ๋” ์ฃผ๋ชฉ๋ฐ›๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Async Code์—์„œ๋Š” ๊ณ ๊ฐ์—๊ฒŒ ํ†ตํ•ฉ๋˜๊ณ  ๊ณ ์„ฑ๋Šฅ์ด๋ฉฐ ์‰ฝ๊ฒŒ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์•„ํ‚คํ…์ฒ˜๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด Node.js์™€ JavaScript ์ƒํƒœ๊ณ„๋ฅผ ์šฐ์„ ํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ์˜ ์„ธ ๊ฐ€์ง€ ๊ธฐ๋ณธ ์–ธ์–ด๋Š” HTML(์˜๋ฏธ๋ก ์  ๊ตฌ์กฐ), CSS(์Šคํƒ€์ผ๋ง ๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜), JavaScript(๋กœ์ง ๋ฐ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ)์ž…๋‹ˆ๋‹ค. ์‹ค๋ฌด์—์„œ ๊ฐœ๋ฐœ์ž๋“ค์€ JavaScript์˜ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•˜๋Š” React, Vue.js, Angular์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ €ํฌ ์—์ด์ „์‹œ Async Code๋Š” React์™€ Next.js๋ฅผ ํ™œ์šฉํ•˜์—ฌ ํ˜„๋Œ€์ ์ด๊ณ  ๋ฐ˜์‘ํ˜•์ด๋ฉฐ SEO์— ์™„๋ฒฝํ•˜๊ฒŒ ์ตœ์ ํ™”๋œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๊ณ  ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ(๋ฒ„ํŠผ, ์–‘์‹, ์• ๋‹ˆ๋ฉ”์ด์…˜)์— ํ•ด๋‹นํ•˜๊ณ , ๋ฐฑ์—”๋“œ๋Š” ๋ณด์ด์ง€ ์•Š๋Š” ์„œ๋ฒ„ ๋กœ์ง(๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค, ์ธ์ฆ, API)์„ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•˜๊ธฐ ์œ„ํ•ด HTTP ์š”์ฒญ์„ ํ†ตํ•ด ๋ฐฑ์—”๋“œ์™€ ํ†ต์‹ ํ•ฉ๋‹ˆ๋‹ค. Async Code์—์„œ๋Š” ์ด ๋‘ ๋ ˆ์ด์–ด๋ฅผ ์™„๋ฒฝํ•˜๊ฒŒ ๋งˆ์Šคํ„ฐํ•˜์—ฌ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์ผ๊ด€๋˜๊ณ  ๊ณ ์„ฑ๋Šฅ์ด๋ฉฐ ์•ˆ์ „ํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์ธ๊ธฐ ์žˆ๋Š” ๋ฐฑ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ๋Š” Express.js(Node.js), Django(Python), Spring Boot(Java), Laravel(PHP)์ด ์žˆ์Šต๋‹ˆ๋‹ค. Express.js๋Š” ๊ฒฝ๋Ÿ‰์„ฑ๊ณผ ์œ ์—ฐ์„ฑ์œผ๋กœ JavaScript ์ƒํƒœ๊ณ„๋ฅผ ์ง€๋ฐฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ €ํฌ ์—์ด์ „์‹œ๋Š” Node.js์™€ ๊ฒฐํ•ฉ๋œ Express.js๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ณ ์„ฑ๋Šฅ์˜ ์•ˆ์ „ํ•œ REST API๋ฅผ ๊ตฌ์ถ•ํ•˜๋ฉฐ, ํ”„๋ก ํŠธ์—”๋“œ ์ธก React ์ธํ„ฐํŽ˜์ด์Šค์™€ ์™„์ „ํ•œ ๊ธฐ์ˆ ์  ์ผ๊ด€์„ฑ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค, ์ ‘๊ทผ์„ฑ, ๋ฐ˜์‘ํ˜• ๋””์ž์ธ ๋ฐ ๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์— ์ง‘์ค‘ํ•ฉ๋‹ˆ๋‹ค. ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๋Š” ์„œ๋ฒ„, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๋ฐ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ๋™ํ•˜๋Š” ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ์„ค๊ณ„ํ•ฉ๋‹ˆ๋‹ค. ํ•จ๊ป˜ ๊ทธ๋“ค์€ ํ•„์ˆ˜์ ์ธ ์ƒํ˜ธ ๋ณด์™„ ํŒ€์„ ํ˜•์„ฑํ•ฉ๋‹ˆ๋‹ค. Async Code์—์„œ ์ €ํฌ ํ’€์Šคํƒ JavaScript ๊ฐœ๋ฐœ์ž๋“ค์€ ๊ฐ ํ”„๋กœ์ ํŠธ์—์„œ ์ตœ์ ์˜ ๊ธฐ์ˆ ์  ์‹œ๋„ˆ์ง€๋ฅผ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด ์ด ๋‘ ์ „๋ฌธ ๋ถ„์•ผ๋ฅผ ๋ชจ๋‘ ๋งˆ์Šคํ„ฐํ•ฉ๋‹ˆ๋‹ค.