jieun-c

Singleton pattern (생성)
=> 단하나의 객체 인스턴스만 존재

=> 스태틱 함수로 전역으로 객체 접근 

Factory pattern (생성)
=> fetching하고 map 함수로 동적으로 생성할때 사용한다.
하나의 인터페이스로 여러가지 오브젝트를 생성한다 (동적환경에 최적화) 

<sample>
1. 신발 클래스를 만든다.
2. 신발을 상속받는 나이키, 퓨마 등의 클래스를 만든다.
3. 신발공장 클래스의 변수로 나이키, 퓨마 클래스를 담아줌 (위임받음) 
4. 신발공장의 create 매소드로 매개변수를 받아서 생성함 
(이때 매개변수 체크 필요, 조건로직)
5. map 함수를 이용해서 여러 아이템들을 factory.create 가능하다. 


Observer pattern (행동)
=> 한 객체의 상태가 바뀌면 다른 구독 객체들에게 상태와 변경을 알려준다. 
여기서는 구독이라는 개념을 사용하고, 폴링 개념보다 효율적이다.

Facade Pattern (구조)

=> 간략화된 인터페이스로 직접적인 접근을 제약한다.

=> 다수의 서브클래스나 인터페이스 등을 한 클래스 내에서 관리할 수 있다.

사용자가 메뉴를 주문할때 주문에 관한 처리과정을 알 필요가 없다.

키친클래스 - 음식서비스 클래스 - 레스토랑퍼사드 클래스 (클라이언트와 인터페이스)

Command Pattern (행동)

=> 명령을 캡슐화해서 처리한다. 

구성: 명령 Command / 수신자 Receiver / 발동자 Invoker / 클라이언트 Client

클라이언트(은행창구): 명령 생성

수신자(계좌): 명령이 전해졌을때 기능을 수행하고 반영한다.

발동자(은행시스템): 실행업무를 전달 받을 시 직접 Command 를 호출하고 도와준다.

명령(입출금, 이체): 미리 약속된 인터페이스를 구현해서 Invoker 에서 받은 명령을 Receiver에 전달한다.

                              (전달을 어떤방법으로 할지의 비즈니스 로직 담당)

1. command 생성

2. receiver 생성

3. invoker 인스턴스 & receiver 등록

4. command 등록

5. command 지시

Proxy Pattern (구조)

=> Proxy 를 통해 대신 접근한다. (실제객체와 클라이언트 사이에 존재)

클라이언트가 특정 객체에 접근해야하는데 비즈니스 로직상 추가적인 검사가 필요할 경우 (ex.접근권한)

원격객체에 데이터를 요청할때 proxy 객체에 caching / logging 로직을 추가한다.

체크 카드와 같은 예시가 프록시라고 할 수 있다.

구성: Client, Subject 인터페이스, Proxy(실제객체의 인스턴스, 핸들러), Real Subject -Subject의 구현체

Adapter Pattern (구조)

=> 서로 호환성 없는 인터페이스/클래스 들을 연결시켜야 할 경우 사용, 레거시 시스템 확장할때 사용

구성: 클라이언트, 인터페이스, 서비스/외부요소, 어댑터

Reference:

https://www.youtube.com/watch?v=RNE1zfECaac&list=PL3xNAKVIm80JldJ6IZBx5eQxck5JA6VuV&index=4&t=82s

웹 애플리케이션의 구조가 복잡해지면서 복잡도가 올라가기 시작하였다.

쉽게 웹을 만들고 유지보수를 더 간편하게 할 수 있는 방법에 대한 연구들이 많았고,

다양한 프론트엔드 프레임워크나 라이브러리가 탄생하게 되었다.

<선행 개념>

프레임워크 : 제어 흐름이 프레임워크에 있다. (제어의 역흐름 (IoC : Inversion of Control))
라이브러리 : 제어 흐름이 사용자에게 있다.

앵귤러와 뷰는 자신들만의 문법을 가지고 웹 개발을 할 때 필요한 모든 기능과 툴을 포함하고 있는 프레임워크라고 할 수 있다.

리액트는 UI 를 만드는 기능만을 제공하기 때문에 라이브러리라고 할 수 있다.

(라이브러리이기 때문에 리액트 자체만으로는 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않는다.

때문에 리액트는 별도의 라이브러리를 통해 Redux, Recoil, React-router-dom 등을 사용해야 한다.)

상태 : 프론트엔드에서 상태란 주로 UI에 영향을 미치는 동적으로 표현되는 데이터이다. (로컬 상태, 전역상태가 있음)

Jquery

JavaScript를 보다 간편하고 빠르게 DOM을 변경할 수 있는 프론트엔드 라이브러리.

Jquery 는 일반 Javascript 보다 DOM 요소를 간단하게 제어할 수 있어 많은 인기가 있었다.

하지만 DOM 에 데이터를 관리하고 있기 때문에 관리하기 위해서는 DOM으로 직접 접근을 해야했으며

데이터에 대한 추적 및 관리가 어려웠고, DOM 요소를 중심으로 코드가 작성되어 DOM을 직접 조작하는 방식에서 벗어나지 못했다.

Angular

Google에서 개발한 프론트엔드 MVC 프레임워크 (AngularJS > Angular 로의 버전관련 설명 생략)

화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 

데이터를 동기화하는 것을 양방향 바인딩이라고하는데

Angular 에서의 양방향 바인딩이라는 개념은 개발자들에게 큰 인기를 얻을 수 있었다.
하지만 규모가 커질 수록 복잡성이 증가해지면서 굉장히 느려진다는 치명적인 단점이 발생하게 되었다.

React

JSX 라고 불리는 JavaScript를 확장한 문법을 제공하는 컴포넌트로 이루어진 프론트엔드 UI 라이브러리

JSX 를 통해 자바스크립트 안에서 html 역할을 하는 코드를 사용한다.

자바스크립트 코드에서 CSS를 작성하는 방식인 CSS-IN-JS 방식을 사용하기도 하고, css 파일을 분리해서 사용하기도 한다.

따라서 대부분 JavaScript만으로 UI 로직과 DOM을 구현한다. 

또한 JavaScript에 가깝기 때문에 camelCase 프로퍼티 명명 규칙 사용한다.

가장 핵심이 되는 부분은 Virtual DOM 이다.

기존에는 DOM에 변화가 발생할 때 CSS 재연산, 레이아웃 재구성, 페이지를 다시 칠하게 되는데 이 과정에서 많은 시간이 허비된다.

Virtual DOM 은 컴포넌트(props, state)의 변동사항이 생길때 실질적으로 어떤 부분이 업데이트 돼야 하는지 계산을 한 다음

필요한 해당 컴포넌트 및 하위 컴포넌트를 DOM Tree 에 업데이트 한다.

React Hook 에서는 useEffect를 통해 Lifecycle 을 관리한다.

사용자가 조금 더 부드럽게 웹 어플리케이션을 이용하기위해 60 frames per seconds (60 fps) 를 유지해야 하는데,

리액트는 60fps 를 유지할 수 있는 방법이 보장되지만

Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교하여 무조건 빠른 것은 아니므로

지속적으로 데이터가 변화하는 대규모 애플리케이션 구축을 할때 사용을 권장한다.

그리고 React는 단방향 데이터 바인딩(모델이 변경될 때 뷰가 변경되지만, 뷰는 모델을 변경시키지 않는 구조)을 사용함으로써

데이터의 흐름을 명확히 알 수 있고 예측 가능하여 양방향 바인딩을 사용하지 않는 편이다.

Vue

양방향 바인딩과 Virtual DOM 이 가능한 UI 구축을 위한 Javascript 프레임워크

HTML을 그대로 사용할 수 있고, 프레임워크이기 때문에 비교적 코드 스타일이 획일화되어있기 때문에 다른 사람 코드 이해에 부담이 적다.

Vue 는 프레임워크이기 때문에 프레임워크 안으로 들어가서 프레임 워크가 지원해주는 문법에 따라 작성해주어야 한다.

그렇기 때문에 라이브러리와 달리 더 많은 기능을 디폴트로 제공해준다.

자유도가 낮기 때문에 오히려 쉽게 익힐 수 있다.

개인적으로는 높은 자유도와 커다란 시장 크기, 변화에 빠른 점에서 React 가 메리트가 있다고 생각한다.

SEO (Search Engine Optimization)

검색 엔진이 쉽게 이해할 수 있는 형태로 웹페이지를 구성하는 과정이다.
검색 엔진 최적화가 되어있으면 검색 엔진에서 상위에 노출될 수 있다.

이전 글에서 페이지 렌더링 방식을 비교해 가면서 

SPA의 렌더링 방식인 CSR 사용 시 단점으로 Low SEO 가 될 수 있다고 하였다.

기본적으로 검색 엔진 최적화가 필요한 웹사이트는

SSR 방식(React의 Next.js, Vue의 Nuxt, Angular의 Angular Universal)으로 구축하지만,

CSR 을 사용하면서 검색엔진도 최적화시킬 수 있는 방법은 없을까?

방법 1) 동적 렌더링 / Pre-rendering (사전렌더링)

동적 렌더링이란 동적 렌더기(예: Puppeteer, Rendertron 또는 prerender.io)를 설치하고 구성하여

요청 주체가 사람이면 기존처럼 빈 HTML 과 소스코드들을 제공하고,

요청 주체가 검색엔진(크롤러)이면 서버에서 사전에 렌더링 된 HTML 페이지를 제공한다.

react-helmet : 동적으로 헤더값 설정한다. 단, 구글 검색은 react-helmet 으로 데이터를 가져오지 못하는 이슈가 있다.

gatsby-plugin-react-helmet : 정적파일 빌드할때 헤더값 설정한다. (게츠비가 정적 파일을 빌드할때 react-helmet의 내용을 넣는다.)

prerender-spa-plugin, vue-meta : vue 에서 검색엔진최적화 할때 사용

puppeteer : Chrome 또는 Chronium 을 제어할 수 있는 high-level 의 API 를 제공하는 Node.js 의 라이브러리

방법 2) History API

History API 는 주소를 부여하는 API 이다.

깜빡임 없이 페이지를 로딩하면서, URL이 바뀌게 설정할 수 있다.

정적인 URL 을 설정하여 경로 지정을 해야한다.

Reference

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko 

Overview

기존에는 Static Sites 였다.

사용자가 주소에 접속하면 서버에 배포되어있는 HTML 문서들을 받아와서 보여준다.

다른 링크를 클릭하면 다시 서버에서 해당하는 페이지의 HTML 을 요청하고 받아와서 페이지 전체가 업데이트 된다.

이후 XML API, JSON 를 통해 HTML 문서 전체가 아니라 서버에서 필요한 데이터만 받아오고 

JS 를 통해 동적으로 HTML 요소를 생성해서 페이지 업데이트를 받아오는 방식이 있었다.

이러한 방식은 AJAX 라는 이름을 가지게 되었고 구글에서도 AJAX 방식을 사용해 웹어플리케이션을 만들었다.

AJAX를 사용하여 제작한 웹 어플리케이션을 SPA 라고 한다.

선행 개념:

TTV (Time To View) : 사용자가 웹사이트를 볼 수 있음

TTI (Time To Interact) : 사용자가 인터렉션이 가능함

CSR (Client Side Rendering)

사용자가 웹사이트에 접속하면

1. 서버에서 index.html 파일을 클라이언트에 보내주게되는데 받아온 HTML 에는 빈 ROOT 요소와 app.js 링크만 들어있다.

    (HTML 은 비어져 있기 때문에 처음 접속시에 빈 화면만 보인다)

2. 서버로 부터 다운로드 받는 app.js 는

    어플리케이션에서 필요한 로직 + 구동을 위한 프레임워크와 라이브러리의 소스코드가 모두 포함되어있다. (용량이 크다.)
    추가로 필요한 데이터들이 있다면 서버를 통해 JSON 데이터를 받아온다.

3. 2번에서 동적으로 HTML을 생성하여 최종적인 어플리케이션을 보여주게 된다.

    (TTV 와 동시에 TTI 가 가능하다)

장점:

- 페이지 렌더링이 자연스럽다.

- 서버에 부담이 적다.

문제점:

- 사용자가 첫 화면을 보기까지 시간이 오래걸린다.

- Low SEO (Search Engine Optimization)

  검색엔진들은 웹사이트의 HTML 문서를 분석해 검색엔진에 등록해 놓는다.

  CSR에서는 바디가 대부분 비어져 있기 때문에 검색엔진들이 분석해 놓는데 어려움을 겪는다. (구글에서는 조금 개선됨)

성능에 관하여..

CSR 에서는 최종적으로 번들링해서 사용자에게 보내주는 JS 파일을

어떻게 효율적으로 많이 분할해서 첫번째로 사용자가 보기위해 필요한 필수적인 요소만 보낼 수 있을지 고민해본다.

SSR (Server Side Rendering)

사용자가 웹사이트에 접속하면

1. 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만든다.

2. 만들어진 HTML파일은 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에게 보내준다.

3. 잘 만들어진 HTML 문서를 받아와서 바로 사용자에게 보여준다.

장점:

- 첫 번째 페이지 로딩이 빠르다.

- 모든 컨텐츠가 HTML 에 담겨져 있기 때문에 조금 더 효율적인 SEO 를 할 수 있다.

문제점:

- Static Sites 에서 발생했던 깜박임 현상이 일어난다. (좋지 않은 사용자 경험)
   (전체적인 웹사이트를 다시 서버에서 받아오는 것과 동일하기 때문)

- 요청이 많을 수록 서버 과부하가 걸리기 쉽다.

- HTML 은 빠르게 받아왔지만 동적으로 데이터를 처리하는 JS 를 불러오지 못했을때 이벤트에 대한 반응이 없을 수 있다.

  (TTV 와 TTI 의 공백이 길다.)

성능에 관하여.. 

SSR 에서는 TTV 와 TTI 의 단차, 효율적인 UI/UX 제공을 고민해본다.

SSG (Static Site Generation)

정적 웹 페이지를 생성하는 엔진으로, 컨텐츠가 변경될 일이 거의 없거나 URL을 예측 가능할 경우 SSG를 사용한다.

SSR 처럼 만들어진 HTML 을 받아오지만, SSG는 HTML 파일은 빌드했을때 생성된다.

React + Gatsby 

React 에서 만든 웹어플리케이션을 정적으로 웹페이지를 미리 생성해서 서버에 배포해 놓을 수 있다.

JS 파일을 함께 가지고 있을 수 있어서 동적으로 필요한 로직들도 추가할 수 있다.

React + NextJS

NextJS 는 SSR 특화 라이브러리이지만 SSG도 지원한다.

CSR 과 SSR 를 섞어서 목적에 맞게 사용할 수 있도록 지원한다.

Reference

https://www.youtube.com/watch?v=iZ9csAfU5Os 

1. NVL 함수

NVL 함수는 Oracle 데이터베이스에서 사용되는 함수로, 첫 번째 인자가 NULL일 경우 두 번째 인자를 반환합니다.

이 함수는 NULL 값을 다른 값으로 대체할 때 유용합니다.

SELECT NVL(column1, 0) FROM table1;

위의 쿼리문에서는 column1이 NULL일 경우 0을 반환합니다.

2. NVL2 함수

NVL2 함수는 NVL 함수와 유사하지만, 세 개의 인자를 받습니다. 

첫 번째 인자가 NULL이 아닌 경우 두 번째 인자를 반환하고, NULL인 경우 세 번째 인자를 반환합니다.

SELECT NVL2(column1, 'A', 'B') FROM table1;

위의 쿼리문에서는 column1이 NULL이 아닐 경우 'A'를, NULL일 경우 'B'를 반환합니다.

3. ISNULL 함수

ISNULL 함수는 SQL Server 데이터베이스에서 사용되는 함수로, 첫 번째 인자가 NULL일 경우 두 번째 인자를 반환합니다.

NVL 함수와 유사한 기능을 하지만, 인자의 개수가 다릅니다.

SELECT ISNULL(column1, 0) FROM table1;

위의 쿼리문에서는 column1이 NULL일 경우 0을 반환합니다.

4. NULLIF 함수

NULLIF 함수는 두 개의 인자를 받습니다. 

첫 번째 인자와 두 번째 인자가 같을 경우 NULL을 반환하고, 다를 경우 첫 번째 인자를 반환합니다.

SELECT NULLIF(column1, 0) FROM table1;

위의 쿼리문에서는 column1이 0일 경우 NULL을 반환하고, 0이 아닐 경우 column1을 반환합니다.

5. COALESCE 함수

COALESCE 함수는 Oracle, SQL Server, MySQL 등 다양한 데이터베이스에서 사용되는 함수로, 여러 개의 인자를 받습니다.

인자들 중에서 NULL이 아닌 첫 번째 값을 반환합니다. 만약 모든 인자가 NULL인 경우 NULL을 반환합니다.

SELECT COALESCE(column1, column2, column3, 0) FROM table1;

위의 쿼리문에서는 column1, column2, column3 중에서 NULL이 아닌 값이 있을 경우 해당 값을 반환하고, 

모두 NULL인 경우 0을 반환합니다.

<차이점>

NVL 함수와 NVL2 함수는 Oracle 데이터베이스에서 사용됩니다.
ISNULL 함수는 SQL Server 데이터베이스에서 사용됩니다.

NULLIF 함수는 두 개의 인자를 받으며, 두 인자가 같을 경우 NULL을 반환합니다.

COALESCE 함수는 여러 개의 인자를 받아 NULL이 아닌 첫 번째 값을 반환하며, 모든 인자가 NULL인 경우 NULL을 반환합니다.