적어놓고 잊지 말아야 한다.https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layoutwhite-space: nowrap breaks flexbox layoutI have created a responsive layout for an app using Flexbox. The layout calls for a collapsible menu on the left, a block with a header and body in the middle and a toggleable help-pane on the right (stackoverflow.com여기 답변을 보자, 플렉스박스의 기본 동작이 그렇기 때문이다. 플렉스박스..
자바스크립트로 작성된 함수와 테스트를 타입스크립트로 작성하기
지난 시간에는 캔버스 API를 활용하여 이미지 크기를 줄이는 함수 downscaleImage를 작성하고, Karma 테스트 러너와 Jasmine 테스트 프레임워크로 자동화된 테스트 환경을 구성하는 것까지 실습하였어요. 코드를 아래 저장소에서 복제합니다. $ git clone "https://github.com/sungchuni/downscaleImage.git" && cd downscaleImage && git checkout v1.1 타입스크립트로 변환하면 이 스크립트를 처음 접하는 사람들이 입출력 인터페이스를 더 쉽게 알 수 있을 것입니다. 하지 않을 이유가 있습니까? 우선 typescript와 ts-loader를 설치합니다. $ npm i -D typescript ts-loader 타입스크립트 컴파..
"단위 테스트를 어디에 쓸까?"하고 정말로 그렇게 묻는다면, 정말로 정말로는 그거 없이도 프로그램은 돌아간다고 말을 할 수가 있을 것입니다. 테스트는 그런 자리에서 의미가 있는 것 같습니다, 어플리케이션의 목적에 기여하는 자리는 아니고 프로젝트 정도에 기여하는. 몇 가지 리팩터링을 계획하고 있습니다. downscaleImage를 타입스크립트로 작성하여 매개변수를 어떻게 전달해야하는지, 반환값은 어떤 레이아웃인지 알기 쉽도록 할 예정입니다. 그리고 타입스크립트로 변환한 이 함수 내부의 조건 분기를 더 작은 함수로 나누어 논리 흐름을 간결하게 합니다. 이 작업들이 완료되면 트랜스파일러 없이도 함수가 사용 가능하도록 레거시 자바스크립트 코드로 다시 작성합니다. (바벨의 결과물은 휴먼리더블하진 않습니다.)타입스..