6-16 TIL

Algorithm

달리기경주

function solution(players, callings) {
    let playerMap = new Map()
    players.map((v,i)=>{
        playerMap.set(v,i+1)
    })
    callings.map(v=>{
        const rank = playerMap.get(v)
        const front = players[rank-2]
        players[rank-2] = v
        players[rank-1] = front
        playerMap.set(v,rank-1)
        playerMap.set(front,rank)
    })
    return players;
}

• 이번에도 Map을 사용해서 진행했다
• 조금 더 생각해보면 Map말고 일반 객체로 진행했어도 충분했을 것 같다.
• 실제로 메모리는 적게 썼지만 소요시간은 더 걸렸다.
• 저장된 Map값에서 현재 불린사람의 등수를 구하고 앞사람을 players 배열에서 구한다
• players의 순위를 바꾼 후 Map에서 각 순위를 바꿔준다.
• 이후 순위가 조정된 players 반환하면 된다

다른사람 풀이를 보자면

function solution(players, callings) {
    let idx;
    let name1;
    let name2;
    const idxList = {}

    players.forEach((name,index)=>idxList[name]=index)
    for(let call of callings){
        idx = idxList[call]
        name1 = players[idx]
        name2 = players[idx-1]
        idxList[call]-=1
        idxList[name2]+=1
        players[idx] = name2
        players[idx-1] = name1
    }    

    return players;
}

방법은 비슷하지만 Map을 썼는지 일반 객체로 햇는지가 다르다

CS

가장 기본적이었던 React란?

왜 React인가?

웹이 계속 새로운 기술과 발전을 거듭하며 웹이 복잡해지고 사용자들이 원하는 기능이 많아지며 개발자들이 처리할 UI가 많아졌다. 이러한 상황에서 기술의 한계를 느끼고 새로운 기술인 Front-end Framework를 개발한다.

• 1세대 프론트엔드 기술
  기본적인 HTML,CSS,JavaScript로 DOM을 조작하고 이벤트를 발생시킴
• 2세대 프론트엔드 기술
  웹이 발전하여 DOM의 조작이 빈번하게 발생함에 따라 jQuery 기술이 등장하게 됨. 결국 jQuer는 DOM을 조작한다는 행위에서 벗어나지 못해 점점 복잡해지는 환경에서 한계에 도달했다.
• 3세대 프론트엔드 기술
  • Angular
    2010년 Google에서 개발한 프레임워크로 TypeScript 기반으로 매우 안정적이고 잘 설계된 구조 내에서 개발이 가능하다. 프레임 워크 답게 다양한 기능이 내장되어 있지만 무겁고 배우기 어렵다.
  • Vue
    2014년 Evan You라는 개인이 개발한 프레임워크로 Angular와 마찬가지로 Vue만의 문법과 규칙이 있다. Angular와 React가 개발되고 나서 장점을 흡수해 만들었기 때문에 문법과 규칙을 쉽게 만들어 러닝 커브가 낮다. 프레임워크 답게 다양한 기능이 내장
  • React
    2013년 Facebook에서 개발한 라이브러리로 Angular,Vue 등 다른 프레임워크와는 달리 리액트는 오로지 view만을 담당하는 라이브러리이다. 그만큼 내장되어 있는 기능이 부족에 third-party라이브러리(react-router-dom,redux)를 함께 사용한다.

Framework와 Library 차이
공통적으론 다른사람이 만들어둔 코드라 할 수 있고 차이점으로는

• Framework 는 다름사람이 만든 틀(Frame)안으로 들어가서 작업하는 것
• Library는 내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것

리액트는 무엇일까?

리액트는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리로 UI를 자동으로 업데이트 해준다는 점과 선언적인 개발이 가능하게 되는 것. UI를 자동으로 업데이트 하는 과정에서 Vritual DOM을 통해서 최적화를 구현한다.

선언형

개발 방식은 선언적 개발과 절차적 개발로 나눌 수 있다.

절차적 방식은 목적을 이루기 위해 어떻게라는 측면에 맞추어 진행한다. 만일 목적이 제대로 이루어지지 않는 문제가 발생했다면 어떤 과정에서 문제가 생겼는지 모든 과정을 되짚어 보아야 한다.
코드가 길어질 수록 유지보수가 어려워짐

function total(arr) {
  let total = 0;
  for(let i=0; i<arr.length; i++){
    total += arr[i];
  }
  return total;
}

선언적 방식은 무엇이 되면 되는지 우리가 원하는 최종을 선언하고 리액트에게 전달하면 어떻게 해야하는지 리액트에서 알아서 처리한다. 개발 과정에서도 최종 결과물이 어떻게 되는지에 대한 부분에만 신경 쓰면 되기 때문에 선언적 방식이 개발할 때 훨씬 편리하다

function add(arr) {
    return arr.reduce((prev, current) => prev + current, 0);
}

Virtual DOM

리액트가 화면을 업데이트 하는 과정을 더 효율적으로 수행하기 위한 기술. DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 렌더링을 자주 하게 되고, 그만큼 PC자원을 많이 소모하게 되는 문제를 해결하기 위한 기술이다.

예시로 3가지의 물품을 필요하다 하면 창고를 3번이나 가는 형식이 되지만 Virtual DOM에서 한번에 요청을 한뒤 창고에 한번만 갔다오면 된다.

Component

재사용 가능한 각각의 독립된 모듈을 의미한다. UI구성단위 즉 컴포넌트 단위로 UI를 구성할때의 장점으로는 코드 재활용성이 증가, 코드 유지보수가 용이, 해당 페이지가 어떻게 구성되어 있는지 파악하기 용이하다

전에는 Class component가 주로 사용되었지만 현재는 Function Component가 사용된다.
클래스형 컴포넌트에 비해 간단하고 단순하며 hooks라는 기능이 추가되며 state를 잘 관리할 수 있게 되어 자주 사용된다.

JSX(Javascript Syntax Extension)

자바스크립트의 확장 문법으로 JS와 HTML을 합쳐놓은 듯한 형태이다. 마크업을 편리하게 작성하기 위한 문법으로 HTML에서 마크업 하고, JS에서 로직을 연결하고 붙이는 과정을 하나의 JS 파일 내에서 편리하게 처리할 수 있다.
JSX로 작성한 코드는 JS가 인식할 수 없는 문법이기 때문에 Babel이라는 패키지를 이용해서 변환해줘야 한다.

• 장점
  HTML tag를 그대로 사용하기 때문에 익숙하며, HTML 마크업과 JS 로직을 같이 구현할 수 있다. 또한 JS 문법을 이용해서 HTML을 생성할 수 있으며 기존의 DOM+Event 방식보다 훨씬 간편하게 UI를 구성할 수 있다.

• 특징
  하나의 부모 태그를 가지며 모든 태그가 셀프 클로징이 가능하다.

Reference