Frontend knowledge

UI/UX

UI (USER INTERFACE)

• UI는 사용자가 제품이나 서비스를 사용할 때 마주하게 되는 면

• 즉, 사용자가 제품이나 서비스와 상호작용할 수 있도록 만들어진 매개체인 것이지요

• UI 디자인은 폰트, 칼라, 레이아웃과 같이 사용자가 마주하게 될 시각적인 디자인

UX (USER EXPERIENCE)

• UX는 사용자 경험의 약자로, 사용자가 어떠한 서비스나 제품을 직간접적으로 이용하면서 느끼는 종합적인 만족을 의미

• UX 디자인이란 사용자에게 만족스러운 경험을 제공하는 UI를 디자인 하는 것입니다.

• 즉, 사용자가 만족할 수 있도록 사용자 중심적으로 설계된 디자인이라고 볼 수 있습니다.

CSR (client-side rendering)

• spa(싱글 페이지 어플리케이션)은 렌더링 방식으로 채택함

• 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식

• 클라이언트에서 초기화면을 로드하기 위해 서버에 요청

• 초기 로딩 시간이 더 오래 걸림

SSR (server-side rendering)

• SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다.

• 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다.

• 반면 CSR은 SSR보다 초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이언트(브라우즈)에서 추가로 요청하여 재구성해야 하기 때문에 전체적인 페이지 완료 시점은 SSR보다 느려진다.

SEO(검색엔진 최적화)

• 검색엔진이 웹 크롤링 하면서 페이지에 컨텐츠 색인을 생성하는 과정

SPA (single-page application)

• 단일 페이지 애플리케이션으로, 현재의 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 에플리케이션이다.

• 연속되는 페이지 간의 사용자 경험을 향상시키고, 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 도와준다.

Reverse Proxy

• 사용자의 요청이 프록시 서버를 통해 웹 서버에 전달되고 웹 서버가 처리한 응답이 다시 프록시 서버를 통해 클라이언트로 전달된다.

• reverse proxy는 주로 내부 네트워크와 외부 네트워크 사이를 분리해 보안 이슈를 해결하기 위해 사용되지만 블로그에서는 점진적인 URL 단위 배포를 위해 이를 이용

API

• Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스

• 응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스

• UI가 사용자와 사용자가 다룰 대상을 한다면, API는 프로그램과 또 다른 프로그램을 연결해주는 일종의 다리라고 볼 수 있다.

• 내가 만든 서비스가 개인 개발자,기업,기관이 제공하는 기능, 프로그램을 사용할 수 있게끔 도와주는 중간 매개체라고 이해하면 됨

Rest

• Representational State Transfer

• 자원을 표현(이름)으로 구분하여 해당 자원의 정보를 주고 받는 모든 것을 의미

• 정보를 전달하는 것은 데이터가 요청되어지는 시점에서 자원의 상태(정보)를 전달

• 즉 json 혹은 xml를 통해 데이터를 주고 받는 것으로 생각하자

REST API

• REST를 기반으로 서비스 API를 구현한 것

• REST는 HTTP 표준을 기반으로 구현하고, HTTP를 지원하는 프로그램 언어로 클라이언트. 서버를 구현할 수 있다.

• 즉, REST API를 제작하면 델파이 클라이언트 뿐 아니라, 자바, C#웹 등을 이용해 클라이언트를 제작할 수 있다.

CORS

• CORS(Cross-Origin Resource Sharing)란 ?
• 추가 HTTP헤더를 사용하여, 한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처(origin)의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

• 해결
• package.json 파일에 “proxy” : “http://localhost:8080" 추가

ESLint

Prettier