페어프로그래밍 level 2 회고

카테고리 Pair Programming, level 2

페어프로그래밍 2 최종 회고

코드의 가독성

  • 코드가 간단하거나 짧다고 가독성이 무조건 좋은 것은 아니다. 중복되는 코드가 있더라도 가독성이 좋을 수 있다.

  • 클린 코드란 것은 없다. 다만 좋은 코드란, 맥락을 모르는 다른 사람이 쉽게 읽을 수 있도록 코드를 작성하는 것이 중요하다.

  • 가독성이 좋아지려면 같은 역할을 하는 것들 끼리 모아두는 것이 가독성을 높인다.

  • 현업에 가게되면 지금처럼 코드에 대한 퀄리티를 생각할 여건이 조성되지 않을 수 있다. 그러니 지금부터라도 좋은 습관을 가지는 것이 중요하다.

큰 일을 해결하면 작은 일은 알아서 해결되리라

  • 작은 부분에 몰두하여 그것을 해결하려 하지 말고 요구사항을 보고 큰 부분부터 해결해나가자.

  • 전체의 구조를 한곳에서 모아서 생각하지 말고 각자의 역할을 생각하며 코딩을 하자.

ex) 데이터를 변경하면 setState 함수가 실행된다 -> setState 함수가 실행되면 render가 실행된다….

Test의 중요성

  • 리팩터링을 할 때는 test를 꼭 같이 하면서 진행해야한다.

  • 리액트를 배우고 나면 꼭 같이 배워보자!

댓글 공유

페어프로그래밍 level 2 기술적 회고

카테고리 Pair Programming, level 2

1. scrollSide

불필요한 서버 요청을 최소화 하자.

  • 토글이 될 때마다 로컬스토리지에 저장되는 것은 서버에 불필요한 요청이므로 사용자가 브라우저를 종료할 때, 로컬에 저장되도록 한다. 이와 마찬가지로 서버에 데이터를 가져올 때도 가져온 데이터를 변수에 담아서 그 변수를 사용한다.
    • 서버에 요청을 최소화하자!
    • 서버 요청을 최소화하기 위해 localStorage에서 값을 가져올 때는 DOMContentLoaded 이벤트가 발생할 때 가져온다.
    • localStorage에 값을 저장할 때는 페이지를 나가거나 새로고침했을 때 발생하면 되므로 beforeunload 이벤트 핸들러를 사용하였다.

2. tictactoe

얕은 복사를 하게 되면 접근자 프로퍼티가 제대로 복사되지 않는다.

  • getWinner 함수는 상태값을 가지고 winner가 있는지? 있다면 누구인지를 반환해준다. state에서만 사용되는 함수이므로 접근자 프로퍼티로 사용하여 응집도를 높이는 것이 좋다고 판단하였다.

    • 하지만, setState에서 newState로 재할당이 이루어지면서 접근자 프로퍼티가 제대로 복사되지 않는 문제가 발생하였기 때문에 다시 원래대로 돌려놓았다.
    • 아니면 재할당을 할 때, 접근자 프로퍼티를 제외한 즉, key,value 쌍이 있는 값만 재할당을 해주는 방법도 있다.

  • 즉시실행함수로 감싸서 정보은닉을 하려고 하였지만 정보 은닉만을 위해서 tictactoe를 전부 즉시실행함수로 만드는 것은 어색하다. 왜냐하면 즉시실행함수가 root 컨테이너를 참조하고 있기 때문에 독립적이라고 할 수 없는데 응집시켜놓은 것으로 보여지기 때문이다.

    • tictactoe에 Container를 건네주고 컴포넌트로 만들었다.

3. accordion

  • toggle 함수에서 옵션을 주는 경우와 기본값인 경우를 리팩토링으로 나눠보려고 하였는데 더 나은 방법이 떠오르지 않아 그냥 두었다.

4. drag & drop

  • dragleave 이벤트와 dragenter 이벤트가 거의 동시에 발생하는데, draggable 요소의 자식 요소에 마우스 포인터가 될 때도 두 이벤트가 발생하여 over 클래스가 붙혔다 떨어져 깜빡이는 현상 발생
    • dragleave 이벤트를 제거하고 dragenter 이벤트에 toggle을 달아주어 querySelectorAll(’li’)로 개선하였다.
    • dropzone 바깥에서 drop을했을 때 over 클래스가 제거되지 않는 문제가 발생하였는데 dragleave 이벤트를 제거했기 때문이다. dragend 이벤트로 대신 구현하였다.
    • dragleave 와 dragenter 발생시 toggle 메서드로 달아주는 방법도 있다.

5. analog clock

  • 숫자배열 하드 코딩하는 것 보다 array.from 을 사용하면 각 요소에게 콜백함수를 줘서 map 함수 사용을 제거할 수 있다.
  • timeToDeg 함수의 return 값을 객체형태로 바꿈
    • 인자가 많아지면서, 구조분해 할당 할 시 더 안정적임

6. star rating

  • querySelectorAll을 변수에 미리 담아줌
    • 렌더링이 한번만 되고 이벤트 발생시마다 DOM API를 호출할 필요가 없기 때문
  • array.from 콜백처리하여 map을 제거

7. calendar

  • background 클릭시 모든 캘린더를 hidden 하는 역할은 input이나 calendar에 종속된 역할이 아님
  • 상태들을 state 객체로 묶어서 관리
    • state 변경 함수를 거치지 않고 수정하는등의 부수효과를 막기위해
  • 이벤트 핸들러 내의 내용을 함수로 추출함
    • 이벤트 핸들러는 간단히 흐름을 파악할 수 있게 해주고, 자세한 동작은 함수에 정의하는 것이 가독성이 좋다고 생각함.

8. newsviewer

  • viewport를 줄여서 observer-target이 한 화면에 보이면 intersectionObserver API에 문제를 발생한다. scrolling해도 데이터를 가져오지 못한다.
    • 뷰포트 크기를 계산하여 window.innerHeight와 observer-target의 Y를 계산하여 나눈 값만큼 데이터를 fetch 시켜줘서 화면 비율이 크든 작든 뷰포트에 맞게 데이터를 가져와야한다. 즉, viewport가 확대된 상태면 Math.floor(window.innerHeight / observer-tagetY) 갯수만큼 fetch를 시켜줘서 화면크기에 맞게 초기 렌더링을 해줘야 한다.
    • element.getBoundingClientRect() 로 element의 뷰포트 위치를 구할 수 있다.

나의 부족한 점

  • 어떤 문제가 발생했을 때, 문제의 원인을 찾지 못한다.
    • 해당 문제가 발생한 원인을 제대로 알지 못하여 어떤 부분을 수정해야할지 찾기 어렵다.
  • 가치판단이 잘 서지 않는다. A, B가 있을 때 어떤 방법이 더 나은 것인지 선택하기 어렵다. 기준이 나의 생각이라고는 하는데, 남의 얘기를 들어보면 그것도 맞는 것 같다.

소감

내일이면 페어프로그래밍2도 끝난다. 페어1을 할 때보단 그래도 조금 실력이 늘었다고 생각하지만, 아직 전체적인 틀을 생각하는 연습이 필요하다고 생각했다. 또한, 주어진 요구사항에 맞는 한가지일을 구현하려고 하지 않고 다른 환경까지 고려하는 행동때문에 코드 작성하기를 망설이는 행동도 조금 나아져서 다행이다.

나보다 훨씬 잘하는 짝과 함께 해서 진도도 빠르게 나가고 배운 것이 많아서 좋았다. 서로 의견을 편하게 말하면서 코딩을 하다보니 재미도 경험도 더 많이 쌓을 수 있어서 좋은 경험이라고 생각한다. 다만 내가 새로운 지식을 얻기 위해서는 내가 가진 지식을 100% 이해하고 다른 사람에게 설명할 수 있을 정도로 알고 있어야 하므로, 내가 배운 지식을 기록만 하지말고 최대한 다른 사람과 의견을 공유하는 방향으로도 나가봐야겠다고 생각이 들었다.

나중에 회사에 취업하게 되어도 이런 개발 환경이 갖춰진 회사에서 열심히 배워서 역량을 키워보고 싶다!

댓글 공유

drag이벤트 상태관리

카테고리 Pair Programming, level 2

1. drag 상태 관리

dragstart의 origin과 drop의 target 노드를 전역 상태에서 관리하면 setState로 변경될 때마다 리렌더링 발생한다. 요구사항에서는 DOM 변경만 하고 drop 했을 때 상태를 변경하라고 하였으니 전역 상태로 관리해주면 안된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class List extends Component {
  constructor(id) {
    super();
    this.id = id;
    this.$origin = null;
    this.$target = null;
  }

  addEvent() {
    return [
      this.createEvent({
        type: "dragstart",
        selector: ".list-container",
        handler: (e) => {
          this.$origin = e.target.closest(".list-container");
          e.dataTransfer.effectAllowed = "move";
        },
      }),
      this.createEvent({
        type: "dragenter",
        selector: ".list-container",
        handler: (e) => {
          if (this.$origin !== e.target.closest(".list-container")) {
            this.$target = e.target.closest(".list-container");
            this.swap(this.$origin, this.$target);
          }
        },
      }),
    ];
  }
}
  • drag & drop이 발생하는 컴포넌트에서 지역 변수로서 관리해주면 된다.

2. 이벤트 등록 조건 수정

각자의 컴포넌트들을 window에 등록해줄 때, 이벤트 위임이므로 걸러주기 위해 matches를 사용하였는데, 이 경우 이벤트가 발생한 요소만 해당되고 이벤트 발생한 부모 요소를 찾을 수 없어 list 요소에 drag 이벤트가 발생하지 않는 문제가 발생하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Component
checkEvent() {
    if (this.addEvent) {
      this.addEvent().forEach(({ type, selector, handler }) => {
        if (events.find(event => event.type === type && event.selector === selector)) return;

        if (selector === '') {
          window.addEventListener(type, e => handler(e));
        } else {
          window.addEventListener(type, e => {
            if (!e.target.matches(selector) && !e.target.closest(selector)) return;
            handler(e);
          });
        }

        events = [...events, { type, selector, handler }];
      });
    }
  }
  • 자신을 포함한 부모쪽에서 selector를 찾을 수 있기 때문에 closest도 추가해준다.

3. DOM만 변경하고 상태는 변경시키지 않는 경우

list 드래그 시 dragenter가 발생할 때, DOM을 직접 변경하여 화면에 list가 서로 바뀐 것처럼 보이도록 구현하였다. 하지만, drop을 발생시켰을 때, 1번 list에서 2번 리스트로 dragenter 되었다가 다시 1번 list로 드래그 한체로 돌아와서 drop을 하면 DOM 상에서 바뀌지 않았는데, 상태가 바뀐 것으로 감지하여 상태 lists의 순서를 변경하는 문제가 발생하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// state
const arrangeList = (idOrder) => {
  console.log(state);
  setState({
    lists: state.lists.sort((a, b) => {
      const aOrder = idOrder.findIndex((id) => id === a.id);
      const bOrder = idOrder.findIndex((id) => id === b.id);
      return aOrder < bOrder ? -1 : aOrder > bOrder ? 1 : 0;
    }),
  });
  console.log(state);
};

// List Component
class List extends Component {
  addEvent() {
    ...
    this.createEvent({
        type: 'drop',
        selector: '.list-container',
        handler: e => {
          e.stopPropagation();
          arrangeList([...document.querySelectorAll('.list-container')].map($c => +$c.id));
          return false;
        },
      }),
  }
}

  • dragenter 이벤트 핸들러에서 DOM을 직접 변경해주었기 때문에, DOM이 변경되었는지 확인하기 위해서는 DOM API를 사용할 수 밖에 없었다.

  • DOM에 직접 접근하여 drop 이벤트가 발생하였을 때, DOM의 list-container 요소들을 가져와서 id로 배열을 반환하여 인수로 전달해주었다. 이 때 전달한 인수는 화면에 나타난 list의 순서를 의미한다.

페어프로그래밍2의 목적

이번 페어프로그래밍2의 목적은 리액트 프레임워크를 배우기 전에 컴포넌트가 무엇인지 제대로 알고 가기 위함이였다.

컴포넌트란?

모든 컴포넌트는 자신이 어디에 그려질지 알면 안된다.

→ render가 알아야 한다.

  • 컴포넌트는 어떤 모습으로 그려질 것인가에 대한 정보를 가지고 있다.
  • render가 그 정보들을 가지고 그려주는 역할을 한다.
  • App 컴포넌트가 자식 컴포넌트까지도 알아야 그려줄 수 있다.
  • 부모 컴포넌트가 자식컴포넌트를 알고 있으면 새롭게 그려질 정보와 이전의 그려진 정보를 비교하여 효율적인 렌더링이 가능하다.

컴포넌트가 부모요소의 컨테이너를 받아서 그곳에 innerHTML로 그리면 이는 부모가 그린 HTML에 종속되는 것이므로 컴포넌트를 독립적으로 사용할 수 없게되므로 컴포넌트 개념을 벗어난다.

효율적인 렌더링을 위해서…

효율적인 렌더링을 위해서는 diff 알고리즘을 구현하였었다. 만약 App 컴포넌트가 일부분을 그리고 나머지 부분을 다른 컴포넌트가 받아서 그리는 하향식 구조로 설계를 하게된다면 diff 알고리즘이 하향식으로 비교해나가는데 이는 어디가 최하단인지 판별해주기가 까다로워진다.

그러므로 재조정은 App 컴포넌트가 해야한다. App 컴포넌트는 다른 컴포넌트에게 그들을 그리기 위한 정보를 전달받아 이것들을 모아서 render 함수로 보내서 화면에 렌더링을 시켜준다. render 함수는 그려주는 역할을 하고 App 컴포넌트는 그려지기위한 정보를 모두 가지고 있어야한다.

소감

  • 코드 작성에 대해 어떤 생각을 가지고 구현했는지 명확하게 얘기할 수 있으면 Ok
    • 되는대로 짜는 것이 아니라 명확한 이유가 가지고 짜면 위의 문제가 해결
  • 내가 작성한 코드는 나만 잘 알고 있다. 상대방에게 설명할 때, 상대방이 어느정도 알고 있을 것이라는 생각은 접어두자.

댓글 공유

trello Tip

카테고리 Pair Programming, level 2

1. trello 상태관리

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let state = {
  lists: [
    { id: 1, title: "Frameworks" },
    { id: 2, title: "OS" },
  ],
  cards: [
    {
      id: 1,
      content: "React",
      boardId: 1,
    },
    {
      id: 2,
      content: "Vue",
      boardId: 1,
    },
    {
      id: 3,
      content: "Windows",
      boardId: 2,
    },
    {
      id: 4,
      content: "MacOS",
      boardId: 2,
    },
  ],
};

  • 처음에는 위와 같은 방식으로 상태를 관리해주려 하였다.trello cards를 드래그하여 다른 list로 옮겼을 경우도 있기 때문에, trello list에 cards가 종속되어 있지 않다고 생각했기 때문이다.

  • 하지만 리스트 내의 cards가 순서대로 등록되기 때문에 list 별로 cards를 배열로 관리하는 것이 좋다고 판단하여 다음과 같이 상태를 변경해주었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
let state = {
  listOriginId: null,
  isListMakerOpen: false,
  lists: [
    {
      id: 1,
      title: "Frameworks",
      isOpen: false,
      cards: [
        {
          id: 1,
          content: "React",
        },
        {
          id: 2,
          content: "Vue",
        },
      ],
    },
    {
      id: 2,
      title: "OS",
      isOpen: false,
      cards: [
        {
          id: 3,
          content: "Windows",
        },
        {
          id: 4,
          content: "MacOS",
        },
      ],
    },
  ],
};
  • 추가로 렌더링에 영향을 끼치는 데이터는 모두 상태로 관리해주는 것이 DOM API를 적게 사용하고 동적 HTML에 선언적으로 style을 주거나 데이터를 바인딩해줄 수 있어 훨씬 가독성이 높아진다.

때문에, DOM API 사용을 자제하고 만약 DOM API를 사용해야 하는 경우라면 꼭 한번 고민해보고 사용하도록 하자.

2. diff 알고리즘은 프로퍼티까지 비교해줘야한다.

이전에 diff 알고리즘을 구현하였을 때, attribute 값만 서로 비교해주고 property 값은 비교해주지 않았다. textarea의 value 값을 빈값으로 바꿔주고 싶어서 이를 상태로 관리해야하나? 생각이 들어 상태로 관리해보려했다.

하지만, textarea의 attribute인 value는 처음부터 빈값이였고 input 이벤트가 발생하고 이 때의 value값(property 값)을 상태에 등록해주더라도 diff 알고리즘이 attribute만 비교해주기 때문에 처음과 input이벤트 발생한 후의 textarea는 변한게 없는 것으로 간주하였다.

그러므로 diff 알고리즘에서 property까지 비교하여 바뀐 부분이 렌더링 되도록 알고리즘을 개선해주었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// property 비교 추가
const diff = ($new, $old) => {
  const newNodes = [...$new.childNodes];
  const oldNodes = [...$old.childNodes];

  ...

  newNodes.forEach(($n, i) => {

    ...
// 원래는 프로퍼티를 전부 비교해줘야하지만, 사정상 value, checked만 확인해주겠다.
    const $o = oldNodes[i];
    if ($n.value !== $o.value) {
      $o.value = $n.value;
    }
    if ($n.checked !== $o.checked) {
      $o.checked = $n.checked;
    }
  });
};
  • 그 결과 textarea가 변경될 때마다 textarea의 value property가 변경되므로 재렌더링이 발생하므로 요구사항에 맞게 구현할 수 있다.

3. drag & drop 기능 완벽하게 이해하기

요구사항에서 drag한 list를 드래그 한체로 다른 list 위로 올렸을 때, 상태가 변경되지 않고 DOM을 직접 변경하여 list가 서로 swap 되도록 하고 drop한 이후에 state를 변경하라고 적혀있다.

각자의 이벤트 핸들러는 서로의 event target을 알 수 없으므로 상태로 관리해줘야만 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let state = {
  listOriginId: null,
  targetId:null,
  ...
}

window.addEventListener('dragstart', e => {
  state.listOriginId = "drag 시작한 list의 id"
})

window.addEventListener('dragenter', e => {
  state.targetId = "dragenter 발생한 list의 id"
  swapList(e.target.id) // DOM 직접 변경하여 dragstart 이벤트 발생한 노드와 dragenter 이벤트 발생한 노드를 변경
})

window.addEventListener('dragend', e => {
  setState({...}) // listOriginId, targetId를 가지고 lists의 배열 요소 위치를 서로 바꿔준다.
})

// drop 이벤트 발생시키기 위해서 dragover 이벤트 핸들러에 e.preventDefault()
window.addEventListener('dragover', e => {
  e.preventDefault();
})

  • 사실 drop 이벤트를 발생시키기 위해서 dragover 이벤트에서 e.preventDefault()를 호출하였는데, drop 이벤트를 사용하지 않아도 구현이 가능하여서 제거해도 될까 했지만, 제거하게 되면 dragend가 발생했을 때, dragstart한 요소가 제자리로 돌아오는 트랜지션(?)이 제거되지 않으므로 남겨두었다.

  • drop 이벤트를 사용하지 않은 이유는 drop 이벤트는 draggable인 요소에서만 drop 이벤트가 발생한다. 즉, dragenter로 새로운 list랑 이전 list의 DOM을 변경해주었는데, drop을 list 요소 바깥에서 발생시키면 drop 이벤트가 발생하지 않는 문제점이 있어서 drop 이벤트 대신에 dragend 이벤트를 사용하였다.

소감

  • if문은 어렵다. input 값이 빈칸일 때, a조건 또는 b조건 만족해야지 실행하는 예제를 한줄로 줄여보려 했지만 복잡해서 일단 따로 사용했다.

  • state는 객체이고 그 안에 여러 상태 데이터를 관리하는데, lists를 배열로 관리해주고 있고, lists 배열의 요소를 list라고 한다면 list는 객체로 관리되고 list 안에 또 cards라는 배열이 있고 cards 배열의 요소는 card라는 객체이다. 이런 복잡한 구조의 state를 가지고 고차함수를 사용하는데 어려움이 있었다.

댓글 공유

tictactoe, drag 이벤트 Tip

카테고리 Pair Programming, level 2

2. tictactoe

  1. 재렌더링 일어나는 부부은 game-status, game-grid-items 이 부분만 인데, innerHTML로 game 안을 전부 변경하려고 하니 재렌더링 필요 없는 부분인 game-reset 까지 재렌더링 해줘야하는 문제가 생겼다.
    1. 일단은 재렌더링 일어나도록 구현하였다.
  2. isOver라는 상태를 두는 것이 맞는지? 이벤트 핸들러 안에서 isOver 값을 가지고 얼리리턴으로 더이상 게임을 못하게 막는것이 맞는지…
    1. 일단 위와같이 하였다.

4. drag

  1. swapLang 할 때, 왜 새로운 변수에다가 langs 값을 복사해서 다루는 것인가?
    1. lang을 변경할 수 있는 역할을 하는 함수가 setLang 함수이기 때문에 lang 데이터 변경은 반드시 setLang 함수로만 해야하기 때문이다.
  2. render에서 lang 변수를 받는 이유는 ??
    1. 함수를 순수함수로 만들어주기 위함이다. 매개변수로 받은 인자를 가지고만 코드를 실행하도록 짜서 순수함수가 되도록 한다.
  3. dragenter 이벤트로 드롭할 요소로 드래그 했을 때, p태그, i태그 등 div안의 다른 요소에 드래그한 체로 이동하면 dragleave이벤트랑 겹침 현상이 발생하여 이를 해결하기 위해서는 얼리 리턴으로 조건을 달아줘야하는데, 복잡한 구조로 되어있는 경우 매우 어려워진다. 그러므로 dragover를 사용하여 이벤트가 많이 발생하는 것은 디바운스로 해결해주자.

소감

혼자서 짜보려고 하니 같이 짜는 것보다 스스로 생각해보고 문제를 해결해나가는 능력이 길러진 것 같다. 같이 짜면 상대방에게 의존할 수 있는 경우가 있는데 혼자서는 그런 것 없이 혼자 다 이겨내야하므로 어렵지만 더 기억에 오래 남을 것 같다. 앞으로도 내가 직접 해본것이 아니라면 반드시 내 손으로 다시 직접 해보면서 해결방안을 직접 터득하면서 나아가야겠다.

댓글 공유

loco9939

author.bio


author.job