본문 바로가기

JavaScript

(3)
forEach를 사용하면 안되는 경우 forEach를 다른 함수로 바꾸기 Level 1 위 와 같은 코드에서는 아래와 같이 forEach 대신 filter를 사용하는 것이 더 좋다. 이외에도 생각보다 forEach 대신 다른 함수를 써야하는 경우가 더 많다. 각 경우는 MDN에서 소개하는 각 함수의 정의를 생각하면 결정하기 편리하다. forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. forEach는 "실행" 하는 의미를 갖고 있기 때문에, 실행하는 경우(로그, API 호출 등)에 적합하다. filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter는 "테스트" 하는 의미를 갖고 있기 때문에, 특정 조건에 해당하는 요소를 뽑아내는 경우(a>N 등 if문)에 적합하다. ..
자바스크립트로 한국어을 다룰 때 유용한 라이브러리 'korean-js' 소개 korean-js는 한국어를 처리하는 라이브러리를 모으거나 제가 만든 함수들을 합해서 만든 라이브러리입니다. MIT 라이선스로 배포되고 있습니다. 만들게 된 계기는 '코딩이랑 무관합니다만'와 '생활코딩' 중 어떤 페이스북 그룹이었는지 기억이 잘 나지 않으나, 숫자를 한글로 치환하여 표시하는 방법에 대해 글을 본 것이었다. 기존에 매번 복사해서 사용했던 코드가, 날짜랑 시간을 한국어로 표기해주는 함수였다. 예) 2019년 4월 17일 11시 27분 18초 그래서 이런 코드랑 각종 한국어 처리 라이브러리를 모아서 한 개의 라이브러리로 만들면 어떨까 싶었다. 그래서 나온 것이 korean-js다. 코드는 TypeScript를 사용했고, 인터페이스를 정의하여 개발에 도움이 되도..
ES6로 문자열의 바이트(Byte) 구하기 Share Links는 반응형 바둑판 레이아웃(항목의 가로길이는 고정, 세로길이는 유동적)를 사용합니다. 한마디로 말해서 핀터레스트(Pinterest)의 레이아웃입니다. `flex`나 `grid`로 하려했으나 실패해 결국에는 자바스크립트의 힘을 빌렸습니다. 처음에 핀터레스트는 어떻게 구현한건지 살펴보니 일일이 `top`과 `left`를 때려박아서(...) 만들어져있었습니다. 여하튼 한번 만들어놓고 잘 썼었습니다만, 태그 목록이 길어지면 `overflow:auto` 시켜서 가로스크롤로 표현하는 대신, 세로를 `height:auto`로 설정해 스크롤 없이 표현하는 것으로 레이아웃을 변경하려고 했습니다. 또한 제목이 길어지면 역시 태그처럼 스크롤을 생성하지 않게 레이아웃을 변경하려했습니다. 이제 auto로 늘..