1. [웹 프로그래밍 기초] Web개발의 이해 - FE/BE

1) 웹 프로그래밍을 위한 프로그램 언어들

 

[저급 언어]

기계 중심의 언어. (기계어)

2진수로 이뤄진 값.

유지보수 어려움.

사용 어려움.

숫자로 된 거 어려워서 기호 만들었는데 해석해주려면 컴파일러 필요함.

기호로 된 언어 = 어셈블리어.

 

[고급언어]

사람중심 언어.

이해하기 쉬운 문법.

이것도 소스코드 번역하려면 컴파일러 필요함.

java, python, kotlin, swift, c 등이 있다.

 

웹 관련 인기 언어

• Python : 프로그래밍 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램을 개발할 수 있습니다. 많은 사람에게 추천되는 언어이며, 데이터 과학에서도 자주 사용되며 웹사이트 개발에서도 많이 사용되고 있습니다.
• PHP : 웹의 80% 이상이 PHP로 만들어졌다고 말합니다. 그만큼 PHP는 웹 개발에서 많이 사용됩니다. 
• JavaScript : 자바 스크립트는 처음 시작이 브라우저에서 동작하는 언어였습니다. 현재는 서버에서도 작성하는 프로그램으로 점차 영역을 넓혀가고 있습니다. 프론트 개발자라면 반드시 알아야 할 언어입니다. 자바스크립트 커뮤니티도 점점 더 거대해지고 있습니다.
• JAVA : 엔터프라이즈 소프트웨어 환경에 잘 맞는 언어입니다. 큰 규모의 소프트웨어 개발에 자바언어가 많이 사용되고 있습니다. JAVA 언어를 지원하는 수많은 커뮤니티에 위해서, 지속적으로 발전되어 훌륭한 구조와 설계 기법들이 잘 갖춰져 있습니다.
• Ruby : 빠른 개발에 널리 사용되며, 단순함과 세련된 웹 애플리케이션을 만들 수 있기 때문에 인기 있는 언어 중의 하나입니다.

 

[생각해보기]

1. 프론트 엔드부터 서버 개발까지 한 가지 프로그래밍 언어를 사용하여 개발한다면 어떤 언어를 사용하는 것이 좋을까요? 

2. 다양한 라이브러리, 쉬운 개발, 읽기 쉽고 적은 코드를 장점으로 한다면 어떤 언어를 사용하는 것이 좋을까요?

3. 프로그래밍 언어에게 좋은 커뮤니티가 있다는 것은 어떤 장점을 가질까요?

 

 

 

2) 웹의 동작(HTTP 프로토콜 이해)

 

사람과 사람이 전화 통화를 할 때도 서로 알아들을 수 있는 말을 사용해야 하며, 

한쪽이 말할 때 다른 쪽에서는 들어야 한다. 또한, 전화 연결이 끊어지면 더 대화를 할 수 없다.

마찬가지로 웹 브라우저와 웹 서버 간에도 통신 규약이 필요한데 그게 바로 HTTP

 

[HTTP (Hypertext Transfer Protocol)]

-서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜.

 

[HTTP 작동방식]

- 서버/클라이언트 모델을 따른다.

- 연결을 끊어버리기 때문에, 클라이언트 이전 상황을 알 수없다. 

  그래서 나온 게 Cookie.

 

https://www.edwith.org/boostcourse-web/lecture/16663/

 

• 요청 메서드 : GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식이 온다.
• 요청 URI : 요청하는 자원의 위치를 명시한다.
• HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전이다.

첫 번째 줄의 요청메소드는 서버에게 요청의 종류를 알려주기 위해서 사용됩니다.

각각의 메소드 이름은 다음과 같은 의미를 가집니다.

참고로 최초의 웹 서버는 GET방식만 지원해줬습니다.

• GET : 정보를 요청하기 위해서 사용한다. (SELECT)
• POST : 정보를 밀어 넣기 위해서 사용한다. (INSERT)
• PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)
• DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)
• HEAD : (HTTP) 헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
• OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
• TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨대 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

[생각해보기]

1. HTTP에 S가 붙은 HTTPS는 어떤 용도로 사용되는 건가요? HTTP와 무엇이 다른가요?

  - HTTPS 는 보안에 강화되어있음 s=security

 

 

 

3) 웹 Front-End와 웹 Back-End

 

[웹 프론트엔드?]

사용자들이 볼 수 있는 화면을 구현하는 것.

- 웹 콘텐츠 잘 보여주게 구조 잘 짜야함. - html

- 적절한 배치와 일관된 디자인 제공 - css

- 사용자의 요청 반영 (소통하듯이) - javascript

 

[백 엔드?]

사용자들이 입력한 값을 처리하고 저장. 요청에 따라 정보 응답.

 

[백 엔드 개발자가 알아야 할 것들]

• 프로그래밍 언어
• 웹의 동작 원리
• 알고리즘, 자료구조 등 프로그래밍 기반 지식
• 운영체제 , 네트워크 등에 대한 이해
• 프레임워크에 대한 이해 
• DBM에 대한 이해와 사용방법

 

4) browser의 동작

 

서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳은 'Browser'입니다.

Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링 엔진이 포함되어 있습니다.

 

https://www.edwith.org/boostcourse-web/lecture/16663/

[생각해보기]

1. 우리가 흔히 브라우저 탐색을 할 때 스크롤을 하거나, 어떤 것을 클릭하면서 화면의 위치를 바꿀 때, 브라우저는 어떻게 다시 화면을 그릴까요?

- 클릭하면 파싱을 통해 새로운 화면을 그리는 작업이 이뤄지지만 스크롤은 파싱 없이 페인팅하게 된다.

2. 위에서 표현된 그림처럼 다시 렌더링 되지 않을까요? 

- 클릭한 게 아니면 렌더링이 이뤄지지 않는다.

 

 

 

6) 웹서버

- 웹 서버 소프트웨어가 동작하는 컴퓨터를 말한다. 

- 클라이언트가 요청하는 HTML 문서나 각종 리소스를 전달.

- Apache, Nginx, Microsoft IIS 가 있다.

 

[생각해보기]

1. 네이버, 구글과 같은 검색을 할 수 있는 사이트에서는 검색어를 입력하면 검색어가 포함된 웹 페이지 목록을 보여줍니다.

  - sql 문 이용해서 검색어 포함된 데이터 불러오기? 웹크롤링? 

2. 네이버와 구글은 검색어가 포함된 웹페이지를 어떻게 알 수 있었을까요?

  - sql문 like % 이용하지 않았을까? 

 

 

 

7) WAS (Web Application Server)

[클라이언트/서버 구조]

클라이언트(요청) <-> 서버(응답)

https://www.edwith.org/boostcourse-web/lecture/16666/

 

[DBMS]

다수의 사용자가 데이터베이스 내의 데이터에 접근할 수 있도록 해주는 소프트웨어.

https://www.edwith.org/boostcourse-web/lecture/16666/

[미들웨어 (MiddleWare)]

클라이언트 쪽에 비즈니스 로직이 많으면 클라이언트 바쁨 (비용 많이 발생)

so, 클라이언트랑 DB사이에 미들웨어 놔둬서 클라이언트는 입출력만 하게

https://www.edwith.org/boostcourse-web/lecture/16666/

[WAS (Web Application Server)]

WAS는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 웹 애플리케이션이 동작하도록 지원하는 목적을 가집니다.

https://www.edwith.org/boostcourse-web/lecture/16666/

[웹 서버 vs WAS]

• WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있습니다.
• 현재는 WAS가 가지고 있는 웹 서버도 정적인 콘텐츠를 처리하는 데 있어서 성능상 큰 차이가 없습니다.
• 규모가 커질수록 웹 서버와 WAS를 분리합니다.
• 자원 이용의 효율성 및 장애 극복, 배포 및 유지보수의 편의성을 위해 웹서버와 WAS를 대체로 분리합니다.

[생각해보기]

1. 톰캣 버전별 차이점에 대해서 알아보세요.

  - 버전별로 지원하는 Java 버전, 서블릿 스펙 등이 다르다.