카테고리 보관물: 개발

프론트엔드 개발자가 백엔드 영역까지 다루게 될 때

개발자들은 코드나 파일을 구분하고 분리하려고 하는데 실력이 늘수록 더 많이 조각을 낸다.

그래서 논리적으로 연결되어 있음에도 분리를 하는데 대표적으로 언어가 다르고 역할이 다르다 하여 HTML, CSS, JS를 떼어놓는다. 논리적으로 연결이 되어 있다보니 이들을 떼어 놓으면 상당히 불편하다. 그래서 나는 이전부터 대부분의 개발자들이 싫어하는 방법인 HTML+CSS+JS 를 묶어서 코딩했는데 다행히 웹컴포넌트 기술이 나오면서 자연스럽게 HTML+CSS+JS 가 묶이게 되었다.

이와 비슷하게 이전부터 계속 의구심을 갖고 있는 것중 하나가 프론트엔드와 백엔드의 분리이다. 프론트엔드와 백엔드는 논리적으로 딱 떨어지지 않으며 코드나 파일은 분리되어 있을지 몰라도 논리적으로 의존되어 있다.

나는 프론트엔드와 백엔드를 모두 다루다 보니 프론트엔드와 백엔드가 면밀하게 협력하도록 코딩을 하는데 협력을 극대화 할수록 점점 가까워지다가 마치 웹컴포넌트 처럼 둘이 하나로 융합되어 버렸다.

한때 웹퍼블리셔가 HTML, CSS만 하면 된다고 했지만 결국 JS까지 다루는 프론트엔드 개발자로 변하였다. 초반에는 프론트엔드 개발자가 보이는 화면을 만드는 것이 끝이었지만 이제는 서버의 API를 호출해서 동작하는 하나의 프로그램을 만들고 있다.

이로 인해 기존에 없던 보안 문제, 비효율적인 API 호출, 프론트엔드 종속적 API 개발 등의 문제들이 발생하게 되었다. 파일이나 코드가 물리적으로 분리되어 있을 뿐 논리적으로 종속되어 있을 수 밖에 없으니 최종 사용자가 쓰는 프론트엔드의 장단에 백엔드가 맞춰줄 수 밖에 없다.

많은 개발자들이 불편한데? 비효율인데? 나만 그렇게 생각하나?라는 생각이 퍼져나가는 시점에 웹퍼블리셔가 JS까지 배워 프론트엔드 개발자가 된 것 처럼 프론트엔드 개발자가 백엔드 언어를 배워 융합시켜 버리게 되지 않을까 조심스럽게 예측해본다.

이렇게 된다면 스마트폰 네이티브 앱의 경우 프론트엔드 UI가 고정되어 있는 것이 아닌 마치 웹브라우저 처럼 백엔드가 정한 UI를 그려내는 것이 가능하고 이를 위한 프레임워크도 나오게 된다면 하이브리드 앱의 즉각적인 업데이트와 네이티브 앱의 성능이라는 두마리 토끼를 잡는 것도 가능할 것이다.

웹퍼블리셔 보다 JS를 아는 프론트엔드 개발자가 더 많은 것을 할 수 있는 것 처럼 백엔드를 아는 프론트엔드 개발자는 더 많은 것을 할 수 있게 될 것이다.

그렇다고 풀스택 개발자가 되어야 한다고 말하는 것이 아니다. 프론트엔드에 초점을 둔 백엔드를 말하는 것이다. 프론트엔드와 백엔드 양쪽을 다 해본 개발자라면 이 말이 무슨 뜻인지 알 것이다.

textarea 자동 높이 맞추기 Javascript 예제

아래는 textarea에 작성된 내용의 길이에 맞춰 style의 height를 계산하는 예제이다.

function textareaAutoHeight(el) {
    setTimeout(() => {
        el.style.height = 'auto';

        let scrollHeight = el.scrollHeight;
        let outlineHeight = el.offsetHeight - el.clientHeight;

        el.style.height = (scrollHeight + outlineHeight) + 'px';
    }, 0);
}

위 코드는 textarea의 스타일이 box-sizing: border-box;일 때 완벽하게 동작한다.

위 코드에서 중요한 부분은 바깥쪽을 포함한 높이 offsetHeight와 안쪽의 높이 clientHeight의 차를 textarea 높이에 더해준다는 것이다.

만약 이 계산을 포함하지 않으면 textarea에 테두리(border)가 있을 경우에 테두리의 위(border-top-width) + 아래(border-bottom-width) 만큼 손해를 보게 된다.

주의할 점은 border-width 값을 직접 더해주면 안된다. border-width의 단위는 픽셀(px)이 아닐 수도 있다. 그렇기 때문에 element 객체의 offsetHeight – clientHeight 로 테두리의 높이를 구해야 한다.

회사 프로젝트가 진행이 안되는 이유

하루에 200km 이동이 가능한 배달차를 1대 보유한 회사가 있다. 그리고 이 회사에는 두가지 프로젝트가 있다.

  • 프로젝트 A: 100km 떨어진 곳에 물건을 배달하고 돌아오기.
  • 프로젝트 B: 매일 몇군데 10km 떨어진 곳에 물건을 배달하고 돌아오기.

프로젝트 B는 매일 해야한다. 만약 프로젝트 B로 100km를 사용하고 100km의 이동 리소스가 남는다고 해도 프로젝트 A를 할 수는 없다.

  • 사장: “200km 이동가능한 배달차니까 100km 왕복이면 200km인데 프로젝트 A가 왜 진행이 안되지?”
  • 직원: “매일 10km 배달하는 프로젝트 B 때문에 어렵습니다.”
  • 사장: “그럼 하루에 한 50km씩만 이동하면 4일 후에 프로젝트 A가 끝나지 않을까?”
  • 직원: “…”

생각해보니 회사를 하루에 50km씩 이동시키면 되기는 하겠다. 다만 프로젝트 B는 첫날 60km, 둘째날 110km가 되겠지.