북극곰은 펩시를 마시지

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

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

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

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..

해시뱅이란? 해시뱅이란 URL 뒤에 붙어있는 #!을 의미한다. 해시뱅의 역할은 SPA에서 ajax를 사용했을 때 페이지의 변화를 기억하기 위해 사용한다.예를 들어 ajax를 사용한 경우 url은 그대로이기 때문에 뒤로가기를 누르면 ajax를 통해 가져온 정보들이 날아가게 된다.하지만 해시뱅을 사용하게 되면 검색엔진 최적화가 되지않는 단점과 자바스크립트가 오류가 나면 웹페이지의 접속이 불가능하다는 단점등이 있다. 참고한 블로그 : https://m.blog.naver.com/writer0713/220179565314

DOM이란? DOM은 document object model의 약자로 직역하면 문서 객체 모델이다.문서 객체 모델이라는 말만 들어서는 뭐하는 건지 이해가 가지 않아 검색을 해보았다.먼저 문서 객체는 html의 태그들을 자바스크립트가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 부른다고 한다.모델이란 뜻은 모형이라는 의미도 있지만 방식이라는 의미로 해석할 수 있다고 한다.합쳐보면 html의 태그들을 자바스크립트가 이용할 수 있는 객체로 만드는 방식 이라고 할 수 있다.내가 이해한 것을 한줄로 정리하면 '자바스크립트가 html의 요소들에 접근하는 방식' 이다. * html도 일종의 문서이다. Javascript와 DOM DOM은 자바스크립트뿐만 아니라 다른 언어들로도 구현이 가능하지만 이 글에서는 자..

SEO란? SEO란 Search Engine Optimization의 약자로 직역하면 검색 엔진 최적화라고 할 수 있다.이게 뭔뜻이냐하면 특정 키워드로 검색을 하였을 때 컨텐츠의 노출을 최적화 하는 것이라고 할 수 있다.간단한 예를 들면 SNS의 해시태그를 생각하면 된다.SNS게시물에 해시태그를 작성하여 컨텐츠를 게시하면 해당 해시태그가 검색되었을 때 작성한 컨텐츠가 검색된다. 결과적으론 해시태그를 이용하여 컨텐츠의 노출을 높힐 수 있었다.정리하자면 SEO는 구글과 네이버 등의 검색엔진들의 구조를 파악하여 컨텐츠의 노출을 최적화 시키는 일이라고 할 수 있다. 맨 아래에 검색 엔진별 최적화 가이드 링크를 달아놓았으니 참고바란다. 검색 엔진 최적화를 위한 고려 사항 HTML 태그 활용 검색 엔진 최적화를 고..