가끔 코딩을 하다보면 '이걸 왜 하고있는거지?' 라는 생각이 들면서 다시 처음으로 돌아가서 개념을 찾고 있는 내모습을 종종 볼 수 있었다.
처음으로 MERN 스택을 공부하면서 드는 조금은 근본적이지만 까먹기 쉽고, 계속 이것을 상기시키면서 공부하게 되니 조금은 방향이 잡히는 느낌이라 적어본다.
프론트엔드는 사용자에게 화면을 보여주고 사용자가 브라우저 안에서 어떠한 행동으로 event를 발생시키면 그 event를 감지하고 targeting해서 어떠한 event가 감지되었을 때의 반응을 지정해주면 된다. 간단하게 이것이 사용자와의 상호작용할 수 있는 어플리케이션이 될 수 있다. 예를 들면, 버튼을 클릭했을 때 addEventListener 또는 Onclick을 사용하여 클릭을 감지하고, 클릭이라는 event가 발생했을 때의 행동을 코딩해줌으로써 그에대한 반응을 사용자에게 돌려줄 수 있다.
다시 쉽게 말하면 프론트엔드는 1이라는 event가 발생했을 때 1event를 감지하고, 1-1이라는 반응을 코딩해 사용자와 상호작용하는 하나의 프로세스를 반복적으로 수행하는 과정을 만들어내는 작업이라고 생각된다.
이것을 계속 상기시키며 공부하다보니, 일련의 과정들이 모두 event발생 -> event감지 -> 반응 의 순으로 진행된다고 뚜렷이 보였다. 반응의 단계에서는 서버와의 통신, 데이터의 저장, 웹의 반응 등 다양한 반응의 모습들이 있겠으나 큰 틀이 이렇다는 것에는 변함이 없다고 생각된다.
백엔드는 프론트엔드에서의 요청에 맞는 페이지를 띄워주거나, 프론트단에서 요청하는 데이터를 찾아 정상적으로 보내주는 역할을 한다. 이 때, 데이터를 저장하는 공간이 DB가 되며 DB를 구축하여 서버와 붙히는 작업을 진행하여 프로젝트를 진행할 수 있다.
백엔드 또한 지속적으로 프론트엔드에서의 요청을 감지하고, 그에 맞는 반응을 해주는 것으로 지속적인 프로세스가 진행된다.
만들어놓은 DB에 데이터를 저장하고 요청에 맞는 데이터를 DB에서 꺼내어 보여주고, 그것이 성공적으로 수행되었는지, 실패하였다면 어떤 Error를 띄우는지 확인하고 해결하는 작업을 수행한다고 생각한다.
아직 백엔드(node.js express)는 접한지 얼마되지 않아 프론트엔드같이 크게 와닿는 느낌은 없었으나, 같은 프로세스를 계속적으로 수행하는 것이라는 것은 달라질게 없다고 생각한다.
프론트엔드는 사용자의 요청이 발생하면 그 요청을 감지하고 맞는 반응을 해주는 과정.(백엔드로 요청을 보냄 or 웹을 반응시킴)
백엔드는 프론트엔드의 요청이 발생하면 그 요청을 감지하고 맞는 반응을 해주는 과정. (DB에 데이터를 저장하거나 or 요청에 맞는 데이터로 반응하거나)
계속 되뇌이면서 프로젝트를 진행하니 이리저리 갈피를 잡지 못하는 코딩을 하지 않는다는 것을 깨닫게 되었음.
끝.