프런트엔드 일을 설명한다면

몇 년 전으로 돌아가서 처음으로 프런트엔드 개발을 시작할 때라면 지금의 나에게 이런 질문을 할 수 있다. “간단하게 프런트엔드 개발이 뭔가요?” 내가 생각하는 프런트엔드 개발이 당신이 생각하는 것과 다를 수 있다. 오랫동안 어려운 개발을 한 것도 아니고 정답을 아는 것도 아니지만 나의 경험을 잠깐 이야기하겠다.

어떻게 이일을 하게 되었는가?

왜 이 일을 하는가?

JavaScript

HTMLCSS를 사용하여 알고리즘을 작성하는 어렵기 때문에 자바스크립트와 함께 사용한다. 거꾸로 이 두 언어는 자바스크립트가 하기 어려운 일, 사용자에게 보이는 모양과 웹 콘텐츠를 유지하는 일을 대신한다. 세 언어를 모두 배워야 하는 것이 이상하게 보일 수도 있겠지만 안드로이드 애플리케이션을 개발하거나 스프링 프레임워크를 사용하여 개발할 때 사용하는 여럿 XML 파일들을 생각해보자. 특정 언어가 순수하게 자신만의 언어로 모든 문제를 해결하는 것은 드물다. 일부 자바스크립트 프레임워크는 HTML, CSS 코드를 포함하려는 노력을 하고 있긴 하다. 웹에서 HTML, CSS를 사용하는 것은 필수적이다.

과정

  • 설명서
  • 디자인 화면
  • 테스트 목록
  • HTML, CSS 파일

설명서에 특정 버튼을 눌렀을 경우 사용자 목록 보여주는 사용자 경험이 있다고 상상하자. 이 사용자 경험을 제공하기 위해 HTML 파일에 자바스크립트 파일을 추가할 텐데 이 자바스크립트 코드는 HTML, CSS 파일과 함께 브라우저에서 동작한다. 사용자 경험을 제공하기 위해 여러 동작을 수행한다. 사용자가 버튼을 클릭하면 어떤 곳에서 사용자 목록을 가져와서 그 데이터를 브라우저 화면에 표시한다. 여기서 말하는 어떤 곳은 대부분 멀리 떨어져 있는 서버일 것이다. 서버에 어떻게 접속하는지 알려면 아직 등장하지 않은 서버 개발자에게 물어보아야 한다. 프런트엔드 개발자가 보는 문서가 하나 더 추가되었다. 이 문서는 서버 개발자가 만들어서 제공해야 한다.

  • 서버 접속 방법

필요한 데이터를 얻어오는 방법을 아는 것이 중요하다.

어디서 동작할까?

  • A View that displays web pages. (안드로이드)
  • A view that embeds web content in your app. (아이폰)

하이브리드 앱을 만들 때 사용하는 방식이다. 이런 내장 브라우저는 자바스크립트를 사용하여 앱과 통신하는 방법을 제공한다. 경험상 어떤 브라우저를 지원할지 설명서에 적어서 지원 대상을 제한하는 것이 좋다. 그렇지 않으면 끝없이 이어지는 일 지옥을 경험하게 된다.

무엇을 만드는가?

프런트엔드에서 사용하는 자바스크립트는 브라우저에서 동작한다. 여러 서버 스크립트가 서버에서 동작하는 것과 다르다. JSP, PHP, ASP 등에 포함되어 있는 자바스크립트가 브라우저에서 동작함으로 이런 언어를 사용하는 개발을 프런트엔드 개발이라고 부를 수 있을까? 맞다. 그렇게 볼 수도 있다. 그렇지만 나는 범위를 좁히고 싶다. 이런 개발 방법에서는 자바스크립트가 옵션이어서 없어도 된다. 서버 데이터의 일부를 브라우저로 가져가거나 자바스크립트를 사용하여 데이터를 가공하거나 때때로 일부 데이터를 서버에서 가져오기도 한다. 내가 생각하는 프런트엔드 개발은 브라우저에 한번 로딩되면 변하지 않는 자바스크립트를 중심으로 서버와 인터페이스를 통하여 대화하는 방법이다. 서버에 포함되어 있지 않으며 데이터를 주고받는 대상으로 서버를 사용한다. 자바스크립트를 중심으로 본다는 말은 비즈니스 로직을 자바스크립트에서 구현한다는 말이다. 사용자 경험이 변경되면 자바스크립트 중심으로 변경이 이루어진다. 이런 방식을 SPA라고 부르기도 한다.

메모장으로 개발하지 않는다

프레임워크, 라이브러리 등의 이름으로 불리지만 모두 다른 사람이 잘 만들어 놓은 코드를 재사용하는 것이 목적인 코드 집합이다. 어떤 종류를 사용할지 선택하는 것이 기술이다. 성능 좋은 통합 툴을 사용하여 개발하고 싶다면 그렇게 해도 된다.

당신이 통합 툴을 사용하건 메모장을 사용하건 HTML, CSS, 자바스크립트의 서로 간의 경계와 내가 작성하는 코드와 가져다 쓰는 코드의 경계를 명확하게 이해하고 있어야 한다. 구글 질문으로도 해결하지 못하는 복잡한 문제와 마주칠 때 도움이 된다. 시간이 부족하면 더욱 그렇다. 프런트엔드의 개발에는 많은 툴들이 나열된다. 이 툴들 대부분이 Node.js로 개발되었다. 그러므로 Node.js 설치는 필수다. 당신이 사용하는 운영체제에서 Node.js 사용하기 불편하다면 운영체제 변경도 고려하길 바란다. 너무 편해서 본래 쓰던 운영체제를 바꾸게 될지도 모른다. 대표적인 툴로 자바스크립트 프레임워크가 있다. 인기 있는 자바스크립트 프레임워크는 넘쳐난다. 선택을 위해서는 시간과 관심이 필요하다. 아래 사이트가 도움이 된다. 깊숙하게 이해하려면 책을 한 권 사거나 해당 사이트에서 투토리얼을 보는 것이 도움이 된다.

물론 팀에서 결정되었거나 기존 코드에 이미 적용된 프레임워크가 있다면 어쩔 수 없다. 그래도 선택해야 할 때가 온다. 예를 들면 내가 가고 싶은 회사에서 vuejs 개발자를 찾을 때 라든가^^

디버깅하기 위해 당연히 로깅을 사용할 수 있다. 프런트엔드 서비스는 브라우저에서 확인하고 브라우저에서 디버깅한다. 자바스크립트 동작을 멈추게 하고 값을 확인할 수 있다. 함수 호출 스택도 살펴볼 수 있다. HTML이나 CSS 코드도 브라우저에서 직접 변경하여 결과를 바로 확인할 수 있다. 브라우저마다 스타일이 조금씩 달라서 디버깅 용 브라우저를 선택해야 한다. 나는 크롬을 주로 사용한다. 안드로이드 웹 뷰도 디버깅할 수 있으며 WebRTC를 잘 지원하기 때문이다. 대부분의 브라우에서 F12키를 누르면 하단에 많은 탭과 설정 옵션을 보여준다. 개발자 툴이라고 한다. 한 번도 사용하지 않은 기능이 더 많다. 정말 다양하다. 크롬을 사용한다면 크롬 확장을 사용하여 개발 속도를 더 올릴 수 있다.

프런트엔드 일을 간단하게 정리했다. 다음 글에서는 자바스크립트로 만든 작은 서비스를 취미로 만드는 일을 정리할 예정이다.

--

--

JavaScript Developer, https://afrontend.github.io/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store