본문 바로가기
카테고리 없음

코딩 입문하기 (2편) : 서비스 구조와 동작 원리

by Rachel 2024. 8. 16.
반응형

이번 글에서는 서비스의 기본 원리와 동작이 어떻게 이루어지는지 살펴보는 시간을 갖겠습니다. 서비스를 크게 서버와 클라이언트로 나누는 경우가 많은데요. 각각이 어떤 역할을 수행하고, 그 역할이 수행되는 과정에 어떤 기능과 코드가 활용되는지 살펴봅시다. 마지막으로 본격적으로 프로그래밍을 공부하기 전에 어떤 분야가 있고, 나의 흥미와 필요에 맞는 프로그래밍 기술과 분야는 어떤 게 있는지 생각해 보는 시간을 가지겠습니다. 

코딩 입문하기-2편-서비스-구조와-동작-원리
코딩 입문하기 (2편) : 서비스 구조와 동작 원리

 

1.  서비스의 동작 원리

서비스가 나뉘는 기본 구조를 알아봅시다. 일반적으로 웹 서비스는 클라이언트와 서버로 나뉩니다. 클라이언트는 고객 역할, 서버는 요청을 받아 기능을 제공하는 역할을 합니다. HTML은 이미지, 글자, 버튼 등 각 구조가 어디에 들어갈지 정해주는 역할을 합니다. CSS는 크기, 색깔, 테두리 선의 굵기, 그림자 등 스타일을 입혀주는 역할을 합니다. JavaScript는 여기에 클릭을 하거나 스크롤을 하거나 이런 유저 동작에 따라 사이트가 어떻게 반응할지 정해주는 역할을 합니다. 예를 들어 플레이 버튼을 클릭하면 영상이 재생되거나, 자막 버튼을 클릭하면 영상에 자막이 뜬다거나 이런 규칙을 JS로 정해주는 것입니다.

그렇다면 이 코드는 어디서 오는지 생각해 봅시다. 바로 웹사이트에서 필요한 코드를 서버에서 불러다 쓰는 것이라고 생각하면 됩니다. 서버는 어딘가에 존재하는 컴퓨터입니다. 인터넷 통신으로 클라이언트와 서버가 소통하면서 웹 세상이 돌아가는 것입니다. 브라우저를 이용해서 주소를 검색합니다. 그러면 이 주소를 DNS라는 인터넷 주소록에서 찾아보게 됩니다. DNS에서는 어떤 특정한 숫자 주소를 가리키고 있습니다. 이 주소가 바로 IP 주소입니다. IP 주소는 서버 컴퓨터의 위치를 나타내는 것입니다. 하지만 모든 숫자를 외울 수는 없기에 DNS를 이용해서 IP 주소를 찾게 하는 것입니다.

그리고 이 IP 주소를 해당하는 서버 컴퓨터에게 특정 사이트를 달라고 요청하면 이 사이트를 브라우저에 띄우기 위한 HTML, CSS, JS 같은 코드를 서버가 클라이언트에게 제공합니다. 마지막으로 브라우저는 이 코드를 바탕으로 해석해서 유저에게 보여주게 됩니다. 클라이언트는 서버에게 계속 무언가를 요청할 수 있습니다. 그렇다면 이 데이터는 어디에 저장할까요? 바로 서버에 있는 데이터베이스에 저장하게 됩니다. 또한 클라이언트의 요청 없이 서버가 스스로 움직이기도 합니다. 가령 구독 서비스의 경우, 서버가 스케줄에 맞게 작업을 예약해 두고 결제일에 맞춰 결제를 할 수 있습니다. 

 

2.  서비스의 구현 방법 

우리가 구현해야 하는 기능을 세분화하면 간단하고 작은 작업으로 나뉘게 됩니다. 그런 작업들을 자동화시킬 때 반복문과 조건문을 사용하는 경우가 많습니다. 각각을 설명해 보겠습니다. 반복문을 쓰면 같은 동작을 여러 번 원하는 만큼 반복할 수 있습니다. 반면 조건문원하는 조건에 따라 코드를 실행합니다. 자주 쓰는 다양한 기능들은 매번 코드를 새로 만드는 것이 비효율이 될 수 있습니다. 따라서 개발자들이 미리 자주 쓰는 기능에 대한 코드를 만들어두는 경우가 있습니다. 대표적으로 라이브러리와 프레임워크가 있습니다. 타인이 만든 코드를 가져와서 나에게 맞게 수정해서 쓰면 생각보다 빠르게 원하는 서비스를 만들 수 있습니다. 

 

3.  프로그래밍 공부를 시작하기 

프로그래밍을 시작하기 전에 분야가 굉장히 다양하기 때문에 나에게 맞는 분야와 기술을 찾는 것이 중요합니다. 프로그래밍은 크게 웹 개발, 모바일 개발, 데이터 사이언스로 나뉩니다. 그 외에도 게임, 블록체인, 임베디드, IoT 등 있습니다. 관심 있는 분야와 기술이 있다면 먼저 그 부분부터 공부하면 됩니다. 다음 글에서는 프로그래밍의 다양한 분야에 대해 알아보는 시간을 갖겠습니다. 

 

※ 해당 글은 코드잇(codeit)의 [프로그래밍 오버뷰] 강의 내용에서 참고하여 작성하였습니다. 

반응형