[코딩용어] 프론트엔드, 백엔드, HTML, CSS, 자바스크립트

코딩을 통해 웹, 앱, 게임 등 다양한 개발들을 할 수 있다. 그중 웹은 우리들에게 친숙하고 적은 학습량으로도 빠르게 구현 가능하기 때문에 코딩을 공부할 때 웹을 먼저 익히면 쉽게 접근할 수 있다. 웹 개발을 학습한 후 앱, 게임 등으로 넘어갈 수 있는데 웹, 앱, 게임 등에서 사용하는 로직은 기본적으로 동일하기 때문이다. 이러한 웹개발은 크게 프론트엔드 개발과 백엔드 개발로 나눌 수 있다.

프론트엔드(Front-End, Clinet Side)

웹의 프론트엔드는 우리들에게 보여지는 화면을 뜻한다. 코딩을 배울 때 웹 중 프론트엔드를 먼저 학습하는 것이 효율적이다. 이유는 코딩한대로 눈에 바로바로 보이기 때문에 배우기 쉽고 필요한 사전지식도 상대적으로 적기 때문이다. 

 

백엔드(Back-End, Server Side)

반면 백엔드는 프론트엔드의 명령을 수행하고 DB를 조회하는 등의 로직을 뜻한다. 예를 들면 웹의 로그인화면에서 ID와 Password를 입력하면 이의 일치여부를 백엔드에서 확인하고 맞으면 로그인이 수행되고 그렇지 않을 경우 오류 화면을 송출하는 등의 로직이다. 

 

프론트엔드 개발 : HTML, CSS, Javascript

웹의 프론트엔드를 개발하기 위해서는 크게 HTML, CSS, Javascript가 필요하다. 이 3가지는 유기적으로 연결된 개념이다. 3가지 언어나 배워야 하냐고 겁 먹을 수 있는데 HTML, CSS는 마크업 언어(Markup-Language, 구조만 표시하기 위한 언어)라고 해서 개발자들 사이에서는 프로그래밍 언어로 취급도 안 할 정도로 난이도가 낮기 때문에 일반인들도 쉽게 배울 수 있다. 

 

먼저 HTML은 마치 뼈대를 세우는 것이라 볼 수 있다. 웹화면이라면 로그인창은 어디에 둘 지 홈페이지의 제목, 로고는 어디에 둘 지 등 웹의 기본적인 골격을 만드는 언어이다. CSS는 이 뼈대를 채우는 살과 같다. 뼈대에 살을 더해주고 옷을 입히는 등 뼈대를 완성해가는 개념이다. HTML로 잡은 위치를 조금씩 수정하거나 색을 칠해주는 방식으로 말이다. 마지막으로 Javascript는 여기에 움직임을 주는 것이다. 플립북을 연상하면 된다.

 

백엔드 개발 : Javascript, Ruby, Python

백엔드 개발을 위해 필요한 것은 Javascript, Ruby, Python 등으로 상대적으로 쉬운 프로그래밍 언어부터 익히는 것이 좋다. 그중 가장 기본적인 변수, 조건문, 반복문, 함수 4가지 개념을 확실히 익힐 필요가 있다.

 

백엔드는 원래 SQL, Database, Session, Cookie 등을 알고 활용할 줄 알아야 구성할 수 있었으나 이제는 프레임워크(Framework)에서 필요한 부분을 가져다 쓰는 방식으로 쉽게 할 수 있다. 특히 웹 개발의 경우에는 위의 4가지 개념(변수, 조건문, 반복문, 함수)만 명확하게 공부하면 할 수 있을 정도로 쉽게 접근이 가능하다. 언어별로는 Java는 Spring, Python은 Django, Ruby는 Rails 등의 프레임워크가 있다. 특히 Ruby on Rails는 적은 학습량으로 많은 개발이 가능하기 때문에 추천한다. 

 

변수는 ~는 ~다의 개념이다. 'ID=삼성전자'를 입력한다.

조건문은 만약~라면의 개념이다. ID와 PW가 일치하면 로그인 성공이 표시된다.

반복문은 ~를 n번 반복하는 개념이다. 뒤로 이동 5번을 반복하라는 명령이다.

함수는 a를 넣으면 b가 나오는 개념이다. 공격력이 10이면 데이지가 50이 된다는 식이다.