본문 바로가기

Programming

(39)
TypeScript 4.5의 변경 사항 요약 지난주, TypreScript 4.5가 출시되었습니다. 아래의 글에서는 TypeScript 4.5에 추가된 기능이나 변경사항들을 요약하여 소개합니다. 이 요약사항의 원본 글은 Announcing TypeScript 4.5 입니다. Awaited 유형을 통한 Promise 개선 Promise들을 재귀적으로 언래핑하여 'Promise' 와 같은 타입을 'number'로 바꿔주는 Awaited가 추가 됩니다. 이번 업데이트를 통해 Promise.all과 같은 함수를 사용할 때, 타입이 잘못 추론되는 오류를 해결 할 수 있습니다. 개인적으로 이번 업데이트 중 가장 크게 느껴질 업데이트라 생각합니다. 추가적이 기능들은 깃허브 PR을 참조하세요. 사용하지 않는 import 제거를 끄는 플래그 추가 eval을 사용하..
[리팩토링] 코드 숨기기, 가독성 좋은 코드 짜기 변수 추출(Extract Variable) 어떤 코드가 조금 보기 복잡해 졌다고 가정했을 때, 먼저 시도 해볼만한 것은 코드를 쪼개 변수로 나누는 것이다. 예를 들어 아래와 같이 부모와 자식의 값을 더하는 함수가 있다고 가정한다. 읽기 매우 난해할 것이다. 물론 함수명을 잘 지어도 좋지만, 여기서는 논외로 둔다. 각 값들을 변수로 쪼개면 아래와 같은 코드가 된다. 조금 더 알아보기 쉬운 코드가 됐다. 긴 코드들이 있었지만, 이 함수에서의 핵심 로직은 부모 값과 자식 값을 더한다는 것을 알 수 있게 됐다. 코드의 추상화 제멋대로 붙인말이지만, 뭔가 좀 있어보이게 말하자면, '코드의 추상화'라고도 할 수 있을 것 같다. 실제 데이터의 흐름은 app.store.data.parent.value + app.sto..
API는 인터페이스다 - 프론트 개발과 API API는 인터페이스다. 왜냐하면 API는 Application Programming Interface이기 때문이다. API는 인터페이스입니다. 그것이 Interface이니깐. API가 인터페이스라는 것은 중요하다. 이 글은 프론트 개발에서 이러한 점을 활용하여 작업 대기 시간을 줄이는 것에 이야기 할 것이다. API라는 단어를 여러 의미로 사용하게 될 것 같다. 백엔드와 관련지어 API라는 단어가 나오는 것은, 주로 백엔드 구현체를 말하는 것이고, 그 외에는 대부분 API 명세를 말한다. 일반적으로 프론트 개발 과정에서 백엔드에 의해 작업이 lock되는 경우는 대부분 API의 구현을 기다리는데 쓰는 경우가 많다. 이런 루트를 타는 것이다. "백엔드 API가 나오지 않았다 → 프론트 모델을 짤 수가 없다 ..
웹 폰트에서 EOT, TTF 파일을 배제해야하는 이유 필요한 웹폰트 파일은 WOFF2 뿐 폰트 파일을 사용할 때는, 원칙적으로는 WOFF2만 쓰는 것이 좋고, IE에 대한 호환이 필요한 경우에 WOFF파일을 사용하면 된다. EOT파일은, 100%라고 표현할 수 있을 정도로, 모든 경우에 필요하지 않다. EOT 파일이 필요한 경우는 IE 8 이하의 브라우저를 지원해야하는, 아주 극단적인 레거시 페이지에서만 필요하다. 물론 그러한 페이지에서 웹 폰트를 사용해서 꾸미는 경우는 거의 없을 것이다. TTF 파일도 필요 없다 TTF파일도 마찬가지로, 굳이 제공해줄 필요가 없는 것이, 모든 브라우저에서 WOFF와 WOFF2 형식을 지원하고 있다. IE를 지원해야하는 경우라도, WOFF를 쓰는 것이 옳다. TTF는 압축되지 않은채로 제공되기 때문에, 사용자 경험에 악영향..
React에서 잘못된 랜더링 조건문을 작성하는 경우 React에서 인라인 조건문을 삼항식 대신에, && 연산자를 사용하여 표현하는 경우가 있다. 위의 코드에서 의도 했던 동작은, 리스트의 길이가 0보다 클 때 Count를 반환하고, 0이면 아무것도 반환하지 않는 것이다. 하지만 실제 실행결과는 리스트의 길이가 0인 경우에, '0' 자체가 랜더링되게 된다. 분명 React에서는 일반적으로 거짓으로 취급되는 몇몇 값들이 반환될 경우에는, 랜더링을 하지 않는다. 그러나 숫자 0은 예외적으로 그대로 랜더링하게 된다. 그렇기 때문에, 위와 같은 코드를 사용해서는 안된다. 위의 코드는 ' > 0 '을 추가하여 의도한 대로 코드가 동작될 수 있도록 하였다. 이처럼 &&연산자를 사용하여 인라인 랜더링 조건문을 작성할 때에는 앞의 조건식이 boolean을 반환하도록 하는..
mobx 6 출시와 변경된 점 9월일에 mobx 6.0이 출시되었다. mobx 6 요약 ECMAScript에 적합한 라이브러리 & Proxy (모던브라우저) 및 비 Proxy (ES5) 동시지원 mobx가 데코레이터를 버리는 이유 가장 큰 이유는 데코레이터가 현재 표준으로 지정되어 있지 않은 점이다. 그렇기 때문에, 데코레이터를 사용하려면 복잡한 설정이 꼭 동반된다. 예를 들면 create-react-app로 프로젝트를 생성한 경우에는 순정상태로 사용할 수 없고 eject를 통해서 설정을 해줘야한다. 또한 비표준 데코레이터를 버림으로써, 추후에 등장할 표준 데코레이터(?)를 잘 지원할 수 있고, 당장은 비지원으로 인한 코드 용량 절감을 들 수 있다. mobx 6 With ES5 기존에는 IE를 지원하는 프로젝트에서는 mobx 5를 사..
[CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리 div와 같은 block 요소와는 다르게, span은 inline요소이기 때문에, text-overflow: ellipsis 속성을 줘도 제대로 동작하지 않는다. 이러한 경우에는 span 요소에 display: inline-block이나 display: block 을 추가하여 block 요소로 변경하면 정상적으로 동작한다.
forEach를 사용하면 안되는 경우 forEach를 다른 함수로 바꾸기 Level 1 위 와 같은 코드에서는 아래와 같이 forEach 대신 filter를 사용하는 것이 더 좋다. 이외에도 생각보다 forEach 대신 다른 함수를 써야하는 경우가 더 많다. 각 경우는 MDN에서 소개하는 각 함수의 정의를 생각하면 결정하기 편리하다. forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. forEach는 "실행" 하는 의미를 갖고 있기 때문에, 실행하는 경우(로그, API 호출 등)에 적합하다. filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter는 "테스트" 하는 의미를 갖고 있기 때문에, 특정 조건에 해당하는 요소를 뽑아내는 경우(a>N 등 if문)에 적합하다. ..