[Golang Web 개발] 6. Web개발 기본 정리 1

Web개발에 대해서 이해를 저어어언혀 못하고 있기에, 

 

웹개발을 공부하기에 앞서 기본적인 지식에 대해서 공부해서 정리하고자 한다.

 

(참고한 사이트는 하단에 URL 첨부해두었습니다.)

 

0. Front End와 Back End

 

Web 개발은 기본적으로 2단으로 나뉜다.

 

Front End (HTML, CSS, JavaScript)

Back End(Go, Spring, PHP 등)

 

앞단과 뒷단으로 나뉜다고 하는데, 결국 이것이 영어로 하면 Front End와 Back End인 것이다.

 

FE는 유저(클라이언트)와 상호작용이 일어나는 인터페이스를 뜻하고

 

BE는 유저에게는 보이지않는 서버와 인프라를 구축하는 것이다. 

 

1. Front End

 

1) HTML(HyperText Markup Language)

 

 웹에서 아주 기본적인 구조를 담당한다. 

 

2) CSS(Cascading Style Sheets)

 

 웹의 기본 디자인 요소(글자 색 , 폰트 크기 등)를 담당한다.

 

3) JavaScript

 

 정적 웹페이지에서 동적 제어를 가능하도록 한다.

 

2. Back End

 

 서버 사이드라고 불리우며, 정보를 처리하고 저장, 요청에 따라 정보를 주는 역할을 한다.

 

3. HTTP (Hypertext Transfer Protocol)

 

 - WWW(World Wide Web)에서 정보를 주고 받을 때 사용하는 프로토콜 - 80 포트 

 

 cf) HTTPS : 443포트 (보안성 강화)

 

 - 클라이언트와 서버 사이에 이루어지는 Request - Response 프로토콜이다.

 

 - TCP 기반 통신 방식 (3 way handshake) 으로 비 연결 지향, 단방향성, 평문 전송을 한다.

 

HTTP 프로토콜로 데이터를 주고받기 위해서는 아래와 같이 요청(Request)을 보내고 응답(Response)을 받아야 한다.

 

 

1) URL (Uniform Resource Locators)

 

  - 서버에 자원을 요청하기 위해 입력하는 주소

 

2) HTTP Request (URL + 요청 메소드)

 

 - 클라이언트(사용자)가 서버(서비스 제공)에게 요청하는 것이다. 요청하는 데이터에 특정 동작을 수행하고 싶으면, HTTP 요청 Method를 이용한다.

 

 

 2-1) HTTP 요청 메소드

• GET : 존재하는 자원에 대한 요청
• POST : 새로운 자원을 생성 (때에 따라 PUT, DELETE 도 가능)
• PUT : 존재하는 자원에 대한 변경
• DELETE : 존재하는 자원에 대한 삭제

 

 

 - GET VS POST

 

  GET : 데이터를 URL에 포함하여 전송. 속도 빠르나 데이터 정보가 URL에 포함되어 보안에 취약 

 

  POST : 메시지 본문에 데이터를 첨부하여 전송. 속도 느리나 데이터 정보가 HTTP 본문에 인코딩 되어 전송되므로 GET 대비 보안성 높음.

 

 2-2) 기타 요청 메소드

• HEAD : 서버 헤더 정보를 획득. GET과 비슷하나 Response Body를 반환하지 않음
• OPTIONS : 서버 옵션들을 확인하기 위한 요청. CORS에서 사용

 3) HTTP Response (상태 코드 + 응답 Body)

 

 - 사용자의 요청에 대한 서버의 처리 결과를 나타낸다. 

 

 

2xx - 성공

200번대의 상태 코드는 대부분 성공을 의미합니다.

• 200 : GET 요청에 대한 성공
• 204 : No Content. 성공했으나 응답 본문에 데이터가 없음
• 205 : Reset Content. 성공했으나 클라이언트의 화면을 새로 고침하도록 권고
• 206 : Partial Conent. 성공했으나 일부 범위의 데이터만 반환

3xx - 리다이렉션

300번대의 상태 코드는 대부분 클라이언트가 이전 주소로 데이터를 요청하여 서버에서 새 URL로 리다이렉트를 유도하는 경우입니다.

• 301 : Moved Permanently, 요청한 자원이 새 URL에 존재
• 303 : See Other, 요청한 자원이 임시 주소에 존재
• 304 : Not Modified, 요청한 자원이 변경되지 않았으므로 클라이언트에서 캐싱된 자원을 사용하도록 권고. ETag와 같은 정보를 활용하여 변경 여부를 확인

4xx - 클라이언트 에러

400번대 상태 코드는 대부분 클라이언트의 코드가 잘못된 경우입니다. 유효하지 않은 자원을 요청했거나 요청이나 권한이 잘못된 경우 발생합니다. 가장 익숙한 상태 코드는 404 코드입니다. 요청한 자원이 서버에 없다는 의미죠.

• 400 : Bad Request, 잘못된 요청
• 401 : Unauthorized, 권한 없이 요청. Authorization 헤더가 잘못된 경우
• 403 : Forbidden, 서버에서 해당 자원에 대해 접근 금지
• 405 : Method Not Allowed, 허용되지 않은 요청 메서드
• 409 : Conflict, 최신 자원이 아닌데 업데이트하는 경우. ex) 파일 업로드 시 버전 충돌

5xx - 서버 에러

500번대 상태 코드는 서버 쪽에서 오류가 난 경우입니다.

• 501 : Not Implemented, 요청한 동작에 대해 서버가 수행할 수 없는 경우
• 503 : Service Unavailable, 서버가 과부하 또는 유지 보수로 내려간 경우

 

 

# 참고 사이트

https://euncho.medium.com/%EC%9B%B9-%EA%B0%9C%EB%B0%9C%EC%9D%84-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0%EC%97%90-%EC%95%8C%EC%95%84%EC%95%BC%ED%95%98%EB%8A%94-%EA%B0%80%EC%9E%A5-%EA%B8%B0%EC%B4%88%EC%A0%81%EC%9D%B8-%EC%A7%80%EC%8B%9D-6d8882ae14e1

웹 개발을 시작하기에 알아야하는 가장 기초적인 지식

https://joshua1988.github.io/web-development/http-part1/

프런트엔드 개발자가 알아야하는 HTTP 프로토콜 Part 1

https://duwjdtn11.tistory.com/114

웹 기초 지식