[SeSAC] 웹 풀스택 과정_프론트엔드와 백엔드에서의 자바스크립트 역할 / 클라이언트-서버 구조

 

 3주 동안 HTML, CSS, JavaScript, Bootstrap, JQuery 등 흔히 프론트엔트라고 분류되는 것들을 배워서 직접 만든 페이지를 웹브라우저에 띄우는 것들을 해봤습니다. 그리고 4주 차에는 JavaScript로 프로그램을 만들고 그 프로그램을 Node.js 위에서 실행하기 위한 백엔드 수업이 시작되었습니다.

 

 제가 작성한 자바스크립트 코드가 의도한 대로 동작할 수 있는 이유는, 브라우저 자체에 내장된 API들을 활용할 수 있기 때문입니다. 이렇게 웹브라우저는 자바스크립트 코드가 실행되기 위한 API 등의 환경을 제공해 주고 이런 환경을 런타임이라고 합니다. 따라서 웹 브라우저는 자바스크립트의 여러 런타임 중 하나로 볼 수 있습니다.

 반면에 Node.js는 웹 브라우저와 유사한 방식으로 자바스크립트 코드를 실행할 수 있는 백엔드 런타임 환경입니다. 결국, 자바스크립트 코드는 웹브라우저에서 동작할 수도 있으며, Nodejs 에서도 동작할 수 있습니다.

 중요한 점은 자바스크립트 언어 자체는 어떤 런타임에서든 사용될 수 있다는 것입니다. 다만, 실행되는 환경에 따라 사용 가능한 API나 환경이 다를 수 있습니다. 이 때문에 자바스크립트는 보통 웹 브라우저에서 사용되는 클라이언트 사이드 자바스크립트와 Node.js와 같은 서버 환경에서 실행되는 서버 사이드 자바스크립트로 구분되기도 합니다.

 

이는 아래와 같은 각각의 기능과 역할로 분류된 것입니다.

 - 클라이언트 사이드 자바스크립트는 주로 웹 페이지의 동적 기능과 상호 작용을 처리

 - 서버 사이드 자바스크립트는 주로 서버의 백엔드 로직과 데이터베이스와의 상호 작용, API 제공 등

 

 

 

 우선 자바스크립트를 백엔드에서 쓰기위해 Nodejs를 사용한다 정도로 이해하고 클라이언트-서버 구조에 대해 조금 더 알아보겠습니다.

 

 클라이언트-서버 구조란 사용자와 서버 간의 상호 작용을 효과적으로 관리하며 효율적으로 프로그램을 개발하기 위한 구조입니다. 즉, 클라이언트와 서버의 역할을 나누어 시스템의 구조를 만들었다고 할 수 있습니다.

 

 여기서 클라이언트는 사용자의 요청을 생성하고 서버에 전송하는 역할을 합니다. 예를 들어, 웹 브라우저에서 웹 페이지를 요청하거나 모바일앱이나 데스크톱 앱에서 서버로 데이터를 보내는 동작이 클라이언트의 역할입니다. 예를 들어 카카오톡앱에서 메세지를 작성하고 보내기 버튼을 누르면 카카오톡앱은 메세지를 서버로 전송하기 위한 요청을 생성하고 서버로 보낼 것이고, 서버는 그 메세지를 저장하는 등의 작업을 수행할 것입니다. 그래서 우리는 핸드폰을 잃어버려도 어딘가에 백업된 메세지들을 다시 받아올 수 있겠죠.

 

 요약하자면, 프론트엔드에서는 사용자 요청을 생성하고 클라이언트로 전송하며, 서버 사이드에서는 요청을 처리하고 필요한 작업을 수행한 후 응답을 제공하여 클라이언트-서버 구조를 형성합니다. 또한 자바스크립트는 브라우저에서 프론트엔드 역할을, Node.js를 통해 서버 사이드에서 역할을 수행할 수 있습니다.

 

 

 

참고.

https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/

https://intellipaat.com/blog/what-is-client-server-architecture/?US

https://mingrammer.com/translation-10-common-software-architectural-patterns-in-a-nutshell/