꿀벌개발일지

발생일: 2015.05.11 키워드: 따옴표 자동 변환, smart quotes and dashes 문제: 에버노트에서 코드를 작성할 때마다, 홑따옴표가 문장 따옴표로 변경되고, 대시를 연속으로 넣으면 짝대기로 변경된다. 예를 들면, 'foo' 라고 작성하면 ‘foo' 라고 입력되고, --> 를 작성하면, —> 처럼 변경된다. 근데 에버노트의 포맷팅 관련 설정을 찾아봐도 이 자동 변환을 끄는 옵션이 없다. 어떻게 하면 될까... 해결책: 어랏. 에버노트의 기능이 아니라 맥의 기능이었던 모양이다. System Preference -> Text 메뉴에서 `Use smart quotes and dashes` 옵션을 끄면 된다. 만쉐이~~~ 참고: https://discussion.evernote.com/top..

발생일: 2015.05.10 키워드: Flux, React, Stores, Actions, Components, 리액트, 플럭스, 스토어, 액션 문제: 이번에 영어사전 익스텐션을 Angular에서 Flux + React로 변경하려고 한다. Flux 아키텍처의 사용 패턴이 아직 명확하게 정리되진 않은 것 같아서, 어떤 패턴이 좋을 지 계속 살펴보고 있다. 여전히, 스토어의 역할을 어느 범위까지 잡을지, 어떤 범위까지의 작업을 액션으로 나눌지 좀 애매하다. 아직 좀 더 고민해봐야겠지만, 일단 지금까지 살펴본 내용으로, 아키텍처를 잡을 때 몇 가지 유용한 팁들을 정리해봤다. 해결책: Stores - 한 개의 스토어엔 한 가지 타입만 갖도록 한다. 애플리케이션 내에서는 해당 타입을 갖는 스토어는 한 개만 되도록..

발생일: 2015.05.08 키워드: scp, permission, owner, permissions and owner changed after scp 문제: 배포할 때 scp 로 대상 서버로 파일을 복사하는데, 복사 후에 대상 파일의 권한과 소유자가 변경된다. 해결책: scp 이후에 파일 권한과 소유자가 변경된다. `-p` 옵션을 쓰면 파일 권한을 유지할 수는 있지만, 파일의 소유자는 로그인하는 유저로 변경된다. 배포 후에 권한과 소유자를 변경하는 방법으로 해결했다. 참고: http://unix.stackexchange.com/questions/144596/scp-and-file-owner

발생일: 2015.04.28 키워드: Git, branch, tag, 깃 태그, git tag 문제: 우리 프로젝트에서는 매 배포마다, 배포 버전을 깃 태그로 할당하고 있다. 배포 도구는 쉘로 만들었고 배포할 때 버전을 입력하면 깃 태그로 추가하도록 해두었는데, 배포할 때 가장 최근 배포 버전 정보가 있으면 더 편리할 것 같다. 모든 브랜치에서 가장 최근의 태그를 가져오고 싶다. 예를 들면, 아래처럼 나오게 말이다. - 배포 버전을 입력하세요 (최근 버전 v2.1.0): 해결책: $ git describe --tags $(git rev-list --tags --max-count=1)

발생일: 2015.04.15 키워드: IE8, getBoundingClientRect 문제: `Element#getBoundingClientRect()`로 엘리먼트의 사이즈를 가져와 처리하는 코드를 작성했는데, IE8에선 동작하지 않는다. 왜일까? 해결책: `getBoundingClientRect()` 의 width 와 height 속성은 IE9부터 지원한다. 또한, IE8 이하에서 getBoundintClientRect() 의 리턴된 rect 객체는 읽기 전용이기 때문에, 다른 속성을 할당하는 것만으로도 오류가 발생한다. rect.height = 100; //—> IE8에서 오류 발생 편의를 위해 아래와 같은 유틸리티를 만들어서 사용하는 방식으로 처리했다. var getBoundingClientRect..

발생일: 2015.03.23 키워드: jQuery, show, display, inline, inline-block, span 문제: `inline-block` 스타일이 할당되어 있는 `` 엘리먼트가 있다. 이 엘리먼트가 DOM에 붙기 전에 `show()`를 호출하게 된 케이스가 있었는데, 이상하게도 아래처럼 `inline-block`이 아닌 `inline`이 인라인 스타일로 추가되어 있다. ... 왜 그런 걸까? 해결책: 엘리먼트가 DOM에 붙기 전에 show()를 호출한 경우, css 스타일을 갖고 있더라도, “태그의 기본 속성에 따라” 스타일이 설정된다. jQuery의 `show()`메서드에서 호출하는 기본 display 값 때문이고, 아래 코드에서 확인해볼 수 있다. https://github.c..

발생일: 2015.01.16 키워드: line-height 내용: 먼저, `line-height`를 제대로 이해하기 위해서는, 몇 가지 용어를 확실히 이해하고 가는 것이 좋다. 아래와 같은 태그가 있고, 아래와 같이 렌더링 되었다면. Containing Box (컨테이닝 박스) 다른 여러 박스를 감싸고 있는 박스이다. Inline boxes (인라인 박스) 문단 안에 인라인 박스로 나뉘어져 있다. (인라인 엘리먼트나 텍스트 노드) Line boxes (라인 박스) 인라인 박스들은 컨테이닝 박스 안에 나란히 놓여져 있는데, 이런 인라인 박스를 감싸는 박스를 라인 박스라 한다. Content area (컨텐트 영역) 컨텐트 영역은 텍스트를 감싸고 있는 영역이다. 이 높이는 폰트 크기(`font-size` 속..

발생일: 2015.01.16 키워드: element, offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth, scrollHeight, getBoundingClientRect(), element size, dimension 내용: 엘리먼트의 크기를 구하는 방법에는 여러 가지가 있다. offsetWidth, clientWidth, scrollWidth 속성이나 `getBoundingClientRect()`로 가져올 수 있고, 각 속성이나 메서드의 차이점은 아래와 같다. offsetWidth, offsetHeight 일반적으로 엘리먼트의 전체 크기를 알고 싶다면, `offsetWidth`와 `offsetHeight` 속성을 가져오면 된다. 이 속..

발생일: 2015.01.16 키워드: box-sizing 내용: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 엘리먼트의 너비와 높이를 지정하는 기존의 CSS box model을 수정하기 위한 CSS 속성이다. `box-sizing`의 값으론, `content-box`, `padding-box`, `border-box`가 있으며, `content-box`가 기본값이다. box-sizing: content-box CSS 표준에 정의되어 있는 기본값이다. width 와 height 속성은 컨텐츠만 포함하며, padding, border, margin 은 포함하지 않는다. box-sizing: padding-box width 와 height 속성이 ..

발생일: 2015.01.16 키워드: getClientRects, getBoundingClientRect 내용: 문서 내에서 렌더링 된 엘리먼트의 절대 위치를 계산해야 한다면, getClientRects() 와 getBoundingClientRect() 메서드를 사용해 윈도우 기준으로 렌더링 된 위치를 가져온 후에, 문서의 스크롤 값을 더해주면 된다. element.getClientRects() 엘리먼트를 감싸고 있는 박스들의 크기를 가져온다. 각 태그마다 박스가 다르다. 예를 들면, 줄바꿈이 있는 엘리먼트나, 기본 리스트 스타일이 적용된 li 태그 등이 그렇다. 마진을 제외하고, 엘리먼트를 감싸고 있는 박스의 위치와 크기를 가져온다. (보더와 패딩을 포함한 크기) 아래 이미지를 보면 이해하기 쉽다. 빨..