이전 지식 : Flutter와 프레임워크에 대한 개념
어플리케이션을 제작하겠다고 마음먹으면 어떤 것부터 공부해야 할 지 감이 잘 오지 않는다. 기본적인 내용을 모르다보니 무작정 안드로이드 스튜디오 책을 집어들거나 리액트 클론코딩 강의를 들으며 단순히 코드 타이핑만 하게 된다. 그래서 서버와 통신이 필요한(아마 대부분의 어플리케이션을 제작하겠다고 마음먹었을 때, 서버와의 통신은 필수로 들어갈 것이다.)어플리케이션을 제작할 때의 흐름을 정리해 보고자 한다.
자 그럼 어플리케이션을 개발하고 싶을 때 무엇을 공부해야할까?
아래에서 크게 프론트엔드와 백엔드, 두가지로 나누어 개념을 잡아볼 예정이다. 설명에 나오는 모든 예제들은 Flutter와 Node.js(혹은 Django), MySQL을 참고하여 작성할 것이다.
프론트엔드란 무엇일까. 간단하게 집어보자
말 그대로 Front, 즉 앞에 보이는 것들을 말한다. 아래의 화면을 보자
위의 화면에서 프론트엔드의 범위는 어디까지일까. 설명을 쉽게 하기위해 가지로 나누어 보겠다. 첫번째로는 화면 위쪽에 페이지 이름이 적혀 있는 파란색 위젯이다. 두번째로는 가운데에 있는 문구와 숫자가 있겠고, 마지막으로 오른쪽 아래에 있는 + 위젯이 되겠다. 프론트엔드 개발 단계에서는 이렇게 여러 위젯들을 시각적으로 보이는 것을 진행한다.
그렇다면 프론트엔드 개발자는 저렇게 위젯을 위치에 맞게 나두고 꾸미는 것만 하면 끝인가??
그렇지 않다! 아래의 동영상을 살펴보자
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3382ad45-c72b-4f6c-97b5-eeb1322d57a4/__2021-01-12__10.27.09.mov
위의 영상을 보면 + 위젯을 눌렀을 때 화면에 숫자가 변경되는 것을 볼 수 있다. 이렇게 시스템 내부에서 구현되는 모든 기능들(어플리케이션 내부에서 정보 전달, 페이지 전환, 입력, 계산, 필터링 등등..)을 프론트엔드 개발자가 구현하게 되는 것이다.