프론트엔드 & 백엔드

프론트엔드

 유저들이 서비스를 이용할 때 사용하는 웹, 앱 등을 의미, 화면에 보여주는 부분

웹 접근= 브라우저에서 프론트엔드 개발자가 만든 웹 프로그램을 다운받아서 보여줌

1. 기초 레이아웃

정적인 데이터 : 서버와 통신하기 전 기초 레이아웃, 고정적으로 보여지는 부분 (HTML,CSS)

2. 데이터 통신과 렌더링

• 초기 화면을 그려준 후, js코드를 통해 서버에 정보를 요청
• 받아온 데이터를 렌더링 하여 보여줌 (HTML,CSS)
• 렌더링 : 화면을 시각적으로 그려주는 작업

3. 라우팅(Routing)

• 다른 페이지로 이동시켜 주는 기능, 네트워크에서 경로를 선택하는 프로세스
• 미리 정해진 규칙을 사용하여 최상의 경로를 선택 => 네트워크 장애를 최소화
• 라우트 : 경로, 라우팅: 경로를 찾아가게 하는 과정, 라우팅 프로토콜: 찾아주는 규칙을 사용하는 프로토콜
  • 목적에 따라 라우팅 프로토콜을 선택 (라우팅)의 결과 (라우트)
• 라우터
  • 컴퓨팅 디바이스와 네트워크를 다른 네트워크에 연결하는 네트워킹 디바이스
  • 한 개 이상의 근거리 통신망(LAN) 간에 데이터를 전달하는 게이트웨이
  • 데이터전달, 로드밸런싱, 경로 결정 등의 역할

4. 인증

• 유저에 따라 다른 정보를 보여줘야 할 경우

1) 백엔드 인증 서버에 정보 확인

2) 본인이 맞다면 토큰을 전달(신분증 역할)

3) 브라우저는 토큰을 저장하고 있다가 서버에게 정보를 요청할 때 토큰을 넣어서 요청

4) 서버는 토큰을 통해 해당 유저에게 맞는 정보를 전달

5. 웹서버

• 보통 이미 개발된 정적인 웹을 제공해 주는 서버
• 웹브라우저 클라이언트로부터 HTTP요청을 받아들이고 HTML문서와 같은 웹페이지를 반환하는 컴퓨터 프로그램
• 웹서버는 웹을 제공하고, 백엔드의 API서버는 필요한 데이터를 제공
• 브라우저가 웹서버를 통해 웹을 다운로드하고 난 후, 동작을 통해 백엔드 서버에 데이터를 요청
• ex) Apache

6. CSR, SSR

• 웹을 보여주는 방식 (다운받는 방식)에 따라 나뉘어짐
• 웹서버는 클라이언트에게 웹을 다운받게 해 줌

추가 게시 예정

1) Client Side Rendering

• HTML & CSS 만 받아온 후, 먼저 화면을 그리고 JS를 나중에 다운받게 돼서 데이터 요청을 나중에 함
• js를 받을 수 없는 환경에서는 화면이 보이지 않기 때문에 SEO에 취약

2) Server Side Rendering

• HTML & CSS & JS를 모두 받아와 데이터를 포함한 화면을 렌더링 하여 클라이언트에게 전달
• 추가적인 데이터 요청 없이 이미 완성된 페이지를 받게 됨

7. CDN(Contents Delivery Network)

• 웹 접근 속도는 웹의 사이즈와 클라이언트와 웹서버 간의 거리에 따라 달라짐
• 컨텐츠 (웹, 이미지, 비디오 등)를 미리 캐시로 저장한 후에 가까운 거리의 클라이언트가 다운로드할 수 있도록 하여 더 나은 경험을 제공

 

백엔드

서버를 포괄적으로 이야기, 화면 뒤에서 이루어지는 과정

보통 데이터베이스, 캐시, API서버, 스토리지 등의 모든 기능을 말함

1. 데이터베이스(DataBase)

• 서비스에 필요한 모든 정보를 담는 테이블로 이루어진 저장공간
• 계층형, 망형(Network), 관계형, 객체지향형, 객체관계형 등의 유형이 있음

1) RDBMS (관계형 데이터베이스)

• 고정된 행과 열로 구성된 테이블에 데이터 저장
• 각 열에는 하나의 속성에 대한 정보가 저장되고, 행에는 각 열의 데이터 형식에 맞는 데이터가 저장
• 데이터가 정해진 데이터 스키마에 따라 테이블에 저장되고, 관계를 통해 여러 테이블에 분산
• 테이블의 구조와 데이터 타입 등을 사전에 정의해야 하고, 테이블에 정의된 내용에 맞는 형태의 데이터만 삽입 가능
• 데이터의 무결성을 보장하고 중복 없이 저장할 수 있지만 유연성이 떨어져 수직적 확장만 가능

2) NoSQL(비관계형 데이터베이스)

• 테이블 형식이 아닌 다른 방식으로 데이터를 저장
• 데이터 유형에 따라 문서, 키 값, 와이드 컬럼, 그래프 등의 다양한 유형을 가짐
• 유연한 스키마를 제공하고, 대량의 데이터와 높은 사용자 부하에서도 확장이 쉬움
• 수직 수평 확장이 가능하여 모든 읽기 쓰기 요청 처리가 가능하지만, 여러 컬렉션에 있는 모든 데이터 중복을 계속 업데이트해야 함

2. 스토리지(Storage)

• 이미지나 동영상 등의 파일은 db에 저장하는 것이 비효율적이기에 따로 저장하는 저장공간
• 접근할 수 있는 URL을 통해 다운

3. API서버(WebApplicationServer)

• 서비스의 로직을 담당, 보통 서버라고 통틀어 말하는 것은 API서버를 뜻함
• WAS: 인터넷상에서 HTTP프로토콜을 통해 사용자 컴퓨터나 장치에 애플리케이션을 수행해 주는 미들웨어로서, 주로 동적 서버 컨텐츠를 수행하는 것으로 웹서버와 구별되며, 주로 데이터베이스 서버와 같이 수행
• 클라이언트와 통신하며 필요로 하는 데이터를 전달
• 다른 정보를 요구하는 요청들을 라우터로 나누어주기 때문에 각 요청에 따라 url이 구분되어 있음
• ex) Tomcat

4. 캐시

• 사용자의 요청이 많아질수록 서버는 바빠지고 CPU가 바빠지기 때문에 처리 시간이 오래 걸림
• 요청하는 데이터들이 항상 동일할 때, 이를 저장하여 요청이 들어오면 바로 보내줌

 

프론트 + 백엔드 

• 프론트엔드와 백엔드가 통신할 때도 모두 URL을 통해 이루어짐
• 백엔드에서 프론트엔드로 데이터를 주는 방식에 따라 프론트엔드에서 받는 코드가 달라짐
• 인터넷을 통한 데이터 교환을 위한 API를 설계하는 접근 방식 
  • REST
    • HTTP 메서드를 사용하여 API를 구축하기 위한 아키텍처 스타일
    • URL를 사용하여 사용자가 요청한 주소를 식별하고 JSON형태로 데이터를 반환
    • 상태를 저장하고 있지 않고, 클라이언트에서 서버로의 각 요청을 보낼 때 필요한 모든 정보를 포함
    • 단순함, 캐싱지원, 라이브러리가 많음, 호환성이 좋음, 리소스 지향, 개발 속도가 느림
  • Graphql
    • 페이스북이 개발한 API용 쿼리 언어
    • 서버에서 특정 데이터를 요청하고 해당 데이터만 수신할 수 있다는 장점(모든 데이터를 수신하지 않음)
    • 효율성 향상, 유연한 쿼리, 버전관리, 개발자친화, 이미지 등의 처리가 약함

---

클래스101 강의를 참고하여 내용을 추가하였습니다. => 관련 게시물 : https://sonjieun26.tistory.com/38

<참고 출처>

강의 : https://class101.page.link/yNrA