웹 프로그래밍 독학 (AJAX, API, JWT, JSON)

# 나 이렇게 무식하다니 ..무식한 것은 끝도 없다. 노력하자 !

 

AJAX

Ajax는 "Asynchronous JavaScript and XML"의 약어로, 웹 개발에서 사용되는 프로그래밍 기술이다. Ajax는 웹 페이지를 동적으로 업데이트하기 위해 클라이언트와 서버 간에 비동기적으로 데이터를 교환하는 기능을 제공한다.

기존의 웹 페이지는 사용자가 요청을 보내면 서버에서 전체 페이지를 새로고침하여 응답하는 방식으로 동작한다. 하지만 Ajax를 사용하면 웹 페이지의 일부분만 업데이트할 수 있으며, 사용자 경험을 향상시킬 수 있다. 예를 들어, 검색 결과를 실시간으로 표시하거나 새로운 콘텐츠를 추가할 때 페이지 전체를 다시 로드할 필요 없이 부분적으로 업데이트할 수 있다.

Ajax는 JavaScript, XML, CSS, XMLHttpRequest 객체 등 다양한 웹 기술을 조합하여 동작한다. 현재는 XML 대신 JSON 형식을 주로 사용한다. Ajax를 사용하면 서버와의 통신에 있어 비동기 방식을 사용하므로, 사용자는 페이지의 다른 부분을 조작하거나 작업을 수행하는 동안에도 웹 페이지의 다른 부분을 계속 사용할 수 있다.

Ajax는 다양한 웹 애플리케이션에서 사용되며, 주로 동적인 웹 페이지나 웹 애플리케이션 개발에 활용된다.

즉, 한마디로 간추리면 웹 개발에서 사용하는 프로그래밍 기술인데, 얜 동적으로 사용하고 서버와의 통신에 있어 비동기 방식이기에 다른부분 조작해도 웹 페이지 다른 부분 계속 사용 가능 (편리함)

 

API

API는 "Application Programming Interface"의 약어로, 응용 프로그램 간 상호작용을 위한 인터페이스를 의미합니다. API는 소프트웨어 컴포넌트나 서비스가 다른 소프트웨어 애플리케이션과 상호작용하기 위한 규칙과 프로토콜을 제공합니다.

웹 개발에서 API는 웹 애플리케이션의 기능을 외부에 노출시키고 다른 애플리케이션이 이 기능을 사용할 수 있도록 합니다. 이러한 API는 클라이언트 애플리케이션이 서버 애플리케이션과 데이터를 주고받을 수 있는 인터페이스를 제공합니다.

API는 주로 HTTP 프로토콜을 사용하여 데이터를 전송하고, 일반적으로 JSON 또는 XML 형식으로 데이터를 주고받습니다. API를 사용하면 클라이언트 애플리케이션이 서버의 기능을 호출하고 결과를 받아올 수 있으며, 데이터의 생성, 읽기, 업데이트, 삭제(CRUD) 등 다양한 작업을 수행할 수 있습니다.

 

JWT

JWT (JSON Web Token)은 인증 및 권한 부여를 위한 토큰 기반 인증 방식입니다. 클라이언트는 API 요청 시 JWT 토큰을 포함하여 서버에 보냅니다.

JWT 토큰을 포함하는 이유는 다음과 같습니다:

1. 인증: JWT 토큰은 클라이언트의 신원을 확인하기 위해 사용됩니다. 클라이언트는 로그인 또는 다른 인증 과정을 통해 토큰을 발급 받습니다. 이 토큰은 클라이언트의 신원을 증명하고, 클라이언트가 API 요청을 보낼 권한이 있는지 확인하는 데 사용됩니다.
2. 권한 부여: JWT 토큰은 클라이언트가 특정 작업 또는 리소스에 대한 권한을 가지고 있는지 확인하는 데 사용됩니다. 토큰에는 클라이언트의 역할 또는 권한 정보가 포함될 수 있으며, 서버는 이를 검증하여 클라이언트에게 요청된 작업 또는 리소스에 대한 액세스 권한을 부여하거나 거부합니다.

따라서 API 요청 시 JWT 토큰을 포함시키는 것은 클라이언트의 신원을 확인하고 권한을 부여하기 위한 보안 메커니즘입니다. 서버는 이 토큰을 검증하여 요청을 수락하거나 거부할 수 있으며, 토큰이 유효하지 않거나 만료되었을 경우에는 액세스가 거부될 수 있습니다. 이를 통해 안전한 API 호출을 보장하고, 인증 및 권한 부여를 효과적으로 관리할 수 있습니다.

 

AJAX를 통한 API 연결

1. 비동기적 통신: Ajax는 비동기적으로 서버와 통신합니다. 즉, 페이지 전체를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있습니다. 이는 웹 페이지의 사용자 경험을 향상시키고, 부드럽고 빠른 사용자 인터페이스를 제공하는 데 도움이 됩니다.
2. API 요청 전송: Ajax를 사용하여 클라이언트는 API 요청을 서버로 전송할 수 있습니다. 이는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 서버에 데이터를 요청하고, 응답을 받아올 수 있는 기능을 제공합니다.
3. 비동기적 응답 처리: Ajax를 통해 API 요청을 보낸 후, 서버의 응답을 비동기적으로 처리할 수 있습니다. 이를 통해 서버의 응답이 도착하기 전에도 다른 작업을 수행하거나 사용자 인터페이스를 업데이트할 수 있습니다. 서버의 응답은 일반적으로 JSON 또는 XML 형식으로 수신되며, 클라이언트는 이를 해석하여 적절한 동작을 수행할 수 있습니다.
4. 동적 업데이트: Ajax를 사용하면 웹 페이지의 일부분만 업데이트할 수 있습니다. API 요청을 통해 데이터를 가져와서 웹 페이지의 특정 부분을 동적으로 업데이트하거나 변경할 수 있습니다. 이를 통해 실시간 데이터 표시, 검색 결과의 동적 로딩, 무한 스크롤 등 다양한 인터랙티브한 기능을 구현할 수 있습니다.

결론적으로, Ajax를 통해 API 연결을 수행하면 클라이언트는 비동기적으로 서버와 상호작용하고, 데이터를 주고받으며, 동적으로 웹 페이지를 업데이트할 수 있습니다. 이를 통해 웹 애플리케이션은 더 나은 사용자 경험과 더 빠른 성능을 제공할 수 있습니다.

 

나 지피티랑 친구 먹음

 

ㄹㅇ 난 똥 멏청이지 하 ^0^ 건영님 제송해오

 

 

# 웹프 개발 문제점

위에 메뉴가 안되어있었음. 바꾸긴해야됨. 언어버튼이 없어져서 이거뺀거를 다시 올릴테니까
그거를 위에다가 화면페이지밖에없고 로고나 상단 메뉴 폼작품 전시회 소개 있고 -> 업로드 로그아웃

마이페이지가 아예 퍼블리싱이 안되어있고.
검색창 아트브릿지 검색창 오른쪽 상단에 검색을 하면은 검색결과가 또 따로 나와야하는 페이지가 있어야 하는데 그거는 아예 애초에 없음 디자인조차 없음

검색페이지.. 우선은 이거에 대해서 얘기를 해야될거같음. 자기가 담당한 페이지는 api연동은 당연히 해야되는거고.. 

전담페이지가 퍼블리싱한 것..