풀스택 개발자는 프론트엔드, 백엔드를 같이 할 수 있는 사람을 말합니다.
프론트엔드 개발은 클라이언트 사이드, 즉 웹 브라우저에서 작동하는 기능과 모양을 만들어내는 작업입니다. html과 자바스크립트를 써서요.
백엔드 개발은 서버 사이드에서 작동하는 기능을 만들어냅니다. 자바와 SQL 등을 사용합니다.
SI에서는 프론트엔드와 백엔드 둘 다 개발합니다.
예전에는 개발자라고 하면 무조건 프론트엔드 백엔드를 같이 할 수 있어야 했는데 사용자들의 눈높이가 높아지고 이에 따라 프론트엔드가 많이 복잡해지면서 두 개의 포지션이 분리되었습니다.
다만 요즘 말하는 프론트엔드 / 백엔드 분리와 SI에서의 분리는 조금 개념이 다릅니다.
최근 커뮤니티나 블로그등에서 백엔드와 프론트엔드를 분리한다는 의미는 프론트엔드가 백엔드와 완전히 분리되어 있다는 뜻입니다.
프론트엔드는 프론트엔드 프레임워크인 angular, react , vuejs 등을 이용해서 DOM(Document Object Model) 을 제어하고 백엔드와는 JSON(JavaScript Object Notation) 으로 데이터를 교환합니다. 즉 HTML 자체를 프론트엔드에서 만들어냅니다. 백엔드는 데이터를 보내주고 받는 역할만 합니다. 이런 방식을 클라이언트 사이드 렌더링 이라고 합니다.
클라이언트 사이드 렌더링 방식을 취하면 백엔드는 동일한 JSON 데이터 포멧을 사용하기 때문에 굳이 프론트엔드 뿐만 아니라 앱 혹은 다른 서버와도 통신하기가 용이해져서 시스템 확장이 쉬워지는 장점이 있습니다.
SI에서는 아직 프론트엔드와 백엔드가 서로 강하게 묶여있는 예전 모델을 고수하는 곳이 많습니다.
서버에서 최종적으로 웹 브라우저에서 보여주게 될 html을 만들어내고 클라이언트에서 표현하는 방식입니다. 이런 방식을 서버 사이드 렌더링 이라고 합니다. 일부 항목은 jQuery 등을 사용해서 보여주거나 숨기거나 데이터를 받아오거나 하지만 기본은 서버가 html을 만들어내는 서버 렌더링입니다.
서버 렌더링을 하는 이유는 시스템을 확장할 일이 없기 때문입니다. 요구사항 항목이 바뀌긴 하지만 갑자기 앱에서도 쓸 수 있게 해 주세요 이런 식으로 터무니없는 요청이 들어오진 않습니다. 앱이 필요하면 앱 개발을 발주하죠.
게다가 백엔드와 클라이언트를 완전히 분리해서 일반 사용자들에게 보여주는 화면을 클라이언트 사이드에서 제어할 경우 1) 속도 문제도 걸리고 2) SEO 문제도 생기고 3) 보안 문제도 챙겨야 합니다.
- 속도 문제는 HTML 렌더링을 클라이언트에서 하므로 화면이 빨리 나오는지 늦게 나오는지 응답 속도가 사용자의 컴퓨터 사양에 따라 달라지는 문제를 말합니다.
- SEO 는 검색 엔진 최적화인데 기본적으로 검색엔진은 정적인 html 구조는 잘 읽어가지만, 자바스크립트가 동적으로 뭔가를 만들어내는 구조를 깔끔하게 읽어간다는 보장이 없어서 콘텐츠가 있는데도 구글이나 네이버 등 검색엔진에서 검색이 안 되는 문제를 말합니다.
- 보안 문제는 민감한 정보의 경우 클라이언트에 노출시키면 언제든지 탈취당할 수 있다는 이슈를 말합니다. 단적으로 쿠키만 열어봐도 쿠키 안의 값은 모두 확인하거나 심지어는 변조해서 서버로 전송할 수도 있습니다. 클라이언트 사이드 렌더링 방식의 경우 서버와의 통신에 필요한 정보뿐만 아니라 렌더링에 필요한 모든 정보를 클라이언트도 가지고 있기 때문입니다.
그래서 아직 SI에서는 스프링에서 JSTL을 써서 서버 렌더링을 하는 경우가 많습니다.
관리자 화면의 경우에는 유료 그리드 솔루션을 써서 개발하는 경우가 많으므로 HTML 자체를 서버에서 보내주지 않는다는 측면에서 보면 클라이언트와 백엔드가 분리되어 있습니다.
다만 서버에서 데이터를 받아와도 그리드 내용만 바뀌지 뭔가 화면이 바뀌거나 하지는 않기 때문에 현대적인 개발에서 말하는 백엔드와 프론트엔드의 분리는 아닙니다.
서버 사이드 렌더링을 해야 한다고 해서 html을 엄청나게 잘해야 하는 건 아닙니다. 보통의 html 구조는 웹 퍼블리셔 분들이 다 정리해서 주실 거에요. 개발자분들은 웹 퍼블리셔 분들이 퍼블리싱한 걸 받아서 서버에서 가공한 후 내보내는 일을 하게 됩니다.
그렇다고 HTML을 전혀 모르는 건 한계에 부딪힙니다. jQuery 로 뭔가를 제어하고 싶으면 DOM이 어떻게 구성되는지 알아야 하거든요. 게다가 웹 퍼블리셔 분들의 부재 시에는 스스로 수정해야 하므로 HTML은 기본입니다.