Pay it forward

pdf 데이터를 서버에서 base64로 인코딩 된 문자열을 받아서 pdf타입의 blob객체를 만들고 이것을 새창에서 띄운다.새창에서 한번 확인한 후에 저장한다.blob url을 만들어서 새창에 띄워주면 크롬 pdf 뷰어가 나오면서 빨간색 동그라미로 표시한 다운로드 버튼을 누르면 pdf가 저장된다.근데 이 pdf가 엄청 많아질 수 있다. 그러면 자연스럽게 서버에서 받아오는 base64로 인코딩 된 데이터가 많아진다.이것을 URL.createObjectURL(blob)메서드로 계속 만들기만 한다면 메모리에 데이터가 계속 쌓이기만 할 테니 필요 없어지면 제거하자.const openToArrayBuffer = ({ data, extension = 'pdf', }: IOpenToArrayBufferP..

처음으로 프론트엔드 테스트 코드를 작성했다.작업을 하고 리팩토링을 많이 하다 보니 자연스럽게 테스트 코드의 필요성이 느껴졌다.기존 코드의 기능을 분석해서 핵심기능을 완전히 똑같이 구현했다는 확신이 필요했다.오늘은 훅에 의존적인 컴포넌트의 통합 테스트코드를 작성하면서 어려웠던 점과 생각보다 쉽게 해결한 경험을 작성한다.export const Index = ({ options, searchKey, name, width }: ILabeledSelectProps) => { const { addURLparams, searchParams } = useURLparams(); const urlValue = searchParams.get(searchKey); const onChange = (value: string..

1. 문제점저희는 컴포넌트 스타일 라이브러리로 styleX를 선택했습니다.전에 사용하던 styled-components는 여러 스타일을 상속받고 중첩하여 작성해서 다양한 스타일을 만들 수 있는 장점이 있었습니다.하지만 css가 많아지고 중첩될수록 스타일을 예측하기 어려웠습니다.왜 border가 생기는지, 어디서 backgroudColor가 생기는지 찾기 위해 스타일 파일을 한참 뒤적거려야 했습니다.이런 불편함으로 인해 styleX가 스타일을 생각하는 방법에 공감했습니다.’Don’t repeat yourself가 항상 옳지는 않다’라는 말인데요, 특히 스타일을 다룰 때는 컴포넌트와 가장 가까운 곳에 스타일을 위치시킴으로써 마크업과 가장 가까운 스코프에서 예측 가능한 스타일을 작성하면서 코드를 조금 반복하는..

목적: 이터러블을 이해하고 이터레이션, 이터러블, 이터레이터, 이터러블이면서 이터레이션인 것을 구분하여 이해한다. 이터레이션 프로토콜은 어떤 문법이나 빌트인객체 같은것이 아니라 일종의 프로토콜입니다. 이터레이션 프로토콜에는 이터러블 프로토콜, 이터레이션 프로토콜이 있습니다. 이터러블 이터러블이란 이터러블 프로토콜을 준수한 객체입니다. 이터러블 프로토콜을 준수했다는 것은 객체가 Symbol.iterator 메서드를 구현하여 직접 가지고 있거나 프로토타입으로 상속받았다는 것을 말합니다. 그리고 Symbol.iterator메서드가 반환하는 객체가 이터레이터 입니다. const arr = [1,2,3]; 은 프로토타입으로 Symbol.iterator 메서드를 상속받았네요. 두 개만 더 확인해 볼까요? 배열은 누..

목적: 자바스크립트에 대해 공부하고 있는 주니어 개발자분들과 공부한 내용을 공유한다. 자바스크립트가 console.log()를 하는 과정을 설명하면서 여러가지 개념을 복습할 수 있을 것이다. 아래는 배운내용을 복습하기 위해 조금은 말도 안 되는..? 예제를 작성해 봤다. var t = 10; let u = 20; function outerFunc (a) { var x = 1; var y = 2; const innerFunc = () => { const z = 3; return (x + y + z) } return innerFunc; } const innerRun = outerFunc(); const newConsole = new SuperConsole() newConsole.log(innerRun()) ..

우리는 10진수의 세상에 산다 1을 10등분하면 0.1이라고 한다. 근데 자바스크립트는 0.1을 어려워한다. 0000000000000001 같은 숫자는 뭘까? 적어도 0.1이 우리가 아는 1을 10 등분한 0.1이 아님을 알 수 있다. gpt에게 물어보자 "자바스크립트는 부동 소수점 숫자를 표현하기 위해 IEEE 754 표준을 따릅니다. 이 표준은 부동 소수점 숫자를 이진수로 표현하고, 특정한 비트 패턴을 사용하여 소수점 위치와 지수를 표현합니다. 하지만 이진법으로 정확하게 표현할 수 없는 일부 십진수 숫자들이 있습니다. 예를 들어, 0.1은 이진법으로 정확하게 표현할 수 없는 숫자입니다. 따라서, 자바스크립트에서 0.1을 정확하게 표현하는 데에는 제한이 있습니다." 무슨 소리인지 모르겠다. 일단 0.1..