Archive: 2018

2018
0
01_DevTIL ✍JavaScript

13/ Image 업로드 시 회전에 대하여 (feat. exif 메타데이터 - Orientation)

웹 브라우저에서 이미지를 업로드 할 때 type이 file인 input을 통해 이미지를 받고, file API를 사용하여 이미지를 read합니다. 이때 핸드폰을 세워서 촬영할 경우 사진 이미지가 멋대로 회전되서 read될때가 있습니다. 이를 잡기 위해서는 사진의 메타정보(exif)에 있는 orientation이라는 정보를 확인해야합니다.exif가 무엇인지

0
01_DevTIL ✍CleanCode

📓 읽기 좋은 코드가 좋은 코드다. || part3. 코드 재작성하기

[읽기 좋은 코드가 좋은 코드다.]를 보고 메모할 부분을 정리했습니다. 목차 상관없는 하위문제 추출하기 ⇒ 관심사 분리 ⇒ 한번에 하나씩 ⇒ 관심사 분리 방법 ⇒ 생각을 코드로 만들기 ⇒ 코드 분량 줄이기 ⇒ 서론좋은 코드는 무슨 일이 일어나고 있는지를 빠르게 전달해준다.사용하기에도 즐겁고, 자신에게도 더 좋은 코드를 만들어야 하겠다는 욕구를 불러일으

0
01_DevTIL ✍CleanCode

📓 읽기 좋은 코드가 좋은 코드다. || part2. 루프와 논리를 단순화하기

[읽기 좋은 코드가 좋은 코드다.]를 보고 메모할 부분을 정리했습니다. 목차 읽기 쉽게 흐름제어 만들기 ⇒ 거대한 표현을 잘게 쪼개기 ⇒ 변수와 가독성 ⇒ 서론좋은 코드는 무슨 일이 일어나고 있는지를 빠르게 전달해준다.사용하기에도 즐겁고, 자신에게도 더 좋은 코드를 만들어야 하겠다는 욕구를 불러일으키기도 한다. PART 2 ) 루프와 논리를 단순화

0
01_DevTIL ✍CleanCode

📓 읽기 좋은 코드가 좋은 코드다. || part1. 표면적 수준에서의 개선

[읽기 좋은 코드가 좋은 코드다.]를 보고 메모한 부분을 정리했습니다. 목차 코드는 이해하기 쉬워야 한다. ⇒ 이름에 정보 담기 ⇒ 오해할 수 없는 이름들 ⇒ 미학 ⇒ 주석에 담아야 하는 대상 ⇒ 명확하고 간결한 주석 달기 ⇒ 서론좋은 코드는 무슨 일이 일어나고 있는지를 빠르게 전달해준다.사용하기에도 즐겁고,자신에게도 더 좋은 코드를 만들어야 하겠다

0
01_DevTIL ✍Web

렌더링 엔진(2) - 렌더 트리 구축

https://d2.naver.com/helloworld/59361 를 읽고 정리했습니다. 브라우저의 주요 기능 브라우저의 기본 구조 렌더링 엔진 동작 과정 HTML 파싱 (for DOM트리 구축) 렌더 트리 구축 렌더 트리 배치 렌더 트리 그리기 렌더 트리 구축 HTML 마크업을 처리하고 DOM 트리를 빌드합니다. CSS 마크업을 처리하고 C

0
01_DevTIL ✍Web

렌더링 엔진(1) - 파싱과 DOM트리 구축

https://d2.naver.com/helloworld/59361 를 읽고 정리했습니다. 브라우저의 주요 기능 렌더링 엔진 동작 과정 HTML 파싱 (for DOM 트리 구축) 렌더 트리 구축 렌더 트리 배치 렌더 트리 그리기 파싱과 DOM 트리 구축 파싱에 대하여문법 / 파서-어휘 분석기 조합 / 변환 / 파싱 예 / 어휘와 구문에 대한 공

0
01_DevTIL ✍Web

브라우저와 렌더링 엔진

https://d2.naver.com/helloworld/59361 를 읽고 정리했습니다. 브라우저의 주요 기능 브라우저의 기본 구조 렌더링 엔진 1. 브라우저의 주요 기능 URI를 입력할 수 있는 주소 표시 줄 이전 버튼과 다음 버튼 북마크 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼 홈 버튼 2. 브라우저의 기본 구조 사용

0
01_DevTIL ✍JavaScript

12/ File Api와 이미지 용량 줄이기

오늘은 이미지 용량을 줄이는, (리사이징이 더 맞는 말이겠죠.) 방법에 대해서 알아보려고 합니다. 로컬에서 이미지 파일을 올리는 것부터 시작하죠. 이를 위해서는 HTML5관련 API 중 하나인 파일 API를 이용하고, 이미지 리사이징을 위해서 캔버스를 이용할 것입니다. 파일API를 다뤄보고 Blob에 대해서도 알아보죠..(Blob의 더 자세한 내용을

0
01_DevTIL ✍CSS

(mobile) device-pixel-ratio계산

**목차** 👋👋 서론 @media 대하여.. -webkit-device-pixel-ratio 2-1. 픽셀비율 계산하기 2-2. device width와 height 계산하기 0. 서론 현재 작업 중인 프로젝트는 데스크탑 브라우저(여러 브라우저 대응) 뿐만아니라 모바일 기기 대응도 진행해야한다. 너무도 당연히