서랍장

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

취준생 분들께 조금이나마 도움이 되고자 오래 되지는 않았지만.. 기억을 더듬어 2022 카카오 블라인드 전형 후기를 작성해봅니다. (_ _) ⁕ 1차 코딩 테스트 ⁕카카오는 서류 전형이 거의 코딩테스트 신청 수준이라 간단합니다. 그만큼 코딩테스트가 많이 중요한 것으로 알고 있습니다.네이버, 라인 등등 여러 기업의 코딩테스트를 겪었지만 카카오의 1차 코딩테스트가 제일 육체적으로 힘들었다고 생각합니다. 아무래도 5시간 동안 7문제 가량의 문제를 풀어야 하기 때문에 쭉 집중하는 것도 힘들었고, 문제 해결방법을 생각하는 데에도 머리가 아파왔던 시험이지 않았나 생각합니다.문제는 카카오에서 공개되면 그 때 하나씩 살펴보겠습니다. 저는 일단 7문제 중에 5문제를 풀었습니다. 코딩테스트 공부는 백준 플레티넘..

관련 글이나 자료가 매우 적은 SK 하이닉스 IT 직무 채용 후기이기에 조금이나마 도움이 되고자 면접 후기를 적으려고 합니다.2021 하반기 코딩테스트가 끝난 후 1~2주 후에 최종면접을 진행합니다. 4~5 : 1로 되어있으며 비대면으로서 시간은 30분정도로 잡혀있습니다. 다른 지원자분들의 이야기를 들어봤을 때 보통 15~20분만에 끝나는 것 같습니다.여튼 저는 15분의 짧은 시간동안 면접을 진행하였습니다. 받은 질문은 크게 다음과 같습니다.- 인턴 경험 관련 질문- 프로젝트 관련 질문- 인성질문 대다수 (갈등 상황 위주)- 반도체 쪽 관련 경험이 있냐아무래도 15분의 짧은 시간이라 그런지 많은 질문이 나오지는 않습니다. 개인적으로 마지막 반도체쪽 관련 경험이 없어서 해당 질문에서 없다는 답..