웹개발 전체 과정
웹은 크게 세 부분으로 나눠지는데, 사용자에게 보여지는 화면을 구현하는 프론트엔드, 사용자에게 보여지지 않는 로직을 담당하는 백엔드, 그리고 데이터를 관리하는 데이터베이스이다.
개발 과정
프론트엔드
HTML, CSS, JavaScript 등으로 사용자에게 보여질 화면을 만든다. 여기에서 HTML은 웹사이트의 뼈대를 만들고, CSS는 그 위에 스타일을 적용하며, JavaScript는 사용자 입력에 따라서 기능을 구현한다.
개발 과정을 더욱 효과적으로 하기 위해서 다양한 프론트엔드 라이브러리 / 프레임워크가 생겨났다. 라이브러리는 다른 개발자가 만들어 놓은 기능을 가져다 사용하는 것이고, 프레임워크는 단순히 기능을 가져다 쓰는 것이 아닌 전체적인 개발 과정까지 규정해 놓은 것이다.
이런 라이브러리 / 프레임워크의 사용은 다음과 같은 순서로 이동해 왔다.
제이쿼리 (jQuery) → 앵귤러 (Angular) → 리액트 (React) → 뷰 (Vue) → 스벨트 (Svelte)
제이쿼리와 리액트는 라이브러리, 앵귤러와 뷰, 스벨트는 프레임워크이다. 이 중에서 현재 시장에서 가장 많이 사용되는 것은 리액트이다. 리액트는 컴포넌트 기반 구조, Virtual DOM 등을 지원하면서 대세가 되었다. 그 이후로도 뷰, 스벨트와 같은 더욱 개선된 프레임워크가 출시되었지만 이미 시장에서 주류로 사용되는 리액트를 대체하지는 못했다.
여기에 더해서 Vite와 같은 빌드 도구를 사용할 수 있다. Vite는 프론트엔드 개발 과정에서 개발 서버와 번들링 기능을 제공해준다. esbuild 기반의 개발 서버는 작성한 코드를 브라우저 화면에 실시간으로 반영해줘 개발 과정을 도와주며, Rollup 기반의 번들링 기능은 html, css, javascript 코드를 합치고 최적화해주는 역할을 한다. Vite를 사용하지 않고 전통적인 방식으로 리액트 프로젝트를 만들 수도 있는데, 이는 CRA (Create React App)라고 부르며, Webpack 번들러를 기반으로 한다.
백엔드
백엔드는 html, css, javascript를 기반으로 하는 프론트엔드와 다르게 다양한 언어로 개발 가능하며, 다양한 프레임워크가 존재한다. 이 점이 특정 프레임워크가 지배적인 구조를 가졌던 프론트엔드 분야와 다른 점이다.
프론트엔드가 사용자에게 보여지는 화면을 만든다면, 백엔드는 눈에 보이지 않는 로직을 담당한다. 예를 들자면 다음과 같은 부분을 백엔드로 구현한다.
- API 개발 : 가장 주된 업무로,
백엔드 언어별 주요 프레임워크는 다음과 같다.
- 자바스크립트 : ExpressJS, NestJS
- 파이썬 : Django, FastAPI
- 자바 : Spring Boot
국내 백엔드 시장의 경우, 자바 & Spring Boot 가 압도적 1위의 점유율을 가지고 있다. 자바 스프링부트는 대규모 트래픽, 안정성, 멀티스레딩에 강하며, 20년 이상 검증된 생태계를 가지고 있다.
파이썬은 문법이 간결해서 빠른 개발이 가능하고 데이터 과학 및 AI 관련 라이브러리와의 연계가 강하다. 자바스크립트는 프론트엔드와 같은 언어를 사용하기 때문에 풀스택 개발이 쉽고 실시간 처리에 강하다.
데이터베이스
웹사이트에 접속하면
사용자가 웹사이트에 접속할 경우, 다음과 같은 일이 일어난다.