로그인

로그아웃

아티클

비전공자도 이해할 수 있는 프론트엔드, 백엔드의 모든 것 - 실전편(프레임워크, 성향별 추천, 선택 방법 등)

조회수 12876·6분 분량

2021. 9. 27.

안녕하세요, 스파르타 코딩클럽입니다.

저번 시간에 이어 프론트엔드와 백엔드의 전반을 훑어볼 건데요. 이번에는 실전편입니다! 프론트엔드에서 자주 사용하는 프레임워크와 백엔드 언어별로 많이 사용하는 프레임워크를 알아볼 거예요. 그리고 개발자로서 어떤 성향이 프론트엔드나 백엔드에 적합한지 개발자의 의견도 들어보았답니다. 예비 개발자이시거나, 주니어 개발자로 일하고 계신 분들께 아주 많은 도움이 될 것 같은데요.

그럼, 바로 시작할게요.

→ 1탄. '프론트엔드와 백엔드의 뜻과 사용하는 언어' 시리즈 글 읽으러 가기

프레임워크(Framework)란?

프레임워크란 웹 개발을 보다 쉽고 간편하게 할 수 있도록 도와주는 도구입니다. 아무것도 없이 0에서부터 1을 개발하려면 시간도 오래 걸리고, 매우 어렵겠죠? 프레임워크는 이러한 어려움을 어느 정도 해결해 줍니다. 어느 정도 재료가 준비되어 있고, 각자 입맛에 맞게 커스터마이징할 수 있는 요리 키트라고 생각하면 이해가 빠르실 텐데요.

밀푀유나베를 해 먹는다고 예를 들어 봅시다. 처음부터 육수 우리고, 재료 다 사서, 다듬고 만들려면 오랜 시간이 필요하잖아요? 시간도 단축하고, 실패도 줄일 수 있도록 키트를 사서, 내가 더 많이 넣어서 먹고 싶은 소고기만 추가로 사서 넣으면 나만의 밀푀유나베를 보다 간편하게 만들 수 있을 겁니다. 요리 키트가 프레임워크라고 생각하시면 되는데요. 프레임워크는 개발 시간을 단축시켜 주기 때문에 인건비가 절약된다는 장점이 있습니다.

실제 회사에서도 프레임워크를 많이 사용하고 있습니다. 따라서 개발자로 취업을 하기 위해서는 필수로 프레임워크 다루는 법을 익히셔야 합니다. 프레임워크는 이미 구조화가 다 되어 있기 때문에 다룰 줄만 안다면 그 누구라도 유지 보수를 할 수 있습니다.

프론트엔드 개발에서 사용되는 대표적인 프레임워크

프론트엔드의 대표적인 프레임워크는 세 가지가 있습니다. 바로 앵귤러(Angular), 리액트(React), 뷰(Vue.js)입니다. 전공자가 옆에서 프레임워크 얘기를 한다면 슬쩍 이 세 가지를 말해보세요. ‘오? 좀 하는데?’ 하는 눈빛으로 여러분을 바라볼걸요?(장담합니다!)

1. 앵귤러(Angular)

앵귤러는 타입스크립트 기반 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크입니다. 앵귤러JS(AngularJS)의 후속 버전인 앵귤러는 2016년 9월 처음 공개되었습니다. 둘은 이름만 비슷하지, 완전히 다른 프레임워크입니다. 거의 호환도 안 되는 정도라니, 절대 헷갈리시면 안 돼요!

앵귤러는 완전한 프레임워크라고 불릴 정도로 모든 기능을 제공하고 있습니다. 프로젝트의 생성부터 테스트, 빌드, 배포까지 모든 것을 할 수 있습니다. 앵귤러는 틀이 정해져 있기 때문에 코드를 자유롭게 작성할 수 없는데요. 앵귤러의 틀에 맞춰 코드를 작성해야 한다는 것은 어느 정도 단점이 될 수 있지만, 앵귤러를 다룰 줄 아는 사람이라면 그 누구든지 코드를 쉽게 수정할 수 있다는 장점이 되기도 합니다.

2. 리액트(React)

리액트는 페이스북이 개발한 유연하고 효과적인 선언형(declarative)의 자바스크립트 라이브러리입니다. 리액트를 한 마디로 정의하자면 컴포넌트 기반의 오픈소스 라이브러리라고 할 수 있는데요. 컴포넌트를 쉽게 설명하자면, 데이터를 넣었을 때 우리가 지정한 사용자 인터페이스를 조립해서 보여주는 것이라 할 수 있습니다. 즉 리액트는 컴포넌트를 기반으로 한 웹 애플리케이션의 반응형 뷰 레이어(View Layer)입니다.

리액트는 사실 프레임워크라기보다는 라이브러리에 가깝습니다. 리액트는 사용자 커뮤니티가 활발하고, 채택해 사용하고 있는 기업 또한 많기 때문에 장래가 아주 밝은 편입니다. 개발자가 원하는 스택을 마음대로 골라 사용할 수 있기 때문에 유연성을 중요하게 여기는 사람들에게 아주 적합한 프레임워크(라이브러리)입니다.

3. 뷰(Vue.js)

뷰는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 자바스크립트 프레임워크입니다. 기존에 다른 자바스크립트 라이브러리를 사용하고 있는 프로젝트에 뷰를 도입하기 쉽게 설계되어 있기 때문에 사용이 매우 간편합니다. 그래서 프론트엔드 프레임워크 입문자가 처음 사용하기에 좋은 프레임워크라고 알려져 있습니다.

뷰는 페이스북이 만든 리액트와 달리 대기업의 지원 없이 만들어진 가장 최근의 프레임워크입니다. 앞서 말씀드린 대로 뷰는 늦게 나온 만큼 뷰로 갈아타기 쉽게 만들어졌기 때문에 단순하고, 유연한 것을 선호하는 사람들에게 적합합니다.

백엔드 개발에서 사용되는 대표적인 프레임워크

그렇다면, 백엔드에는 어떤 프레임워크들이 대표적으로 존재할까요? 백엔드 프레임워크는 사용하는 언어별로 선호하는 게 다 다르기 때문에 더 많이 소개해 드릴 텐데요. 언어별로 어떤 프레임워크가 많이 사용되는지 알아보도록 해요.

1. 익스프레스(Express)

익스프레스는 웹 애플리케이션 구축에 사용되는 노드JS(Node.js)용 무료 오픈소스 프레임워크입니다. API를 만들고 웹 애플리케이션을 구축할 수 있게 해줍니다.

원래 자바스크립트는 웹 브라우저에서만 사용되다가 노드를 이용해 서버 측 개발에도 사용하게 되었는데요. 노드의 서버 측 개발을 훨씬 쉽고 강력하게 만들어주는 프레임워크가 익스프레스입니다. 원래 브라우저에서 사용되던 자바스크립트를 기반으로 하고 있기 때문에 다른 언어의 프레임워크에 비해 개발 방식이 독창적이기는 하지만 노드의 강력한 기능을 그대로 활용할 수 있다는 장점이 있습니다.

2. 라라벨(Laravel)

라라벨은 PHP의 웹 프레임워크입니다. 캐싱(caching), 라우팅(routing), 인증(authentication), 세션(session)과 같은 대부분의 웹 개발에서 사용되는 공통 작업들을 심플하게 만들어 준다는 특징이 있습니다. 또한, 어플의 기능에 영향을 주지 않으면서 개발 프로세스를 간단하게 해 주기 때문에 사람들의 사랑을 받고 있습니다. 하지만 PHP의 인기가 사그라들면서 라라벨 역시 사용자가 점점 더 줄어들고 있는 추세입니다.

3. 스프링(Spring)

스프링은 자바의 오픈 소스 애플리케이션 프레임워크입니다. 동적 웹 사이트를 개발하기 위해 여러 가지 서비스를 제공하고 있는데요. 특히 우리나라의 IT 회사들은 스프링을 많이 사용하고 있습니다. 이는 규모가 커서 많은 트래픽을 수용해야 하는 데에 스프링이 성능과 안정성 측면에서 탁월한 프레임워크이기 때문입니다. 또한, 우리나라 전자정부 표준 프레임워크로서 공공기관도 웹 서비스를 개발할 때 많이 사용하고 있습니다. 이는 확장성이 좋다는 스프링의 장점과 밀접합니다.

스프링은 지원하지 않은 라이브러리도 간단하게 감싸 사용할 수 있다는 아주 큰 장점이 있습니다. 그래서 수많은 라이브러리가 스프링에서 지원되고 있고(어쩌면 지원되게 돼버린...), 스프링에서 지원하는 라이브러리도 별도로 분리하기 쉽습니다.

4. 장고(Django), 플라스크(Flask)

장고는 파이썬의 대표적인 웹 프레임워크입니다. 장고로 로그인, 인증, 파싱 등 웹에서 많이 사용하는 기본적인 기능들을 쉽게 탑재할 수 있습니다. 쉽게 탑재할 수 있다는 것은 그만큼 커스텀이 쉽지 않을 수 있을 의미도 내포하지만, 장고는 개발 생산성이 높기 때문에 파이썬의 프레임워크 중에서 가장 많이 사용되고 있습니다.

플라스크는 장고보다 조금 작은 프레임워크라고 할 수 있는데요. 특별한 도구나 라이브러리가 필요 없기 때문에 마이크로 프레임워크라 불립니다. 장고와 함께 가장 많이 사용되는 파이썬의 프레임워크입니다.

5. 레일즈(Rails)

레일즈, 혹은 루비 온 레일즈(Ruby on Rails)는 루비의 오픈 소스 웹 프레임워크입니다. 데이터베이스를 이용한 웹 애플리케이션을 개발할 때 반복되는 코드를 대폭 줄여주어 개발 기간을 단축하는 것으로 인기를 끌었습니다.

레일즈는 모델, 뷰, 컨트롤러의 템플릿 생성 및 테스트 등 자동화하는 툴, 테스트를 위한 웹서버 등을 포함하고 있습니다. 또한, 레일즈가 기반을 두고 있는 ActiveRecord는 데이터베이스 작업을 추상화하여 생선/읽기/갱신/삭제(Create/Read/Update/Delete, CRUD) 작업을 자동화 및 단순화 시켜주기 때문에 웹 애플리케이션을 빠르게 개발할 수 있도록 도와줍니다.

각 분야별로 어울리는 성향은?

프론트엔드 개발자는 디자이너가 원하는 산출물을 구현해 내야 합니다. 디자이너는 1px만 어긋나도, 색이 조금만 달라져도(‘하늘 아래 같은 색조는 없다’는 뷰티계의 명언처럼!) 알아내기 때문에 프론트엔드 개발자 역시 한 땀 한 땀 장인정신이 필요합니다.

백엔드 개발자 역시 장인정신이 필요하지만, 크게 보는 안목이 특히 더 요구됩니다. 전체 데이터의 흐름과 업무의 흐름을 아는 것이 중요한데요. 데이터를 어떻게 적재하는지, 그리고 그 데이터를 어떻게 활용하는지에 따라 서비스의 퍼포먼스에 큰 영향을 주기 때문입니다. 백엔드 개발자는 서비스 전체를 볼 줄 알아야 하고, 이를 이해한 후 데이터를 적절히 활용하는 역량이 필요합니다.

나는 어떤 것이 더 맞을까?

프론트엔드와 백엔드의 정의부터 사용되는 대표적인 언어, 프레임워크까지 알아보았는데요. 그렇다면 여러분은 프론트엔드와 백엔드 중에서 어떤 것이 더 잘 어울릴까요? 사실 정답은 ‘직접 해 봐야 알 수 있다’입니다.

개발 프로세스 한 판을 다 경험해 보신 후에 본인에게 보다 쉽게 느껴지는 영역이나, 흥미가 더 생기는 분야가 여러분에게 맞는 것이라고 할 수 있습니다. 분명히 나는 쉬운데, 같이 프로젝트를 진행하는 친구나 동료는 어렵다고 하는 분야가 있을 것입니다. 혹은 그 반대의 경우도 있겠죠. 전자가 여러분에게 맞는 개발 영역일 확률이 큽니다. 개발을 조금만 하다 말 것이 아니라 생업으로 삼으실 예비 개발자라면 더더욱 본인이 흥미를 가지고 계속 공부하고 싶어 하는 것이 중요하겠죠?

그럼에도 불구하고, 현직 개발자의 관점에서 더 어려운 영역은 무엇인지 궁금하신 분들이 계실 것 같습니다. 몇몇 개발자들의 말에 의하면, 서비스가 고도화될수록 스트레스 받고 어려워지는 것은 맞지만, 나중에 퍼포먼스에 대한 스트레스가 더 많이 오는 것은 서버 쪽이라고 합니다. 대용량의 데이터를 처리해야 하는 등 서버 개발 영역이 더 까다롭게 느껴진다고 해요. 이는 아주 주관적인 의견일 뿐! 결국 본인에게 맞는 영역을 선택해야 끝까지 개발을 하실 수 있을 겁니다.

스파르타 코딩클럽에서 프론트엔드, 백엔드 각 분야별로 사람들이 많이 사용하는 프레임워크를 배우실 수 있습니다. 자신에게 맞는 분야를 잘 알고, 그 분야를 깊게 파고 싶으신 분들은 앞서 소개해 드린 강의들을 살펴 보세요. 방대한 양의 지식을 모두 습득하기보다는 실전에서 많이 사용하는 스킬을 중심으로 공부하세요. 스파르타와 함께하는 5주는 여러분의 개발 공부에 원동력이 될 거예요.

→ 스파르타 코딩클럽 수업 보러 가기

제대로 된 개발자, 모두가 원하는 개발자로 성장하고 싶으신가요? 그렇다면 항해99를 고려해 보세요. 99일 동안 개발에만 몰입해 IT 회사들이 원하는 '좋은 개발자'로 성장하실 수 있습니다. 개발자가 되고자 하는 강한 의지만 있으신 분들은, 항해99에 지원하세요.

by. 김자바