꾸준히 공부하는 개발자

javascript 단골 질문인 var, let, const 의 개념을 알아보겠습니다. var는 es6전에 사용했던 개념으로 함수형 스코프 개념을 띄고있습니다. es6 이후에 함수형 스코프인 var의 단점을 보완하기 위해 블록 스코프인 let, const가 나왔습니다. 블록은 {} 이 중괄호를 뜻합니다. var let const 재선언 o x x 재할당 o o x 로 간단하게 표로 정리할 수 있습니다.

javascript에서 객체는 해시테이블이라는 자료구조이다. 그래서 javascript의 객체가 해시로 작용되었던 것이다. 해시 테이블이란? 이제 key를 인풋할 때 hash function이 메모리 주소를 부여해줘 buckets으로 바로 집어넣어 준다고 한다. key와 value 값이 주어져 const obj = {'key' : 'value'} 아래 obj의 속성은 key 속성값은 value이다 또한 javascript에서 객체의 속성값은 무엇이든 상관이 없다고 한다. 문자, 숫자, 객체 모든 것이 들어갈 수 있다고 한다. 또한 이렇게 시간복잡도 O(1) 이면 이거 쓰지 왜 다른거 쓰냐 하는 말이 있는데, 그 이유는 해시 충돌때문에 효율성이 떨어지기 때문이라고 한다. 이러한 해싱충돌을 다양한 방법으로 ..

오늘은 function 객체에 포함되어있는 내장 메소드들을 알아보겠습니다. 솔직히 개발하는데에 있어 몰라도 지장이 없는 것 들이라고 생각하는데요. 개념적인거니깐 알아보고 넘어가는 차원에서 공부해보았습니다. 그나마 사용한다면 bind를 이용해서 this를 바꿔 주는 일이라고 생각하는데요. 그것도 요즘에는 arrow function도 나오고해서 왠만해서 코드 짤때 사용하지 않는다고 생각됩니다. apply, call, bind를 어떤식으로 사용되었는지 실무에서 예시가 있다면, 알려주시면 감사할 것 같아요! 아래와 같이 apply 와 call은 별로 차이가 없습니다. 하지만 null 자리에는 this를 대신할 수 있습니다. apply, call 차이 call은 apply 와 별반 다르지 않습니다. 하지만 app..

SPA SPA가 나오게된 이유 1. SPA는 클라이언트 단에서 처리할게 많아져 효율적으로 서버에 json 데이터를 주고받아 처리하도록 하였습니다. 2. 화면이 하얀색으로 다시 리로드 되는 것을 한 화면에서 다 처리할 수 있도록 하여 나오게 되었습니다. CSR vs SSR CSR은 클라이언트 사이드 렌더링으로 SPA에서 보통 CSR방식을 많이 사용합니다. - 장점 : 클라이언트 단에서 json 파일을 주고받아 서버에서 다시 html, javascript, css를 render tree로 만들어서 주지 않아도 된다는 장점이 있습니다. - 단점 : 1. html, javascript, css 와 json파일을 모두 받아서 parsing해서 render tree로 만들어야 하기 때문에 첫 렌더링이 오래 걸린다는..

Sheet1.A1 = Sheet1.A3 Sheet1.B1 = Sheet1.B3 Sheet1.C1 = Sheet1.C3 Sheet1.D1 = Sheet1.D3 Sheet1.E1 = Sheet1.E3 Sheet1.F1 = Sheet1.F3 Sheet1.G1 = Sheet1.G3 Sheet1.H1 = Sheet1.H3 Sheet1.I1 = Sheet1.I3 Sheet1.J1 = Sheet1.J3 Sheet1.K1 = Sheet1.K3 Sheet1.L1 = Sheet1.L3 Sheet1.M1 = Sheet1.M3 Sheet1.N1 = Sheet1.N3 Sheet1.O1 = Sheet1.O3 Sheet1.P1 = Sheet1.P3 Sheet1.Q1 = Sheet1.Q3 엑셀data에서 이런 반복적인 작업을 하게 ..

문자열에서 특정문자열이 몇번 반복하는지 알아야 할 상황이 생겼다. 그래서 match 라는 함수를 사용하였다. match(regax) 매치안에는 정규표현식을 넣어줘야 한다. a = hello java javascript a.match(/ja/g) || [] // [ja,ja] // 타입을 맞춰주기위해 || [] 을 붙여준다. a.match(/test/g) || [] // [] a.match(/ja/g).length // 2

S3의 이미지를 가져와 blob 으로 변경 후 canvas에 그려야 작동한다. 또한 s3의 이미지를 encoding한 값을 넣으면 cors 문제로 받아와 지지 않는다고 에러가 났다. 그리고 마지막은 다시 s3로 편집한 이미지를 올리는 장면이다. 이러한 순서로 진행된다 s3 -> canvas -> s3 const imageEdit = async bool => { axios.get(decodeURIComponent(file.src), {responseType: 'blob'}).then( async blob => { const objectURL = URL.createObjectURL(blob.data); const res = await dataProvider('IMAGE', 'translations', {im..

자식창에서 로그인하여 부모창으로 query를 날려야 할 일이 발생하였다. window.opener 와 window.postMessage를 이용하여 event를 발생하여 해결하였다. 자식창에서 부모창으로 event를 날리는 코드 window.opener.postMessage({code:locationQuery.code}, '*') 부모창에서 자식창의 event를 받는 코드 (선언한 함수가 window.addEventListner보다 위에 있어야 한다.) const receiveMessage = async (e) => { if(e.data.hasOwnProperty('code')){ console.log(e) } } window.addEventListener("message", receiveMessage, ..