번데기 개발자의 메모장

최근에 프로젝트를 진행하던 중에, 리소스 요청을 하는 Rest API Request를 날렸을 때 서버로부터 응답이 오는 것이 아니라 이전의 데이터를 반복해서 가져오는 문제가 발생하였습니다. 이를 해결하기 위해 열심히 구글링을 하여 원인을 찾아보았습니다. 문제 원인 문제의 원인은 인터넷 브라우저에서 get 함수를 호출했을 때 동일한 url이면 브라우저 자체에서 캐시 처리가 되어 실제 서버를 호출하지 않는 문제 때문이었습니다. 즉 새로운 요청을 서버로부터 받아와야 하는데 크롬 브라우저 자체의 캐시로 요청을 처리한 것입니다. 브라우저 캐시의 생명주기 위와 같은 이유가 일어나는 이유를 알기 위해서는 브라우저의 캐시 생명주기를 알아야합니다. 보통 웹브라우저가 서버에서 지금까지 요청한 적이 없는 리소스를 요청하게 ..

브라우저에서 blob에 저장할수 있는 최대 용량을 구하는 방법에 대해 간단하게 알아보겠습니다. 일단 blob에 대한 개념은 아래 링크를 통해 확인해주시면 됩니다. JS : blob에 대해 알아보고 data URL을 통해 표현하기 (createObjectURL, removeObjectURL) 웹 개발을 하다 보면 blob과 dataUrl을 종종 사용하게 됩니다. 단순하게 웹에서 data를 표현하는 방식으로 알고 있었는데 많이 사용을 해봤지만 깊게 알아본 적이 없어서 한번 정리를 해봤습니다. Blo jw910911.tistory.com Blob 최대 용량 계산 공식 Blob의 최대 용량을 계산하는 공식입니다. OS 환경에 따라 할당할수 있는 Blob 사이즈가 달라지는 것을 확인 할 수 있습니다. 브라우저에서..

모바일 웹앱을 만들때 비디오를 자동 재생하는 부분에서 애를 먹곤 합니다. IOS의 Safari와 안드로이드의 Chrome에 맞춰서 비디오를 자동 재생을 시키려면 몇가지 유의해야 할 점이 있습니다. 이에 대해서 알아보고 추가적으로 IOS Safari에서 저전력 모드일때 자동재생이 막히는 부분에서 예외처리 방법에 대해 알아보겠습니다. 모바일에서 Video 태그 자동재생 보통 모바일에서 비디오 태그를 자동재생 시킬때 필요한 몇가지 속성들이 있습니다. Video 태그에 자동재생, 즉 autoplay를 활성화 시키려면 기본적으로 muted 속성이 필요합니다. muted 속성은 video태그에서 소리를 막아주는 속성값입니다. muted 속성이 필요한 이유는 웹 브라우저를 켰을때 유저가 원하지 않는데 자동재생되며 소..

깊은 복사 깊은 복사는 변수에 다른 변수의 값을 대입했을때 각각의 변수가 독립적으로 존재하고 값만 복사 되었을 때를 말합니다. 즉 원본의 값만을 복사하여 반환 합니다. // 일반변수의 깊은복사 let a = 2; let b = a; console.log (a, b) // 2, 2 b = 3; console.log (a, b) // 2, 3 // 배열의 깊은복사 const a = [1, 2, 3, 4]; const b = [...a]; b[3] = 3 console.log(a) // 1, 2, 3, 4 console.log(b) // 1, 2, 3, 3 얕은 복사 반면 얕은복사는 배열이나 객체등에서 해당 객체의 참조값을 대입했을때, 해당 참조값의 복사가 일어나 같은 주소를 가르키게 될 경우를 의미합니다. ..

Javascript에서 배열의 slice 메서드에 대해 알아보겠습니다. 보통 Splice와 Slice는 배열의 일부분을 잘라내어 새로운 배열을 만들고 싶을때 보통 사용하는데요, 저도 Splice와 Slice의 차이점을 알지못하고 썼는데, 잘 알고 쓰면 좋을것 같아서 정리를 하게 되었습니다. Slice 사용법 (깊은 복사) slice는 원본 배열을 바꾸지 않습니다. slice는 인자가 1개일때는 첫번째 인자로 받은 배열의 인덱스로부터 마지막 배열값 까지의 값들로 만든 새로운 배열을 반환합니다. slice는 인자가 2개일때는 첫번째 인자로 받은 배열의 인덱스부터 마지막 인자로 받은 인덱스 -1 까지의 값들로 만든 새로운 배열을 반환합니다. slice는 깊은 복사의 방법입니다. 즉 원본 배열의 값만을 복사해서..

IIFE란 IIFE는 Immediately Invoked Function Expressions의 약자이고 “Iffy”라고 발음합니다. 즉 즉시 호출 함수 표현식의 줄임말입니다. 즉시 실행 함수의 기본적인 형태는 다음과 같습니다. 함수의 선언과 표현 IIFE를 이해하기 위해서는 앞전에 설명했던 함수의 선언(Function Declaration)과 함수의 표현(Function Expression)의 차이점에 대해 이해해야 합니다. 많은 사람들은 단순히 표현식에서는 함수명이 생량될 수 있다고 알고 있지만 사실 이보다 좀 더 뚜렷한 차이점을 가지고 있습니다. 함수 선언(declartion)은 미리 자바 스크립트의 실행 컨텍스트(execution context)에 로딩되어 있으므로 언제든지 호출 할 수 있지만, ..

JavaScript Map함수 foreach와는 다르게 map은 각 루트에서 return을 할 수 있습니다. map은 각 루프에서 return을 할 수 있다는 특징이 있습니다. map을 이용하면 return값으로 같은 길이의 배열이 나오게 됩니다. 배열의 값을 일괄적으로 바꿀때 유용하게 쓰일 수 있습니다.

자바스크립트 객체란? 자바 스크립트의 객체의 프로퍼티 명을 키, 프로퍼티의 값을 값이라고 합니다. 객체 리터럴이 다중값 데이터 표현으로써의 객체라고 할 수 있습니다. 자바스크립트의 연관배열 일반적으로 숫자를 key로 값을 뽑을 수 있으면 배열이라고 합니다. 배열은 연속하는 숫자이므로 순서가 있는 값의 모음으로 볼 수 있습니다. 문자열에 한정되지 않고 임의의 타입의 키를 이용하여 키와 값의 모음을 다루는 데이터 구조를 연관 배열이라고 합니다. 연관 배열은 다른말로 맵이나 사전이라고도 부르며 내부 구현에 따라 해시(Hash)라고 부르는 언어도 있습니다. 연관 배열의 용도로는 키로 값을 뽑아내는 조작입니다. 스크립트 계열 언어의 언어기능으로 연관 배열 타입을 제공하고 있습니다. 특히 자바스크립트에서는 객체를 ..

함수 호이스팅이란? 함수 호이스팅이란 변수를 선언하고 초기화했을때 선언 부분이 최상단으로 끌어 올려지는 현상을 의미합니다. (초기화 또는 대입부분은 그대로 남아있습니다.) 아래의 sayWow를 보면 알 수 있습니다. sayWow처럼 함수 표현식이아니라 함수 선언식일 때는 식 자체가 통째로 끌어올려집니다. 위의 코드는 선언보다 호출을 먼저 하기 때문에 얼핏 보기에 잘 동작하지 않을 것 처럼 보입니다. 그렇지만 에러 없이 정상적으로 동작합니다. 왜냐하면 함수 선언식이 최 상단으로 끌어올려졌기 때문입니다. 위의 코드는 다음과 같습니다. 하지만 같은 함수여도 함수 표현식으로 선언한 경우에는 에러가 발생합니다. 다음 예시를 한번 살펴보겠습니다. 일단 처음 실행 시에는 전역 컨텍스트가 먼저 생성됩니다. sayWow..

초기 자바 스크립트의 실행 원리 현재 Html브라우저로 사용되고 있는 사파리,크롬등에서 사용하는 자바스크립트 엔진은 모두 JITC(Just-In-Time-compiler)방식을 사용합니다. 기본적으로 javascript는 인터프리터 언어로 대부분 알고 있고 초기에는 모든 javascript코드를 바로 JITC Native Code로 변환해서 통째로 읽는 방식으로 구현되었습니다. 즉 JITC와 Interpreter방식은 자바스크립트의 내부 엔진의 동작 방식입니다. -기본적인 실행 방식- 1. text 형태로 배포 2. 배포된 javascript code를 파싱하여 중간언어인 byte 코드 형태로 전환 3. native 코드로 변환 (Interpreter방식 JITC방식 2가지로 나뉨) Interpreter..