대범하게

직렬화(Serialize), 역직렬화(Deserialize) 1. Javscript JSON 이란 JSON(Javscript Object Notation)은 자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다. 자바스크립트 객체 리터럴과 유사하지만 객체가 아닌 문자열일 뿐이며, 이를 이용해 다른 도메인과 데이터를 주고 받을 수 있게 된다. JSON은 XML 등 다른 데이터 포맷에 비해 간결하며, 손쉽게 자바스크립트 객체로 변환할 수 있어, 웹 어플리케이션에서 Server-Client간의 데이터 교환에 주로 JSON을 사용한다. 2. JSON 표기법 JSON은 자바스크립트 객체와 유사하지만 표기법이 조금 다르다. { "name" : "Choi", "age" : "secret", "gender" : "fe..

Promise - async, await 범위 설정하기 아래 글은 async와 await 범위 설정에 따라 결과값이 달랐던 부분을 기록하기 위한 글이다. 두 코드 모두 HTML5 Canvas에서 생성된 이미지를 블롭(blob) 형태로 만들어서 AWS S3에 업로드하는 기능을 수행한다. 수정 전 (uploadMaskingImageFile 함수) // canvas 위의 masking된 이미지를 s3에 업로드하는 함수 const uploadMaskingImageFile = async () => { const image = new Image(); if (canvasRef.current && imageData) { const canvas = canvasRef.current; const context = canva..

목차 1. Typescript가 만들어진 배경과 정의 2. ES5, ESNext와 Typescript의 차이가 무엇인가 3. Typescript가 Javascript로 변해야하는 이유 Typescript(타입스크립트) 1. Typescript가 만들어진 배경과 정의 요즘 대부분의 회사에서 자바스크립트가 아닌 타입스크립트를 사용한다. 타입스크립트란, 자바스크립트가 가진 여러 문제를 해결하고 보완하기 위해 만들어진 언어이다. 여기서 여러 가지 문제라고 한다면 아래를 살펴보자. 더보기 동적 타입: 자바스크립트는 동적 타입 언어이므로 변수의 타입을 선언하지 않고 사용할 수 있다. 이는 개발자가 변수의 타입을 실수로 잘못 사용하거나, 의도치 않은 타입 변환으로 인한 오류가 발생할 수 있음을 의미합니다. 타입 체크..

문자열의 마지막 문자 가져오기 파이썬에서 문자열의 마지막 요소를 가져오려면 배열 a의 a[-1]를 가져오면 됐었다. (아주 간편한 친구였다..!) 자바스크립트에서는 배열 마지막 요소를 -1의 인덱스로 가져오게 된다면, 아래와 같이 오류가 발생한다. 문자열의 마지막 문자를 가져오는 방법은 여러가지가 있겠지만, 기록하고자 하는 총 4가지 방법이 있다. 1. charAt()으로 마지막 문자 가져오기 charAt(index)는 index의 문자를 가져온다. 문자열의 마지막 index는 str.length - 1으로 계산 가능하다. '문자열 str의 길이를 length로 계산하고, index는 0으로 시작하기 때문에 -1을 해주면 마지막 문자열의 index이다. const str = "Hello, World"; ..

문자열을 숫자 배열로 변환하는 방법 여러 숫자를 입력 받고 배열로 만들어야하는 과정이 있었다. 예를 들어, 1, 2, 3, 4 를 입력하면 [1, 2, 3, 4]로 저장되게끔 만들어지게끔. split()으로 값 분리 - split() 함수 내 인자로 구분 | map(Number) - 배열 내 원소 숫자로 변환 문제 1 ','(콤마)를 구분점으로 값을 분리하기에 split(",")을 활용한다. split으로 숫자들을 분리하면 원하는 값처럼 숫자가 아닌 문자열로 들어가게 된다. 해결 1 이때 split 함수뒤에 .map(Number)만 써주면 자동으로 문자가 숫자로 바뀌어 배열로 들어가게 된다. 문제 2 모든 사용자가 1, 2, 3, 4와 같이 ','(콤마)와 띄어쓰기를 온전하게 입력하지 않을 수도 있다. ..

JSON 파일 내의 값이 변동이 안 됩니다. 어떻게 해결해야하죠? Typescript로 자판기를 구현하는 과제가 주어졌고, 상태관리라는 문제에 마주쳤다. React를 사용했더라면 React-Hooks의 useState를 이용하여 컴포넌트의 상태 관리를 하면 된다고 떠올렸지만 이 과제는 only Typescript로 구현해야하기 때문에 다른 방법을 생각해야했다. 전반적으로 관리해야할 것들은 가격, 재료 등의 존재 여부를 알고 있어야하기 때문에 machine.json이라는 "데이터베이스" 역할을 하는 객체를 하나 만들었다. machine.json 파일 내에 각 key 값은 재료, value 값은 재료의 남은 양을 뜻한다. // machine.json { "resource": { "cup": 17, "wate..

타입스크립트에서 JSON import하는 방법 // *.ts import testJSON from "./testJSON"; 자바스크립트에서 json을 import 하는 방법은 위와 같이 import 하면 된다. 하지만, 타입스크립트로 전환하게 된다면 타입스크립트는 기본적으로 JSON 파일 확인을 지원하지 않기 때문에 json을 가져오기 위해 별도의 설정이 필요하다. 간단하게 tsconfig.json 파일에서 "resolveJsonModule":true의 주석을 풀어줌으로써 typescript 파일에서 JSON 파일을 import 할 수 있다. // tsconfig.json { "compilerOptions": { "resolveJsonModule": true, // more awesome compiler..