CWN(CHANGE WITH NEWS) - 개발의 첫 걸음, 웹에 대한 모든 것...프론트엔드와 백엔드 알아보기

코딩에 관심을 두기 시작하면서, 흔히 학습을 시작할 수 있는 첫 번째 경로는 대부분 웹/앱 개발과 관련된 부분일 것이다. 그렇다면, 웹 개발은 세부적으로 어떤 식으로 나누어져 있으며 또 해당 파트는 무엇을 담당하는 것일까?

눈으로 보는 코딩의 결과: 프론트엔드
프론트엔드란 사용자에게 직접 눈으로 보이고 다루는 부분을 의미한다. 더 쉽게 설명하자면, 현재 화면에서 보이는 글꼴, 색상, 메뉴, 도형 그림 등을 만드는 분야라고 할 수 있다.

HTML, CSS, 자바스크립트로 구성되어있다.

HTML은 웹페이지를 만드는 데 있어서 전체적인 뼈대를 구성하는 역할이며, 홈페이지의 외적인 요소, 홈페이지 제목, 구성된 텍스트 상자, 버튼 등 내용을 기입하기전에 틀을 만드는 기능을 담당한다.

CSS는 미적인 부분을 담당하는 역할로, 웹페이지에 디자인을 담당한다. 글꼴, 글꼴 색상, 배경 이미지, 크기 등 요소를 세부적으로 설정하여 페이지를 꾸밀 수 있다.

기능적인 면을 생각하며 코딩을 해야 하는데, 미적인 부분까지 생각해야 한다면 머리가 아플 것이다. 이때, 필자와 같이 미적인 감각이 부족한 사용자를 위해 다른 개발자가 미리 만들어놓은 CSS 양식을 모아놓은 라이브러리, 'BOOTSTRAP'을 둘러보고, 필요한 요소가 있으면 해당 코드를 임포트 해서 적용할 수 있다.

아마 많은 이가 '코딩'을 이야기할 때, 자바스크립트를 떠올릴 것이다. 자바스크립트는 해당 웹페이지가 작동하게 하는 코드이다.

클릭하면 이동하는 것, 텍스트를 기입하는 것, 데이터를 가져오는 것 거의 모든 동적인 기능을 담당하며 웹페이지 개발의 핵심을 담당하고 있다.

고등학교 시절 우리를 괴롭혔던 수학의 함수를 사용하여 특정 조건이 만족할 때의 행동을 제어할 수 있으며 웹페이지를 웹페이지답게 완성하는 역할을 한다. 물론, 이도 다른 이들이 만들어놓은 라이브러리(jQuery)가 있어 필요한 동작을 담당하는 코드를 임포트 하여 사용할 수 있다.

눈에 보이지 않는 곳에서 움직이는 조력자: 백엔드
백엔드란 사용자가 다루는 부분에서 요청을 처리하고 그 결과를 프론트엔드에게 전달해 주는 서버의 역할을 말한다.

통신에 사용되는 언어나 메시지 형식(API), 데이터를 저장해 놓고 호출할 수 있는 DB의 설계를 진행하는 부분이라고 할 수 있다

대표적으로 자바스크립트, 파이썬, 자바 등의 프로그래밍 언어를 활용하여 제작할 수 있고 DB는 MYSQL과 Mongo DB 등이 있다.

a.jax와 같은 라이브러리를 임포트 하면, API에 등록되어 있는 실시간 정보를 가져올 수 있다. 파이썬과 같은 프로그래밍 언어를 이용하여 MongoDB를 임포트 한 후, 데이터를 기입 및 출력 등의 관리를 담당할 수 있다.

프론트엔드와 백엔드 개발을 통하여 웹 OR 앱이 나오게 된다. 당연하게도 이를 위해선 각 분야를 위한 프로그래밍언어와 이를 지원하는 프레임워크, 데이터관리에 대한 지식이 필요하다.

추가로 프론트엔드와 백엔드 모두를 담당하면 이를 '풀스택'이라고 칭한다.

코로나 시대로 지속되는 비대면 사회 속, 개인적인 웹페이지를 만들고 싶다는 생각이 들면 프론트엔드부터 시작해보는 건 어떨까?

[저작권자ⓒ CWN(CHANGE WITH NEWS). 무단전재-재배포 금지]