[230828] Leetcode - 108, 프런트엔드 개발의 변천 (1)

Leetcode - 108

• 108. Convert Sorted Array to Binary Search Tree
• 재귀함수로 반으로 나눠서 BST 만듬

/**
 * Definition for a binary tree node.
 * function TreeNode(val, left, right) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.left = (left===undefined ? null : left)
 *     this.right = (right===undefined ? null : right)
 * }
 */
/**
 * @param {number[]} nums
 * @return {TreeNode}
 */
var sortedArrayToBST = function (nums) {
  const BST = (s, e) => {
    if (e - s < 0) {
      return null;
    }

    const mid = s + Math.ceil((e - s) / 2);
    const node = new TreeNode(nums[mid]);

    node.left = BST(s, mid - 1);
    node.right = BST(mid + 1, e);

    return node;
  };

  return BST(0, nums.length - 1);
};

프런트엔드 개발의 변천 (1)

1. JS는 1995년 넷스케이프사가 개발, 표준화가 되지 않아 어려움 겪음
2. ECMA 라는 표준화 단체에서 표준 만들기 시작
3. 2005년에 구글 지도 서비스가 출시 (비동기로 HTTP 통신하는 Ajax)
4. 2008년 크롬 브라우저 탄생 (V8 JIT VM 타입의 자바스크립트 엔진 탑재)
5. JS 인기 높은 언어로 재탄생

제이쿼리

당시 인기 있었던 이유

• 크로스 브라우저 호환
• DOM, 애니메이션 간결하게 조작 및 구현

  인기 하락

• 글로벌 스코프 오염
• 라우팅 등 여러 페이지의 웹 애플리케이션을 구현하는 구조가 없음

SPA

• Single Page Application
• 기동 시에 HTML 전체로드하고 이후엔 사용자 인터랙션에 맞춰 Ajax 로 정보 얻고 동적으로 페이지를 업데이트함
• URL 을 지정해 서버로부터 콘텐츠 반환하는 방식이 아니라, SPA에서는 페이지 이동을 클라이언트 사이드에서 수행함
• HTML 전체를 전달하는거에 비해, json 전달해서 빠르게 업데이트 가능

SPA 동작 원리

1. 초기 로딩: HTML 파일을 받아옴, 전체 애플리케이션의 구조와 초기 상태 담고 있음
2. 라우팅 : URL의 일부를 해석하여 어떤 화면을 보여줄지 결정, 전체 페이지를 다시 로드하진 않음
3. 동적 로딩 : 필요한 데이터 AJAX 요청을 통해 비동기적으로 가져오고 주로 JSON 형태로 전달
4. 렌더링 : 데이터 기반으로 뷰를 생성하고 렌더링함, 렌더링은 JS로 DOM을 조작하여 화면에 내용을 그리는 과정
5. 가상 DOM 사용 : 가상 DOM 기술을 사용하는데 변경된 부분만 실제 DOM에 반영하여 최적화하는 방식
6. 컴포넌트 기반 구조 : 화면의 작은 단위인 컴포넌트 정의하고 조합해서 전체화면 구성, 컴포넌트는 상태와 뷰를 가짐

+ 사담

• solidjs
  • 가상 DOM 안쓰는 라이브러리
  • 가상 DOM을 쓰면 더 오버헤드가 생긴다고 주장함