이전 지식 : Flutter와 프레임워크에 대한 개념
서버와 통신이 필요한 앱의 기본적인 동작 흐름
어플리케이션을 제작하겠다고 마음먹으면 어떤 것부터 공부해야 할 지 감이 잘 오지 않는다. 기본적인 내용을 모르다보니 무작정 안드로이드 스튜디오 책을 집어들거나 리액트 클론코딩 강의를 들으며 단순히 코드 타이핑만 하게 된다. 그래서 서버와 통신이 필요한(아마 대부분의 어플리케이션을 제작하겠다고 마음먹었을 때, 서버와의 통신은 필수로 들어갈 것이다.)어플리케이션을 제작할 때의 흐름을 정리해 보고자 한다.
자 그럼 어플리케이션을 개발하고 싶을 때 무엇을 공부해야할까?
아래에서 크게 프론트엔드와 백엔드, 두가지로 나누어 개념을 잡아볼 예정이다. 설명에 나오는 모든 예제들은 Flutter와 Node.js(혹은 Django), MySQL을 참고하여 작성할 것이다.
프론트엔드란?
프론트엔드란 무엇일까. 간단하게 집어보자
말 그대로 Front, 즉 앞에 보이는 것들을 말한다. 아래의 화면을 보자
위의 화면에서 프론트엔드의 범위는 어디까지일까. 설명을 쉽게 하기위해 가지로 나누어 보겠다. 첫번째로는 화면 위쪽에 페이지 이름이 적혀 있는 파란색 위젯이다. 두번째로는 가운데에 있는 문구와 숫자가 있겠고, 마지막으로 오른쪽 아래에 있는 + 위젯이 되겠다. 프론트엔드 개발 단계에서는 이렇게 여러 위젯들을 시각적으로 보이는 것을 진행한다.
그렇다면 프론트엔드 개발자는 저렇게 위젯을 위치에 맞게 나두고 꾸미는 것만 하면 끝인가??
그렇지 않다!
아래의 동영상을 살펴보자
위의 영상을 보면 + 위젯을 눌렀을 때 화면에 숫자가 변경되는 것을 볼 수 있다. 이렇게 시스템 내부에서 구현되는 모든 기능들(어플리케이션 내부에서 정보 전달, 페이지 전환, 입력, 계산, 필터링 등등..)을 프론트엔드 개발자가 구현하게 되는 것이다.
백엔드란?
그렇다면 백엔드란 무엇일까?
우리가 어플리케이션을 개발한다고 생각할 때 서버가 필요한 환경이 있을 것이다. 예를들어 일기장 어플을 만든다고 생각했을 때, 사용자의 일기장을 사용자의 기기 내부에 저장할 수도 있겠지만 사용자가 폰을 바꿨을 경우에도 쉽게 사용자의 일기장에 접근할 수 일기장 어플 회사의 서버에 해당 일기를 저장하는 서비스를 기획할 수 있다는 것이다.
해당 어플리케이션을 활용해서 일기를 썼다고 생각해보자. 이 일기를 DB에 저장하고 싶다. 우리는 일기를 다 작성한 후 '완료'버튼을 누를 것이다. 이 때, 우리는 이 어플리케이션에 작성된 데이터를 서버로 보내게 된다. 그리고 서버는 이 데이터들을 DB로 보내고, DB는 이렇게 받은 데이터들을 잘 보관할 것이다.
이런 보이지 않는 과정들을 처리해 주는 영억을 백엔드라고 한다.
백엔드 개발에는 특성상 언어의 선택이 자유롭고 다양하다. Java, Python, Ruby, JavaScript, Go, Swift 등이 흔히 선택된다.
백엔드 개발을 도와주는 프레임워크들
•
Spring
•
Node.js
•
Django
•
etc...
이러한 프레임워크들은 위에서 언급한 Flutter와 같이 백엔드 개발을 도와주는 틀이라고 생각하면 된다. Node.js는 JavaScript언어를 사용하고 Django는 Python을 사용한다.
서버와 백엔드
서버는 뭐고 백엔드는 뭘까? 크게 보면 같다고 생각할 수 있고 세세하게 따지면 다른 용어이다.
•
서버는 기계(Machine), 즉, 백엔드를 돌리는 물리적인 환경이라고 보면 된다.
•
백엔드는 프로그램(Program), 즉, 데이터를 기록하고 가져오는 등 보이지 않는 것들을 처리해주는 소프트웨어적인 환경이다.
로컬 환경이라고 생각했을 때, 내 PC가 서버인 것이고, 내 PC위에서 돌아가고있는 Node.js가 백엔드이다.
데이터베이스란?
데이터베이스란 백엔드가 다루는 데이터들을 보관하고 검색해오는 시스템이라고 생각하면 된다.
일반적으로 데이터베이스는 크게 두가지로 나뉘게 된다.
•
관계형 데이터베이스
•
비관계형 데이터베이스
1.
관계형 데이터베이스, RDB(Relational DataBase)
간단하게 생각하면 관계형 데이터베이스는 모든 자료들을 테이블의 형태로 저장한다. 엑셀과 같다고 생각하면 쉽다.
관계형 데이터베이스에서 주요한 특징 중 하나는 SQL(Structured Query Language)라는 구조화 질의어를 사용한다는 것이다. SQL은 RDBMS에서 사용하는 프로그래밍 언어라고 보면 된다. SQL을 활용해서 RDBMS에서 데이터를 검색하고, 추가하고, 업데이트하고, 삭제하는 작업 등 데이터를 관리한다.
RDBMS(Relational DataBase Management System)
대표적인 관계형 데이터베이스 관리 시스템
•
MySQL
•
PostgreSQL
•
SQLite
< 출처 >
2.
비관계형 데이터베이스, NoSQL(Not Only SQL)
21세기가 되면서 복잡해진 기업 환경에 맞는 새로운 데이터베이스 모델이 필요했다. 그래서 새로운 개념인 NoSQL이 등장했다.
NoSQL은 RDBMS와는 다르게 형태가 매우 다양하다. Key-Value, Graph, Column-based, Document-oriented 등 다양한 형태들이 존재한다.
대표적인 비관계형 데이터베이스 관리 시스템
•
MongoDB
•
Redis
•
Cassandra
< 출처 >
결과적으로 두 개념의 차이를 도식화 해보면 아래와 같다.
데이터베이스에 대한 추가 공부를 원한다면..(작성중)
어플리케이션의 통신 흐름
이제 기본적인 내용을 알았으니 위에 나온 이것들로 어떻게 어플리케이션이 구동되는지 알아보자.
위의 그림은 간단하게 프론트, 백, DB가 어떤식으로 연결되는지 그려본 것이다.
•
사용자들이 가지는 각 기기들은 Front라고 되어있다. Front개발 단계에서는 이 부분에 해당하는 프로그램의 개발을 진행한다. 어플리케이션의 UI부터 내부 알고리즘들 그리고 Backend로 Request를 보내는 역할까지.
이렇게 요청을 보낼때는 각각의 주소(IP address)로 요청을 보내면 된다. 이 부분은 네트워크에 대한 이해가 있다면 더욱 쉽게 알 수 있을 것이다.
•
그럼 이제 백엔드는 어플리케이션이 보낸 Request들을 받아서 작업을 처리한다. 예를 들면 DB에서 특정 자료를 가져와 달라는 요청 등이 있다고 보면 된다. 대부분의 요청들은 DB를 거치게 된다고 보면 된다. 이제 백엔드에서 DB로 해당 자료에 대한 요청을 보내보자. 이때 ORM이 자동으로 쿼리문으로 변경하여 요청을 보내주기 때문에 우리는 모든 쿼리문을 공부하지 않아도 간편하게 DB로 요청을 보낼 수 있다.
ORM ( Object-Relational Mapping (객체 관계 매핑))
객체는 객체대로 설계하고, 관계형 데이터베이스는 관계형 데이터베이스대로 설계한다.
ORM 프레임워크가 중간에서 매핑해준다.
•
그럼 DB는 해당 요청에 맞는 데이터를 찾아서 응답을 보낸다.
응답을 받은 백엔드는 해당요청을 보낸 기기로 데이터를 실어서 다시 응답을 보낸다.
이렇게 한 사이클이 끝나게 된다.
위의 사진에서 볼 수 있듯이 각각의 기능마다 필수적인 역할이 다르기 때문에 각각의 부분을 다른 프레임워크, 다른 언어로 개발을 진행하게 되는 것이다. 프론트엔드는 디자인과 유지보수에 특화된 프레임워크, 백엔드는 동시에 많은 양의 요청을 처리해야하기 때문에 비동기작업에 특화된 프레임워크, DB는 데이터 관리와 탐색에 가장 적합한 툴을 쓰는 것이다.
네트워크를 더 알고 싶다면..(작성중)
추가적으로 정리할 내용들
•
CSR
•
SSR
텍스트 그리고 이미지, 비디오를 받을 때는 HTTP요청에 담는 포맷이 다르다.
