알고리즘 문제 풀이를 하면서 중복된 요소를 제거하기 위해서 Set 자료구조를 자주 사용하였다.
그런데 이 Set 자료구조의 사용법에 대해서 자세히 설명하라고 하면 설명할 수 없을 것 같다는 생각에 자바스크립트에서 자주 사용되는 자료구조인 Set과 Map 자료구조의 사용법에 대해 비교해서 정리해가며 공부를 해보려고 한다.

Set

Set은 value들로 이루어진 집합이다. Array와는 다른점은 같은 value를 두 번 포함할 수 없다는 것이다. 따라서 보통 중복을 제거하고자 할때 이 Set 자료구조를 많이 사용한다.

Read More

Thought of the day

아무리 가까운 길이라도 가지 않으면 도달하지 못하며 아무리 쉬운 일이라도 하지 않으면 이루지 못한다.
- 채근담

오늘은 아침 5시 30분에 운동을 하고 07시부터 공부를 시작했다.
오늘도 알고리즘 문제와 함께 하루를 시작해보려고 한다.:) 오늘 하루도 화이팅해보자.

TO DO LIST

• 백준 알고리즘 문제풀기

  • 기본 알고리즘 문제 10문제 풀이 (4/10 완료)
    Efficiency(Two pointer algorithm, Sliding window, Hash) ~

• TDD Practice with NodeJS

  • #Issue 9 ~ (부분 완료 - 진행중...)

• 블로그 포스팅

  • JavaScript의 Set()과 Map()에 대해서 블로그 포스팅하기 (완료)
  • Node.js TDD Practice / jest.fn()과 node-mocks-http에 대해서 블로그 포스팅하기 (완료)

  Read More

Express.js + MongoDB

이전에 배웠던 NodeJS의 내용을 복습하기 위한 목적으로 간단한 앱을 만들어 본 적이 있는데 만든지 시간이 좀 지나서 다시 상기시킬 겸 Express.js + MongoDB의 형태를 TDD 방식으로 연습을 해보려고 한다.

React도 TDD 방식으로 개발하는 방법에 대해서 공부를 해보며 실습을 해보았는데, NodeJS도 JavaScript 기반이기 때문에 Jest라는 공통 라이브러리를 사용해서 테스트 코드를 작성한다.

이미 React를 위한 단위 테스트 코드를 작성해 본 경험이 있기 때문에 테스트 코드 작성의 개념적인 부분과 작성방법은 다시 복습하는 느낌이었다.

처음에 테스트 코드를 작성했을때에는 이전에 개발을 했을때 다른 언어로 단위 테스트 코드를 작성해 본 경험이 있었음에도 생각보다 익숙해지는데 여러번 반복이 필요했다.
요즘 새로운 것들을 스스로 학습하면서 느끼지만, 이 프로그래밍이라는 언어는 사람관계와 비슷한 점이 많은 것 같다.

Read More

기본 알고리즘 문제 Pseudo code + JavaScript code

이번에 풀어 본 기본 알고리즘 문제는 완전탐색 알고리즘으로 이름에서 유추해 볼 수 있듯이 가능한 모든 경우의 수를 비교해서 풀이하는 방법의 알고리즘 기법이다.

이전에 이 Brute force 알고리즘에 대해서 포스팅한 적이 있다.

오늘 풀어 본 멘토링 문제도 이 완전탐색을 기반으로 풀어야 해결할 수 있는 문제였다.

문제의 조건은 다음과 같다.

총 4명의 학생이 N번의 테스트를 응시해서 각 테스트 별로 등수가 매겨진다. A와 B학생이 있다고 가정했을때, A학생이 B학생의 멘토가 되기 위해서는 시행된 모든 테스트에서 A학생은 B학생보다 등수가 우위에 있어야 한다.
이러한 조건으로 각 테스트별 해당 학생의 등수가 비교되는 학생보다 등수가 우위에 있는지 비교를 하고 우위에 있다면 count값을 증가시켜 count값이 응시하는 테스트 수와 같다면 멘토, 멘티의 관계가 성립되기 때문에 결과로 출력할 answer값을 증가시켜 값을 누적하도록 하면 해결할 수 있는 문제였다.

Read More

기본 알고리즘 문제 Pseudo code + JavaScript code

내가 처음 풀이한 코드인데 소수인지 아닌지의 판단을 1부터 자기자신의 숫자 범위내의 숫자로 나눴을때 0으로 나누어 떨어지는 경우의 수가 2인 경우(1과 자기자신)에 결과 리스트에 담아서 정답을 출력하였다.

나의 풀이에서는 1부터 자기자신의 숫자까지 모두 순회를 하였는데 이렇게 순회를 할 필요가 없다.
2부터 자기자신의 제곱근까지의 범위의 숫자로 나눠서 0으로 떨어지는 경우가 있다면 이는 소수(Prime number)가 아니기 때문에 이런 식으로 문제를 해결할 수도 있다.

Solution 1

Read More

Thought of the day

어떠한 위대한 일도 하루 아침에 이루어지지 않는다. No great thing is created suddenly.
- 에픽테토스 / Epiktetos

오늘은 아침 6시에 알고리즘 문제와 함께 하루를 시작했다. 어제 새로 구매한 휴대용 확장 모니터를 새롭게 설치해서 써봤는데 역시 갓성비로 유명한 제품이라 그런지 대단히 만족스럽다.:)
사실 밖에서 코딩할때나 다양한 작업을 동시에 할때 화면이 부족하다고 느꼈는데 너무 좋은 것 같다.
그래도 두 달이라는 시간동안 목표했던 좋은 습관 만들기를 달성해서 지금은 공부를 하는 것이 아니라 그냥 밥 먹는 것 처럼 당연한 나의 생활패턴의 하나로 내 생활에 스며들은 것 같다.

이러한 공부습관이 나중에 회사를 다니면서도 좋은 습관의 일부로 자리잡아 좋은 개발자로 성장하는데 도움이 되었으면 좋겠다.

Read More

본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 NodeJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.

Front-end

Front-end에서 post방식으로 body에 데이터를 담아 보내는 경우,

1
2
3
4
5

// front-end에서 body를 함께 Request를 보내는 경우,
axios.post('/products', {
  name: 'Lee Hyungi',
  description: 'Hi!'
});

Read More

이번 포스팅에서는 앞서 포스팅한 이벤트 전파(Event propagation), 캡쳐링(Capturing)과 버블링(Bubbling)과 매우 밀접한 관련이 있는 이벤트 위임(Event delegation)에 대해서 정리를 해보려고 한다.

이벤트 위임(Event delegation)?

이벤트 위임은 Vanilla JS로 웹 앱을 구현할때 자주 사용하게 되는 코딩 패턴이다.
이벤트 위임은 간단하게 말하자면 '하위요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식이라고 정의할 수 있다.

아래에 간단한 TO DO LIST 예시 코드를 작성해보았다.

1
2
3
4
5
6
7
8
9
10
11

<h1>TO DO LIST</h1>
<ul class="itemList">
  <li>
    <input type="checkbox" id="item1" />
    <label for="item1">Learn about event delegation</label>
  </li>
  <li>
    <input type="checkbox" id="item2" />
    <label for="item2">Event delegation pattern</label>
  </li>
</ul>

1
2
3
4
5
6

const inputs = document.querySelectorAll('input');
inputs.forEach((input) => {
  input.addEventListener('click', (event) => {
    console.log('clicked');
  });
});

만약에 아래와 같이 새로운 리스트 아이템을 추가해준다면, 이전의 input태그는 정상적으로 이벤트가 동작하지만 새롭게 추가된 input태그는 이벤트가 적용되지 않은 것을 볼 수 있다.

이벤트를 적용할 당시에 단 두개의 input 태그만 존재했기 때문이다.

Read More

Thought of the day

어떠한 위대한 일도 하루 아침에 이루어지지 않는다. No great thing is created suddenly.
- 에픽테토스 / Epiktetos

TO DO LIST

• TDD Practice with NodeJS

  • Github에 프로젝트 Repository 생성하기 (완료)
  • 초반 Project tasks 정리하기 (완료)

• 백준 알고리즘 문제풀기

  • 기본 알고리즘 문제 10문제 풀이 (예정)

• 블로그 포스팅

  • Event delegation 관련 블로그 글 포스팅하기 (완료)
  • Closure 에 대해서 공부하고 블로그 포스팅하기 (예정)
    

Read More

이번 포스팅에서는 이벤트 전파(Event propagation), 캡쳐링(Capturing)과 버블링(Bubbling)에 대해서 정리를 해보려고 한다.

이벤트 전파(Event propagation)?

HTML태그는 중첩된 구조로 되어있다. 따라서 이벤트 또한 중첩적으로 장착될 수 있기 때문에 이러한 경우에 어떠한 순서로 이벤트 핸들러들을 호출(실행)할 것인가에 대한 순서에 대한 규약이 바로 이벤트 전파라고 할 수 있다.

만약 상위 HTML 요소에 이벤트를 주고 그 하위 요소들에도 이벤트를 주었을때

상위 HTML 요소에 적용한 이벤트 핸들러가 가장 먼저 호출이 되고 점점 내부로 들어오면서 가장 하위 요소(target element)의 이벤트 핸들러가 호출되는 형태가 된다면 이를 이벤트 캡처링(Event Capturing)이라고 한다.

그리고 가장 하위(target element) 요소에 적용한 이벤트 핸들러가 가장 먼저 호출되고, 그 상위 element에서 그 상위 element로, 그리고 상위 element로 타고 올라가면서 이벤트가 호출되는 것을 이벤트 버블링(Event Bubbling)이라고 한다.

캡처링(Capturing)과 버블링(Bubbling)

앞서 이벤트 전파의 정의에서 캡처링과 버블링의 방향성에 대한 정의에 대해서 간단하게 살펴보았다.
웹 브라우저의 이벤트 모델은 캡처링과 버블링, 모두를 지원한다.
(하지만 이벤트 캡처링은 예전 IE버전에서는 지원되지 않고 있다)

캡처링과 버블링은 서로 비슷하지만 정반대의 방향성을 가지며, 버블링이 이벤트 전파에서 실세라고 할 수 있다.

캡처링을 사용하는 것은 매우 드문 편이지만 이벤트가 전달되는 흐름에 있어 유용한 개념이기 때문에 알아두면 유용하다.

Read More