1/5

몸살 기운이 있어 리모트 근무를 했다. QA 이후 버그를 하나씩 해결해가면서 CSS도 수정해 나간다. 버그를 잡는 게 의외로 재밌다.

1/6

원인과 해결책이 손에 안잡히는 버그와 마주쳤다.

11월부터 이미지 편집 기능을 만들고 있다. 여기에는 [cropperjs]https://github.com/fengyuanchen/cropperjs()라는 오픈소스를 react용으로 래핑한 react-cropper를 사용 중이다. 기존의 라이브러리는 jquery 및 순수 자바스크립트용으로 만들어져 있어 react에서 사용할 수 있게 해둔 것인데, 문제는 작년 1월 이후 업데이트가 되지 않았고 react만의 특징을 살려 설계한 것이 아니다보니 예상치 못한 버그가 많이 발생했고 여전히 발생하고 있다.

나는 편집박스를 적어도 1번은 움직여야 해당 이미지의 잘린 부분이 저장되는 상황에서 (이것마저도 여러 개의 cropper를 한 페이지에 둘 수 없어, cropper 컴포넌트를 하위에 두고 mount/unmount 해야 하다보니 그렇게 되었다..) 편집박스를 움직이지 않고도 이미지를 자르도록 하고자 했다.

cropperjs에는 ready라는 이벤트가 있어, 이미지가 로딩 완료되고 cropper 인스턴스가 준비 완료되면 실행된다. 그래서 ready 이벤트 내에 현재 편집박스를 저장하는 로직을 추가했다.

그런데, 이미지가 로딩되지 않아 빈 화면으로 인지되어 빈 영역을 잘라 저장하는 것이다.

문제와 해결방안을 공책에 한 개씩 써가면서 시도해보고 있다.

1/7

앞으로 jquery 혹은 여타 라이브러리를 react에서 사용할 일이 있는데, npm에 올라와 있는 버전이 너무 오래된 경우라면

• 혹시 직접 구현하는 것이 더 쉬운 것은 아닐지
• 혹시 직접 래핑해서 사용할 수는 없을지
• 정말로 그 오픈소스를 꼭 써야하는지

진지하게 고민해볼 것이다.

이 시간 동안 정말로 canvas를 배워서 편집 기능을 스스로 만들 수 있었을지도 모르겠다. 너무 많은 시간이 걸린다...

1/8

도대체 원인이 뭘까. 다른 분들에게 도움을 구해보려고 슬랙에 공유를 해보았다.

ready 이벤트에 문제가 있는 것은 아니었다. img 요소를 추가하고 onload 이벤트를 별도로 걸어보았지만, ready 이벤트가 더 늦게 실행되는 것이 확실하다.

동료분이 setTimeout를 사용해보라는 조언을 주셔서 그렇게 해봤더니 일단 증상은 사라졌다. 하지만 문제를 근본적으로 해결하는 것은 아니다.

1/9

재택근무날. 아예 날 잡고 요며칠 계속되는 버그의 원인을 파악해보려고 노력했다.

해결이 안됐다!

이렇게까지 했는데도 해결이 안되면 포기해야 한다. setTimeout을 적용했다. 당장 급한 기능은 아니라서 디버깅을 할 시간이 주어져 다행이었다. 그래도 아주 수확이 없는 건 아니었고, 디버깅을 하는 방법을 좀 더 잘 익힌 것 같다. 그리고 디버깅 하면서 함수 이름도 바꾸고, 좀 더 예쁘게 코드가 보일 수 있게 리팩토링도 했다. 이정도면 나쁘지 않은 수확이다.

1/10

파트장님 퇴사하시는 날. 꽃길만 걸으시길 하고 바랐다. 모든 사람이 파트장님이 퇴사하는 걸 아쉬워한다. 나도 누군가에게 저렇게 도움이 되는 사람이면 좋겠다.

1/11

프로그래머스 코딩 문제에 SQL 파트가 생겼다. 난이도가 낮은 편이어서 맞추는 재미가 있었다.

새로 알게된 쿼리와 지식을 정리한다.

SELECT EXTRACT(HOUR FROM DATETIME) AS HOUR
FROM TABLE
GROUP BY HOUR
HAVING HOUR >= 9 AND HOUR <= 19

-- 2017-04-13 16:29:00 형태의 날짜 중 시간(16시)만 뽑고자 할 때

ON과 WHERE의 차이는 JOIN을 할 대상이 달라진다는 것이다. (출처)

1/12

새로운 공부 방법을 도입했다. '면접문제 주도 공부(Interview-Driven Study)'랄까... awesome-interview-questions 시리즈에 나오는 질문을 중심으로, 혼자서 개념을 찾아가며 공부하기로. 의외로 효율이 괜찮다. 질문을 곱씹어볼 수도 있고, 어떤 내용을 공부하면 좋을지 감을 잡을 수도 있다.

인터뷰 질문을 보면서 어제와 마찬가지로 SQL과 데이터베이스 공부를 했다. Real MySQL과 데이터 중심 애플리케이션 설계를 번갈아가면서 뒤적뒤적 찾아보았다.