생산성 블로그

톰 브래디가 하루에 9시간을 잔다는 기사를 봤다. 나도 앞으로 하루에 9시간씩 잘 거다.

안녕하세요, 저는 이직 막바지 작업에 한창입니다. 이 포스트는 코딩 테스트 오답노트입니다, 성적이 좋은 분들은 오답노트를 꼭 쓰더군요. 문제의 출처는 리트코드 394번, "Decode String" 문제입니다. Decode String - LeetCode 문제를 한 번 볼까요? `k[encoded_string]`처럼 생긴 압축 규칙이 있습니다. encoded_string은 알파벳 소문자로 제한되고, 압축 규칙 내의 압축 문자열은 또 다른 압축 규칙을 포함할 수도 있습니다. k는 최소 1에서 최대 300의 정수입니다. 우선 한 번 풀어보고, function decodeString(s) { let result = ""; let iteration = 0; const stack = []; for (const c..

무엇인가? (아시겠지만 이 포스트는 jest의 nodejs 환경, 조금 더 명확하게는 commonjs 모듈 환경에서의 이야기입니다.) jest는 테스트 대상 메소드 혹은 테스트 대상 모듈을 제외하고 모킹을 통해 변인을 통제합니다. 모킹된 메소드는 아무런 동작도 하지 않습니다. 나중에 모킹 메소드의 데이터 프로퍼티에 접근, 이 모킹 메소드가 몇 번 호출되었는지? 어떤 인자들이 입력되었는지? 와 같은 어서션을 수행합니다. 모킹된 메소드는 아무 동작도 하지 않는 것이 기본이지만, jest.mock의 두 번째 매개변수 factory를 통해 모듈 내 특정 메소드의 반환 값을 제어할 수도 있습니다. 설정 파일인 jest.config.js에서 automock 항목을 true로 지정하면 test 환경 내에서의 모든 모..

개발자 사람들은 날씨가 추워지면 연례 행사로 한 해 있었던 일을 블로그 포스트로 정리하곤 한다. 개발자 사람들은 왜 회고를 할까? 개발자 사람들은 글을 쓰기가 귀찮아서 '커밋 메시지 잘 쓰기', '테크니컬 라이팅 잘 하기' 뭐 이런 것들도 쓰지 않던가? 그런데 나는 왜 2020 회고를 하려고 하지?3d올 한 해 제일 남는 키워드는 이건 것 같다. 처음에는 react를 하게 되었는데, 19년 말에yeong dieyeongdie/yeongdie.github.io이 사이트 작업을 하게 되었고 그리고sungchuni/ws-visu-obj이런 작업을 하게 되었다. 이것은 윙크스톤파트너스라는 회사의 페이지에 들어갈 비주얼라이제이션 오브젝트이다. 컴포넌트에 따라 2d로 혹은 3d로 각 점과 선의 좌표를 관리한다. 지..

단, 이와 같은 헝가리안 노테이션이 필요할 때에나 의미가 있겠다. (왜 타입스크립트를 쓰지 않는가? (20점)) 기본 자료형 문자열 str~, 문자열은 string이기 때문이다, 웹과 자바스크립트의 근간은 문자열이다. name => strName city => strCity 숫자 num~, 위와 같은 이유, 컴퓨터과학과 컴퓨터공학의 근간은 숫자이다. age => numAge weight => numWeight 불린 bool~, boo도 가능하고, 더 귀여우나 그래도 소통을 위한 접두어라는 데에 의의를 두어보자. 또한 전기공학의 근간은 불린 아닌가? 또한 동사를 앞에 두고 의문형으로 이름을 짓는 경우도 많다. dirty => boolDirty, isDirty sleeping => boolSleeping, ..

이건 안드로이드 운영체제에서 되지 않습니다, 안드로이드 브라우저에서는 키보드가 열리면 window.visualViewport.height와 window.innerHeight가 함께 줄어듭니다. 오늘은 그런 걸 만들었습니다. 일전에 사용자가 HTMLTextAreaElement에 글을 작성할 때, 컨텐츠의 길이에 따라 의 높이를 조절하는 Vue 지시자를 만든 적이 있는데, 우리가 만든 앱은 모바일 레이아웃에 바텀 고정인 내비게이션이 있어, 온스크린 키보드가 있으면 사용자 입력 창의 커서와 컨텐츠를 가리게 됩니다. 요구사항은 화면에 키보드가 열려있는 경우에는 바텀 내비게이션을 없애라. 안타깝게도 키보드 토글에 대한 Javascript 이벤트는 없습니다. (이 포스트를 쓰는 지금도 나는 믿을 수가 없습니다.) ..

적어놓고 잊지 말아야 한다.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를 타입스크립트로 작성하여 매개변수를 어떻게 전달해야하는지, 반환값은 어떤 레이아웃인지 알기 쉽도록 할 예정입니다. 그리고 타입스크립트로 변환한 이 함수 내부의 조건 분기를 더 작은 함수로 나누어 논리 흐름을 간결하게 합니다. 이 작업들이 완료되면 트랜스파일러 없이도 함수가 사용 가능하도록 레거시 자바스크립트 코드로 다시 작성합니다. (바벨의 결과물은 휴먼리더블하진 않습니다.)타입스..

이제는 테스트를 해야만 한다. 처음에, 그때는 Angular.js였는데, 웹 프레임워크를 공부하던 시절부터 테스트 환경 설정은 프레임워크 환경 설정이 기술된 챕터 2나 그 다음 챕터 3 정도에 있는 주제였습니다. 그렇지만 정말로 어플리케이션을 만들고 운영하기 전까지 테스트가 도대체 어디서 필요한지를 스스로 아는 것은 어렵지요. (어렵지 않나요?) 그래서 Jest를 쓰기로 했습니다. "그래서" 부분은 생략된 챕터가 많은데, 아무튼 현재는 Vue가 주사용 프레임워크이고, vue-jest가 사용하기 편리하고, 무엇보다 커뮤니티가 활발하고, 그만큼 레퍼런스가 많았습니다. 테스트 코어와, 매처, 러너가 한 번에 설치되는 이점이 물론 제 1의 근거였습니다. Jest는 브라우저 환경의 스크립트를 실행할 때에 jsdo..