[번역]프론트vs백엔드vs클라이언트사이드vs서버사이드
front-end vs back-end vs client-side vs
front-end vs back-end vs client-side vs server-side
프론트 엔드 vs 백엔드 vs 클라이언트 측 vs 서버 측
나처럼 경험 많은 (웹) 개발자라면 제목에 나오는 단어가 너에게 의미가 있으며 꽤 기초적이다.
최근 몇 가지 초급자들과 이야기하면서 (일종의 교과 과정을 생각해내는 시도의 일환으로) 나는이 단어들이 종종 던져지는 것을 보았고 조금 혼란 스러울 수 있다는 것을 알게되었습니다. 초보자가 필요로하지 않는 것이 하나 있다면 혼란입니다.
혼란을 없애고 삶을 조금 더 쉽게 만들어주기위한 시도입니다.
웹은 어떻게 작동합니까?
웹 작동 방식의 어리석은 단순화
인터넷에서 물건을 다운로드하고 종종 웹 페이지 형태로 표시합니다.
브라우저에 URL을 입력하면 인터넷에 "이봐, 그 URL에있는 데이터를 줘"라고 알려줍니다.
등등.
그래서, 서버 란 무엇입니까?
간단히 말하면 :이 컨텍스트에서 서버는 인터넷에 연결된 컴퓨터입니다.
"인터넷"은 많은 서버를 모아 놓은 것입니다. 많은 컴퓨터 (화면이없는 상태에서)가 마법을 사용하여 브라우저에 결과를 보내 즐거움을줍니다.
이것이 의미하는 바는 위의 예에서 브라우저가 서버와 통신하고 있다는 것입니다.
그것은 사용자 (그녀의 이름, 이메일 주소 등)의 입력을 받아 나중에 사용하기 위해 저장하는 서버입니다.
이러한 이유로 모든 장치를 브라우저에서 가져 와서 원하는 소셜 네트워크에 로그인하면 모든 세부 정보가 저장되어 즉시 사용할 수 있습니다. 모든 것이 서버에 있습니다.
이제 서버가 무엇인지에 대해 생각해 보았습니다. 이제 브라우저가 무엇인지 더 자세히 이야기 해 봅시다.
클라이언트는 무엇입니까?
클라이언트는 서버와 통신 할 수있는 사용자 컴퓨터 (랩톱, iPad, 스마트 폰)에서 실행되는 소프트웨어입니다.
위의 예에서 클라이언트는 브라우저입니다. 서버가 전송하고 표시하는 정보 (HTML 및 CSS, 이미지, 비디오)를 이해할 수있는 형태로 해석 할 수 있습니다. 그것은 귀하의 입력 (텍스트, 아바타, 비디오 녹음)을 받아 서버로 보내 조작하고 저장할 수 있습니다.
다른 종류의 "고객"에 대해 이야기 해 봅시다. 모바일 및 데스크톱 애플리케이션.
그것은 사용자의 컴퓨터 (귀하의 스마트 폰)에서 실행됩니다.
클라이언트 측 대 서버 측
이러한 용어는 본질적으로 특정 작업이 어디에서 발생하는지 명확히하는 것을 목표로합니다. 서버 또는 클라이언트에서 발생합니까?
클라이언트 측 작업
위에서 설명한 것처럼 클라이언트는 서버와 통신하는 사용자의 컴퓨터에서 실행되는 소프트웨어입니다.
그러나 서버와 통신하는 것이 모든 클라이언트가하는 것은 아닙니다.
아시다시피 Instagram은 이미지를 공유하고 소비하는 소셜 네트워크입니다.
스마트 폰, 태블릿 및 랩톱이 더욱 강력 해짐 에 따라 클라이언트 측에서 수행 할 수있는 작업의 양이 늘어납니다.
서버 측 작업
서버 측 작업 의 가장 일반적인 예는 데이터 저장 및 검색과 관련된 작업입니다.
사람들이 Instagram 응용 프로그램을 통해 등록하고 사진을 업로드 할 때 Instagram의 서버는이 모든 정보를 서버에있는 데이터베이스에 저장합니다.
소프트웨어 개발 팀 은 사용자에게 최상의 경험을 제공하기 위해 작업이 클라이언트 측 또는 서버 측에서 수행되는지 여부를 결정해야합니다 (고유 한 제약 조건을 기반으로).
표현
모바일 응용 프로그램에 대해 조금 이야기하고 웹으로 돌아가겠습니다.
렌더링이란 무엇입니까?
이 컨텍스트에서 구체적으로 , "렌더링"은 HTML 및 CSS가 브라우저에 표시되는 데이터의 조합입니다.
브라우저를 통해 Twitter 또는 다른 소셜 네트워크에 로그인 할 때를 생각해보십시오. 당신은 페이지의 어딘가에 당신의 이름과 아바타를 보았습니다. 내가 팔로우하는 특정 사람들의 가장 최근 게시물을 볼 수도 있습니다.
이 모든 데이터 (사용자의 이름, 이미지, 친구의 트윗)는 서버의 데이터베이스에 있습니다. 그러나 당신이 하는 방식대로 그것을 볼 수 있으려면,이 데이터가 HTML 및 CSS와 결합되어야합니다. 왜냐하면 그것이 브라우저가 표시하는 방법을 알고 있기 때문입니다.
트위터에서 로그 아웃하고 친구가 컴퓨터로 로그인하면 유사한 페이지로 인사를하지만 정확히 똑같은 것은 아닙니다. 당신의 이름, 심상 및 급식은 그들의 것으로 교환되었습니다.
관련 데이터를 취하고 브라우저가 표시 목적으로 이해하는 HTML 및 CSS와 결합하는이 과정이 렌더링 입니다.
서버 측 렌더링
이전에 서버가 브라우저에 HTML 및 CSS를 보내면 브라우저에 표시 할 내용과 방법을 알려줍니다.
에서는 렌더링 서버 측 데이터 (텍스트, 이미지 등) 및 표시 규칙의 조합을 완전히 수행 서버 측 . 개발자는 데이터베이스에서 데이터를 가져 와서 표시 규칙 (HTML 및 CSS)과 병합하여 브라우저에 보내도록 서버에 지시하는 코드를 작성했습니다.
자바 스크립트 소개
HTML 및 CSS 외에도 브라우저에서 이해할 수있는 또 다른 언어가 있으며 JavaScript 라고 합니다 .
HTML 및 CSS와 달리 사용자 인터페이스가 유일한 목적입니다.
이것은 JavaScript를 사용하여 많은 클라이언트 측 재미를 누릴 수 있음을 의미 합니다.
HTML & CSS를 여러 번 서버에 요청하지 않아도되는 이유는 무엇입니까?
브라우저가 서버에서 무엇인가를 요청할 때마다 사용자는 서버가 응답하고 모든 것이 다운로드 될 때까지 기다려야합니다.
우리는 데이터를 요청 만함으로써 사용자 경험을 더 빠르게 만들 수 있습니다 (사용자 인터페이스 정보 없음). 데이터는 상대적으로 가볍기 때문에 data + html + css 보다 빠르게 다운로드됩니다 .
사용자 인터페이스 너머
자바 스크립트는 사용자 인터페이스를 조작 할 수있는 것 이상의 다른 기능을 수행 할 수 있습니다.
사운드, 이미지 및 비디오 조작에 필터를 적용 할 수있는 완전한 프로그래밍 언어입니다.
앞서 언급했듯이 서버와 통신하여 데이터를 요청할 수도 있습니다. 그리고 또 다른 전체 페이지로드없이이 모든 작업을 수행 할 수 있습니다.
즉, 우리는 브라우저 ( 클라이언트 측 ) 에서 실행되는 전체 사용자 경험을 구축 하고 서버와 통신하면서 데이터 만 수신 및 전송할 수 있습니다 .
클라이언트 측 렌더링
여기서 "렌더링"(HTML 및 CSS와 데이터 결합)은 JavaScript를 사용하여 클라이언트 측 (문자 그대로 브라우저에서)으로 수행됩니다.
프런트 엔드 대 백엔드
이 용어는 클라이언트 측 과 서버 측 을 의미 할 때 사용하기 쉽기 때문에 혼란 스러울 수 있습니다 . 그러나 때로는 다소 다릅니다.
프런트 엔드는 무엇을 의미합니까?
이것은 단순히 사용자 인터페이스 및 경험과 관련된 모든 것입니다. 프런트 엔드 개발자는 사용자 인터페이스를 구축하는 코드를 작성 하나입니다.
즉, 모든 프런트 엔드 웹 개발자는 HTML 및 CSS를 이해해야합니다.
웹 응용 프로그램이 서버 쪽 렌더링을 사용하는 경우에도 프런트 엔드 개발자가 프런트 엔드 코드를 작성할 수 있습니다 . 렌더링이 서버 측 에서 일어나고 있다는 사실이 사용자가 보는 것을 알려주는 HTML 및 CSS를 작성한다는 사실을 배제하지 않습니다.
프런트 엔드가 항상 클라이언트 측은 아닙니다.
플립 사이드에서는 클라이언트 측에서 발생하는 모든 것을 프런트 엔드라고합니다.
프레임 워크 란 무엇입니까?
소프트웨어 개발에서 프레임 워크 (또는 라이브러리)는 미리 작성된 코드로서 동일한 종류의 물건을 반복해서 만들 수 있습니다.
개발자는 웹 (또는 어떤 종류의) 응용 프로그램을 만들 때 당신이하고 싶은 일이 있다는 것을 알아 챘습니다. 웹 페이지를 렌더링하거나 사용자 입력을 수집합니다.
따라서 모든 개발자가 매번 처음부터이 작업을 수행하는 모든 코드를 작성하는 대신, 많은 일을 쉽게하기위한 프레임 워크를 작성합니다.
같은 종류의 프레임 워크는 종종 여러 가지가 있습니다. 왜냐하면 다른 사람들은 항상 뭔가를 달성하는 최선의 방법과는 다른 아이디어를 가지고 있기 때문입니다.
프론트 엔드 프레임 워크
내 생각에 프론트 엔드 프레임 워크라는 용어는 많은 혼란을 야기합니다.
사람들이 "프론트 엔드 프레임 워크"라는 용어를 사용하면 " 클라이언트 측 렌더링 프레임 워크 " 가 진정으로 의미하는 바가 있습니다. 서버 측 렌더링에는 많은 프런트 엔드 코드 작성이 있지만 사실입니다.
나는이 용어를 사용하는 방법을 바꾸기에는 너무 늦었다 고 생각하지만, 사람들이 말하는 것을 이해하는 것이 중요합니다.
일반적으로 프론트 엔드 프레임 워크 는 클라이언트 측 렌더링 (JavaScript 사용)을보다 쉽고 빠르며 더 효율적으로 수행 할 수 있도록하는 코드 라이브러리 (미리 작성된 코드 )입니다.
백 엔드는 무엇을 의미합니까?
이것은 사용자 인터페이스와 관련이없는 서버 측 에서 일어나는 모든 일입니다 .
이러한 것들 (데이터 저장, 검색 및 조작)은 클라이언트 측 (Instagram 앱 예에서와 같이 )에서도 발생할 수 있지만 결코 백엔드 조작이라고 할 수는 없습니다.
... 백엔드 프레임 워크?
사람들 이 백엔드 프레임 워크라고 부르는 대부분의 프레임 워크 는 실제로 "범용 웹 프레임 워크"입니다.
이는 HTML 및 CSS의 서버 측 렌더링을 모두 수행 할 수 있기 때문입니다. 백엔드 및 프런트 엔드 업무를 수행하고 있기 때문에 이러한 맥락에서 백엔드 프레임 워크라고 부르는 것이 이상합니다.
또한 데이터 저장, 검색 및 조작 에만 사용하도록 결정하고 모든 데이터를 클라이언트 측 렌더링을 위해 클라이언트 측에 전송할 수 있습니다. 이러한 맥락에서 볼 때 애플리케이션의 프론트 엔드에 전혀 관련이 없으므로 백엔드 프레임 워크라고 부르는 것이 좋습니다.
예 : Rails , Django , Laravel , Express.js
서버상의 JavaScript : Node.js
자바 스크립트가 대중화되고 더 많은 개발자들이 언어를 배웠을 때, 자바 스크립트가 브라우저가 아닌 다른 곳에서 실행되도록하는 것이 좋은 생각이되었습니다.
이것이 바로 Node.js 입니다. 이것은 브라우저 만이 아니라 JavaScript가 JavaScript를 이해하고 해석 할 수있게 해주는 소프트웨어입니다.
이제 Node.js 덕분에 클라이언트 측과 서버 측에서 JavaScript를 작성하여 개발자가 완전한 웹 애플리케이션을 작성하는 데 필요한 언어의 수를 줄일 수 있습니다.
