전체 목표: 웹 개발을 위한 큰 그림을 그려 흐름을 이해하기 위하여 공부를 시작했습니다.
목표 1: 웹과 서버의 동작 방식 이해하기
요청-응답
웹의 동작 원리는 "클라이언트가 서버에 요청을 보내고 서버는 그 요청에 대해 응답 처리를 한다"입니다.
이전에 프론트엔드(클라이언트)와 백엔드(서버) 개념을 이해하면 좋습니다. 식당으로 비유를 해봅시다. 손님은 식당 직원에게 주문을 합니다. 직원은 주문에 맞게 서빙을 합니다. 즉, 무언가를 요청하는 손님은 클라이언트가 되고 요청한 것을 응답하는 직원은 서버입니다.
API
요청 역시 데이터라고 볼 수 있습니다. 이 둘은 서로 데이터를 주고 받는 것이라고 할 수 있습니다. 그런데, 이 데이터를 서로 주고 받을 때 '정해진 규칙'이 있어야 합니다. 이 규칙이 바로 API(Application Programming Interface)입니다. 클라이언트와 서버처럼, 서로 다른 프로그램에서 요청과 응답을 받을 수 있게 만든 체계입니다.
API 요청에서 가장 중요한 개념은 CRUD로 Creat(올리다), Read(불러오다), Update(바꾸다), Delete(지우다)입니다. 요청이 있으면 응답이 있고 이 응답은 이 개념들을 기준으로 나옵니다.
웹 서버는 웹 페이지와 웹 애플리케이션을 클라이언트에게 제공하는 역할을 수행하는 컴퓨터 프로그램 또는 하드웨어입니다.
웹 클라이언트
웹 클라이언트에는 대표적으로 웹 브라우저, 즉 구글의 크롬, 사파리, 파이어폭스, 오페라, 인터넷 익스플로러 등이 있습니다.
여기서 웹 클라이언트는 웹 서버에 자료를 요청하기 위해 http를 사용하는 클라이언트 프로그램입니다. 이 클라이언트는 어떤 서비스를 요청하는 역할과 화면에 결과물을 출력하는 역할을 합니다. 클라이언트가 요청하는 리소스는 컴퓨터에 저장되어 있는 정적인 데이터 혹은 동적인 결과가 될 수 있습니다.
(정적인 데이터: 이미지, HTML 파일, CSS 파일, JavaScript 파일 등 저장된 파일 / 동적인 결과: 웹 서버에 의해 실행되는 프로그램을 통해 만들어진 결과물)
이러한 웹 클라이언트가 요청하는 리소스를 전달해주는 것이 바로 웹 서버입니다.
데이터베이스와 WAS
데이터베이스(DB)는 데이터의 정보를 저장하는 곳입니다. WAS에서 데이터를 요청하면 필요한 데이터를 응답합니다. WAS에서 로직을 수행하다가 DB 접근이 필요하면, SQL 질의를 통해 데이터를 요청합니다. 그러면 DB는 요청사항에 맞는 응답을 보냅니다. 반대로 WAS에서 DB에게 해당 내용을 저장하게끔 요청하면, DB는 그 내용을 정리하여 저장합니다. 데이터베이스가 필요한 이유에 대해서는 하단의 개발 영역 이해에서 더 알아보겠습니다.
WAS란 브라우저와 DBMS(데이터 베이스 관리 시스템) 사이에서 동작하는 미들웨어입니다. 여기서 미들웨어란, 클라이언트와 DBMS 사이 중개 역할을 하는 소프트웨어입니다. 클라이언트는 단순히 미들웨어에게 요청을 보내고, 미들웨어에서 대부분의 로직을 수행하지만 데이터를 조작할 경우 미들웨어가 DBMS에 접속하기도 합니다.
그림으로 정리하면 이렇게 됩니다.
목표 2: 개발 과정 이해하기
개발 과정은 크게 5가지로 나눌 수 있습니다.
기획 - 디자인 - 개발 - QA - 배포
기획에서는 기능 요건에 대해 알아보고 기능 명세에 대하여 정의합니다. 어떤 기능을 다룰지 정하는 일입니다. 여기서 개발자들은 어떤 기능이 구현 가능하고 어떤 기능은 구현이 안 되는지에 따라 기획하며 전체적인 틀을 잡습니다.
디자인에서는 디자이너가 디자인을 진행하며 프론트 개발자가 이를 보고 개발이 가능한지 피드백을 줄 수 있습니다.
개발에서는 디자인을 토대로 프론트 개발자가 화면을 구현하는 개발을 진행합니다.
(참고로 기획부터 개발 사이에서 API 개발도 진행될 수 있습니다.)
QA(Quality Assurance)에서는 배포 전 프로덕트 테스트를 진행합니다.
배포에서는 최종 프로덕트를 배포하며 트래픽 픽셀을 체크합니다.
목표 3: 개발 영역 이해하기
프론트엔드(FrontEnd)
프론트엔드 개발자는 사용자 경험을 개선하고 웹 페이지의 시각적인 부분을 담당합니다.
프론트 엔드 개발자는 경우에 따라 디자인을 코드로 바꾸는, 즉 웹 퍼블리셔 역할을 할 수 있으며 API를 화면에 연결하는 역할을 합니다. 여기서 퍼블리싱 작업으로는 HTML, CSS, JS로도 가능하며 JS로도 기능 구현이 어느정도는 가능하지만, 효율적인 기술도 존재하며 실제로 이런 기술들을 다룹니다.
React, Angular, Vue 같은 기술들을요. (참고로 Vue, Angular는 프레임워크이며 React는 라이브러리입니다.) JS로도 어느 정도 기능 구현이 가능한데, 이런 기술을 이용하면 더 효율적으로 개발이 가능하게 됩니다.
예를 들어 실시간 인기 검색어가 있는 화면을 접속했다고 가정해보면, 실시간을 기준으로 웹 페이지는 매 순간 바뀌게 될 것입니다. 이는 화면을 계속 다시 그리는 것과 같습니다. 여기서 전체 화면을 다시 그리기보다 변하는 화면 일부분만 바꾸는 것이 더 효율적일 것입니다. 따라서 기술 스택을 익혀 성능을 더 높이고, 코드를 효율적으로 짤 수 있습니다.
백엔드(BackEnd)
백엔드는 웹 사이트나 웹 애플리케이션의 서버 측 부분을 의미합니다. 이 부분은 프론트엔드와 상호작용하며 데이터베이스와 통신하여 필요한 데이터를 가져오고 처리하는 역할을 담당합니다. 서버를 구축하고 데이터를 관리하며, 프론트엔드와의 데이터 교환을 처리합니다.
자바, 파이썬, 자바스크립트, 루비 등 언어를 기반으로 개발을 합니다. 완성된 도구라고 할 수 있는 spring(자바), django(파이썬), node js(자바스크립트), rails(루비) 등에서 효율적으로 개발이 가능합니다. 또한 데이터베이스를 백엔드 개발자가 사용하게 됩니다.
서버에서 만약 데이터를 계속 보내고 저장한다면 용량이 매우 커지게 될 것입니다. 그래서 데이터 베이스가 필요합니다. 효율적으로 데이터를 저장하고 관리하기 위해서죠. 데이터 베이스의 종류에는 mongoDB, PostgreSQL, MYSQL 등 DB가 많습니다.
'WEB' 카테고리의 다른 글
컴파일러와 인터프리터의 차이 (0) | 2024.05.13 |
---|