잡다한 개발 블로그

참고 링크: Can no longer browse without Charles running Charles를 한참 사용하던 중에 Charles를 종료하였더니 인터넷을 사용할 수 없는 경우가 있다. 브라우저의 프록시 설정이 Charles를 사용하도록 변경이 되었지만, Charles 종료 후에 설정을 되돌리지 않은 경우일 수 있다. 이에 대한 해결법을 정리한다. 1. Charles 재실행 후 종료 Charles를 실행한 다음, 정상적으로 종료를 해본다. Charles가 비정상적으로 종료된 경우에는 프록시를 재설정할 수 있기 때문. 2. 프록시 설정 수동 변경 1번의 방법으로 해결이 안되는 경우, 프록시 설정을 수동으로 변경해야 한다. 원본 글에는 OS/브라우저별 설정 방법이 있지만, 여기에서는 Mac을 기준..

JS에서, 특히 JSX에서 배열이 유효할 때에만 실행/노출시키기 위한 방법으로 흔히 아래와 같은 optional chaining을 사용한다. (array?.length > 0) && /*...*/ 같은 코드를 TS에서도 사용했더니, 객체가 undefined 일 수 있다는 에러를 띄웠다. array에 대한 undefined 는 optional chaining으로 검사하고 있어 무슨 소리인지 바로 이해할 수 없었다. 결론은 optional chaining으로 인해서 array가 undefined 일 때, array?.length 가 undefined 로 처리되기 때문에, undefined > 0 부분에서 비교할 수 없어서 에러를 띄운 것이다. 참고 Object is possibly 'undefined' Er..

gitignore.io Create useful .gitignore files for your project www.toptal.com Git 저장소용 .gitignore 파일 생성 웹 서비스. 운영체제, 개발환경, 프로그래밍 언어 등을 입력하면 그에 맞는 .gitignore 파일 제공.

CSS Support Guide for Email Clients A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet. www.campaignmonitor.com 이메일(Email) 클라이언트별로 사용 가능한 스타일(스타일 관련 엘리먼트, CSS 선택자, CSS 속성)에 대한 가이드 제공

mydevice.io : web devices capabilities Mobile devices, in Responsive Web Design, relate to a core value which is the value of CSS width or ("device-width"), in CSS Device Independant Pixels, which depends both of the browser and user zoom settings. Choose your weapon : www.mydevice.io 접속한 디바이스 및 다른 메이저 디바이스 스크린 정보 제공 사이트. 현재 디바이스 정보 스크린 메트릭(Screen metrics): 스크린 크기, 픽셀 레티오(pixel ratio), 해상도(resol..

CSS Triggers @PROPERTY_DESCRIPTION@ B G W E Change from default B G W E Subsequent updates csstriggers.com CSS 속성이 브라우저 별로 렌더링 단계에 어느 부분을 트리거하는지 정보를 알려주는 사이트.

문제 상황 IE 10에서 video tag를 사용하여 동영상을 노출 시켰을 때, Invalid Source 라고 노출되며 재생 불가 해당 비디오는 서버에서 MIME type "application/octet-stream" 으로 내려주고 있었음 MIME type: application/octet-stream 이란 application/octet-stream 는 다른 모든 경우를 위한 기본값입니다. 알려지지 않은 파일 타입은 이 타입을 사용해야 합니다. 브라우저들은 이런 파일들을 다룰 때, 사용자를 위험한 동작으로부터 보호하도록 개별적인 주의를 기울여야 합니다. 출처: MDN - MIME 타입의 전체 목록 해결 방안 서버에서 비디오의 MIME type을 video/mp4로 반환하도록 변경. 참고 링크 HTM..

git log --author="유저 이름" --name-only --pretty=format: | sort | uniq git log --author="유저 이름" : 특정 유저의 로그만 필터링 git log --name-only : 커밋 정보중에서 수정된 파일의 목록 출력 git log --pretty=format: : 지정 형식으로 출력하는 옵션. 여기에서는 파일 외의 string 제거용 sort : 정렬 uniq : 중복 제거 큰 프로젝트 인수인계시에 직접 작업한 내용이 무엇이 있었는지 확인하려다가 사용했습니다. Git commit 히스토리 내에서 수정한 적이 있는 모든 파일이 나오므로, 이미 삭제된 파일도 목록에 노출될 수 있습니다. 참고 링크

이 글은 Microsoft의 Introducing Web APIs for Dual Screen and Foldable Devices 포스트 내용을 번역, 요약하였습니다. 9월 10일 출시된 Surface Duo를 포함하여, 요즘엔 다양하고 새로운 듀얼 스크린, 폴더블 디바이스가 시장에 나오고있습니다. 이에 따라서 사이트를 이러한 규격을 어떻게 수용할 지 생각해볼 좋은 시기입니다. 그래서 마이크로소프트는 웹 개발자들이 브라우저 창이 여러 디스플레이 영역에 걸쳐있는 경우에 콘텐츠를 효과적으로 배치하고, 해당 디바이스에 자연스럽게 반응형 웹 사이트를 만들 수 있도록 하는 두 가지 실험 기능을 발표했습니다. CSS 스크린 확장 미디어 기능(screen-spaning media feature)과 접힌 형상을 설명..

Adaptive serving allows sites to ensure users on slow connections can get “a” version of the experience, even if at a lower-fidelity. 해외 아티클을 번역 하던 중 위의 문장에서 막히기 시작했다. 대체 "lower-fidelity"가 무엇일까? 몇 가지 찾아본 결과는 다음과 같다. 맨 처음 찾아 본 것은 번역기와 사전이였다. 구글 번역기와 네이버 파파고로 돌려보면 "충실도", 네이버 영어사전을 찾아보면 "충실도", "정확도"로 나온다. 아래는 네이버 영어사전의 예문. the fidelity of the translation to the original text 원본 텍스트에 대한 번역본의 충실도 [정확..