Front-end

• HTML
• CSS
  - Bootstrap
• JavaScript

Back-end

▪︎ Java

▸ Spring

자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크

▸ Spring ↔︎ Oracle

• JDBC: Java Database Connectivity
  🔗Oracle-Connection
  자바에서 데이터베이스에 접속할 수 있도록 하는 자바 API
• MyBatis
  개발자가 지정한 SQL, mapping 지원 persistence framework
• log4J
• Transaction

▸ Spring MVC

1. 클라이언트의 요청이 Front Controller에게 전달
2. Front Controller는 해당 Controller에게 위임(delegate)
3. Controller는 적절한 Service 객체를 찾아서 호출
4. Service 객체는 DB 작업을 담당하는 DAO를 이용해서 원하는 데이터를 요청
5. DAO는 MyBatis를 이용하는 Mapper를 통해서 원하는 (DB) 작업을 수행
6. Service가 처리한 데이터를 Controller에게 전달
7. Controller는 Spring MVC에게 데이터를 전달
8. 전달된 데이터는 Model 객체를 이용해 적절한 View로 전달
9. View에서 전달받은 데이터를 출력할 수 있도록 처리

▪︎ C

▪︎ Python

▪︎ PHP

PHP로 작성된 코드를 HTML 소스 문서 안에 넣으면 PHP 처리 기능이 있는 웹 서버에서 해당 코드를 인식하여 작성자가 원하는 웹페이지 생성)

▪︎ JavaScript

▸ REST(Representational State Transfer)

🔗REST

HTTP URI를 통해 자원을 명시하고 HTTP Method(POST, GET, PUT, DELETE)를 통해 자원에 대한 CRUD 적용

1. 자원: URI
2. 문법: HTTP Method
3. 표현: JSON, XML, TEXT, RSS 등

REST API: REST를 기반으로 서비스 API를 구현한 것

RESTful: REST 원리를 따르는 시스템은 RESTful이라는 용어로 지칭

HTTP 호출 요청 방법

1. Ajax
2. jQuery
3. fetch
4. Axios
5. Angular HttpClient

▸ 1. Ajax: Asynchronous JavaScript and XML

Ajax → JavaScript를 이용하는 비동기 데이터 교환 기술

JavaScript를 이용하여 웹 서버와 클라이언트 간 비동기적으로 XML 데이터를 교환하고 조작하기 위한 웹 기술
JQuery를 통해 쉽게 구현 가능

AJAX 주요 기술

• XMLHttpRequest: 비동기 통신 담당 자바스크립트 객체
• JavaScript: 객체 기반 스크립트 프로그래밍 언어
• XML(Extensible Markup Language): 마크업 언어
• DOM: XML 문서를 트리 구조의 형태로 접근할 수 있게 해주는 API
• XSLT(Extensible Stylesheet Language Transformations): XML 문서를 다른 XML 문서로 변환하는 데 사용하는 XML 기반 언어
• HTML(HyperText Markup Language): 웹 문서 표현 마크업 언어
• CSS(Cascading Style Sheets): 스타일 시트

▸ 2. jQuery: ajax를 쉽게 사용하기 위해 도입된 메서드

클라이언트와 서버 간 데이터를 주고받는 비동기 HTTP 통신
전체를 받아오는 대신 웹 페이지의 일부분만을 갱신
JSON, XML, HTML, Text File, ...

• JSON(JavaScript Object Notation)
  → Ajax에서 많이 사용되는 XML을 대체하는 주요 데이터 포맷
  "속성-값" 또는 "키-값"으로 이루어진 개방형 표준 포맷
• XML(Extensible Markup Language)
  → 마크업 언어
  송・수신 시스템 간 데이터 연계의 편의성을 위해서 전송되는 데이터 구조를 동일한 형태로 정의

▸ 3. fetch: 비동기 요청을 보낼 수 있는 web API

Node.js

확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼
javascipt 언어 사용

▸ 4. Axios: HTTP 요청을 만들고 기능을 제공하는 오픈 소스 라이브러리

하나의 필수 파라미터를 가지며, 여러개를 전달할 경우 쿼리로 data를 보내기도 함

https://axios-http.com/docs/intro

브라우저에서 XMLHttpRequests를 만든다. request, response data Automatic request body serialization to :

• JSON(application/json): chatting websocket(JSON.stringify(data) -> JSON.parse())
• Multipart/FormData(multipart/form-data): file 전송에 사용(enctype="multipart/form-data")
• URL encoded form(application/url)

▪︎ SQL

storage: database(NoSQL Database/Relational Database(Oracle, MySQL, ...))