마우스 이벤트를 통해 드래그하여 특정 엘레멘트의 사이즈를 조정해 볼 거다.

필요한 거

먼저, 마우스는 아래의 세가지 동작을 한다는 걸 이해하자

• 마우스를 누른다 (mousedown)
• 마우스를 움직인다 (mousemove)
• 마우스에서 손을 뗀다 (mouseup)

작업할 거

1. 내가 마우스를 눌렀다는 사실을 상태로 기억하고 있자. 그리고 누른 그 지점이 어딘지도 상태로 기억하고 있자.

   우리는 마우스를 누를 때 많은 걸 참조할 수 있다.

암튼, 코드로 작성해 보자.

const [isResizing, setIsResizing] = useState<boolean>(false);

const [initialX, setInitialX] = useState<number>(0);

const handleMouseDown = (e: React.MouseEvent) => {
    setIsResizing(true);
    setInitialX(e.clientX);
};

2. 이제는 마우스를 움직여 볼건데... 가로 너비의 사이즈를 드래스해서 조정해 볼거다. 필요한게 뭔지 하나씩 생각해보자.
   • 현재 엘레멘트의 너비가 필요하다.
   • 아까 마우스를 누를때 지점의 값이 필요하다(initialX)
   • 마우스를 이동하고서의 지점의 값이 필요하다(1번을 참조해서 e.clientX)
   • 마우스를 이동하고서의 지점 - 마우스 누를 때 지점 = 이동한 거리 (initialX - e.clientX)
   • 현재 너비에서 이동한 거리를 더해준 값이 새로운 너비가 될 거다.

코드로 작성해 보자.

  const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      if (isResizing) {
        const newWidth = width + e.clientX - initialX;
        setInitialX(e.clientX);
        if (newWidth >= 408) {
          setWidth(newWidth);
        }
      }
    },
    [isResizing, initialX, width],
  );

3. 마지막이다. 마우스에서 손을 뗴보자. 아까 누를 때의 상태의 반대로 상태를 바꾸기만 하면 된다.

코드로 작성해 보자.

  const handleMouseUp = useCallback(() => {
    setIsResizing(false);
  }, []);

전체 코드이고 실제 화면이다.

  const [isResizing, setIsResizing] = useState<boolean>(false);
  const [initialX, setInitialX] = useState<number>(0);
  const [width, setWidth] = useState<number>(408);
  const handleMouseDown = (e: React.MouseEvent) => {
    e.preventDefault();
    setIsResizing(true);
    setInitialX(e.clientX);
  };

  const handleMouseUp = useCallback(() => {
    setIsResizing(false);
  }, []);

  const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      if (isResizing) {
        const newWidth = width + e.clientX - initialX;
        setInitialX(e.clientX);
        if (newWidth >= 408) {
          setWidth(newWidth);
        }
      }
    },
    [isResizing, initialX, width],
  );

  useEffect(() => {
    if (isResizing) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp, { once: true });
    } else {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    }

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isResizing, handleMouseMove, handleMouseUp]);

자료구조의 정의는 아래와 같다.

무수한 상황에서 데이터를 효율적으로 다룰 수 있는 방법

익숙한 자료구조로는 Stack, Queue, Tree, Graph 등이 있다.

Stack

• LIFO (last in, first out) / 후입선출 (가장 늦게 들어온 것부터 먼저 나간다)
• 회전 초밥 집에 쌓인 접시처럼 생겼다.

Queue

• FIFO (first in, first out) / 선입선출 (가장 먼저 들어온 것부터 먼저 나간다)
• 톨게이트를 그려보면 쉽게 이해가 된다.

Graph

• 여러 개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료 구조
• 방향성을 가진다: 무방향 / 단방향
• 진입차수 / 진출차수: 정점에 들어오는 간선의 수 / 정점에서 나가는 간선의 수
• 자기루프: 정점에서 나간 간선이 곧바로 진입하는 경우
• 사이클: 서울 → 대전 → 부산 → 서울

Tree

• 루트(Root) 라는 하나의 꼭짓점 데이터를 시작으로 여러 개의 데이터를 간선(edge)으로 연결한 자료 구조
• 노드: 모든 개별 데이터
• 루트: 트리 구조의 시작
• 부모 노드: 상하 관계의 두 노드 중 루트에 가까운 노드
• 자식 노드: 상하 관계의 두 노드 중 루트에 먼 노드
• 리프 노드: 트리 구조의 끝 노드(자식 구조가 없는 노드)

탐색

탐색은 다양한 알고리즘을 적용하기 좋은 테마 중 하나이다. 추상적일 수 있지만 우리가 맞이하는 다양한 문제 등을 탐색을 통해 해결할 수 있다. 미로게임이, 로봇청소기, 최단 거리 또는 최단 시간 경로 찾기 등이 탐색을 통해서 문제를 해결해 볼 수 있다.

탐색에도 여러 방법이 있겠지만 오늘은 tree, stack, queue 등의 자료구조를 통해 DFS와 BFS를 다루어 보기로 한다.

BFS (Breath-First Search)

• 너비 우선 탐색
• 노드 레벨 순서에 따라 순회: 부모 노드 기준으로 바로 자신의 자식 노드 레벨(또는 인접 노드)을 모두 살피고 해당 자식 노드들의 바로 아래의 자식 노드 레벨(또는 인전 노드)을 탐색한다.
• 자료구조 Queue를 활용하여 문제 해결할 수 있다.
• 최단 경로를 알아내야 하는 경우 또는 찾아야 하는 노드가 인접한 경우 사용한다.

Javascript로 구현한 BFS 문제 풀이이다.

const bfs = (graph, start, visited = []) => {
  let queue = [start]
  visited.push(start)

  while (queue.length > 0) {
    node = queue.shift()
    for (value of graph[node]) {
      if (!visited.includes(value)) {
        queue.push(value)
        visited.push(value)
      }
    }
  }
  return visited
}

const graph = [
  [],
  [2, 3, 8],
  [1, 7],
  [1, 4, 5],
  [3, 5],
  [3, 4],
  [7],
  [2, 6, 8],
  [1, 7]
]

bfs(graph, 1)
// [ 1, 2, 3, 8, 7, 4, 5, 6 ]

DFS(Depth-First Search)

• 깊이 우선 탐색
• 연결되어 있는 노드를 우선하여 순회: 부모 노드 기준으로 자신의 자식 노드 중 하나를 탐색하고 해당 자식 노드의 자식 노드를 탐색하는 순서로 탐색한다.
• 자료구조 stack과 재귀를 활용하여 문제 해결할 수 있다.
• 경로를 완벽하게 탐색해야 할 때 사용한다.

Javascript로 구현한 DFS 문제 풀이이다. Stack과 재귀를 활용하였다.

const dfs_recussion = (graph, start, visited=[]) => {
  visited.push(start);
  for (node of graph[start]) {
    if (!visited.includes(node)) {
      dfs_recussion(graph, node, visited)
    }
  }
  return visited
}

const graph = {
  'A':['B','C'], 
  'B':['A','D','E'], 
  'C':['A','G','H'],
  'D':['B'], 
  'E':['B','F'], 
  'F':['E'], 
  'G':['C'], 
  'H':['C']
}

dfs_recussion(graph, 'A')
// [ 'A', 'B', 'D', 'E', 'F', 'C', 'G', 'H' ]

두 알고리즘의 Tree 탐색 경로를 비교해보자

데이터를 보내고 + 뒤로가기

설정 중에 특정 데이터를 쿼리로 보내고 + firebase로 메시지를 보내는 이벤트가 있었다. 원래는 뒤로가기 버튼에 이 이벤트 핸들러를 넣어서 뒤로 가기가 한참 뒤에야 뒤로 가졌다. 그 부분은 해결을 했지만, Swipe로 뒤로 가기를 매우 급하게(?) 할 경우 사용자가 저장한 설정이 제대로 서버로 전달을 주지 못하고 navigation이 이뤄지는 바람에 제대로 설정 정보를 불러오지 못하는 이슈가 있었다.

해결

Loading UI

첫 번째로 생각난 것이 "일단 Loading UI를 사용자에게 제공해주자"였다. 페이지를 개발하다 보면 다양한 상황에서 서버에서 데이터를 fetch하여 사용자에게 정보를 제공한다. fetch하는 시간동안 나은 UX를 제공하기 위한 방법으로 Loading UI를 사용자에게 제공한다.

Loading 중에는 뒤로가기를 막자

두 번째로 생각난 것이 Loading 중에 뒤로가기를 막아서 데이터가 서버로 보내지기 전에 Swipe로 뒤로 가는 것은 막되, 서버로 전달이 끝나면 다시 Swipe가 되도록 해야했다.

시도 #1 (fail)

React Navigation 공식 문서에서 제공하는 뒤로 가기 방지의 예시를 참조하여 navigation에 이벤트를 붙여보았다. beforeRemove이벤트를 붙이면, 현재 stack이 삭제되고 다른 stack으로 이동하는 순간 해당 이벤트가 트리거된다.

나의 경우 stack에서 tab으로 이동을 하는 거 때문이었는지 몰라도 (아직도 잘 확인이 안된다😭) 자꾸만 에러를 뿜었다. The screen was removed natively but didn't get removed from JS state.

해석하자면 현재 화면은 iOS에서 사라졌지만 JS 상태에서는 삭제가 되지 않았다고 한다. (이해하려면 더 공부가 필요하지만) 공식 문서에서도 사실 비슷한 이야기가 나온다. The event is only triggered whenever a screen is being removed due to a navigation state change.

이런 에러로 인해 위에서 말했던 beforeRemove 이벤트를 navigation에 붙여서 사용할 수 없었다.

시도 #2 (사실상 fail)

위 에러 사진에서 친절하게 대안을 제시해준다. gestureEnabled를 false로 주면 된다고 한다.

gestureEnabled

stack-navigator의 옵션으로 false로 설정할 경우 (기본값은 true임) swipe와 같은 gesture가 막히게 된다. 근데 이건, stack 자체의 swipe를 막은거라 loading 중에만 막고 loading 아닌 경우에는 열어 놓는다는 원래 아이디어와 맞지 않았기 때문에 사실상 시도하지 않았다.

시도 #3 (Pass)

useEffect를 이용하여 의존성 배열에는 loading의 state를 넣어 주었다. 그리고 navigation.setOptions()으로 gestureEnabled 값을 변경해 주는 함수를 실행시켰더니 원하던 아이디어대로 구현이 되었다.

  useEffect(() => {
    navigation.setOptions({ gestureEnabled: !isLoading })
  }, [isLoading])

isLoading이 true일때 gestureEnabled가 false로 setter함수가 옵션을 보내주고, 반대의 경우 true로 보내주기 때문에 loading state에 따라서 해당 옵션값이 잘 변경되었다.

마무리

React Native는 iOS와 안드로이드에 맞게 상태를 관리하고 옵션 등을 잘 설정해 주어야 한다는 것을 다시 한번 깨닳았다. 구글링을 아무리해도 해외 개발자 형님들도 이 부분에 대해 명확하게 설명하고 있지 않은 것 같았다. 끝내 setOption이라는 navigtaiton이 제공하는 프로퍼티를 이용하여 이 이슈를 해결할 수 있었다.

Tailwind는 CSS 프레임워크 중 하나입니다. Atomic CSS 방법론과 함께 Tailwind CSS가 많은 주목을 받고 있습니다.

Atomic CSS란, class 지정과 같은 legacy한 방식이 아닌 inline styling 또는 기능적인 방법론입니다.

Legacy한 Styling 방식은 HTML 파일과 CSS 파일을 따로 관리하며, CSS 파일에 많은 Class 별 Styling을 작성하여 해당 Class를 HTML에 적용하는 식이었습니다. 하지만 Utility/Atomic CSS 방법론이 등장하면서 HTML 파일에 바로 Styling을 적용하는 프레임워크가 많이 등장하게 되었습니다.

사실 이러한 방식의 단점은 매우 분명했습니다. Web의 기본적인 철학(?)인 '관심사 분리'가 되지 않는다는 점이죠. 그럼에도 Class 선택자를 통한 작업을 하는 것보다 많은 장점이 있기에 그런 단점이 보완되는 것 같습니다.

본격 탐구

Tailwind Docs에서 제공하는 몇 가지 Core concepts을 간단히 소개합니다.

Utility Class란, 관련된 메서드를 사용하는 클래스를 모아 사용하여 중복된 코드가 발생하지 않고 효율적으로 관리하는 클래스를 의미합니다.

Tailwind는 그 실용성을 "Class 파일을 따로 사용하지 않는다"는 점에서 찾고 있습니다. Class 파일을 따로 사용하지 않으면 얻게 되는 이점은 아래와 같습니다.

• 클래스 이름을 지정하는데 시간 낭비를 하지 않아도 됩니다.
• CSS 파일이 커지는 것을 막을 수 있습니다. 하지만 Tailwind의 경우 중복 Styling은 재사용이 가능합니다.
• Styling을 변경할 때 어느 부분이 영향을 받게 될지 신경쓰지 않아도 됩니다.

이렇게 utility class를 이용한 styling은 관리가 용이하여 유지 보수가 쉽기 때문에 이점이 많습니다.

Tailwind가 inline styling과 별반 다를 것 없다는 인상을 받았다면, 이 기능을 통해 차별성을 느끼게 될 것입니다. inline styling에서는 Hover나 Focus와 같은 조건에 따르는 Styling이 불가능하기 때문입니다. Tailwind에서는 아래처럼 utility class내에 hover: 일 때의 styling을 작성해 주면 됩니다.

또한 다양한 스크린 환경에 따른 UI 구성을 위한 Responsive Design 또한 inline styling으로는 불가능하지만, (당연히) utility class로 작업이 가능합니다.

위에서 언급된 Responsive Design에서 Tailwind의 컨셉을 조금 더 이해할 수 있는데요. 그것은 바로 Mobile First 입니다. media query를 통해 스크린 사이즈 별로 styling을 할 수 있는데, default 값은 mobile에서 사용하는 화면으로 값을 지정하는 것입니다. 만약 Web App를 만든다면 작은 사이즈에 적용될 styling이 기본이고, lg나 md 같은 media query를 지정하여 큰 사이즈에 적용될 styling을 작성하면 됩니다.

Tailwind를 처음 설정할 때 global.css 파일 내에 아래 세 가지를 작성해 줘야합니다.

위의 의미는 Tailwind의 base, components, utilities를 CSS에 적용하겠다는 디렉티브와 같은 기능을 합니다.

그럼 @layer 와 @apply 디렉티브를 알아볼까요?

• @layer: 사용자 정의 styling을 base, components, utilities에 적용할 수 있고, 이는 @tailwind 디렉비트에 자동으로 포함됩니다.
• @apply: 기존에 사용하던 CSS styling과 비슷하게 class를 선언하고 styling을 정의할 수 있습니다. 문법은 Tailwind 문법 그대로 사용할 수 있어 유용하게 활용할 수 있습니다.

Tailwind는 low-level 스타일링을 기본적으로 제공하기 때문에 사용자는 자신이 원하는 수준의 styling을 세밀하게 할 수 있는 장점이 있습니다. 다른 말로 하면 Tailwind의 usgae를 모두 외워야 한다는 의미인데 이를 보완하기 위해 Tailwind CSS IntelliSense를 제공하고 있습니다.

해당 플러그인을 활용하면 아래 그림과 같이 클래스명의 자동 완성을 제공하기 때문에 모든 usage를 외우지 않아도 됩니다.

Tailwind!

설치해 봅시다.

1. 먼저 아래 명령어로 Tailwind와 구성에 필요한 설치를 진행합니다. npm install -D tailwindcss postcss autoprefixer

auto pixer와 같은 유용한 플러그인을 활용하기 위해 Post CSS도 설치하는 것을 권장합니다.

2. 다음으로 postcss.confing.js 파일에 아래와 같이 플러그인 추가합니다.

3. 그리고 Tailwind 설정을 위해 아래 명령어를 실행합니다. npx tailwindcss init

위 명령어를 실행하면 tailwind.config.js 파일이 루트 위치에 생성됩니다. 해당 파일에서 다양한 theme 옵션을 활용하여 사용자 정의 styling을 작성할 수 있습니다. 위에서 언급한 바 와 같이 해당 파일에서는 아래 그림과 같이 Tailwind의 기본 구성 및 사용자 정의를 작성할 수 있습니다. 더 자세한 구성 방법은 여기에서 참조할 수 있습니다.

4. 마지막으로 main CSS 파일에 아래와 같이 디렉티브(At Rules)를 작성해 줍니다. 이렇게 작성해 두면 @tailwind 디렉티브를 통해 Tailwind로 작성된 모든 코드가 빌드 시에 CSS 코드로 변환이 됩니다.

React를 공부하면서 생명주기가 중요하다는 내용은 모두 안다. 생명주기 메서드 9개가 어떤 단계에서 쓰이고 있는지 정리되어 있는 블로그를 많이 보았다. 대강 이렇다.

왜 중요한거지?

React는 컴포넌트로 UI가 구분된다. 각 컴포넌트는 보여지고, 업데이트되고, 없어지는 단계를 거치는데 마치 생명주기를 보는 것 같다. React는 각 단계별로 자동으로 필요한 메서드를 호출하여 각 생애 단계를 잘 관리할 수 있기 때문에 중요한 것이다. 일단 생명주기 메서드는 클래스형 컴포넌트에서만 사용된다.

Mount, Update, Unmount

1) Mount부터 알아보자.

Mount = 컴포넌트가 실행

메서드는,

• 컴포넌트를 새로 만들 때 constructor 메서드를 실행한다.
• getDerivedStateFromProps 메서드가 실행되는데, Props에 따라 State의 값이 바뀌는 메서드인데, 거의 사용을 하지 않는다고 하고 React 공식 문서에서는 다른 대안이 많이 있으니 그거를 사용하라고도 한다.
• Rendering 메서드가 실행되면서 UI가 렌더링된다.
• 컴포넌트가 브라우저에 나타난 이후 componentDidMount 메서드가 실행된다.

2) 아래 4가지 경우에 Update된다.

• props가 바뀔 때

• state가 바뀔 때
• 부모 컴포넌트가 리렌더링될 때
• this.foceUpdate로 강제로 렌더링 트리거할 때

메서드는,

• getDerivedStateFromProps 메서드가 실행된다. Props에 의해 State 값이 업데이트될때 사용한다.
• shouldComponentUpdate 메서드를 통해 진위여부를 따진다. false라면 업데이트를 중지한다.
• Rendering 메서드가 실행되면서 UI가 렌더링된다.
• 업데이트가 되기 직전에 getSnapshotBeforeUpdate 메서드가 실행된다.
• 컴포넌트가 브라우저에 나타난 이후 componentDidMount 메서드가 실행된다.

3) Unmount도 알아보자.

Unmount = 컴포넌트를 DOM에서 제거

메서드는,

• 컴포넌트가 브라우저에서 사라지기 직전에 componentWillUnmount 메서드가 실행된다.

9개 메서드를 정리해보자면,

1. constructor constructor 는 컴포넌트의 생성자 메서드이다. 컴포넌트가 만들어지면 가장 먼저 실행된다.

1) this.state에 객체를 할당하여 지역 state를 초기화 2) 인스턴스에 이벤트 처리 메서드를 바인딩 this.props 와 this.state 에 접근할 수 있다.

constructor(props) {
  super(props);
  // 여기서 this.setState()를 호출하면 안 됩니다!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

2. render 컴포넌트를 렌더링하는 메서드이다.

1) this.props 와 this.state 에 접근할 수 있다. 2) 리액트 요소를 반환한다.

3. getDerivedStateFromProps getDerivedStateFromProps 는 props 로 받아온 것을 state 에 넣어줄 때 실행되는 메서드이다. 컴포넌트가 Mount, Update 될 때 호출된다.

static getDerivedStateFromProps(nextProps, prevState) {
  console.log("getDerivedStateFromProps");
  if (nextProps.color !== prevState.color) {
    return { color: nextProps.color };
  }
  return null;
}

4. componentDidMount 컴포넌트의 첫 렌더링이 마치고 나면 호출되는 메서드이다. 이벤트 등록, setTimeout, setInterval 및 axios, fetch등과 같은 네트워크 요청 비동기 작업을 처리한다

5. shouldComponentUpdate 컴포넌트를 리렌더링 할지 말지를 결정하는 메서드이고 성능최적화를 위해 필요하다.

1) props나 state의 값을 비교하며 변경점을 확인한다. 2) 이 메서드 안에서 props 와 state 는 this.props, this.state 로 접근하고, 새로 설정될 props, state 는 nextProps, nextState 로 접근한다.

shouldComponentUpdate(nextProps, nextState) {
  console.log("shouldComponentUpdate", nextProps, nextState);
  // 숫자의 마지막 자리가 4면 리렌더링하지 않습니다
  return nextState.number % 10 !== 4;
}

6. getSnapshotBeforeUpdate 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져온다.이 메서드를 통해 컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 이후 변경되기 전에 얻을 수 있다. 이 생명주기 메서드가 반환하는 값은 componentDidUpdate()에 인자로 전달된다.

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

7. componentDidUpdate 컴포넌트 리렌더링 이후에 호출되는 메서드이다. DOM 관련 처리를 할 수 있다.

prevProps, prevState 를 통해 이전 props, state 값을 확인할 수 있다. getSnapshotBeforeUpdate에서 반환한 값은 여기에서 snapshot 인자로 받을 수 있다.

8. componentWillUnmount 컴포넌트가 화면에서 제거되기 직전에 호출되는 메서드이다.

이벤트, 타이머, 직접 생성한 DOM같은 경우, 제거 작업된다.

9. componentDidCatch5 리액트 16 이후에 추가된 메서드이고 컴포넌트 렌더링 도중에 에러가 발생했을 때 커스텀한 오류 UI를 보여 줄 수 있다.

참고: [React] 컴포넌트 생명주기 메서드 LifeCycle Method React.Component

함수와 함수가 선언된 어휘적 환경의 조합이다(MDN)

그래..그렇구나..그런거구나..

1. 어휘적 환경 (Lexical Environment)

코드로 보자.

let one;
one = 1;

function addOne(num) {
  console.log(one + num);
}

addOne(5);

1. 첫번째 어휘적 환경이다. (전역 Lexical Env)

   1. 변수 one 이 선언되었다. (초기화 전이라 사용 못함, 초기화 이후 사용 가능)
   2. 함수 addOne 이 선언되었다. (함수는 선언+초기화+할당을 동시에 하므로 사용은 가능하다)

2. 새로운 어휘적 환경이 생겼다. (내부 Lexical Env)

   addOne 함수를 실행하면서 넘긴 매개변수 num = 5이 저장되었다.

두 어휘적 환경은 관계!

내부 Lexical 환경은 외부 > 외부 > ... > 전역 Lexical 환경에 이르기까지 참조한다.

다른 코드를 보자.

function makeAdder (x) {
  return function(y) {
    return x + y;
  }
}

const add3 = makeAdder(3);
console.log(add3(2));

1. 전역 Lexical 환경에는 아래 2가지가 저장된다.

   1. makeAdder
   2. add3

2. add3은 makeAdder를 호출하고 있기 때문에 makeAdder Lexical 환경이 생겨난다.

   x = 3

3. console.log를 통해 익명함수 Lexical 환경이 생겨난다.

   y = 2

정리하자.

makeAdder 함수 내에 있던 익명함수는 자신의 매개변수 y를 지역변수로 가지고, 상위함수인 makeAdder의 매개변수 x에도 접근이 가능하다.

const add10 = makeAdder(10);
console.log(add10(3)); // 13 - add10함수가 생성된 이후에도 10이라는 외부 지역변수에 접근이 계속 된다.

이것이 클로저이다.

1. 함수와 렉시컬 환경의 조합
2. 함수가 생성될 당시의 외부 변수를 기억하고 생성 이후에도 계속 접근 가능
3. add10이 외부 변수 10을 참조하고 있는지 아무도 모른다. 은닉화가 이뤄졌다.

호이스팅이란?

스코프 내부 어디서든 변수 선언이 최상위에서 선언된 것처럼 행동하는 것

1. var는 선언하기 전에 사용할 수 있다.

console.log(name); // undefined

var name = 'Mike'

위 코드는 아래처럼 동작한다.

var name; // 호이스팅

console.log(name); // undefined 

name = 'Mike';

var로 선언한 변수는 선언하기 전에도 사용할 수 있다. 호이스팅 되기 때문이다. 그러나 선언은 호이스팅되지만 할당된 값은 호이스팅 되지 않기 때문에 undefinded가 나온다.

2. let도 호이스팅이 된다. 그러나...

console.log(name); // ReferenceError

let name = 'Mike'

let이나 const 모두 호이스팅된다. 근데 왜 위 코드처럼 let에는 ReferenceError가 뜰까?

3. TDZ(Temporal Dead Zone)

변수는 생명주기는 세 가지로 구분된다.

• 선언단계: 실행 컨텍스트의 변수 객체에 등록하는 단계
• 초기화단계: 등록된 변수를 위한 메모리를 만들고 'undefined'로 초기화하는 단계
• 할당단계: 사용자가 정의한 값으로 'undefined'가 교체되는 단계

그렇다면, var의 생명주기는?

선언과 초기화가 동시에 이뤄진다. 그래서 var로 변수 선언 전에 호출해도 undefined가 뜬다.

그렇다면, let의 생명주기는?

선언과 초기화가 분리되어 진행된다. 초기화가 되지 않아 ReferenceError가 나오게된다. (호이스팅이 안된게 아니다!!) 선언과 초기화 사이의 상태가 TDZ이다.

그렇다면, const 생명주기는?

선언 + 초기화 + 할당이 동시에 일어난다. 함수도 동시에 일어난다.

추가

var의 경우 블록 밖에서도 사용이 가능하지만, let과 const는 블록 밖에서 사용할 수 없다 (지역변수). 그러나 함수 스코프는 함수 내에서 선언한 변수만 지역변수가 된다. 고로 함수 내부에서 var로 선언된 변수는 바깥에서 사용할 수 없다.

참조: https://noogoonaa.tistory.com/78 https://www.youtube.com/watch?v=ocGc-AmWSnQ

Gitbook

우리가 어떤 API를 사용할 것인지 정리하는 플랫폼이다. 뿐만 아니라, 블로그 용도로도 쓰일 수 있다고 한다. 이번 프로젝트는 화장실 리뷰 서비스인 만큼, 기본적인 CRUD API를 작성했다.

ESLINT, Prittier 설정

협업 과정에서 서로 다른 코드 스타일링의 충돌을 줄여주는 설정이 필요했다. 또한 효율적인 코드 작성을 위해 linter 설정도 필요했다. 우리는 ESlint와 Prettier을 사용했다.

• VS code 익스텐션 설치
• Node.js 모듈 설치

KPT

Keep

• 새로운 언어에 대한 공부!
• 공식 문서 두려움 없이 읽기!
• 목표한 것을 이루기 위해 포기하지 않기!

Problem

• Kakao Map API 파악🤔

Try

• Redux Persist 라이브러리로 지도 데이터를 상태값으로?
• Typescript + React 제대로 이해하기🔥

Personal

Final Project가 시작되었다. First Project가 극찬을 받았다. 팀 멤버 모두가 고생했다.

뭐하지?

공공 데이터 API를 활용하고 싶었다. 화장실 리뷰 서비스를 제안했다. 팀원 모두 너무 좋다했다. 찾아보니 서울시에서 제공하는 공공 데이터 API가 있었다. 카카오 지도 API를 활용하여 호갱노노 비스무레한 서비스를 만들어 보자!

공부

Typescript와 TypeORM을 적용하기로 했다. 한 주동안 TS공부를 했다. 아직 걸음마 단계이고, 아직 프로젝트에 적용해 보지 않았지만 TS의 강력함은 어느 정도 이해했다.

KPT

Keep

• 새로운 언어에 대한 공부!
• 공식 문서 두려움 없이 읽기!
• 목표한 것을 이루기 위해 포기하지 않기!

Problem

• Typescript와 React 동시 작업에 대한 이해 부족🤔

Try

• TypeORM 개념 정리
• Typescript + React 제대로 이해하기🔥

Personal

지난 40주가 어떻게 지나갔나 싶을 정도로 정신없이 흘러갔다. 프로젝트까지 할 수 있을까 걱정이 많았는데 감사하게 Final Project를 진행하고 있다.

체력이 부칠 때도 있지만, 마지막에 유종의 미를 얻고자 정말 열심히 공부하고 있다.

끝까지 잘하자...👌

Superset of Javascript

동적 언어인 Javascript는 Runtime에서 타입을 결정하지만, 정적 언어인 Typescript는 Complie 과정에서 타입을 결정합니다.

즉, Javascript의 경우 에러를 user가 발견하는 확율이 높고, Typescript는 개발 환경에서 에러를 발견할 수 있는 확율이 높습니다.

코드를 작성하는 중에 에러를 핸들링하는 것과 모든 코드를 작성하고 에러를 확인하는 것은 생산성 측면에서 대단한 차이를 줍니다.

간단한 코드를 작성하는 경우 human error가 발생할 확율이 그리 높지 않지만 코드가 방대해 지는 경우 코드도 결국 사람이 작성하는 것이기 때문에 human error가 발생할 확율이 높습니다. 이럴 때 Typescript는 매우 강력한 도구가 될 수 있습니다.

타입 정의

1) Javascript에서 우리는 아래처럼 변수를 선언했습니다.

let myName = "peter"

하지만 Typescript에서는 아래와 같이 변수를 선언합니다.

let myName: string = "peter"

2) 객체 타입의 변수의 경우 interface를 사용합니다.

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "peter",
  age: 22
}

3) Javascript는 class를 지원하고 객체 지향 프로그래밍을 지원하기 때문에 Typescript에서도 아래와 같이 class를 작성할 수 있습니다.

interface User {
  name: string;
  age: number;
}

class UserAccount {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const user: User = new UserAccount("peter", 22)

Union

단순한 타입을 조합하여 literal한 string, number 등을 정의할 수 있습니다.

// 문자열 리터럴 타입 (Union types)
type Score = 'A' | 'B' | 'C' | 'F'

interface User {
    name: string
    age: number
    [grade: number]: Score

let user: User = {
    name: "peter",
    age: 22,
    1: "A",
    2: "B"
}

Generic

아래와 같은 함수가 있다고 생각해 봅시다. 숫자로 이뤄진 배열만 parameter로 받고 있기 때문에 ["1", "2"]와 같이 문자로 이뤄진 배열을 함수에 넣으면 에러가 발생합니다.

function getSize (arr: number[]) : number {
  return arr.length
}

이럴 때 우리는 Generic를 사용할 수 있습니다. <T>를 함수 이름에 붙여서 다양한 Type을 사용할 수 있도록 합니다.

function getSize<T> (arr: T[]) : number {
  return arr.length
}

// 에러 없이 아래 두 함수를 호출할 수 있습니다.
const arr1 = [1, 2, 3]
getSize<number> (arr1)

const arr2 = ["1", "2", "3"]
getSize<string> (arr2)

Generic을 활용하면 하나의 interface를 설정하면 다양한 모습의 객체를 만들 수 있습니다.

interface Mobile <T> {
  name: string
  price: number
  option: T
}

const mobile1: Mobile <string> = {
  name: "iPhon12",
  price: 1000
  option: "Wifi"
}

const mobile2: Mobile <{color: string coupon: boolean}> = {
  name: "iPhon13",
  price: 1100
  option: {color: "red", coupon: false}
}

Structural Type System

Typescript의 큰 특징 중 하나는, 타입의 모양을 통해 타입을 checking할 수 있다는 점입니다.

interface Point {
  x: number;
  y: number;
}

function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

const point = { x: 12, y: 26 };
logPoint(point);

위 그림에서 point 객체의 경우, 타입을 정해주지 않았지만 Point interface에서 정의된 타입으로 유추하여 에러로 확인하지 않습니다.

다만. 아래와 같이 타입의 모양으로 유추할 수 없는 객체가 parameter로 들어오게 된다면 에러로 확인하게 됩니다.

const color = { hex: "#187ABF" };
logPoint(color);

36주간 교육 세션을 무사히 마치고 꿈에 그렸던 프로젝트를 시작하게 되었다. 과연 내가 3번의 HA를 무사히 통과할 수 있을까 고민하며 열심히 공부해온 결과라 생각이 든다.

팀 선정 기간을 거쳐 나를 포함한 4명의 멤버가 한 팀이 되었다. 모두 Pair program에서 같이 공부했던 동기분들이라 금방 팀에 녹아들 수 있었다.

나름 사회 생활(?)을 해본 나로서는 프로젝트에 있어서 무엇보다 팀웍이 중요하다는 사실을 알고 있었다. 프로젝트 SR 미팅에서는 나는 서로의 이름이 아닌 nickname을 정해보자 제안했다.

수평적 관계에서 자유롭게 커뮤니케이션을 할 수 있어야 좋은 결과물을 도출해 낼 수 있을 것이라 생각했기 때문이다.

서로 nickname으로 불러볼까요?

그렇게 우리는 Dev + Avengers => Devengers가 되었고, 나는 팀에서 스트레인지로 불리게 되었다.

이번에는...

첫 Software Requirement

다양한 아이디어가 나왔다. 첫 프로젝트이기도 하고 4주 정도 그 동안 학습해온 내용을 공부하자는 차원으로 CRUD가 기본적으로 되는 성격의 아이디어를 선정했다.

투표

밸런스 게임에서 착안해 낸 아이디어였다. 둘 중 하나를 선택하는 것은 여간 쉬운 일이 아니다. 그래서 다른 사람들은 어떻게 생각하는지 물어볼 수도 있고, 내가 직접 그런 질문에 답을 해줄 수 있는 그런 서비스를 만들기로 기획했다. 생각보다 기획이 실제 코드 작성 만큼이나 중요한 것이란 걸 많이 배울 수 있었다.

Front-end를 해보려고요

사실 나의 최종 목표는 Front-end도 할 줄 아는 Back-end 개발자 이다. 다른 거창한 말이 따로 있지만, 그 말을 붙이기에는 아직 부족한게 많아서 저렇게 불러본다.

나의 계획은 이렇다. 이번 First-Project에서는 Front-end를 직접 해보면서 중요한 stack들을 다시금 내 것으로 만들어보고, Final Project에서는 Back-end를 제대로 해보는 것이다.

손으로 그린 형편없는 UI 디자인에서 Figma까지

다른 투표 레퍼런스를 참조하여 간단한 wireframe을 만들어 보려고 했다. 나름 역사적인(?) 우리 서비스의 hand writing wireframe이다.😅

우리가 구현해야 하는 각 페이지를 발이 아닌 손으로 직접 그려본 이후에는 Figma를 이용하여 실제 wireframe을 만들었다. 유투브 강의나 블로그 등을 참조했다.

하얀 도화지 위 creat-react-app ...

그 동안의 Sprint에서는 잘 만들어진 코드에서 학습 과정에 필요한 테스트 등을 많이 해보았지만... 커서만 깜빡이는 vs code에 뭐 부터 시작을 해야할지... 마치 하얀 도화지 위에 그림을 그려야 하는 막막함이 있었다. 그렇게 우리는 타이핑했다. npx creat-react-app

Git branch 관리

실제로 팀 프로젝트를 진행해 보니 Git branch의 역할이 얼마나 중요한지 새삼 깨닳았다. 수없이 친 git pull upstream dev도 못 잊을 것 같다.

우리는 위에 정리된 Git flow를 철저하게 지켰다. 각자 작업 전에는 upstream에서 pull로 가져와 작업을 했다. 그리고 개인이 맡은 작업의 경우 새 feature 브랜치를 생성하여 작업 후 나의 remote origin 레포에 push 후 PR을 날리고, Github에서 merge하는 일련의 과정을 꼭 지키려고 노력했다. 그래서였는지 4명의 멤버가 협업하면서 큰 충돌 없이 프로젝트를 마무리할 수 있었다.

Tailwind CSS...이런 거였다니

TailwindCSS는 CSS라이브러리가 아니다. CSS 기술의 방법론적인 차원의 프레임워크이다. 인라인 스타일을 사용하기 때문에 클래스를 지정하고, 수정 시 클래스명을 찾아야하는 수고로움에서 벗어나, 스타일을 빠르게 적용하고 확인할 수 있었다.

Brand color: #7CE0AE 그리고 #FFEE93

4주 프로젝트라고해서 디자인요소를 대강 만들지 않았다. 서비스만의 brand color를 정하고 기본적인 UI 디자인의 tone&manner를 정했다. 투표라는 이미지가 어떻게 보면 딱딱해 보일 수 있는 콘텐츠이기 때문에, 파스텔 톤의 색상을 사용하고 심플한 UI를 사용했다.

달고 살았던 API 문서 (feat. GitBook)

작업을 하면서 Backend에서 작성한 API 문서를 달고 살았다. REST API를 정확하게 따랐는지는 확신이 서지 않았지만, 나름 규칙을 지켜 만든 API 문서였다. 수업에서 해보지 않은 PATCH나 DELETE 메소드를 사용해서 회원 정보 수정이나 탈퇴 등을 구현했다.

살짝 맛만 본 Redux-Toolkit

우리가 작성한 component 들은 많은 depth의 부모 자식 관계가 존재하지 않기 때문에 props drilling 심각하게 발생하지는 않았다. 다만 jwt로 생성한 accessToken과 refreshToken 중 accessToken을 전역 상태로 관리하여 각 페이지에서 활용하기 위해 redux를 사용했다. 맛을 본 정도로만 사용을 했지만, useDispatch, useStore, slice, store 등을 어떻게 설정하고 활용할 수 있는지 학습할 수 있었다.

다음에는...

토큰은 localStorage로...

새로 고침을 하거나 새 탭을 열었을 때 로그인 및 토큰의 유효성을 유지하고자 했지만, 우리가 작성했던 코드는 토큰을 상태값으로 보관하여 해당 구현에 대한 부침이 있었다. 그러나 app.js 내에 (쿠키에 저장되어 있는) refreshToken으로 accessToken을 갱신하는 콤포넌트를 가장 상단의 위치에 넣어주어 모든 페이지마다 accessToken과 로그인 상태가 유지될 수 있도록 하여 문제를 해결할 수 있었다. 다만, 이런 갱신의 작업을 매 페이지에서 해주는 방법보다는 localStorage에 토큰을 넣어주어 작업을 할 수 있지 않앗을까 하는 질문을 스스로 던지고 마무리했다.

tailwind와 redux를 마스터하자

이번에 사용했던 두 stack을 마스터하는 것이 목표이다. (아직 Final 프로젝트에서 Frontend를 하는 것으로 정해지지 않았지만) 궁극적인 목표인 full-stack이 되기위해, 더 파고 들기로 했다.

typesript가 뭐야

사실 벌써 우리 팀은 typescript 공부 중이다. JS의 superset이라는 TS는 말그대로 JS의 compiler이다. 런타임 중에 타입을 확인하는 JS아 달리 TS는 컴파일 중에 타입을 확인하기 때문에 Error를 사용 당시가 아닌 개발 당시에서 확인 가능하다는 장점과 오타를 확인해 주어 Editor로서의 역할도 해주는...장점이 많은 언어라고 알고 있다. 이번 기회에 친해지자...

마치며...

이렇게 열정적이고 성실하고 팀웍이 좋은 동료들을 만날 수 있을지 몰랐다. 사실 팀 배정 전부터 마음 속으로 바랐다. 좋은 멤버들과 재미있게 공부할 수 있었으면 좋겠다고.

앞으로 우리가 어떻게 성장하고 어느 자리에서 어떤 일을 하게 될지 아직 잘 모르지만...오래동안 함께 즐겁게 개발하자는 약속을 맺으며 첫 번째 프로젝트를 마무리할 수 있어서 감사했다.

Enjoy Coding, Upgrade together.

Hulk	Dr.strange	Spiderman	Wanda

아쉽지만 First project는 두서없는 회고만 적게 되었다. 앞으로 진행하게 될 Final project의 경우 매일 TIL형식으로 기록을 할 예정이다.

• 더 이상 사용하지 않는 메모리를 자동으로 삭제 (자바, C#, 자바스크립트 등에서 쓰인다)
• C++, C에는 가비지 컬렉터가 내장되어있지 않다.

대표적인 가비지 컬렉션 종류####

• 트레이싱: 객채에 in-use flag를 마크하고 가비지 컬렉션 사이클마다 마크되지 않은 객체를 삭제
• 레퍼런스 카운팅: 변수가 참조될 때 마다 카운트가 올라가고, 참조하고 있는 변수 값이 바뀌거나 변수 스코프를 벗어나면 카운트가 줄어든다. 카운트가 0이 되면 참조가 되지 않고 있다고 보고 관련 객체의 메모리를 지울 수있다.

Chrome이나 Node.js v8 엔진의 경우 어떻게 가비지 컬렉팅?

캐싱

일시적인 특징이 있는 데이터 하위 집합을 저장하는 고속 데이터 스토리지 계층 => 해당 데이터에 대한 요청이 있을 경우 실제 데이터 접근보다 빠르게 접근이 가능하다

• 저장: RAM(Random Access Memory)과 같이 빠르게 접근할 수 있는 하드웨어에 저장

캐싱이 적용되는 예제

• 클라이언트: HTTP 캐시 헤더, 브라우저
• 네트워크: DNS 서버, HTTP 캐시 헤더, CDN, 리버스 프록시
• 서버 및 데이터베이스: 키-값 데이터 스토어(e.g. Redis), 로컬 캐시(인-메모리, 디스크)

계층과 이점

단점

• 아키텍처 계층이 많아진다.
• 일시적인 데이터만 저장 가능하다.

유니코드란? 전 세계 다양한 문자와 기호를 컴퓨터에서 일관되게 표기하기 위한 산업 표준이다. 문자나 기호를 컴퓨터에 보내려면 인코딩(부조화)하여 보내고, 해독할 때는 디코딩하여 처리한다. 인코딩과 디코딩의 기준을 charset이라고 부른다. charset의 국제 표준이 유니코드이다.

ASCII (American Standard Code for Information Interchange)

영문 알파벳을 7비트의 이진로 인코딩하는 방식:

UTF-8 (가변 길이 인코딩)

코드 포인트에 따라 1byte 부터 4bytes까지 길이를 가변하여 인코딩할 수 있는 방식이다. 각 바이트에 식별자를 넣어 주어 컴퓨터가 인코딩 하려는 문자가 어떤 문자인지 인식하도록 약속한 것이다.

영어 알파벳 A의 유니코드 코드 포인트는 U+0041 이다. 이진 표현은 1000001 이다. A는 UTF-8 인코딩으로 다음과 같이 표시된다.

빨간색의 0비트는 현재 1바이트 인코딩이 되고 있고, 나머지는 코드 포인트라는 것을 알려주고 있다.

참고로 ASCII 코드는 7비트로 표현되므로, UTF-8에서 모두 1byte 결과로 만들 수 있다. ASCII 127 문자의 이진 표현은 01111111이다.

예시 코라는 문자의 유니코드 = U+CF54 (이진법 1100-1111-0101-0100) => UTF-8 3bytes 표현해야한다.

1110xxxx 10xxxxxx 10xxxxxx // (3bytes의 식별자들이다. 가장 하위 byte의 마지막 x부터 채워 넣는다
11101100 10111101 10010100

UTF-16 (가변 바이트 인코딩)

모든 현대 언어의 유니코드 대부분을 2bytes로 표현할 수 있다. 바이트의 순서에 따라 UTF-16의 종류도 달라진다.

참고 https://naveenr.net/unicode-character-set-and-utf-8-utf-16-utf-32-encoding/

이진 파일과 텍스트 파일의 특징

• 텍스트 파일이 아닌 파일은 전부 이진 파일로 취급된다.
• 메모장으로 파일을 열었을 때 깨져 보이는 경우, 인코딩의 문제이거나 혹은 해당 파일이 이진 파일이기 때문이다.
• 텍스트 파일은 운영체제별로 개행 문자 처리가 다르다.
• 대표적인 이진 파일로는 비트맵 이미지 파일이나 사운드 파일, 또는 실행 가능한 파일 등이 있다.

• 실행 파일, 애플리케이션을 실행하는 상태를 프로세스라고 한다.
• 운영체제가 여러 프로세스를 함께 진행하기 때문에 멀티 태스킹이 가능하게 되었다.
• 프로세스는 각각 독립된 메모리 영역(Code, Data, Stack, Heap의 구조)을 할당받는다.
• 스레드는 프로세스 내에서 각각 Stack만 따로 할당받고 Code, Data, Heap 영역은 공유한다.

멀티 태스킹

멀티 태스킹이 가능하려면 프로세스의 동시성 (Concurrency)와 병렬성 (Parallelism) 특징을 각각 사용하거나, 혼합해서 사용해야 한다.

동시성 (Concurrency)

• 하나의 Core에서 Context-Switch를 이용하여 동시에 여러 작업을 하는 것
• Context-Switch: 다른 태스크(프로세스, 스레드)가 시작할 수 있도록 이미 실행 중인 태스크(프로세스, 스레드)를 멈추는 것

병렬성 (Parallelism)

• 여러 Core에서 여러 스레드가 동시에 작업을 하는 것!

멀티 스레드

• 스레드? 작업의 갈래
• 멀티스레드? 하나의 프로세스 내에서 여러 작업 갈래로 나눠진 것

각 스레드마다 call stack이 존재하지만, 여러 스레드는 하나의 자원을 공유한다. 반면 프로세스는 프로세스마다 자원이 모두 다르다. 여러 스레드가 하나의 자원에 손을 대면 오류가 발생하게 된다. 이것이 멀티 스레드의 단점이다.

Node.js는 싱글 스레드로만 작동하는가?

node.js의 Event loop는 싱글 스레드로 작동되지만, Worker pool은 멀티 스레드로 작동한다. 즉, node.js의 초기화와 callback은 Event loop라는 하나의 프로세스, 하나의 스레드에서 작동되지만 I/O intensive, CPU intensive한 모듈은 Worker pool에서 작동한다.

How Node.js really works Node.js uses two kinds of threads: a main thread handled by event loop and several auxiliary threads in the worker pool. Event loop is the mechanism that takes callbacks (functions) and registers them to be executed at some point in the future. It operates in the same thread as the proper JavaScript code. When a JavaScript operation blocks the thread, the event loop is blocked as well. Worker pool is an execution model that spawns and handles separate threads, which then synchronously perform the task and return the result to the event loop. The event loop then executes the provided callback with said result. In short, it takes care of asynchronous I/O operations — primarily, interactions with the system’s disk and network. It is mainly used by modules such as fs (I/O-heavy) or crypto (CPU-heavy). Worker pool is implemented in libuv, which results in a slight delay whenever Node needs to communicate internally between JavaScript and C++, but this is hardly noticeable. (https://blog.logrocket.com/a-complete-guide-to-threads-in-node-js-4fa3898fe74f/)

- 문제:

정수를 요소로 갖는 배열을 입력받아 이진 힙(binary heap)*을 리턴해야 합니다.

- 참고:

• 이진 힙(binary heap)은 노드의 값이 특정한 순서를 가지고 있는 완전 이진 트리(Complete Binary Tree)입니다.

• 완전 이진 트리는 이진 트리의 (마지막 레벨 또는 마지막 깊이를 제외하고) 모든 레벨이 노드로 가득 채워져 있어야 합니다. 마지막 레벨은 왼쪽부터 차례대로 채워져 있습니다.

• 이진 힙에서 부모 노드의 값이 (이진 트리이므로 2개의) 자식 노드의 값보다 큰 경우를 최대 힙(max heap), 반대의 경우를 최소 힙(min heap)이라고 합니다.

• 최대힙

• 최소힙 (https://www.cs.usfca.edu/~galles/visualization/Heap.html)

- 입출력 예시:

let output = binaryHeap([5, 4, 3, 2, 1]);
console.log(output); // --> [5, 4, 3, 2, 1]

output = binaryHeap([3, 1, 21]);
console.log(output); // --> [21, 1, 3]

output = binaryHeap([4, 10, 3, 5, 1]);
console.log(output); // --> [10, 5, 3, 4, 1]

- 힌트:

• 이진 힙은 트리 객체를 이용해 구현할 수도 있고, 배열로도 구현할 수 있습니다. 사실 거의 모든 트리를 배열로 구현할 수 있습니다. 트리를 배열로 구현했을 때의 장점은 (데이터가 선형적으로 저장되기 때문에) 저장공간을 절약할 수 있고 노드 접근 시 오버헤드(재귀호출, 반복문 등)가 약간 줄어듭니다. 다만 이를 위해서 매우 복잡한 인덱스 관리가 필요합니다. 반면, 트리 객체를 이용한 구현은 직관적(이해하기 쉬움)입니다. 그 대신 저장 공간과 약간의 오버헤드를 희생해야 합니다. 거의 모든 기술(구현)은 다수의 선택 사이의 트레이드 오프(trade-off)입니다. 무엇을 선택할 지는 요구사항(requirements), 즉 주어진 문제의 제약과 조건을 고려하여 결정해야 합니다. 이 점을 반드시 기억하시기 바랍니다.
• 완전 이진 트리는 노드가 낮은 레벨부터 채워지고, 같은 레벨에서는 왼쪽부터 채워지기 때문에 배열로 구현하는 것이 쉽습니다.
• 최대 힙과 이진 검색 트리(binary search tree)는 둘다 완전 이진 트리입니다. 하지만 이진 검색 트리에서는 모든 노드가 정렬되는 것과 달리 최대 힙에서는 오직 부모 노드와 직계 자식들 간의 관계만 유지됩니다. 이는 아래의 사실로부터 바로 알 수 있습니다.
  • 이진 검색 트리에서 오른쪽 자식 노드의 값은 부모 노드의 값보다 크지만, 최대 힙에서는 부모 노드의 값이 두 자식 노드의 값보다 크다.

- 풀이1:

• 부모 노드에 2개의 자식 노드 (또는 잎)이 들어갈 수 있다.
• 트리를 배열로 구현한다면, 인덱스 번호로 부모-자식 로직을 구현할 수 있다. 예를 들어 0 인덱스는 root이자 부모일테고 1, 2 인덱스는 자식일 것이다. 1 인덱스의 자식은 3, 4 인덱스 그리고 2 인덱스의 자식은 5, 6 인덱스이다. 이와 같은 로직으로 쉽게 부모 idx는 (자식 idx - 1) / 2의 값의 정수라는 것을 알 수 있다.
• 자식이 부모보다 큰 수일 경우, 서로의 위치를 swap 함수로 바꿔준다. 위치를 바꾸고 난 후, 부모의 자식의 관계를 재설정해 준다.

- 풀이2:

// 아래 코드는 수정하지 마세요.
function swap(idx1, idx2, arr) {
  // 두 변수를 바꾸는 방법

  // 1) 임시 변수를 활용한 방법
  // let temp = arr[idx1];
  // arr[idx1] = arr[idx2];
  // arr[idx2] = temp;

  // 2) Destructuring assignment를 활용한 방법
  // arr이 reference type이라 가능
  [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];

  // 3) XOR 연산을 활용한 방법
  // arr이 reference type이라 가능
  // arr[idx1] ^= arr[idx2];
  // arr[idx2] ^= arr[idx1];
  // arr[idx1] ^= arr[idx2];
}

function getParentIdx(idx) {
  // 부모의 인덱스 번호 확인하기
  // 최대 힙의 경우 왼쪽부터 채워진다.
  // 0의 자식은 1, 2 /  1의 자식은 3, 4 / 2의 자식은 5, 6...
  return Number.parseInt((idx - 1) / 2)
}

function insert(heap, item) {
  heap.push(item);
  childIdx = heap.length - 1;
  parentIdx = getParentIdx(childIdx);
  while (parentIdx >= 0 && heap[parentIdx] < heap[childIdx]) {
    swap(parentIdx, childIdx, heap);
    childIdx = parentIdx;
    parentIdx = getParentIdx(childIdx);
  }
  return heap
}

// downHeapify 방식으로??
// 아래 코드는 수정하지 마세요.
const binaryHeap = function (arr) {
  return arr.reduce((heap, item) => {
    return insert(heap, item);
  }, []);
};

30. heapSort

- 문제:

정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴해야 합니다.

- 참고:

• binaryHeap과 유사하지만, 오름차순 정렬을 위해서 root를 제거하는 알고리즘 하나가 더 필요하다.
• 최소힙으로 정렬 후, root를 제거한 트리를 다시 최소힙으로 만들어야 한다. 빈 배열에 계속 최소힙을 넣어주면 heapSort가 구현된다.

- 풀이:

// 아래 코드는 수정하지 마세요.
function swap(idx1, idx2, arr) {
  [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];
}

function getParentIdx(idx) {
  return Number.parseInt((idx - 1) / 2)
}

function insert(heap, item) {
  heap.push(item);
  let childIdx = heap.length - 1;
  let parentIdx = getParentIdx(childIdx);

  // binaryHeap에서 부등호만 바꿔줬다.
  while (parentIdx >= 0 && heap[parentIdx] > heap[childIdx]) {
    swap(parentIdx, childIdx, heap);
    childIdx = parentIdx;
    parentIdx = getParentIdx(childIdx);
  }
  return heap
}

function removeRoot(heap) {
  // 가장 마지막 노드와 root를 교환한 후, 배열 길이를 줄여준 다음 최소 힙 구현을 해준다.
  swap(0, heap.length - 1, heap); // 가장 마지막 노드와 root 교환
  heap.pop(); // 배열 길이 1만큼 축소
  if (heap.length === 0) return [];

  let curIdx; // root부터 아래로 내려가면서 확인할 예정
  let parentIdx = 0; // root idx
  while (curIdx !== parentIdx) {
    curIdx = parentIdx; // root부터 시작!
        let leftChild = curIdx * 2 + 1; 
        let rightChild = curIdx * 2 + 2;
        if (leftChild < heap.length && heap[leftChild] < heap[parentIdx]) {
            parentIdx = leftChild; // 자식보다 부모가 크면 최소 힙 구현을 위해 자식, 부모 인덱스에 자녀 인덱스 할당 후 swap 진행
        }
        if (rightChild < heap.length && heap[rightChild] < heap[parentIdx]) {
            parentIdx = rightChild;
        }
        swap(curIdx, parentIdx, heap);
  }
  return heap
}

// 아래 코드는 수정하지 마세요.
const binaryHeap = function (arr) {
  return arr.reduce((heap, item) => {
    return insert(heap, item);
  }, []);
};

const heapSort = function (arr) {
  let minHeap = binaryHeap(arr);
  const result = [];
  // 큐처럼 활용하는구나
    while (minHeap.length > 0) {
        result.push(minHeap[0]); // 최소힙의 root 값을 넣어주고 다시 최소힙 구현
        minHeap = removeRoot(minHeap);
    }
    return result;
};

1) Github > Settings > Developer Settings에서 Client Id와 Client secret key를 생성한다. Authorization callback URL은 나의 웹 앱 URL을 적으면 된다. 2) 생성한 두 정보를 서버의 .env 파일에 저장한다.

Client

App.js

1) Login.js (생략 예정)에서 Github API에 따라 https://github.com/login/oauth/authorize?client_id={내 Client Id}에서 본인 인증 이후에 callback URL로 리디렉션되면서 autorization code를 받게된다. (이후 서버 callback 요청에 req.body로 확인할 수 있다.

class App extends Component {
  constructor() {
    super();
    this.state = {
      isLogin: false,
      accessToken: "",
    };
    this.getAccessToken = this.getAccessToken.bind(this);
  }
  // accessToken을 클라이언트 App.js내 state로 관리하고,
  // getAcceessToken 메소드로 Github에서 넘겨받은 authorization code로 accessToken을 획득한다.
  async getAccessToken(authorizationCode) {
    await axios
    .post('http://localhost:8080/callback', 
    {
      authorizationCode
    })
    .then((data) => {
      this.setState({
        isLogin: true, 
        accessToken: data.data.accessToken
      })
    })
  }

  // componentDidMount는 랜더링 이후 즉시 호출되는 함수이다. 
  // 함수형 컴포넌트의 useEffect Hook과 비슷하다.
  // 시점은 Login 랜더링 후, Mypage 랜더링 후가 되겠다.
  componentDidMount() {
    const url = new URL(window.location.href)
    const authorizationCode = url.searchParams.get('code')
    if (authorizationCode) {
      this.getAccessToken(authorizationCode)
    }
  }
  render() {} // ...생략

Mypage.js

1) https://api.github.com/user 에서 사용자 정보를 받아올 것이다. 2) authorization 헤더에는 Login.js에서 받아온 authorization code를 사용해 획득한 accessToken을 넣어준다. 3) 여러 사용자 정보를 얻을 수 있다.

class Mypage extends Component {

  constructor(props) {
    super(props);
    this.state = {
      images: [],
      name: "", 
      login: "", 
      html_url: "", 
      public_repos: null,
    }
  }

  async getGitHubUserInfo() {
    await axios
    .get("https://api.github.com/user", 
    {
      headers: {authorization: `token ${this.props.accessToken}`}
    })
    .then(data => {
      const { name, login, html_url, public_repos } = data.data;
      this.setState({
        name,
        login,
        html_url,
        public_repos
      })
    })
  }

  async getImages() {
    await axios
    .get(`http://localhost:8080/images`, 
    { 
      headers: {authorization: `token ${this.props.accessToken}`}
    })
    .then((data) => {
      const { images } = data.data
      this.setState({images})
    })
  }

Server

callback.js

1) https://github.com/login/oauth/access_token의 Body에 client id, client secret, authorization code를 전달한다. 2) 전달받은 내용을 data.data에 접근하여 accessToken을 획득하여, 전달한다.

module.exports = async (req, res) => {
  await axios
  .post('https://github.com/login/oauth/access_token', 
  {
    client_id: clientID,
    client_secret: clientSecret,
    code: req.body.authorizationCode
  }, 
  { 
    deaders: {Accept: 'application/json'}
  })
  .then((data) => {
    const accessToken = data.data.access_token;
    res.status(200).json({accessToken})
  })
}

images.js

module.exports = async (req, res) => {
  if (!req.headers.authorization) {
    res.status(403).json({ message: "no permission to access resources" });
  } else {
    res.status(200).json({ images });
  }
};

App.js

1) App 컴포넌트의 isLogin 상태에 따라 Mypage 혹은 Login 컴포넌트를 렌더링합니다. 적절한 props를 Mypage/Login 컴포넌트에 전달합니다.

import React, { Component } from "react";

import Login from "./components/Login";
import Mypage from "./components/Mypage";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      accessToken: "",
    };

    this.loginHandler = this.loginHandler.bind(this);
    this.issueAccessToken = this.issueAccessToken.bind(this);
  }

  // app 화면 전환을 위한 조건
  loginHandler() {
    this.setState({
      isLogin: true,
    })
  }

  // 1) 핸들러를 Login, Mypage에 Props로 전달한다. 
  // 2) 로그인을 통해 accessToken을 획득할 예정이고, 해당 토근을 통해 App.js의 accessToken state값이 변경될 예정이다. 
  // 3) 그 토큰을 Props로 Mypage에 넘겨줄 예정이다.
  issueAccessToken(token) {
    this.setState({
      accessToken: token
    })
  }

  render() {} //...생략
  export default App;

2) Login 컴포넌트의 loginRequestHandler메소드를 사용하여 상위 컴포넌트인 App 컴포넌트의 state를 적절히 변경시킵니다.

Login.js

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userId: "",
      password: "",
    };
    this.inputHandler = this.inputHandler.bind(this);
    this.loginRequestHandler = this.loginRequestHandler.bind(this);
  }

  inputHandler(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  // accessToken을 획득하는 메소드이다.
  // 사용자 id와 pw를 서버 endpoint로 Body로 보낸다. (서버에서 해당 정보의 사용자가 있는지 확인해서 accessToken을 넘겨줄 예정이다.)
  loginRequestHandler() {
    axios
    .post("https://localhost:4000/login", 
    {
      userId: this.state.userId,
      password: this.state.password
    }, 
    {
      'Content-Type':'application/json',
      withCredentials: true // cors 요청을 위해 필요하다.
    })
    .then((res) => {
      this.props.loginHandler(); // 로그인 true로 변경해 주고,
      this.props.accessTokenHandler(res.data.data.accessToken); // 서버에서 data라는 키로 정보를 넘길 예정인데, `res.data`로 접근해야 'data'라는 키에 접근하여 실제 토큰을 획득할 수 있다. 이 토큰은 App으로 전달될 예정이다. 
    }
    ); 
  }
  render() {} //...생략
  export default Login;

Mypage.js

3) Mypage 컴포넌트 accessTokenRequest, refreshTokenRequest 메소드를 구현합니다.

class Mypage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userId: "",
      email: "",
      createdAt: "",
    };
    this.accessTokenRequest = this.accessTokenRequest.bind(this);
    this.refreshTokenRequest = this.refreshTokenRequest.bind(this);
  }

    /*     
    App 컴포넌트에서 내려받은 accessToken props를 authorization header에 담아 요청을 보낸다. 서버에서 해당 토큰을 검증하여, 사용자에게 등록된 토큰이 맞으면 요청하는 정보를 전달해 준다.
    */
  accessTokenRequest() {
    axios
    .get("https://localhost:4000/accesstokenrequest", 
    { headers: {
        Authorization: `Bearer ${this.props.accessToken}`
      }
    }, 
    { 
      withCredentials: true 
    })
    .then((res) => {
      this.setState({
      userId: res.data.data.userInfo.userId,
      email: res.data.data.userInfo.email,
      createdAt: res.data.data.userInfo.createdAt})
    })
  }

    /*
    accessToken이 만료되면 refreshToken을 통해 accessToken을 다시 생성할 수 있어야 한다. 서버에 담긴 refreshToken
    */
  refreshTokenRequest() {
    axios
    .get("https://localhost:4000/refreshtokenrequest",
    { withCredentials: true }
      )
    .then((res) => {
      this.setState({
      userId: res.data.data.userInfo.userId,
      email: res.data.data.userInfo.email,
      createdAt: res.data.data.userInfo.createdAt})
      this.props.accessTokenHandler(res.data.data.accessToken)
    }
    )
  }

Server

1) JWT 활용 방법

1. JWT의 구조
2. 토큰 생성하기

   const jwt = require('jsonwebtoken');
   const token = jwt.sign(토큰에_담을_값, ACCESS_SECRET, { 옵션1: 값, 옵션2: 값, ... });
   // .sign(payload, 비밀키, header)로 토큰 생성

> 3. 토큰 검증하기
```js 
jwt.verify(token, secretkey, 익명함수)

• token: client에게서 받은 token
• secretkey : token 생성 시 사용했던 secretKey
• 3번째 인자로 들어간 익명함수 : 유효성 검사 결과를 처리할 callback 함수

login.js

1) request로부터 받은 userId, password와 일치하는 유저가 DB에 존재하는지 확인합니다.

• 일치하는 유저가 없을 경우 : 로그인 요청을 거절합니다.
• 일치하는 유저가 있을 경우 : 필요한 데이터를 담은 두 종류의 JWT(access, refresh)를 생성합니다. 생성한 JWT를 적절한 방법으로 반환합니다. access token은 클라이언트에서 react state로 다루고 있습니다. refresh token은 클라이언트의 쿠키에서 다루고 있습니다.

module.exports = async (req, res) => {

  // App 클라이언트에서 보낸 id와 pw로 사용자 데이터를 수집
  const userInfo = await Users.findOne({
    where: { userId: req.body.userId, password: req.body.password },
  })

  if (!userInfo) {
    res.status(401).json({data: null, message: 'not authorized'})
  } else {
    const { id, userId, email, createdAt, updatedAt } = userInfo

    // jwt.sign(payload, 비밀키값, header)
    const accessToken = jwt.sign({ id, userId, email, createdAt, updatedAt }, process.env.ACCESS_SECRET, {
      algorithm : "HS256", // 해싱 알고리즘
      expiresIn : "1h",  // 토큰 유효 기간
    });
    console.log('accessToken', accessToken)
    const refreshToken = jwt.sign({ id, userId, email, createdAt, updatedAt }, process.env.REFRESH_SECRET, {
      algorithm : "HS256", // 해싱 알고리즘
      expiresIn : "3h",  // 토큰 유효 기간
    });

    // refreshToken은 쿠키에, accessToken은 응답에 답아 전달한다.
    res.status(200)
    .cookie('refreshToken', refreshToken, {
      domain: 'localhost',
      path: '/',
      httpOnly: true,
      secure: true,
      sameSite: 'None',
    })
    .json({data: {accessToken}, message: 'ok' })
  }
}

accessTokenRequest.js

1) Login 클라이언트에서 get요청을 해당 end point로 autorization 헤더로 accessToken을 보냈다. 2) accessToken은 'Bearer xxxxxx....'와 같이 전달되어 const token = accessToken.split(' ')[1];로 accessToken값만 추출할 수 있다. 2) 해당 accessToken을 jwt.verify로 검증을 한다. callback으로 들어가는 비동기 함수에 의해 data에 토큰 생성에 보냈던 사용자 정보 (payload)의 내용이 들어가게 된다.

module.exports = async (req, res) => {
  const accessToken = req.headers['authorization'];

  if (!accessToken) {
    res.status(400).json({ data: null, message: "invalid access token" })
  } else {
    const token = accessToken.split(' ')[1];

    jwt.verify(token, process.env.ACCESS_SECRET, async (err, data) => {     
      const userInfo = await Users.findOne({
        where: { userId: data.userId },
      })

      if (!userInfo) {
        res.status(400).json({ data: null, message: "access token has been tempered" })
      } else {

        const { id, userId, email, createdAt, updatedAt } = userInfo;

        res.status(200).json({ data: {userInfo: { id, userId, email, createdAt, updatedAt } }, message: "ok" })
      }
    })
  }

refreshTokenRequest.js

1) 로그인 당시 서버는 클라이언트 cookies에 refreshToken을 넣어 주었다. 2) accessToken과 같이 해당 refreshToken을 검증한다. 3) refreshToken 토큰 검증을 통해 얻은 사용자 정보로 새 accessToken을 생성하는 과정이다.

module.exports = (req, res) => {
  const token = req.cookies.refreshToken;

  if (!token) {
    res.status(400).json({ data: null, message: "refresh token not provided" })
  }
  jwt.verify(token, process.env.REFRESH_SECRET, async(err, data)=>{
    if (err) {
      res.status(400).json({data: null, message: "invalid refresh token, please log in again"})
    } else {
      const userInfo = await Users.findOne({
        where: { userId: data.userId }
      });

      if (!userInfo){ 
        res.status(400).json({ data: null, message: "refresh token has been tempered"})
      } else {
        const { id, userId, email, createdAt, updatedAt } = userInfo;
        const accessToken = jwt.sign(
          {id, userId, email, createdAt, updatedAt}, 
          process.env.ACCESS_SECRET, 
          {expiresIn: '1h'}
          );

        res.status(200).json({ 
          data: {
            accessToken, 
            userInfo: { id, userId, email, createdAt, updatedAt } 
          }, 
          message: 'ok'
        });
      }
    }
  });
};

정리

1) 토큰은 클라이언트에 state로 관리되고 있었다. 2) 서버는 소유하고 있던 acceessSecret, refreshSeceret Key를 가지고 토큰 생성 및 검증만 진행한다. 3) refreshToken을 쿠키로 클라이언트에 심어 놓아서, accessToken이 만료되면, refreshToken의 기한 내에 새 accessToken을 생성할 수 있다. 4) JWT (JSON Web Token)을 통해 sign (생성 또는 토큰 암호화), verify (검증 또는 토큰 복호화)를 통해 사용자 정보를 활용한다.

정수를 요소로 갖는 배열을 입력받아 다음의 조건을 만족하는 LSCS*를 리턴해야 합니다.

• LSCS: 주어진 배열의 연속된 부분 배열*의 합을 구한다고 할 때, 이 중 가장 큰 값(Largest Sum of Contiguous Subarray)
• 연속된 부분 배열들: 배열 [1,2,3]의 연속 부분 배열은 [1], [1, 2], [1, 2, 3], [2], [2, 3], [3] 입니다.

- 입출력 예시:

let output = LSCS([1, 2, 3]);
console.log(output); // --> 6

output = LSCS([1, 2, 3, -4]);
console.log(output); // --> 6 ([1, 2, 3])

LSCS([1, 2, 3, -4, 5]);
console.log(output); // --> 7 ([1, 2, 3, -4, 5])

LSCS([10, -11, 11]);
console.log(output); // --> 11 ([11])

- 주의:

효율적인 알고리즘(O(N))으로 해결해야 합니다.

- 풀이:

여러 해결 방식이 있겠지만, 주어진 배열의 요소를 요소의 길이만큼만 조회를 하는 방법을 찾아야 한다. 만약 배열의 첫 요소부터 시작해서 모든 부분 배열을 돌아가려면 이중 반복문을 피할 수 없다. 또는 재귀를 사용할 수 밖에 없을 것이다. 하지만 이 방식으로는 문제를 O(N)으로 해결하기 어렵다.

배열의 요소의 수 중에 음수가 없다면, 가장 큰 부분 배열의 합은 배열 모든 요소의 합일 것이다. 그러나 우리는 음수를 고려해야한다.

1) O(N^2) 풀이 방식

const LSCS = function (arr) {
  let max = -100000;
  for (let i = 0; i < arr.length; i++) {
    let sum = arr[i];
    if (sum > max) max = sum;
    for (let j = i + 1; j < arr.length; j++) {
      sum = sum + arr[j];
      if (sum > max) max = sum;
    }
  }
  return max;
}

문제 조건에서 제시한 최소값을 먼저 max로 지정했다. 모든 부분 배열을 돌기위해 0번째 인덱스에서부터 시작해서 마지막 인덱스까지, 배열의 요소마다 반복문을 다시 돌리면서 max 값을 새로 할당했다.

2) O(N) 풀이 방식

const LSCS = function (arr) {
  let subArrSum = arr[0];
  let max = arr[0];
  for (let i = 1; i < arr.length; i++) {
    subArrSum = Math.max(subArrSum + arr[i], arr[i]);
    max = Math.max(max, subArrSum);
  }
   return max;
}

연속된 구간의 배열의 합이 음수로 나오는 경우, 해당 구간 이후부터 다시 시작할 수 있는 점을 기억하자. 특정 구간의 요소가 아무리 크다고 하더라도 특정 연속 구간의 합이 음수일 경우 최대합를 다시 다음 수부터 확인해야 할 것이다. 부분 배열의 어떤 특정 구간의 집합이다. 해당 특정 구간의 합이 음수가 나올 경우, 해당 값을 버리고 다음 수부터의 구간의 합을 구해보고, 음수가 나오기 전까지의 max와 비교해서 max를 구하는 것이다.

3) DP 풀이 방식 이 방법은 다른 블로그에서 참조한 것이다. 왜 해당 방법이 DP일 수 있을지 고민한 결과, (정확하지 않지만) memoization 방식을 활용해서 DP 알고리즘으로 푼 것이 아닐까 싶다.

const LSCS = function (arr) {
  let cache = [];
  cache[0] = arr[0];
  for (let i = 1; i < arr.length; i++) {
    cache[i] = Math.max(0, cache[i-1]) + arr[i]
  }
  return Math.max(...cache)
};

- 마무리:

LSCS...막막했다. 이번 풀이를 통해, 최대한 발생할 수 있는 가정을 세워보고 문제를 풀어야겠다 생각이 들었다. 수도 코드를 적는 스킬의 개선이 필요했다. 문제를 나눌 수 있을 때까지 나누어 보는 습관을 더욱 키워야 겠다.

Object Relational Mapping의 약자이다. Model을 기술하는 도구이다.

개발 환경에서 데이터베이스에 접근할 수 있도록 하는 중간자 역할이라고 생각하자.

Sequelize ORM

비동기 기반의 Node.js ORM이다. 실제로 async, await 비동기가 기본으로 쓰인다.

나는 이번 Sprint를 통해서,

• Sequelize 설치하기
• 모델 생성 및 MVC 구조 설정하기
• 모델 마이그레이션하기
• CRUD 중 Create, Update 작업하기
• Join 테이블 만들기 (관계 설정)

등을 해보았다.

Sequelize 설치하기

1) 공식문서에 나와있는 대로, 먼저 sequelize를 설치한다.

// Sequlize를 설치하자
npm install --save sequelize

2) Migration을 하려면 sequelize-cli도 설치해야 한다.

우리가 작성한 모델이 실제로 database에 존재하도록 하려면 migration 작업이 꼭 필요하다.

npm install --save-dev sequelize-cli

프로젝트 준비하기

1) 프로젝트를 시작하기 전, 아래 명령어를 통해 우리는 여러 준비 파일을 생성할 수 있다.

npx sequelize-cli init

2) 자동으로 생성되는 4개의 파일 중 config 폴더에는 작업 환경에 대한 정보가 담겨 있다. 기본적으로 development 환경이 설정이 되어있고, mysql 을 사용하는 것으로 되어 있다.

// config/config.json 파일
{
  "development": {
    "username": "root",
    "password": null,
    "database": "database_development",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "database_production",
    "host": "127.0.0.1",
    "dialect": "mysql"
  }
}

// models/index.js에 보면 아래처럼 development가 기본으로 쓰이고 있다는 걸 알 수 있다.
const env = process.env.NODE_ENV || 'development';
const config = require(__dirname + '/../config/config.json')[env];

3) 데이터 베이스 생성하기

// 아래 명령어를 입력하면 현재 기본으로 설정된 데이터베이스(database_development)가 자동으로 생성된다.
db:create

모델 생성 및 마이그레이션

1) url 모델을 먼저 생성하자. model:generate 를 통해 모델과 마이그레이션 파일을 만들 수 있다.

// name과 attribute를 어떻게 설정하는지 관찰하자
npx sequelize-cli model:generate --name url --attributes 
url:string,title:string,visits:integer

// 필드의 다른 속성을 추가할 수 있다. 변경 전, 
visits: DataTypes.INTEGER

// 변경 후,
visits: {
        type: DataTypes.INTEGER,
    defaultValue: 0
}

point: dataValues를 따로 설정해 주지 않으면 각 컬럼의 기본값은 NULL 이다.

2) 마이그레이션 파일을 살펴보자.

'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.createTable('urls', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      url: {
        type: Sequelize.STRING
      },
      title: {
        type: Sequelize.STRING
      },
      visits: {
        type: Sequelize.INTEGER,
        defaultValue: 0
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE
      }
    });
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('urls');
  }
};

테이블 이름이 우리가 모델에서 설정한 url과 달리 urls로 복수형이다. 아래 내용 참고하자.

A model in Sequelize has a name. This name does not have to be the same name of the table it represents in the database. Usually, models have singular names (such as User) while tables have pluralized names (such as Users), although this is fully configurable.

3) 마이그레이션 해보자.

마이그레이션을 진행하면 실제 mysql의 database-development 데이터베이스에 url이라는 테이블이 생성되는 것을 확인할 수 있다. (undo를 진행하면 테이블 사라진다)

// # 마이그레이션 진행하기
npx sequelize-cli db:migrate

// # 마이그레이션 파일 수정이 필요한 경우, 마이그레이션 해제하기
npx sequelize-cli db:migrate:undo

Router → Controller 연결하자

1) app.js 파일에 router 파일을 연결하자.

const express = require('express');
const logger = require('morgan');

const indexRouter = require('./routes/index');
const linksRouter = require('./routes/links');

const app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use('/', indexRouter);
app.use('/links', linksRouter);

module.exports = app;

2) routes/links.js 파일에 라우터 내용을 작성하자. 각 endpoint에 따라 분기할 메소드의를 연결해 주어야 한다.

const express = require('express');
const router = express.Router();
const controller = require('../controllers/links');

router.get('/', controller.get);          // get 메소드 연결
router.post('/', controller.post);        // post 메소드 연결
router.get('/:id', controller.getId)      // get 메소드 중 redirect를 위한 연결   

module.exports = router;

Controller를 작성해 보자

controller는 작성되어 있는 url model를 통해 데이터베이스의 정보를 조회 또는 작성할 예정이다.

그럼 우선 model를 가져오자.

const model = require("../../models").url;

point: 그런데 왜 const model = require("../../models/url") 이라고 작성하면 안 되는 걸까?

사실 url은 ‘models/index.js’ 즉, Model이라는 클래스의 하나의 instance이다.

post /links API 확인하자

• request: payload에 사용자가 입력하는 url을 url 속성에 담아 요청한다.

{
  "url": "https://www.github.com"
}

• response: 방금 생성한 모델의 JSON

{
  "id": 1,
  "url": "https://www.github.com",
  "title": "The world’s leading software development platform · GitHub",
  "visits": 1,
  "createdAt": "2020-07-25T20:07:15.000Z",
  "updatedAt": "2020-07-25T20:07:15.000Z"
}

post 컨트롤러 구현

여기에서 id, createdAt, updatedAt은 자동으로 생성된다. url, title, visits를 레코드로 urls 테이블에 전달해야 한다.

1) url은 req.body를 통해 획득할 수 있으니 pass

2) title은 다른 방법으로 만들어야 한다. sprint에 힌트가 나와있다.

modules/utils.js에 이미 구현되어 있는 두 메소드를 활용할 예정이다.

const {getUrlTitle, isValidUrl} = require('../../modules/utils')

isValidUrl 의 경우 url 검사를 한번 해주는 것 같고, getUrlTitle 은 title을 생성해 주는 것 같다.

const request = require('request');

const rValidUrl = /^(?!mailto:)(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[0-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))|localhost)(?::\d{2,5})?(?:\/[^\s]*)?$/i;

exports.getUrlTitle = (url, cb) => {
  request(url, function (err, res, html) {
    if (err) {
      console.log('Error reading url heading: ', err);
      return cb(err);
    } else {
      const tag = /<title>(.*)<\/title>/;
      const match = html.match(tag);
      console.log(match.length)
      const title = match ? match[1] : url;
      return cb(err, title);
    }
  });
};

exports.isValidUrl = url => {
  return url.match(rValidUrl);
};

// controller에 작성한 post 요청 작업의 식은 아래와 같다.
// 1. 먼저 url 유효성 검사를 하고, 유효하지 않은 경우 400을 반환하자
// 2. 유효한 url의 경우 가져온 getUrlTitle 메소드를 활용하여 얻은 title을 반환하자

post: async (req, res) => {
        const url = req.body.url;
        if (!isValidUrl(url)) return res.stauts(400).send('Not Found')

                // getUrlTitle 두 번째 인자는 콜백함수였다. 콜백함수에 우리가 작업하고자 하는 식을 넣어 주자.    
        getUrlTitle(url, async (err, title) => {
            if (err) return res.sendStatus(400);

            // sequelize API 문서를 통해 "조회 또는 생성"하는 문법을 찾았다.
            // title 값을 받아옴
            // title을 url 모델의 title 값으로 => 레코드 생성
            // 만약에 이미 해당 url이 데이터베이스에 존재한다면 => 레코드 조회
             model.findOrCreate({
                where: {
                    url 
                },
                defaults: {
                    title
                }
            })
            .then(([result, created]) => {
                if (created) {
                    return res.status(201).json(result); // created
                } else {
                    return res.status(201).json(result); // find
                }
            })
            .catch((err) => req.sendStatus(500))
        })
    }

model.findOrCreate는 특정 옵션에 해당하는 엔트리를 찾지 못한 경우, 옵션 내용 + defaults에 들어간 내용으로 레코드를 생성하게 된다. 그것이 result 객체로 생성이 된다. (다른 곳에서 생성한 getUrlTitle 함수를 가져와서 그 인자에 콜백함수 형식으로 쿼리문을 실행하는 것을 이해하기 굉장히 오래 걸렸다)

3) visits에는 기본값이 있으니 pass

get 컨트롤러 구현

post보다 어렵지 않았다. findAll() 은 SQL syntax인 select * from 과 동일하게 작동한다.

get: async (req, res) => {
        try {
            const result = await model.findAll();
            return res.status(200).json(result)
        } catch (err) {
            return res.sendStatus(500);
        }
    }

getId 컨트롤러 구현 (redirect 기능)

1) model.findByPk를 통해 params로 전달된 id값으로 레코드를 찾는다.

2) 방문 횟수 증가를 위해 model.increment를 사용한다. { {늘리고자 하는 필드: 늘리는 수의 크기} , {where : 조건}}

3) redirect를 구현하기 위해 Express 문법을 사용한다.

getId: async (req, res) => {
           // id라는 파라미터
          // 해당 파라미터를 이용해서 url 모델엘 조회를 해야함
        const id = req.params.id;
        const target = await model.findByPk(id);
        await model.update({visits: visits + 1};
        if (!target) {
          res.sendStatus(204);
        } else {
          const url = target.url;
          target.update({
              visits: target.visits + 1
          })
          try {
            res.status(302).redirect(url)
          } catch (err) {
            res.sendStatus(500)
        }
    }

Association을 통한 JOIN 테이블 구현해보자

join할 추가 모델을 생성하자

npx sequelize-cli model:generate --name user --attributes 
name:string,email:string,age:integer

urls 테이블에 userId (user 테이블의 id를 참조) 필드를 생성하자

migration skeleton 파일을 하나 생성하여 기존 테이블을 업데이트할 수 있다

npx sequelize-cli migration:generate --name url-skeleton

생성한 skeleton 파일에서 필드를 하나 추가하고, FK 설정을 해주자

'use strict';

module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.addColumn('urls','userId',Sequelize.INTEGER);

      {
        type: Sequelize.INTEGER,
        references: {
          model: 'users',
          key: 'id'
        },
        onUpdate: 'CASCADE',
        onDelete: 'CASCADE'
      }
    )
  },

  down: async (queryInterface, Sequelize) => {
    return queryInterface.removeColumn(
      'urls',
      'userId'
    )
  }
};

Structured Query Language: 구조화된 쿼리 언어

대표적인 관계형 데이터베이스(RDBMS), MySQL로 Schema를 설계하고, SQL을 사용하여 데이터를 persistently하게 저장하는 방법을 학습하자

• 3 Tire Architecture: 클라이언트 - 서버 - 데이터베이스
• persistently(영속성) 개념
• 데이터베이스의 종류 (MySQL, NoSQL)
• SQL : 주요 문법 (조회, 삽입, 갱신, 삭제), 통계를 위한 쿼리, 스키마 디자인 (앱에 필요한 테이블과 필드, 관계), 1:N, N:N 관계를 이해하고 데이터베이스 테이블 조작 (Foreign Key, Primary Key)

SQL은?

하나의 데이터베이스 언어이다. 주로 관계형 데이터베이스에서 사용된다(MySQL, Oracle, PostgreSQL 등).

데이터베이스에 쿼리를 보내, 원하는 데이터를 가져오거나 삽입할 수 있다. 구조화된 테이블을 사용한다는 점이 NoSQL과 같이 문서 지향 데이터베이스와 차이점이다.

ACID

트랜잭션? 여러 개의 작업을 하나로 묶은 실행 유닛.

여러 작업 중 하나라도 실패하면, 모든 작업을 실패한 것으로 판단.

• Atomicity (원자성)

트랜잭션의 모든 작업이 성공하거나 실패하여 결과를 예측할 수 있다. 여러 작업이 모두 성공한 경우에만 데이터를 활용하고, 하나 작업이 실패하면 묶여 있는 모든 작업을 실패한 것으로 만들어 기존 데이터를 보호한다.

• Consistency (일관성)

데이터베이스의 상태가 일관되어야 한다.

예를 들어, 계좌를 만들 때 계좌주의 실명 없이는 계좌를 개설할 수 없다. 모든 계좌에는 계좌주의 실명이 존재하기 떄문이다.

• Isolaction (격리성, 고립성)

모든 트랜잭션은 다른 트랜잭션으로부터 독립되어야 한다.

두 사람에게 동시에 계좌 이체를 할 때, 각 계좌로 이체를 하는 행위가 서로에게 영향을 미쳐서는 안된다.

• Durability (지속성)

만약 하나의 트랜잭션이 성공적으로 수행되면, 해당 작업의 로그가 영구적 남아있어야 한다.

예를 들어, 계좌 이체를 성공한 후 은행 서버에 오류가 발생하더라도 해당 이체는 내역에 남지만, 계좌 이체 중에 은행 서버에 오류가 발생하면 이체 시도는 실패가 되고 원래 데이터의 상태로 복귀한다.

관계형 데이터베이스 vs 비관계형 데이터베이스

관계형 (SQL)

테이블의 구조와 데이터 타입을 사전에 정의한다. 원하는 정보를 쿼리할 수 있다 ⇒ 스키마가 뚜렷하다.

비관계형 (NoSQL)

데이터가 고정되어 있지 않은 데이터베이스.

관계형 데이터 - 데이터를 입력할 때 스키마에 맞게 입력 비관계형 데이터 - 데이터를 읽어올 때 스키마에 따라 읽어 옮 (schema on read)

차이점

• 데이터 저장(Storage):

관계형 - SQL을 이용하여 테이블에 데이터 저장 비관계형 - key-value, document, wide-column, graph 등의 방식

• 스키마(Schema):

관계형 - 고정된 형식의 스키마가 필요 비관계형 - 동적으로 스키마의 형태 관리 가능

• 쿼리(Querying):

관계형 - SQL과 같이 구조화된 쿼리 언어 사용 비관계형 - 데이트 그룹을 조회하므로, 구조화되지 않은 쿼리 언어로 데이터 요청 가능

• 확장성(Scalability):

관계형 - 수직적으로 확장 (하드웨어 성능을 많이 사용 → 비용이 높음) 비관계형 - 수평적으로 확장 (저렴한 서버로 증설하거나 클라우드 서비스 이용 가능 → 비용이 저렴)

Schema?

데이터베이스에서 데이터가 구성되는 방식과 서로 다른 엔티티 간의 관계에 대한 설명. 즉, “데이터베이스의 청사진”

entities?

고유한 정보의 단위 (테이블);

entities간의 관계?

예) 교수 - 수업 - 학생 한 교수가 여러 수업을 가르친다 ⇒ 교수 - 수업 (1:N)

관계의 종류

• 1:1

사용자와 전화번호부의 관계

• 1:N

교수와 수업의 관계. 한 교수가 여러 수업을 진행할 수 있으나, 한 수업을 여러 교수가 진행할 수 없다

• N:N

고객과 여행 패키지의 관계. 한 고객이 여러 패키지를 예약할 수 있고, 하나의 패키지를 여러 고객이 예약할 수 있다

이런 관계의 경우 Join table을 만들어 관리한다.

• 자기참조 (self referencing)

같은 테이블 내에서, 예를 들어 추천인이 누구인지 파악하는 경우.

한 명의 유저는 한 명의 추천인을 가질 수도, 여러 명의 유저가 한명의 추천인을 가질 수도 있어서 1:N 관계와 유사하다고 볼 수 있으나, 1:N 관계는 서로 다른 테이블에서 표현하는 방법

Primary key

고유한 값 (id 뿐 아니라 다른 여러 컬럼에도 부여 가능하다)

Foreign key

다른 키를 참조하는 키