Frontend
๋ช ์ฌ ยท ์น ๊ฐ๋ฐ
์น์ฌ์ดํธ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ์์ ์ด๊ณ ์ธํฐ๋ํฐ๋ธํ ๋ถ๋ถ โ ์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ์์ ์ง์ ๋ณด๊ณ ํฐ์นํ๊ณ ์ํธ์์ฉํ๋ ๋ชจ๋ ๊ฒ์ผ๋ก, HTML, CSS, JavaScript์ ๊ฐ์ ๊ธฐ์ ๋ก ๊ตฌ์ถ๋ฉ๋๋ค.
๊ทธ๋ํฝ ๋ชฉ์ ์ ๊ธฐ๋ฅ์ ์ด๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋๋ฉฐ ์ ๊ทผ ๊ฐ๋ฅํ ์ธํฐํ์ด์ค๋ก ๋ณํํ๋ ๋ฐ ์ค์ ์ ๋ ์น ๊ฐ๋ฐ ๋ถ์ผ๋ก, React๋ Next.js์ ๊ฐ์ ์ต์ ํ๋ ์์ํฌ๋ฅผ ํ์ฉํ์ฌ ์ ๋ คํ๊ณ ๋ฐ์ํ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์๊ฐ์ ๋ ๋๋ง, ์ ๋๋ฉ์ด์ , ๋ด๋น๊ฒ์ด์ ๋ฐ ์ฌ์ฉ์ ์ธํฐ๋์ ์ ๊ด๋ฆฌํ๋ ํด๋ผ์ด์ธํธ ์ธก ์ ํ๋ฆฌ์ผ์ด์ ๋ ์ด์ด โ UX/UI ๋์์ธ๊ณผ ๋ฐฑ์๋ ๋น์ฆ๋์ค ๋ก์ง ์ฌ์ด์ ๋ค๋ฆฌ๋ก, ๋์งํธ ์ ํ์ ์ฒด๊ฐ ํ์ง์ ์ง์ ์ ์ผ๋ก ๊ฒฐ์ ํฉ๋๋ค.
Frontend๋ ์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ์์ ์ง์ ์ํธ์์ฉํ๋ ์น์ฌ์ดํธ์ ๋ชจ๋ ๊ฐ์์ ์ด๊ณ ์ธํฐ๋ํฐ๋ธํ ์์๋ฅผ ์๋ฏธํฉ๋๋ค. HTML ๊ตฌ์กฐ, CSS ์คํ์ผ๋ง ๋ฐ JavaScript์ ๋์ ๋์์ ํฌํจํฉ๋๋ค. Async Code์์๋ ๋น ๋ฅด๊ณ ์ ๊ทผ ๊ฐ๋ฅํ๋ฉฐ ๊ฒ์ ์์ง ์ต์ ํ์ ๋ง์ถ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด React์ Next.js๋ก ๋ง์ถคํ ํ๋ก ํธ์๋ ์ธํฐํ์ด์ค๋ฅผ ์ค๊ณํฉ๋๋ค.
๋ฐฑ์๋ ๊ฐ๋ฐ์๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ๋ํ๋ ์๋ฒ ๋ก์ง, ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ฐ 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 ๊ฐ๋ฐ์๋ค์ ๊ฐ ํ๋ก์ ํธ์์ ์ต์ ์ ๊ธฐ์ ์ ์๋์ง๋ฅผ ๋ณด์ฅํ๊ธฐ ์ํด ์ด ๋ ์ ๋ฌธ ๋ถ์ผ๋ฅผ ๋ชจ๋ ๋ง์คํฐํฉ๋๋ค.