서랍장

해당 포스팅은 https://ko.javascript.info/file 을 공부할 목적으로 번역한 내용을 기반으로 나름대로 정리해본 포스팅입니다. 글 내의 예시코드 및 내용들을 자세히 보고 싶으시면 위의 링크 참고 부탁드립니다. 1. File File Object 는 Blob Object 에서 확장된 개념의 객체이다. Blob 객체에 파일 시스템 관련 기능을 추가했다고 보면 된다. 즉 Blob 객체에 파일 메타데이터를 포함하고 있어 일반적으로 사용자가 선택한 파일을 나타내는데에 사용되곤 한다. 이러한 파일 객체를 얻는 방법은 2가지 정도가 있다. Blob 과 유사한 File Object 생성자 사용 fileParts: Blob/BufferSource/String 값의 배열. fileName: 파일 이름 ..

해당 포스팅은 https://ko.javascript.info/blob 을 공부할 목적으로 번역한 내용을 기반으로 나름대로 정리해본 포스팅입니다. 글 내의 예시코드 및 내용들을 자세히 보고 싶으시면 위의 링크 참고 부탁드립니다. 1. Blob ArrayBuffer 는 ECMA 표준중 하나이다. 브라우저에서는 File API에 설명된 추가적인 고수준 객체들이 있다. 그중 하나가 Blob이다. ㄴ 웹 애플리케이션에서 파일과 이미지를 다루고 데이터를 처리하는 데 유용한 도구 보통 Blob 객체가 사용될 때는 대표적으로 아래정도가 있다. 파일 업로드 및 다운로드할 때 : 사용자가 업로드한 파일이나 서버에서 다운로드한 파일을 Blob 객체로 처리 이미지 처리, 프리뷰, 다운로드, 업로드할 때 ㄴ Canvas AP..

해당 포스팅은 https://ko.javascript.info/text-decoder을 공부할 목적으로 번역한 내용을 기반으로 나름대로 정리해본 포스팅입니다. 글 내의 예시코드 및 내용들을 자세히 보고 싶으시면 위의 링크 참고 부탁드립니다. 1. 텍스트 디코더 이진 데이터가 문자열이라면 어떨까? 텍스트 데이터가 있는 파일을 받았다고 가정해보자. 해당 텍스트 데이터는 결국 이진데이터로 변환되어 제어가 되게 된다. (BufferSource) 이 때 “이진 데이터 ↔ 텍스트“ 간의 변환을 담당하는 클래스가 바로 TextDecoder & TextEncoder 이다. 내장 객체 TextDecoder 는 주어진 버퍼와 인코딩으로 값을 실제 자바스크립트 문자열로 읽을 수 있게 해준다. let decoder = new..

해당 포스팅은 https://ko.javascript.info/arraybuffer-binary-arrays 을 공부할 목적으로 번역한 내용을 기반으로 나름대로 정리해본 포스팅입니다. 글 내의 예시코드 및 내용들을 자세히 보고 싶으시면 위의 링크 참고 부탁드립니다. 1. ArrayBuffer, binary arrays 웹 개발을 진행하며 파일을 다루거나 이미지를 다루는 경우가 있는데, 이 때 이진 데이터를 많이 접할 수 있다. 이 때 ArrayBuffer, Unit8Array, DataView, Blob, File 등 여러가지 클래스를 보게되어 혼란스러울 수 있는데, 막상 정리해보면 간단해진다. 기본 이진 객체는 ArrayBuffer라고 한다. 고정된 길이의 연속적인 메모리 영역에 대한 참조 인데 다음 ..

해당 포스팅은 https://ko.javascript.info/cross-window-communication 을 공부할 목적으로 번역한 내용을 기반으로 나름대로 정리해본 포스팅입니다. 글 내의 예시코드 및 내용들을 자세히 보고 싶으시면 위의 링크 참고 부탁드립니다. Same Origin 정책은 윈도우와 프레임간 접근을 제한하는 정책이다. 예를 들어 john-smith.com 과 gmail.com 2개의 페이지가 있다고 해보자. 그때 사용자가 john-smith.com 에서의 스크립트로 하여금 gmail.com 의 메일을 읽는 기능을 허용하지 않는 것이 Same Origin 정책이다. 1. Same Origin 2개의 url 이 같은 프로토콜, 도메인, 포트가 있다면 같은 Origin 이라고 판단할 수 ..

서비스 운영 중 가끔 사용자가 검색한 쿼리값을 통해 API 요청을 보냈을 때, 에러가 발생하는 경우가 종종 있었습니다. 이를 해결하기 위해 진행했던 버그 분석 및 해결 과정을 기록하고자 합니다. 비슷한 에러를 겪는 분께 도움이 되었으면 하네요 😮 1. 에러 분석 사용자가 어떠한 값을 검색하고자 할 때, Axios 를 활용하여 검색 쿼리 정보와 함께 API 요청을 보내는 방식으로 코드를 구현하여 서비스를 잘 운영하고 있었습니다. 그러던 중 가끔씩 검색 API 요청에 대한 서버 응답이 500이 떨어지는 현상을 발견하게 되었습니다. 어떤 경우에 에러가 발생하는 건지 확인해본 결과. 사용자가 입력한 검색 쿼리와 함께 API 를 요청할 때 url query string 에 대괄호가 인코딩 되지 않은 상태로 요청이..

＃JAVAScript 란? 일단 BOM 에 대해 알아보기 전에 javascript 에 대해 알아보자. javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어. 경고창을 띄우고, 탭 인터페이스를 만들고, Drag & Drop 기능의 웹 에플리케이션을 만들수 있다. 예전에 Javascript는 원래 많이 인기없는 언어였다. 허나 구글이 지도 서비스를 내 놓자 HTML/CSS 만으로도 플래쉬와 같은 효과를 구현할 수 있다는 것을 증명. 거기에 ajax 열풍이 가세하면서 favascript의 중세는 끝이 난다. 자바스크립트의 재조명과 스티브 잡스의 플래쉬 혐오, HTML5의 등장이 맞물리면서 플래쉬의 입지가 빠르게 줄어들고 있고, 그 빈자리를 빠르게 자바스크립트가 대체하기 시작했다..

JavaScript 란 무엇일까? 결론부터 말하자면 JavaScript 란 scripting language 이고 interpreted language 이다. 말이 좀 어려운데 간단하게 설명하자면 scripting 의 의미는 control 할 수 있도록 도와주는 의미이고, interpreted 의 의미는 컴파일 하지 않는 이미 해석되어있는 언어라는 의미이다. 후자의 의미가 좀 어려운데 다시 설명해보자. c언어와 같은 compile 기반의 프로그래밍 언어는 실행 되기 전에 컴파일러에 의해 compile 된 이후 실행된다. 허나 이와는 달리 JavaScript 는 run time 떄 그냥 바로 실행되버린다는 특징이 있다. 즉, script 로 되어있는 프로그램들을 실행할 때 인터프리터의 도움을 받아 다이나믹..

요즘 3D 이미지 시각화 툴을 만들어가면서 HTML5 표준이 미디어에 큰 힘을 불어넣어주고 있구나를 체감하고 있습니다. canvas 태그에 2D 이미지를 자유롭게 렌더링하거나, svg 값을 통해 이미지를 좀더 유동적으로 설정하며 시각화 툴을 만드는 와중에 3D 이미지 렌더링을 위한 webGL 에 관심이 가게 되어 자료들을 모으고 정리하는 중입니다. * WebGL 사용 후기 WebGL은 canvas 에 2D 이미지를 렌더링하는 것과 거의 비슷하게 점, 선, 삼각형 등 간단한 도형을 그려줍니다. 다만 2D가 아닌 3D 그래픽화 시켜준다는 것이 차이점입니다. Scene, Mesh, Geometry, Camera 등 여러 객체들을 초기화해주고 각각을 잘 연결시켜 Renderer에게 canvas에 그려줘~ 라고 ..

코딩하는 과정에서 객체를 정의할 때 해당 객체의 프로퍼티를 셋팅하도록 설정한다면 해당 객체를 추후 재활용하는데에 귀찮음과 어려움이 생길 수 있다. -> 이를 보완하기 위해 생성자를 새용해 원하는 프로퍼티의 인스턴스를 생성할 수 있도록 해줄 수 있다. 즉 생성자 패턴을 도입함으로써 코드의 재사용성을 대폭 높혀 레고 블럭인 객체를 좀더 자유자제로 사용할 수 있게 된다. - 함수를 호출할 때 new 를 붙이면 해당 함수는 새로운 객체를 만든 후에 이를 리턴한다. 해당 객체의 생성자를 호출한다고 생각하면 편하다. - 일반적인 객체지향 언어에서 생성자는 클래스의 소속이다. 하지만 자바스크립트에서 객체를 만드는 주체는 함수이다. 즉, 함수에 new 를 붙이는 것을 통해 객체를 만들 수 있다는 것은 자바스크립트의 특..