서랍장

1. 문제const readonlyArr: readonly number[] = [1, 2, 3, 4];const nonReadonlyArr: number[] = [1, 2, 3, 4];const arr1_1: readonly number[] = readonlyArr; // okconst arr1_2: readonly number[] = nonReadonlyArr; // okconst arr_1: number[] = readonlyArr; // errorconst arr_2: number[] = nonReadonlyArr; // ok타입스크립트를 사용하는 중에 이해가 가지 않는 코드를 마주치게 되었다. 위의 예시를 보면 알 수 있듯이, readonly 가 붙은 배열타입과 붙지 않은 배열타입간..

Typescript에서 제공하는 Enum의 형태는 2가지가 존재한다.숫자기반의 enum 과 문자열기반의 enum이 2가지 형태의 enum 을 구분할 줄 알아야한다.각 형태에 따라 런타임 환경에서 javascript 가 값을 읽을 수 있도록 transpile 되는 형태가 다르기 때문이다.그러면 어떻게 다른지 살펴보자. 1. Enum 의 두가지 기능TypeScript의 enum은 아래의 2가지 기능을 제공한다.역방향 매핑(Reverse Mapping)숫자 기반 enum은 값에서 이름으로, 이름에서 값으로 양방향 매핑을 지원한다.이를 통해 기존의 key 로 접근하여 value 를 가져올 수 있는 형태에서, 역으로 value 에 접근해 key 를 가져올 수 있는 형태까지 가능해졌다.실행 시점 접근(..

1. 문제이해가 가지 않았던 코드// giveninterface A { a: string;}interface B { a: string; b: number;}// whenconst aTypeVal: A = {a: 'a'}; const bTypeVal: B = {a: 'a', b: 1}; // thenlet aTemp: A;aTemp = bTypeVal; // okaTemp = {a: 'a', b: 1}; // error나는 위 코드를 작성할 때 당연히 aTemp 변수에 bTypeVal 을 할당할 수 있었으니aTemp = {a: 'a', b: 1};위 코드에서 에러가 날 것을 의심하질 못했다.헌데 실제로 작성하면 ts error가 발생한다..대체 뭐가 다르길래 타..

해당 포스팅은 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 에 대괄호가 인코딩 되지 않은 상태로 요청이..

2021 APC (아주대학교 프로그래밍) 대회 문제중 하나였다. 예전에 엘리베이터 관련 문제를 카카오 2차 기출에서 본 듯해서 그걸로 푸는건가? 했지만 해당 문제는 단지 dfs 탐색을 통해 일일이 체킹만 해주면 되는 문제이다. 다만 한가지 집고 넘어가야할 점이 있다. dfs 로 일일이 순회를 해주다가 해당 층에 사람이 없는 경우가 생기게 된다. 이렇게 되면 사람이 있는 층들 중에 한 곳으로 가야하는데 어떤 기준으로 갈 곳을 정해줄까? 에 대한 문제이다. 위상정렬 알고리즘에서 힌트를 가져왔다. 각 층을 원하는 사람의 수를 배열 하나 두어서 체킹해준 다음에 원하는 사람이 작은 층을 갈 곳으로 정하면 된다. 이렇게 되면 중간에 건너띄는 층 없이 모든 층을 깔끔하게 순회할 수 있기 때문이다. 이 점때문에 골드 ..