자바스크립트

예전 포스트에서 로 upload 받은 img File을 base64 형식의 data로 변환해보았는데 반대로 이번 포스트에선 base64 형식의 img data 를 다시 Blob 형태의 File로 다시 변환 해보았다. 준비된 base64 img data 아래 귀여운 고양이 이미지와 이 고양이 이미지를 base64로 인코딩한 데이터를 가져왔다.사진 및에 img tag src 속성값 "data:image/jpg; base64,/9j/4aaqsK ~~~ "   코드 구현  // 고양이 img const base64data = "data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEBIQEBIVEBAVDxUQDxAPEBAPDw8PFRUXFh..

한동안 프로젝트를 하느라 정신이 없어 포스팅을 오랜만에 쓰는 것 같다🤔input tag를 통해서 이미지를 업로드 할 시 화면에 해당 이미지가 화면에 표기되도록 직접 작업해보면서 궁금했던 사항을 공부하였다. 공부하다 binary 데이터를 어떻게 JavaScript로 다뤄야 할지에 대해 많이 알게 된 것 같았다. 관련하여 알게된 사실들은 정리하여 추후 포스팅 해야겠다 구현 코드// index.html  코드 설명일단 tag 클릭하여 img를 업로드 하면 change event handler가 실행된다.실제 img File의 img를 읽기위해서는 js에서 제공하는 FileReader 라는 객체를 이용해야 하므로 FileReader 객체를 생성하고 readAsDataURL 이라..

코드를 짜다보면 흔하게 예외처리를 할 때가 항상 오기 마련이다. 예외 처리 하는방법은 많겠지만 try catch 문과 throw Error를 사용하는 것이 일반적이다. 하단 예시를 보자 일반적인 예외 처리 방법 const test =()=>{ try{ console.log('1'); throw new Error('error') console.log('2'); } catch(e){ console.log("error:",e); } } 코드에 보면 throw와 Error 객체이 위치해 있는 것을 알 수 있습니다. 사용법은 알지만 throw와 Error객체를 면밀히 살펴본 적은 없는데요. 이번기회에 조금 살펴보았으니 궁금하시면 하단을 참고하시면 됩니다. throw 설명 1. Mdn을 보면 throw는 사용자 정..

배경 react@18.2.0 의 memo에 관한 문서를 보다가 useMemo는 props가 이전 props와 shallow equal 하지 않을 때 리렌더링 된다고 하고 그 shallow equal를 판단할 때의 결과가 Object.is(prev값,next값) 의 결과와 같다고 나와 있다. 그래서 Object.is() 라는 메서드에 관심을 같게 되어 MDN을 살펴보았다. Object.is()의 개념 Object.is() 정적 메서드는 두 값이 같은지 결정한다. (참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is ) 여기서 나는 자바스크립트에서 같은값인지 판별하는 방식 2가지 == 와, ==..

문제 🔽 https://school.programmers.co.kr/learn/courses/30/lessons/84512 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 다른사람 풀이 🔽 function solution(strings, n) { var answer = []; strings.sort((a,b)=>{ if(a[n]>b[n]){ return 1 } else if(b[n]>a[n]){ return -1 } else if(a[n]==b[n]){ if(a>b){ return 1 } else if(a{ set.add(val[n]) }) // Set -..

문제 🔽 https://school.programmers.co.kr/learn/courses/30/lessons/131705 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 다른사람 풀이 🔽 function solution(number) { let result = 0; const combination = (current, start) => { if (current.length === 3) { result += current.reduce((acc, cur) => acc + cur, 0) === 0 ? 1 : 0; return; } for (let i = st..

문제 🔽 https://school.programmers.co.kr/learn/courses/30/lessons/131128 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 다른사람 풀이 🔽 function solution(X, Y) { let result = ''; const numObj = {}; for (const char of X) { numObj[char] = (numObj[char] || 0) + 1; } for (const char of Y) { if (!numObj[char]) continue; result += char; numObj[cha..

문제 🔽 https://school.programmers.co.kr/learn/courses/30/lessons/87946 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 다른사람 풀이 🔽 function solution(k, d) { const N = d.length const visited = new Array(N).fill(0) let ans = 0 function dfs(k, cnt){ ans = Math.max(cnt, ans) for (let j = 0; j = d[j][0] && !visited[j]){ visi..

문제 🔽 https://school.programmers.co.kr/learn/courses/30/lessons/42586 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 다른사람 풀이 🔽 function solution(progresses, speeds) { let answer = [0]; let days = progresses.map((progress, index) => Math.ceil((100 - progress) / speeds[index])); let maxDay = days[0]; for(let i = 0, j = 0; i< days.lengt..

"2023 토스 Next" 에 지원(채용 테스트)을 했는데 시험전 시험 test 환경을 미리 체험 할 수 있다고 하며 이메일이 왔다. 두근 거리는 마음으로 메일을 열었는데 본인 컴퓨터에서 yarn install yarn start yarn test 명령어가 제대로 먹는지 확인해보라고 했다... 회사에서 npm만 이용해서 처음에 yarn이 뭔지 몰랐다 🙄 ( 토스에서는 yarn을 쓰나보다 .. ) 그래서 찾아보니 Yarn은 Node.js 자바스크립트 런타임 환경을 위해 페이스북이 2016년 개발한 소프트웨어 패키지 시스템이다. npm 패키지 관리자의 대안으로서 Yarn은 페이스북, Exponent, 구글, Tilde의 협업으로 대형 코드의 일관성, 보안, 성능 문제를 해결하고자 개발되었다. ▶️그냥 npm..