개발일지

TIL 6일차: 서버-클라이언트, API, Ajax 등의 개념 정리

수수 아보카도 2022. 11. 21. 23:21

오늘은 파이썬 문법 기초를 들은 날이다.

파이썬 들어가기 전에 웹개발 종합반에서 배운 Flask는 이해하고 넘어가재서

서버-클라이언트 개념부터해서 API, Ajax, JQuery, JSON 등의 헷갈리는 개념들을 한 번씩 더 봤다.

 

1. 서버와 클라이언트

서버란, 컴퓨터 네트워크를 통해 개인 컴퓨터를 넘어

직접 연결하지 않은 다른 컴퓨터까지 서비스를 제공하기 위한 소프트웨어이다.

 

클라이언트는 서버와는 반대되는 개념으로,

서버에서 보내주는 데이터를 받거나, 서버에 요청을 하는 소프트웨어다.

예를 들어, 웹 브라우저 또한 클라이언트 프로그램이다.

컴퓨터 사용자는 웹 브라우저를 통해 사용자 인터페이스가 구현된 화면에서

클릭이나 드래그를 하는 등의 행위를 통해 서버에 정보를 요청하고 받아오게 된다.

 

2. 로컬 개발환경

컴퓨터 한 대로 서버를 만들고, 브라우저로 접속하여 확인해가며 개발하는 개발환경.

이 다음 단계로, 개발 완료 후 서버를 사서, 해당 서버에 개발 코드를 업로드한 후 개별 클라우드에 배포한다.

 

3. Flask

플라스크는 개발을 쉽게 도와주는 프레임워크이다.

from flask import Flask로 시작되는 얘를 꼭 써줘야 한다.

실행한 후 브라우저 주소창에 코드에서 포트로 지정한 localhost:5000으로 들어가면,

코드로 만들어놓은 서버를 통해 결과물이 브라우저에 뜬다.

 

이는 곧 한 대의 컴퓨터로 서버를 돌리는 동시에 브라우저로 해당 서버를 열어 접속하는 것이므로,

로컬 개발환경에서 이루어진다고 할 수 있다.

 

4. 프레임워크 vs 라이브러리

프레임워크는, 남이 짜둔 규칙이나 틀 안에서 자유롭게 코딩하는 개념.

라이브러리는 내가 자유롭게 코드를 짜면서 중간 중간 남이 미리 만든 라이브러리(코드)를 갖다 쓰는 것.

편리성과 효율성을 높이는 개념이다.

다시 말해, 하나의 프레임워크 안에서 개발을 코드를 짤 때,

라이브러리는 필요에 따라 여러 개 가져다 쓸 수 있다.

 

5. Flask의 기본 폴더 구조

스파르타 코딩클럽에서는 static, templates, 그리고 app.py라는 이름으로 파이썬 파일을 만들어서 사용했다.

static에는 css와 이미지가 주로 들어가고, templates에는 html, app.py에는 서버가 돌아가는 파일이 들어가게 된다.

이때 html 문서 안에는 render_template을 통해 html 파일을 서버 코드 안에 불러와

클라이언트 요청 시 불러온 해당 html 파일을 보여준다.

다시 말해 서버가 html 파일을 가져다가 클아이언트에 전달해준다.

 

6. API (Application Programm Interface)

API란 라이브러리에 접근하기 위한 규칙들을 정의한 것이다.

개발자가 라이브러리에서 제공하는 여러 함수들을 이용해 프로그램을 작성할 때

해당 함수의 내부 구조물을 알 필요 없이 API에 정의된 입력값을 주고 결과값을 사용할 수 있게 해준다.

 

7. HTTP 통신규약

여러 규칙들을 정의한 API 중 서버와 클라이언트 사이에 통신을 위한 규칙을 말한다.

클라이언트가 서버에 정보를 요청할 때, 요청 메소드를 통해 클라이언트의 요청이 어떤 종류인지 알려주는 역할을 한다.

예를 들어 get이나 post같은 메소드.

 

8. Ajax (Asynchronous Javascript And XML)

자바스크립트를 사용한 비동기 통신 방법.

프론트엔드(클라이언트)에서 백엔드(서버)로 보내기.

API를 만들어 프론트엔드에서 백엔드로 필요한 데이터를 Ajax라는 방식으로 요청한다.

서버에 데이터 요청(ex. get, post)을 편하게 하기 위해 사용한다.

실시간으로 업데이트되는 데이터를 리로딩 없이 페이지에 반영한다는 장점이 있다.

JQuery가 임포트된 페이지에서만 작동된다.

 

(비교) Ajax는 전송 기술 방법이고, JSON은 전송 데이터 포맷이다.

 

9. JSON

JSON은 웹과 프로그램에서 용량이 적은 데이터를 교환하기 위해

데이터 객체를 속성이나 값의 형태로 표현하는 형식이다.

리스트 + 딕셔너리 조합

자바스크립트 토대로 개발되었다. 따라서 문자열, 숫자, 배열, 불라인, 다른 객체 등을 포함할 수 있다.

 

10. REST API (Representational State Transfer)

REST 아키텍쳐 규칙을 따라 만드는 API.

웹에서 데이터를 전송하고 처리하는 방법을 정의한 연결고리.

(비교) SOAP API, RPC API, Websocket API, Rest API

이들 중 Rest API가 가장 많이 사용된다.

서버가 클라이언트 입력해 내부 함수를 시작한다.

그리고는 출력 데이터를 다시 클라이언트에 반환한다.

메소드: CRUD

구성: URL, HTTP(get, post, put/patch, delete), 데이터 형태(JSON 등...)

 

 

에구궁 오늘은 이렇게 정리하고, 파이썬 듣고, SQL 1,2주 복습한 걸로 하루 공부가 끝났다.

SQL 3주 마저 들어야 내일이 편하겠지! 파이팅~~