자바스크립트 알고리즘 문제 풀이 주차 회고

이번 주차에서는 지금까지 배운 자바스크립트의 기초를 가지고 다양한 알고리즘 문제를 풀고 페어 프로그래밍을 해보았다.

---

페어 프로그래밍 : https://ko.wikipedia.org/wiki/%ED%8E%98%EC%96%B4_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D

알고리즘 : https://ko.wikipedia.org/wiki/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98

---

알고리즘 문제를 풀어보는 것은 컴퓨터가 주어진 규칙에 맞도록 동작하도록 명령하는 방법을 익히는데 도움이 되었다.

처음에는 간단한 문제도 어떻게 답을 작성하면 좋을지 답답했지만, 문제를 하나 둘 풀고 다른 사람의 풀이도 리뷰하며 사고가 넓어지는 것을 느꼈다.

잘 다루지 못했던 reduce()와 filter()도 점점 익숙해지게 되었다. 페어 프로그래밍 과정에서는 진행자 역할을 할때는 문제 해결을 위한 코드 작성에 집중할 수 있었고 관찰자 역할을 할 때는 코드를 전체적으로 바라보며 개선점이나 아이디어를 떠올리는데 집중함할 수 있었는데, 이 과정에서 지금 내가 작성하고 있는 코드 한줄만 바라보는 것이 아닌 전체적인 코드를 바라보는 것이 앞으로 큰 도움이 될 것이라는 것을 어렴풋이 느끼게 되었다.

한주간 풀이한 문제는 gitHub에 커밋해 두었다. 재미있는 문제가 많았지만 글이 길어지고 이 문제들의 답은 다른 블로그에도 많이 게시되어 있기에 지면을 아끼기 위해서 링크로 대체하려한다.

https://github.com/Hira-Yuki/-algorithm_quiz

알고리즘 문제를 풀이하면서 특별히 어려운 문제들이 몇 있었는데 대부분 수학적인 지식이 필요한 문제들이거나 이차원 배열과 같은 문제들이 특히나 어려웠다.

아무래도 수학 지식이 부족한 탓에 어렵게 느껴지는 것을 깨닳았는데, 지금이라도 수학의 정석을 정독해야할지 고민된다.

다음 주부터는 본격적으로 React를 학습하게 된다.

Virtual DOM, props, state에 대한 학습이 시작될 것 같은데 함께하는 동료의 발목을 잡는 일만큼은 피하고 싶어 예습을 해 보기로 했다.

What is the Virtual DOM? Excuse me, what is the DOM?

Virtual DOM 알아보기 전에 우선 DOM이 무엇인지부터 알아야했다.

자바스크립트 입문서의 목차에서 보긴 했지만 아직 진도를 나가지 못했기 때문이다.

DOM(Document Object Model)

DOM 이란?

프로그래밍 언어로 HTML, XML 등의 마크업 문서를 제어하기 위한 인터페이스이다.

HTML의 모든 요소를 객체로 변형하고 이들 객체의 프로퍼티와 메소드를 사용하여 HTML 문서의 내용, 구조, 스타일 등을 조작할 수 있다.

자바스크립트를 이용해서 HTML 문서를 동적으로 조작할 수 있지만, DOM은 성능에 영향을 미치므로 최대한 효율적으로 사용해야한다.

Virtual DOM

Virtual DOM은 React와 같은 UI 라이브러리에서 사용되는 개념으로, 실제 DOM과 동일한 구조를 가지는 가상의 DOM을 생성하여 이를 조작하고, 최종적으로 실제 DOM에 반영하는 기술이다.

React는 UI 상태 변화가 일어날 때마다 실제 DOM을 직접 조작하지 않고 가상 DOM을 업데이트하고, 이를 이전 가상 DOM과 비교하여 변경된 부분만 최종적으로 실제 DOM에 반영할 수 있다. 실제 DOM 조작을 최소화하고, 불필요한 랜더링을 줄여서 성능을 향상 시킬 수 있다.

props

props는 React 컴포넌트에서 사용되는 단축어로, "properties"의 줄임말입니다.

컴포넌트 간에 데이터를 전달하는 데 사용되는 일종의 매개변수이다. React에서는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있다.

React에서 props는 불변성을 유지합니다. 따라서, 자식 컴포넌트에서 props 값을 변경하는 것은 불가능합니다. 이러한 구조로 인해, React는 데이터의 흐름이 단방향으로 유지되며, 이를 통해 앱의 유지보수와 디버깅을 쉽게 만듭니다.

state

React 컴포넌트의 state는 컴포넌트 내에서 유지되는 상태를 의미합니다. state는 컴포넌트가 렌더링되는 동안 변경될 수 있는 데이터를 저장하는 객체입니다.

React에서 state를 사용하면, 컴포넌트의 상태를 변경하면서 새로운 UI를 렌더링할 수 있습니다. 일반적으로, state는 사용자 인터랙션에 응답하거나, 데이터 로딩 상태 등과 같은 컴포넌트의 내부 상태에 관련된 값들을 저장합니다.

아래 예제는 count 변수를 state에 저장하고, 버튼을 클릭할 때마다 count 값을 증가시키고, 변경된 state를 다시 렌더링합니다.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

state는 컴포넌트 내에서 변경할 수 있으며, 이에 따라 React는 변경된 state를 기반으로 다시 렌더링합니다. 이를 통해, 컴포넌트의 동적인 UI를 구현할 수 있습니다.

---

잠시 미루어 두었던 자바스크립트 문법을 다시 펼쳐 마저 살펴볼 필요가 있을 것 같다.