프론트엔드(웹)

브라우저에서 웹이 동작하는 과정

• 웹을 실행하는 환경은 브라우저, 웹을 제공하는 곳은 웹 서버

1. 사용자가 브라우저에서 url(도메인 주소)를 입력
2. 브라우저는 웹 서버를 실행하고 있는 컴퓨터에게 요청
3. 웹 서버에서는 프론트엔드 개발자가 개발한 웹을 클라이언트(브라우저)에게 전달

• 브라우저는 기본적으로 HTML, CSS, Javascript 3가지 언어를 통해 웹을 보여줌
  • 프론트엔드 개발자는 웹을 개발할 때 이 세가지 언어를 사용

• 실제로 브라우저에서 웹을 보여줄 때 웹 서버로부터 HTML, CSS, Javascript를 다운 받은 후 순서에 맞게 실행시킴
  • html, css는 렌더링 엔진을 통해 실행되며, javascript는 자바스크립트 엔진을 통해 실행됨
  • 브라우저 화면에 웹을 그리는 전체적인 과정을 브라우저 렌더링이라고 하며 렌더링은 프로그래밍적으로 화면을 그리는 것을 의미

1. 먼저 HTML을 통해 기본적인 element(텍스트, 링크 등)들을 적용
2. CSS를 이용해서 element들에 디자인을 씌우며 이 때 색깔, 크기, 배치 등을 결정
3. 이미지를 다운받음(보통 웹 서버에서는 이미지를 다운받을 수 있는 링크를 건내줌)
4. Javascript가 적용됨
   1. 화면이 로드될 때 마이페이지 정보를 API서버에게 요청
   2. 버튼을 클릭하면 button에 적용된 javascript 코드가 실행 됨

 

웹과 API서버의 통신

• 브라우저는 최종적으로 웹을 화면에 그린 후 사용자들이 웹을 사용하게 되며 이후 페이지 이동을 제외하고는 대부분 API 서버와 통신하게 됨
• 이 때 사용자가 로그인을 하기 위해 정보(이메일, 패스워드)를 입력하고 로그인하기를 누른다고 가정

1. 브라우저는 웹 서버에게 요청하는 것이 아닌 API서버에게 요청

2. 백엔드 API 서버에서는 로그인 정보를 바탕으로 인증정보를 확인하고 브라우저에게 로그인 결과를 전달

3. API 결과를 바탕으로 해서 메인 페이지로 이동시키라는 javascript 코드가 실행됨

 

• 우리가 서비스를 이용하면서 필요한 데이터들은 거의 전부 API 서버를 통해 받아옴
  • 마이페이지에서 유저 정보를 가져오거나, 상품 정보들을 받아오는 등
• 아래는 우리가 사용하는 웹이 최종적으로 만들어지기까지의 과정

 

웹 개발에 쓰이는 라이브러리 & 프레임워크

• 웹 개발을 하려면 Javascript를 사용해야하고, Javascript의 인기가 점점 올라가면서 더 쉽게 개발할 수 있는 라이브러리와 프레임워크가 등장
• javascript 라이브러리, 프레임워크라는 것은 결국에는 javascript로 구성된 코드 뭉치
  • 사용하는 이유는 순수한 javsacript로만 코딩을 하게되면 복잡하고 오래 걸리기 때문

• 웹 개발 초창기에는 순수한 자바스크립트로 코딩을 했음 -> 바닐라 자바스크립트
• 다음으로 조금 더 쉽게 개발할 수 있는 라이브러리 나옴 ->  jQuery
• javsacript 기술이 발전하고 웹 기능이 복잡해지기 시작하면서 jQuery의 한계를 극복해주는 Angular, React, Vue 프레임워크가 나옴
  • 이들을 웹 프레임워크 3대장이라고 하며 현재 프론트엔드 개발자들이 가장 많이 사용

• 현재 많은 스타트업에서 웹 개발 시 react를 많이 선호
  • IT 서비스를 제공하기 위해선 웹과 모바일 앱이 필요 
  • react를 사용할 줄 안다면 react native라는 크로스 플랫폼 앱을 개발할 수 있음
    • react를 기본으로 웹 개발
    • react native를 이용하면 쉽게 aos, ios 앱을 개발

 

알고 있으면 아주 좋을 웹 상식들

반응형 웹

• 하나의 웹을 모바일, 데스크탑의 크기에 모두 대응할 수 있게 만든 것
  • 모바일 웹은 단순히 모바일 용 화면에 맞게 개발된 웹을 의미
  • 요새는 태블릿까지 고려한 반응형 웹을 만듬
• 주의할 점은 반응형 웹은 디바이스에 맞는 웹을 각각 개발하는게 아니고, 화면의 크기에 맞게 css를 다르게 적용하는 방식을 사용

 

SPA(Single Page Application)

• 웹은 실제로 여러 페이지가 존재하고 보통 페이지마다 주소가 다름
• MPA(Multi Page Application): 페이지 별로 새롭게 웹 서버에서 페이지를 다운받는 방식
  • 장점: 해당 페이지만 제공해주면 되기에 초기에 화면을 빠르게 보여줄 수 있음
  • 단점: 페이지를 이동할 때마다 새로 페이지를 로드하기 때문에 사용성이 떨어짐

• SPA: 한 번에 모든 페이지를 다운받은 후 다운받은 페이지들로 이동하는 방식
  • 장점: 페이지 전환은 빠르게 가능해서 좋은 사용성을 제공
  • 단점: 처음에 로딩이 느릴 수 있음
  • 모바일 앱도 앱스토어에서 미리 모든 페이지를 다운받은 후 내부에서 빠르게 이동하므로 실제로 SPA 방식은 모바일 앱과 동작이 유사함
  • 대표적으로 React, Vue 프레임워크가 SPA의 방식을 사용

 

CSR, SSR

• 웹이 웹서버와 통신해서 웹을 다운받는 방식은 CSR(Client Side Rendering), SSR(Server Side Rendering)가 있음

• CSR: 브라우저 측에서 HTML,CSS, Javascript를 처음부터 실행시키는 방식
  • HTML, CSS를 전부 브라우저에서 렌더링
  • 이때 웹 서버는 HTML, CSS, Javascript를 단순히 서빙(건네주는)하는 역할
  • CSR은 브라우저에서 전부 언어를 실행하므로 웹 서버는 큰 부담이 없음
• SSR: 웹 서버에서 HTML, CSS, Javascript 를 미리 한 번 실행시킨 후 브라우저에게 건네주는 방식
  • API 통신을 웹 서버에서 미리 진행해서 데이터를 적용할 수 있으므로 최종적으로 결과가 적용된 HTML, CSS, Javascript 파일을 받게 되어 브라우저는 더 빠르게 화면을 보여줄 수 있음
  • 웹 서버가 그만큼 일을 더 하게 됨
• 대부분 CSR 렌더링 방식을 사용할 때는 SPA 형태로 웹을 만듬
  • 대표적으로 react, vue 프레임워크는 CSR 렌더링 방식에 SPA 형태로 제공됨

• react, vue에서도 SSR 렌더링 방식이 가능
  • SSR 전용 react, vue 프레임워크로 next js, nuxt js가 있음
  • 클라이언트가 빠르게 웹에 접근할 수 있도록 SSR을 적용하는 기업들이 늘어나고 있음

 

크로스 브라우징

• 인터넷 익스플로러, 구글 크롬, 애플 사파리 등 다양한 브라우저가 존재하며 브라우저마다 브라우저 렌더링을 하는 렌더링 엔진 이 다르므로 동일한 HTML, CSS라도 렌더링 엔진에 따라 조금씩 다르게 보일 수 있음
• 크로스 브라우징: 브라우저의 종류에 상관없이 똑같이 웹을 보여주려는 시도를 뜻함
• 크로스 브라우징 테스트: 프론트엔드 개발자가 웹을 개발한 후 브라우저마다 웹이 잘 보여지는지 확인하는 행위
  • 모든 브라우저를 설치해서 테스트할 수는 없기 때문에 이 테스트를 지원해주는 서비스들이 존재
  • 대표적으로 LambdaTest , 자동화 테스트를 제공하는 Selenium 등이 존재

• 프론트엔드 개발자는 코드를 짜기 전에 CAN I USE에서 해당 문법이 브라우저들에서 사용가능한지를 확인함

 

Reference

https://www.inflearn.com/course/it-%EA%B0%9C%EB%B0%9C%EC%A7%80%EC%8B%9D#

IT 회사에서 비개발자가 살아남기 위한 모든 개발 지식 A to Z - 인프런 | 강의

https://www.grabbing.me/IT-A-to-Z-By-1e1fbc981b7c4c03ac44943085ac8304

[IT 개발자와 일할 때 필요한 모든 개발지식] A to Z 자료 모음집 By 그랩