본문 바로가기

Web Programming/JavaScript & TypeScript

 (16)
자바스크립트로 만 나이, 연 나이, 세는 나이 한번에 구하기 연단위로 나이를 세는 경우, 만 나이, 연 나이, 세는 나이 이렇게 3가지가 나올 수가 있다. 각각 나이의 사용은 다음과 같다. 만 나이 : 법적 나이로, 법률 및 공문서 등에는 만 나이를 사용해야 한다. 연 나이 : 연도를 제외한 생일을 모를 때 사용할 수 있다. 또한 청소년 보호법 등에서, "n세가 되는 해의 1월 1일을 맞이한 사람"처럼 우회적으로 사용하기도 한다. 세는 나이 : 주로 일상 생활에서 사용하는 나이로, 연 나이에 한 살을 더한 값인 '햇수'다. 다음 함수는 2022년 4월 13일 기준으로 1970년 12월 31일생의 나이를 {age: 51, yearAge: 52, countingAge: 53}으로 반환한다. 아래 코드를 사용하면 나이 계산을 만나이, 연나이, 세는나이를 한번에 할 수 ..
forEach를 사용하면 안되는 경우 forEach를 다른 함수로 바꾸기 Level 1 위 와 같은 코드에서는 아래와 같이 forEach 대신 filter를 사용하는 것이 더 좋다. 이외에도 생각보다 forEach 대신 다른 함수를 써야하는 경우가 더 많다. 각 경우는 MDN에서 소개하는 각 함수의 정의를 생각하면 결정하기 편리하다. forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. forEach는 "실행" 하는 의미를 갖고 있기 때문에, 실행하는 경우(로그, API 호출 등)에 적합하다. filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter는 "테스트" 하는 의미를 갖고 있기 때문에, 특정 조건에 해당하는 요소를 뽑아내는 경우(a>N 등 if문)에 적합하다. ..
await의 함정, 숨은 병목을 찾자 자바스크립트에서 async await을 사용하면 좀 더 깔끔한 코드를 작성할 수 있습니다. 하지만, 적절하게 사용하지 않으면 적지 않은 시간을 사용해야할 수도 있습니다. 특히, 여러개의 await을 사용할 경우에 주의해야합니다. 위와 같은 코드가 있을 때, end를 보려면 얼마나 기다려야할까요? 2,700ms를 기다려야합니다. 생각보다 긴 시간입니다. Promise.all를 사용해서 시간을 단축해보았습니다. 이제는, 1,900ms만 기다리면됩니다. 800ms나 줄였습니다. 하지만 아직 개선의 여지가 있어보입니다. 자, 이제 1200ms면 모든 작업을 끝내고, end를 볼 수 있습니다. API의 응답시간 개선 없이 1700ms를 단축했습니다. 어째서 이렇게 차이가 나는것 일까요? async, await을 ..
[TypeScript] 옵셔널 체이닝(Optional Chaining) 타입스크립트 3.7이 릴리즈 되면서 새롭게 사용할 수 있게 된 문법 중에 하나가 바로 "옵셔널 체이닝(Optional Chaining)"이다. null이나 undefined인 값이 반환되면, 즉시 중단하고 undefined를 반환하는 문법이다. 코드가 즉시 중단 되는 것은 꽤 멋진 것이, 보통의 경우, null이나 undefined에 접근하여 함수를 실행시키는 경우에는 오류가 발생하지만, 이 경우에는 오류 없이 바로 undefined를 반환 한다는 것이다. const apple = garden?.tree.getApple(); 위 코드는 아래와 같다. const apple = (garden === nulll || garden === undefined).tree.getApple(); 위의 코드가 헐씬 간결한..
TSLint와 ESLint의 통합 https://medium.com/palantir/tslint-in-2019-1a144c2317a9? TSLint in 2019 Palantir is the creator and primary maintainer of TSLint, the standard linter for the TypeScript programming language. As the TypeScript… medium.com TSLint와 ESLint가 통합한다고 한다. TSLint팀은 TSLint 대신 ESLint에서의 TypeScript 지원 향상에 집중하기로 계획했다고 한다. in English The TSLint and the ESLint will be integrated. The TSLint team plan to focus o..
ES6로 문자열의 바이트(Byte) 구하기 Share Links는 반응형 바둑판 레이아웃(항목의 가로길이는 고정, 세로길이는 유동적)를 사용합니다. 한마디로 말해서 핀터레스트(Pinterest)의 레이아웃입니다. `flex`나 `grid`로 하려했으나 실패해 결국에는 자바스크립트의 힘을 빌렸습니다. 처음에 핀터레스트는 어떻게 구현한건지 살펴보니 일일이 `top`과 `left`를 때려박아서(...) 만들어져있었습니다. 여하튼 한번 만들어놓고 잘 썼었습니다만, 태그 목록이 길어지면 `overflow:auto` 시켜서 가로스크롤로 표현하는 대신, 세로를 `height:auto`로 설정해 스크롤 없이 표현하는 것으로 레이아웃을 변경하려고 했습니다. 또한 제목이 길어지면 역시 태그처럼 스크롤을 생성하지 않게 레이아웃을 변경하려했습니다. 이제 auto로 늘..
JavaScript array delete item(Array에서 특정 인덱스의 아이템 제거) 자바스크립트에서 특정 Index에 위치하고 있는 Item을 제거하는 함수function deleteItem(array,deleteIndex) { return array.reduce((prev, now, index) => index !== deleteIndex ? [...prev, now] : prev, []); },특정 inedx의 경우에는 now를 추가해 반환하지 않고, 그대로 prev를 반환한다.
자바스크립트에서 Python range을 비슷하게 사용하는 방법 단순히 for(let i =0;iconsole.log(index)); //0 1 2 3 40 ~ n-1 까지의 수가 필요한 경우(map등을 사용해야 하는 경우)Array.from(Array(n).keys()).map(v=>v) // 0 1 2 3 4m ~ n -1 까지의 배열(m=5, n=10)Array.from(Array(n - m).keys()).map(v=>v+m).map(v=>v); // 5 6 7 8 9 물론 더 좋은 방법이 있을 수도 있다.

티스토리툴바