북극곰은 펩시를 마시지

서론 최근 위성영상을 로컬에 다운로드 받는 기능을 구현해야하는 일이 있었다. 평소 다운로드 기능을 구현하던대로 fetch api로 서버에 요청을 보내 a tag 태그를 생성하여 다운로드 받도록 구현하였다. 하지만 파일 다운로드 하는데 너무 오래걸렸다. 확인해보니 파일을 다 받아올때까지 로컬에 다운로드 하지 않고 파일을 다 받아왔을때 브라우저에서 로컬에 다운을 시작해 시간이 두배로 걸리는 일이 생겼다. 그냥 a tag에 바로 파일의 url을 넣어줘도 되지만 권한이 필요할땐 토큰을 넣어 줄 수 없었다. 그래서 다운로드 받으면서 바로바로 로컬에 다운로드를 할 수 있는 방법을 찾아보았다. 구현 한참 이것저것 찾다보니 streamsaver라는 라이브러리를 쓰면 된다고 하는 stackoverflow의 글을 보았다...

서론 어느날 일하던 도중 친구에게 연락이 왔다. 연락의 내용은 자기네 회사에서 1월 22일에 스프린트 서울이라는 오픈소스 행사에 참여하는데 와서 해보지 않겠냐고 했다. 나는 재밌어 보이기도 하고 친구가 영업아닌 영업을 해서 참여하게 되었다. 참가 기다리던 토요일이 되었고 10시 시작이라 10시에 디스코드에 들어갔다. 사람들이 인사를 나누고 있었는데 수줍음을 많이타는 나는 쭈뼛거리면서 내가 참여할 채팅방에서만 인사를 했다. (왜그랬지....) 시간이 좀 지나자 공지가 올라왔고 공지의 내용은 따로 프로젝트에 대한 소개없이 바로 참여를 원하는 프로젝트 채널에 들어가서 진행하면 된다고 했다. 나는 이미 하고싶은 프로젝트를 정해논 터라 이점은 좋았다. 나는 9c-launcher라는 오픈소스 게임 클라이언트 프로젝..

최근 사내 라이브러리중 하나에 linter가 적용되어 있지 않아 새로 적용하려고 eslinter와 prettier를 설정해 주었다. 그런데 eslint와 prettier가 먹히지 않았다.. 그래서 preference의 setting으로 들어가보니 prettier 설정파일의 이름이 prettierrc.json으로 설정되어 있었다. 하지만 내가 만든 설정파일은 .prettierrc.json 이었고 그래서 다음과 같이 변경해 주었다. 그래도 적용이 안되길래 혹시나 하는 마음에 VSCODE를 재시작하니 동작하기 시작했다!! { ... "eslint.workingDirectories": ["./"], "prettier.configPath": "./prettierrc.json", ... }

서론 지금 다니는 회사에서는 위성영상을 인공지능으로 분석해 사용자들에게 정보를 제공해주는 제품을 만드는 일을 한다. 그 중 최근 위성영상을 세그멘테이션하는 툴을 만들게 되었다. 위성영상을 확대/축소하고 이동을 하는 기능이 어려울거라 생각했지만 기존에 한번 비슷한 툴을 만들었기에 코드를 어느정도 가져오면 되겠지 싶었다. 하지만 마음대로 되지 않았고 공식(?)을 정리하고 기록해야 할 필요성을 느껴 작성하게 되었다. 요구사항 먼저 요구사항중에 줌과 이동 기능이 있었다. 다만 줌을 할때에는 마우스 포인터를 기준으로 잡고 줌인 / 아웃을 해야했다.(GIF 참조) 그리고 이동은 여느 프로그램처럼 드래그로 이동을 하면 되었다. ZOOM 먼저 어려울것 같은 줌부터 해결해보았다. 이걸 어떻게 구현해야하나 고민하고 있을 ..

실행 컨텍스트가 뭐야?? 자바스크립트에서 실행 컨텍스트란 실행 가능한 코드를 형상화 하고 구분하는 추상적인 개념이라고 한다. 처음 이 말을 들어보면 좀 복잡할 것이다. 나도 그랬고 나는 내 나름대로 코드블럭이 실행되는 환경이라고 해석했다. 일반적으로는 함수와 전역 코드라고 생각하면 될 것 같다. 실행 컨텍스트를 공부하기 위해선 호출스택을 알아야 한다. 호출스택은 자바스크립트와 비동기 처리에 정리해 놓았다. 전역 실행 컨텍스트, 함수 실행 컨텍스트 컨텍스트에는 두가지 종류가 있다. 전역코드가 실행될때 만들어지는 컨텍스트가 전역 실행 컨텍스트이고 함수가 실행될 때 만들어지는 함수 실행 컨텍스트가 있다. 전역실행 컨텍스트와 함수 실행 컨텍스트가 다른 점은 전역 실행 컨텍스트가 가장 먼저 실행되고 가장 늦게 종..

자바스크립트는 단일 스레드기반으로 동작한다. 이 뜻은 한번에 한가지 작업밖에 처리하지 못한다는 뜻이다. 하지만 우리는 서버에 AJAX로 데이터를 불러오면서 이벤트를 처리하기도 한다. 이는 이벤트 루프와 태스트큐가 있기 때문에 가능한 일이다. 이벤트 루프와 태스트큐가 동작하는 과정을 알기 위해선 자바스크립트 엔진에 대한 이해가 필요하다. 자바스크립트 엔진은 크게 힙영역, 호출스택, 이벤트 루프, 태스트큐로 이루어져 있다. 힙 영역은 동적으로 생성된 객체를 저장하는 공간이고 호출 스택은 메소드가 실행되었을 때 스택 프레임이 생성되는 공간이다. function first(){ console.log('first'); second(); } function second(){ console.log('second');..

CORS란? cors란 cross origin resouce sharing의 줄임말로 다른 도메인에 요청을 보낼수 있게 하는 표준 규약이다. 좀 더 간단하게 설명하자면 내 도메인이 foo.com일 때 bar.com에게 요청을 보낼 수 있게 하는 것이다. cors의 기본적인 형태는 다음과 같다. Request GET /resources/access-control-with-get/ HTTP/1.1 Host: aruner.net User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,app..

css는 인라인 레벨과 블럭레벨이란것이 있다. 이 종류에 따라서 화면에 출력되는 방법이나 적용되는 css 속성등의 차이가 생긴다. 인라인레벨 인라인 레벨은 html의 태그중에서 화면의 일부를 차지하는 태그를 말한다. 인라인의 태그에는 다음과 같은 태그들이 있다. a abbr acronym b bdo big br button cite code dfn em i img input kbd label map object q samp small script select span strong sub sup textarea tt var 블럭레벨 블럭레벨은 인라인태그와는 다르게 화면의 전체를 사용하는 태그를 말한다. 다음은 블럭레벨 태그들이다. address article aside audio blockquote can..