Wecode 2일차 2021,03,17 (인터넷과 웹의 시초와 모던 )

위코드 하루 짧은 소감 및 한 일

1. 한 일

- 오전

인터넷과 웹의 시초와 발전

• 1. 인터넷의 시작
     1-1 인터넷은 군사 목적으로 시작 되었으며 멀리 있는 아군에게 통신 목적으로 만들어졌다.
     
     
• 2. 웹이란
     2-1 인터넷의 기반으로 월드 와이드 환경에서 정보 공유 및 소프트웨어를 전송하기 위함으로 사용되며 URL(주소)와 하이퍼텍스트라는 글짜와 , 마크업이라는 사진,영상등을 웹이 이해 할 수 있게 만들어진 언어로 HTML 을 사용하며 현재는 3세대 까지 계속 발전중

- 오후

• 1. Replit HTML 문제 풀이

궁금증 발생(개인 사설포함).

궁금증 발달 원인

• HTML Form Tag를 공부하면서

  나는 HTML은 정적인 것만 처리 가능하고 동적인 것은 처리 할 능력이 없기에 WAS 에게 넘겨서 처리를 하는 줄 알았다.

But!,

<Form action="https://(처리할 서버) method="post or get"> 

을 보고 맨붕이 와버렸다 어? 동적 처리도 하네? 온프라미스 인프라 개념이 박살나는 순간이였다

궁금증 전 기본 개념

• Was는 WEB서버의 부하를 분산 시켜 주기 위한 역할이다.

• 과거 와 다르게 클라이언트의 쿼리양이 많이 늘어 L4스위치 WEB 서버 라운드 로빈, AWS Auto Scalling, 큐 등을 이용한 웹서버 운용으로 홈페이지가 어떻게 하면 터지지 않게 하는것이 화두이다.

궁금증

<궁금증 1의 초점 : was 서버의 리소스 부하분산을 최소화 하자>

1. 인프라 운영 입장에서 현재 Web 서버의 리소스가 나쁘지 않다면 디비의 데이터와 , 클라이언트의 동적 쿼리에 대한 응답을 하기도 바쁜 WAS 서버를 거칠 필요가 없는 간단한 동적 요청은 Web서버 단에서 처리한다면 Was의 리소스 부하분산을 시켜줄텐데 실무에서는 어떠할까?

<궁금증 2의 초점 : was 서버를 최소화 하여 Web서버 역할을 수행하게 하자>
2. 클라이언트의 쿼리가 많지 않을 회사일 경우 Web 서버 EC2에 오토스캘링 걸어서 프레임워크도 동시에 설치하여 동적인 것까지도 처리를 한다면 Was 서버 필요없이 DB로 연동 시켜도 되나?

궁금증에 대한 공부

1. 내가 아는 지식은 WEB-WAS-DB로 연결 되어있는 2세대 웹서비스 이며
   MPA(Multiple Page Application) 와 SPA(Single Page Application)
   를 알아야 한다

2. 나도 사실 10%도 이해를 하지 못하여 일단 적어놓겠다

MPA는 다중 페이지로 구성된 웹 페이지이며 사용자의 요청에 따라 새로운 페이지를 만들어 보여주는 전통적인 방식이다 동적인 것들을 처리하기 위해 MVC(Model-View-controller)방식 프레임워크가 주로 사용 되었으며 MVC 프레임워크란 쉽게 설명해 클라이언트가 페이지에 글을 작성 및 삭제의 동적 요청에 디비에 저장되는 등 내부적인 역할을 하는게 Model이며 , 웹 개발자가 지정해놓은? 것들을 클라이언트의 페이지에 보이게 하는것이 View이고, 그 둘을 중간에서 제어 해주는것을 Controller라 하여 동작한다

현재 사용중인 SPA는 MPA 방식에 불편함을 느끼면서 시작되었다
ex) 오래된 웹페이지를 보면 좋아요 등 단순한 버튼을 눌렀을때 화면에 깜빡하며 페이지가 로딩되는 경우가 있을것이다. 고작 좋아요 하나인데 그 뒤에 서버는 많은 일을 한다.

• 불편함 1 : 동적인 것을 할 때마다 페이지를 새로 로드해옴 추후에 전체가 아닌 일부분만 수정할 수 있는것을 js로 만들었지만 일일이 프로그래밍 해야 되서 불편했다

1. 사용자가 어느 페이지에 접근했다. 서버는 이 사용자가 이 게시판에 게시글을 읽는구나 확인
2. 서버는 디비에게 그쪽 게시글 뒤로가기 ,앞으로가기 , 좋아요등을 불러와서
   html+css+js 으로 렌더링 해서 클라이언트에게 보내준다.
   3.사용자가 그 화면을 받고 그 페이지에 좋아요를 누르면 서버는 이 사용자가 이 페이지에 좋아요를 눌렀구나라 인식한다 .
   4.해당 게시물에 사용자 아이디로 좋아요를 추가하고 이 내용을 다시 db로 보낸다
3. 좋아요가 업데이트 된 것과 2번과 같은 행동을 다시 디비가 서버에게 보낸다
4. 서버는 이걸 html+css+js로 작성(렌더링)해서 클라이언트 브라우저에게 다시 보내준다

요즘은 pc와 모바일(안드로이드,ios)등 수요가 너무 많아저 이 복잡한 작업들을 하기에는 너무 많은 개발자가 필요했다 그래서 나온게 spa 라는 웹 프론트 기반 프레임워크이다 Angular, React, Vue등이 있다

간단하게 얘기하면 서버가 하던일을 클라이언트 웹 브라우저에게 보내 직접 시키는 것이다.

1. 서버는 html+css+js로 된 코드들을 브라우저에게 전송
2. 여기에 포함된 js가 주어진 데이터에 따라 HTML 웹 페이지를 직접 랜더링 하게 시킨다.( 예전에 서버가 하던 복잡한 처리과정을 사용자의 컴퓨터에서 브라우저가 대신 하는것이다.

여기서 핵심은 웹 프레임워크가 서버에서 돌아가는게 아닌 사용자 컴퓨터에서 돌아가는 것이다.

기존에 MVC에서는 서버가 최종 결과물 까지 다 해서 보냈지만 지금은 다 해서 줄테니까 필요한것은 너가 직접해 라고 던지는 것이다.

즉, 페이지 로딩 없이 동작하므로 사이트가 훨씬 효율적으로 동작한다

난 ssr(Server side Randering) 과 ssr (Server Side Randering) 의 개념등 모르는것이 너무 많다 렌더링이 무엇인지, 저것들이 왜 쓰는지 .. 차근차근 빨리 배워야겠다