프론트엔드(Front-end)란?
-
웹페이지의 레이아웃, 메뉴, 디자인 요소, 버튼, 이미지 및 그래프와 같이 사용자가 직접 상호작용할 수 있는 사용자 인터페이스이다
-
즉, 프론트엔드는 사용자가 1차적으로 보는 인터페이스기 때문에 사용하기 쉽고 보기 편해야 사용자들의 참여를 이끌어낼 수 있다
👉 그렇기 때문에 프론트엔드 개발자는 사용자 경험을 핵심 가치로 삼아 직관적이고 사용하기 쉬운 UI(User Interface)를 구축해야 한다
프론트엔드의 주요 기술 & 도구
프레임워크와 라이브러리
-
프론트엔드 개발에서는 자바스크립트를 기반으로 한 프레임워크와 라이브러리가 주로 사용된다
-
먼저 프레임워크란, 웹 개발을 쉽고 간편하게 할 수 있도록 도와주는 도구이다
간단히 말해 어느 정도의 구조가 잡혀있기 때문에 클라이언트의 요구에 따라 커스터마이징할 수 있는 것이다
-
실제로 웹 개발자를 채용할 때에는 개발자가 사용할 수 있는 프레임 워크를 반드시 기재하도록 하고 있다
-
다음으로 라이브러리란, 단순하게 활용할 수 있는 도구의 집합이다
-
즉, 개발에 필요한 것들을 미리 구현해놓은 도구로써 재사용이 가능한 기능을 미리 구현한 후 필요한 곳에서 호출 가능하도록 만들어진 것이다
프론트엔드의 주요 기술
- 사용자에게 데이터를 디자인의 형태로 보여준다
- 이는 서버에서 내려오는 데이터를 기반으로 디자인을 코드로 바꾸는 기술이라고 할 수 있다
- 화면을 조작한다
- 이는 사용자의 입력을 바탕으로 다른 화면으로 변경하는 기술이다
- 만들어낸 데이터를 서버로 전송한다
- 이 기술을 통해 사용자들이 입력한 데이터를 서버로 전송하여 저장할 수 있다
프론트엔드 개발에 사용되는 주요 도구
앵귤러(Angular)
▪ 구글이 만든 강력한 오픈소스 자바스크립트 프레임워크로 싱글 페이지 애플리케이션을 만드는데 사용된다
▪ 앵귤러는 프로젝트 생성을 시작으로 코드 최적화 작업에 이르기까지 모든 작업에서 사용할 수 있는 폭넓은 프레임워크이다
▪ 따라서 전체적인 개발 과정에 있어서는 가장 다루기 힘든 프레임워크라는 평가를 받기도 한다
▪ 만약 장기 프로젝트이며 투자 규모가 큰 애플리케이션을 개발하고자 하신다면 앵귤러를 추천한다
리액트(React)
▪ 웹페이지에서 동적인 사용자 인터페이스를 생성하고 운용하는데 인기 있는 라이브러리이다
▪ 리액트는 앵귤러나 뷰와는 달리 사용할 수 있는 도구가 없지만 유연성을 제공하기 때문에 어떠한 라이브러리라도 리액트에서 구현이 가능하다
▪ 또한, ‘Create react app’이나 ‘Next.js’와 같은 명령 줄 인터페이스 도구도 생겨나고 있는 추세이기 때문에 빠르고 편리하게 개발할 수 있다
▪ 만약 빠른 일정 안에 가벼우면서도 현대적인 애플리케이션을 개발하고 싶으신 분들이라면 리액트를 사용하시는 것을 추천드리고 싶다
뷰(Vue.js)
▪ 대규모의 커뮤니티와 개발자들이 합심하여 만들어진 프레임워크로 현재까지 높은 인기를 얻고 있다
▪ 뷰는 프리코딩(precoding) 구조를 가지고 있기 때문에 빠르게 애플리케이션을 개발할 수 있다
▪ 또한, 명령을 내리기 쉽기 때문에 개발과정에서 원하는 것을 정확하고 빠르게 이용할 수 있다
▪ 만약 시장 진입 단계에서 필요한 프레임워크를 선택할 때나 작고 가벼운 애플리케이션을 개발하고자 하시는 분들이라면 뷰를 추천한다
최신 프론트엔드 트렌드(PWA)
▪ 프로그레시브 웹 앱(progressive web app)의 줄임말로 ‘웹 기술로 만드는 앱’이다
▪ 네이티브 앱을 개발하는 것은 매우 어려운 일이지만 PWA를 사용하면 훨씬 더 빠르게 개발할 수 있다
▪ 아울러 푸시 알림과 같은 네이티브 앱의 특징들도 전부 제공되기 때문에 상당히 획기적인 일이라고 할 수 있다
▪ 네이티브 앱은 일반적으로 해당 플랫폼에 특화된 프로그래밍 언어로 만들어야 하기 때문에 추가적인 지식과 관련된 기술을 알아야 한다
▪ 하지만 PWA는 홈 화면에 저장된 후 브라우저에서 실행이 가능한 웹앱이며 네이티브 앱처럼 동작한다
▪ 특히 일반적인 웹사이트와 달리 오프라인에서도 동작하는데다, 일반적인 웹 기술을 활용하여 만들 수 있기 때문에 매우 유용하다
기업의 경우 모바일과 웹 개발자를 따로 채용할 필요 없이 PWA를 아는 프론트 엔드 개발자만 채용하면 모바일과 웹에서 동시에 서비스 제공이 가능하다
백엔드(Back-end)란?
▪ 서버 구성, 성능 최적화, 데이터 베이스 설계 등 다양한 기술을 수행한다
▪ 또한, 데이터를 어떻게 저장하고 관리할 것인지, 데이터 처리 시간은 어떻게 줄일 것인지, 사용자 수가 늘어났을 때에는 어떻게 대처해야 할 것인지에 대해 끊임없이 고민해야 하기 때문에 지속적으로 서버를 개발하고 관리하는 기술도 담당한다
더 나아가, 프론트엔드에서 받은 사용자들의 데이터들을 처리해야 하기 때문에 비즈니스 로직을 구성한 후 데이터베이스를 설계하여 데이터를 효과적으로 다루는 기술을 수행한다
백엔드 개발에 주로 사용되는 도구
자바(Java)
▪ 먼저 자바는 1995년에 사용되기 시작한 ‘객체지향 프로그래밍 언어’이다
▪ 여기서 객체지향이라는 말은 절차에서 상대적으로 자유롭고 기능에 중점을 두었다는 뜻이다
▪ 자바와 파이선, 자바스크립트는 모두 객체지향언어이지만 자바는 다른 두 언어와 달리 자료형을 지정해 줘야 하는 특징이 있다
▪ 자바는 다른 두 언어에 비해 개발된 지 오래되었기 때문에 수많은 사용자들의 레퍼런스를 보유하고 있다
▪ 국내의 경우 ‘전자정부표준프레임워크’로 지정된 언어가 자바라서 정부 주도의 많은 프로젝트는 자바를 이용하고 있다
파이썬(Python)
▪ 파이썬은 광범위한 분야에 사용되는 객체지향 언어이다
▪ 문법이 매우 쉽고 사람이 사용하는 문법에 상당히 가깝기 때문에 간결하고 깔끔한 코드를 구현할 수 있다
▪ “쉽게, 가장 아름다운 코드를 찾는다.”라는 파이썬 철학이 곧 간소한 문법으로 이어진 것이다
▪ 특히 2010년대에 인기가 급부상함에 따라 다양한 프레임워크 및 라이브러리가 지원되며 이와 관련된 많은 참고 자료를 찾을 수 있다는 것도 장점이라고 할 수 있다
자바스크립트(JavaScript)
▪ 자바스크립트는 웹에 특화된 객체지향언어로 프론트엔드 분야에서도 많이 사용된다
▪ 또한, 자바와 자바스크립트는 이름은 비슷하지만 다른 언어이다
▪ 자바스크립트는 문법이 쉽기 때문에 많은 사람들이 이용하고 있으며 관련 정보를 얻기 쉽다
▪ 특히, 최근 자바스크립트는 웹 분야에서 큰 인기를 끌며 자바의 점유율을 조금씩 가져오고 있다
최신 백엔드 트렌드(서버리스)
▪ 먼저, 서버리스란 클라우딩 컴퓨팅의 모델 중 하나로 ‘개발자가 서버를 직접 관리할 필요가 없는 아키텍처’이다
만약 백엔드 개발자가 서버의 사용자가 10,000명이 될 것을 예상하고 그에 맞는 용량의 서비스를 구입했다고 가정했을 경우, 실제 사용자가 10,000명이든 0명이든 같은 금액을 내야 합니다. 이러한 상황은 크든 작든 손실을 일으킬 수 있다
▪ 하지만 서버리스는 동적으로 서버의 자원을 할당한다
▪ 사용자가 없을 때에는 자원을 할당하지 않고 대기하며 요청이 들어올 때에만 자원을 할당하여 요청을 처리한다
▪ 결과적으로 한정된 자원을 효율적으로 사용할 수 있게 된 것이다
▪ 특히 해당 서버는 클라우드를 제공하는 기업에서 전적으로 관리하기 때문에 백업, 보안 등 서버에서 발생하는 이슈에 대응할 필요가 없다
