백엔드, 프론트엔드 및 UI, UX 기본 개념

 

 

이제 막 첫발을 내딛는 초보개발자

개린이(? 어김이 이상하네..)의 공부기록입니다

갈 길이 멀지만

후일 되돌아 보았을 때 이 글이 제 여정의 시작이 되겠지요

 

 

---

 

 

UI, UX 기본 개념

 

UI ; User Interface

사용자가 보는 화면

ex. 입력창, 이미지, 폰트, 색상, 글, 그림, 버튼...

심미적 측면을 고려한 설계

 

UX ; User Experience

사용자 경험 ; 사용자가 어플리케이션을 이용함으로서 느낄 수 있는 만족감

ex. 회원가입을 하는 동안 사용자가 그 과정에서 느끼는 불편함이 없는가

cf. drop down menu

기능적 효율성을 추구한 구현

 

=> UI, UX 를 고려한다는 것은 사용자가 보고 있는 화면이 어플리케이션을 이용하였을 때 불편함이나 제약 사항이 없는지 고려하여 만든다는 것

 

 

프론트엔드 VS 백엔드

 

 

프론트엔드 ; 화면을 구현, 보이는 것, 볼 수 있는 것 ; 사용자의 동작 행위

vs

백엔드 ; 서버, 보이지 않는 곳에서 구현하는 코드

 

요즘의 추세 ; BFF: Backend for frontend

 

 

퍼블리셔 VS 프론트엔드

* 퍼블리셔
HTML, CSS및 JS DOM API를 활용하여사용자가 보는 UI, UX를 고려하여 레이아웃 개발

* 프론트엔드 개발자
데이터를 통신하여 사용자의 행위에 따라 데이터를 처리프론트엔드 서버 관리
(랜더링 최적화 ; 사용자가 화면을 조금이라도 빨리 보게 만드는 것)

 

 

Backend-Frontend workflow

 

* 프론트엔드

사용자가 보는 화면 및 행위에 관한 코드를 작성하고

사용자의 행위에 따라 백엔드에게 요청

↓

* 백엔드

사용자가 요청한 데이터를 가지고 DB(데이터 저장소)에서

사용자가 요청한 값에 맞게 데이터를 처리하고 결과값 전송

↓

* 프론트엔드

전달받은 결과(데이터)를 사용자가 볼 수 있도록 가공

↓

* 백엔드

실제 서버를 운영하고 트래픽을 처리

 

 

* devops ; 개발과 운영을 합친 말 (development + operations)
* 핀옵스 ; finops (서버비용 등 경제적인 부분)
* 풀스택 개발자 ; 처음부터 끝까지 전부 개발 운영 관리가 가능한지 여부

 

 

---

 

Request, Response

 

웹페이지

------------------------> 프론트서버

요청, request

 

<----------------------- 리소스 ; resource

응답, response

 

 

HTTP ; Hypertext Transfer Protocol

인터넷 상에서 서버끼리 데이터를 주고받을 수 있도록 사용하는 규칙의 일종으로

s(security)의 여부는 보안적 요소가 추가되었는가의 차이

 

-> 따라서

url 주소에 http를 붙이면

'나는 이 규약을 사용하여 request와 response를 주고받겠다'

 

http를 활용한 req, res를

http request message, http response message라고 한다

 

 

---

 

브러우저 서버

도메인 주소 IP -> DNS(Domain Name Server)

 

user 들의 동작에 따른 코드 ; 프론트엔드

-> backend 에 전달

백엔드와 데이터로 소통해서 정보 요청 ; 프론트엔드 > 브라우저 서버 > 백엔드

백엔드는 DB에서 정보를 찾아 프론트엔드에 다시 전달

 

DB Server ; Data Base 에 저장

-> DB MS 서버 관리