본문 바로가기

JavaScript

(4)
[리팩토링] 코드 숨기기, 가독성 좋은 코드 짜기 변수 추출(Extract Variable) 어떤 코드가 조금 보기 복잡해 졌다고 가정했을 때, 먼저 시도 해볼만한 것은 코드를 쪼개 변수로 나누는 것이다. 예를 들어 아래와 같이 부모와 자식의 값을 더하는 함수가 있다고 가정한다. 읽기 매우 난해할 것이다. 물론 함수명을 잘 지어도 좋지만, 여기서는 논외로 둔다. 각 값들을 변수로 쪼개면 아래와 같은 코드가 된다. 조금 더 알아보기 쉬운 코드가 됐다. 긴 코드들이 있었지만, 이 함수에서의 핵심 로직은 부모 값과 자식 값을 더한다는 것을 알 수 있게 됐다. 코드의 추상화 제멋대로 붙인말이지만, 뭔가 좀 있어보이게 말하자면, '코드의 추상화'라고도 할 수 있을 것 같다. 실제 데이터의 흐름은 app.store.data.parent.value + app.sto..
6/16 - 재밌는 실수 오늘 재밌는 실수가 하나 있었는데, 테스트의 필요성을 느낀 실수 였다. 먼저, 기존 코드에서는 특정 시각이 오전인지 오후인지를 구하고 있었다. 오전 오후를 구별하는 로직은 자주쓰일 가능성이 높기 때문에 나는 이 로직을 별도로 빼냈다. 별다른 타입오류도 발생하지 않았기에 안심하고 커밋&푸시를 했다. 그리고 시간이 좀 지났을까 채팅방에는 사진이 하나 올라왔다. 내가 짠 코드였다. 오전인지를 구하는 함수인데, 시간이 12시간보다 큰지를 반환하고 있었던 것이다. 테스트 코드의 중요성이 느껴지는 순간이었다. 만약에 테스트코드가 있었다면 오전 9시가 오후로 반환되는걸 미리 캐치해서 테스트를 통과하지 못했을 것이다. 그럼 왜 테스트가 실패했는지 확인했을 것이다. 그리고 나는 푸시 전에 바로, 오류를 확인하고 수정할 ..
forEach를 사용하면 안되는 경우 forEach를 다른 함수로 바꾸기 Level 1 위 와 같은 코드에서는 아래와 같이 forEach 대신 filter를 사용하는 것이 더 좋다. 이외에도 생각보다 forEach 대신 다른 함수를 써야하는 경우가 더 많다. 각 경우는 MDN에서 소개하는 각 함수의 정의를 생각하면 결정하기 편리하다. forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. forEach는 "실행" 하는 의미를 갖고 있기 때문에, 실행하는 경우(로그, API 호출 등)에 적합하다. filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter는 "테스트" 하는 의미를 갖고 있기 때문에, 특정 조건에 해당하는 요소를 뽑아내는 경우(a>N 등 if문)에 적합하다. ..
ES6로 문자열의 바이트(Byte) 구하기 Share Links는 반응형 바둑판 레이아웃(항목의 가로길이는 고정, 세로길이는 유동적)를 사용합니다. 한마디로 말해서 핀터레스트(Pinterest)의 레이아웃입니다. `flex`나 `grid`로 하려했으나 실패해 결국에는 자바스크립트의 힘을 빌렸습니다. 처음에 핀터레스트는 어떻게 구현한건지 살펴보니 일일이 `top`과 `left`를 때려박아서(...) 만들어져있었습니다. 여하튼 한번 만들어놓고 잘 썼었습니다만, 태그 목록이 길어지면 `overflow:auto` 시켜서 가로스크롤로 표현하는 대신, 세로를 `height:auto`로 설정해 스크롤 없이 표현하는 것으로 레이아웃을 변경하려고 했습니다. 또한 제목이 길어지면 역시 태그처럼 스크롤을 생성하지 않게 레이아웃을 변경하려했습니다. 이제 auto로 늘..