대범하게

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

The transformation matrix in fabric.js 이 글은 faric.js을 공부하면서 마주했던 transmation matrix에 대해 정리한 글에 대한 (가벼운) 번역이자 추가 설명을 위한 글입니다. The transformation matrix in fabric.js Recently I’m using the excellent fabric.js library for a side project. I came across the transformation matrix. The purpose of this article… medium.com The purpose of this article is to detail how the transformation matrix works and e..

useEffect에 대해 정리하고 싶은 마음이 들어 useEffect의 실행 조건과 흐름을 한 큐에 정리해보고자 한다. useEffect 란? useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 근데 useEffect는 왜 Effect라는 이름을 가질까? Hook은 컴포넌트의 렌더링과 별개로 발생하는 작업들, 즉 "부수 효과"를 처리하기 위해 사용된다. (" S H O C K I N G ") 이 useEffect Hook은 컴포넌트가 렌더링되고 나서 비동기적 또는 부수적인 작업을 수행할 수 있도록 도와주기 때문에 "Effect"라는 용어가 사용되었다고 한다. 더보기 React의 클래스 컴포넌트에서는 componentDidMount, componentD..

PUB/SUB 구조 pubsub을 어렵게 받아들일 필요가 없다는 것을 이해하고 글을 써본다. PUB/SUB의 구조는 유튜브 생태계로 이해해보자. 우리 곁에서 가장 쉽게 Publisher와 Subscriber의 관계를 볼 수 있는 곳은 바로 유튜브이다. 그럼 유튜브의 생태계에 빗대어 보자. Publisher는 유튜버, Channel은 유튜브 채널, Event는 유튜브 영상, Subscriber는 구독자라고 생각하면 이해하기 쉽다. 유튜버(=Publisher)는 자신의 유튜브 채널(=Channel)에 유튜브 영상(=Event)을 생성 및 업로드한다. 여기서 유튜브 영상을 하나의 이벤트(메세지)라고 이해할 수 있다. 특정 Channel을 구독하고 있는 구독자(=Subscriber)는 Channel에 올라온 유..

.gitconfig에 alias 설정하기 + 만약 나중에 다른 컴퓨터를 사용해야할 경우, Git 관련 설정을 위한 글이다. alias은 무엇인가? - alias이란, git 명령어에 대한 사용자 정의 별칭(alias)을 설정하는 것이다. - 이 별칭은 git 명령어를 더 간결하게 실행하고 원하는 형식으로 로그를 출력하는 데 사용된다. .gitconfig에 alias 설정하는 방법 1. home 디렉토리에서 cat .gitconfig로 .gitconfig 파일 확인하기 2. vi .gitconfig 를 통해 아래 코드 저장하기 [alias] lg = log --graph -15 --abbrev=7 --decorate --date=relative --format=format:'%C(bold red)%h%C(..

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. git stash로 임시 저장하기 2. git stash list로 저장된 내용 확인하기 3. git stash apply로 저장된 내용 불러오기 💡git stash 사용해서 하던 작업 저장하고 다시 꺼내기 💡 VS code에서 작업하고 있던 브랜치가 아닌 다른 브랜치에서 작업해야하는 경우가 있다. 현재 작업하고 있던 브랜치에서 변경된 내용을 커밋하기엔 애매하고, 다른 곳에 복사해두기엔 변경 내용이 많은 경우 곤란하다. (*커밋하기 애매한 이유: "커밋"이라는 과정은 문제없이 작동하는 코드에 대해서만 진행) 이 경우 로컬 저장소에서 임시로 저장할 수 있는 명령어가 바로 git stash이다. 1. git stash로 임시 저장하기 git stash를 사용하여 저장하면, 스택(Stack) 형식으..

목차 1. 브라우저에서 Javascript의 존재 이유는 DOM 조작이다. 2. Javascript로 특정 DOM을 선택하는 방법은? 3. React에서는 특정 DOM을 어떻게 조작하는가? 4. React의 가상 DOM과 상호 작용하며 실제 DOM 조작하기 4-1. useRef 예제: useRef와 useState 함께 활용 5. useState와 useRef의 실질적인 차이점은? useRef에 대한 이해와 특정 DOM 조작 (부제: useRef로 특정 DOM 선택하기) (* 이해의 흐름을 바탕으로 작성한 글이기에 지식을 뽑기보다 천천히 정독함을 권장해드립니다. ) 필자는 useRef가 useState와 useEffect처럼 한 번에 이해되지 않았다. 드디어 이해했기에 글을 작성해본다. TODO: "특정..