자바스크립트

이미지를 다루는 작업을 진행하게 되었는데, 기존에 해오던 것과 달리 이번에는 여러 이미지를 배열 형태로 보내서 url를 받아와서 다시 그 데이터를 다른 데이터와 함께 create 혹은 update를 해줘야했다. 그런데, 만약에 기존에 url이 있는 상태면 pass를 하고 새로 넣은 이미지만 url을 다시 받아와서 update를 해줘야하는 것에서 문제가 생겼다. api를 호출하기 전에 console.log로 body를 찍으면 분명히 업데이트 된 이미지 url이 찍히는데, 막상 api를 호출하면 payload에 업데이트된 값이 안 찍히는 것이다!!!!!!!! 반나절을 붙잡고 늘어져있는데 미칠지경... async - await를 써서 비동기처리를 해줬는데 뭐가 불만이니?! 뭐가 잘 못 된건데?! .... 문제..

💡 localStorage vs Cookie 만료시간 설정하기 로그인할 때 jwt web token을 받아서 로컬스토리지에 저장해 두고 api 호출을 할 때마다 꺼내 쓸 때가 많다. 따로 만료시간을 정해놓고 쓰지는 않았는데, 이번에 프로젝트를 진행하면서 로직이 수정되고 하면서 토큰 자체를 지워내서 자동로그아웃을 시켜버려야 하는 상황이 발생했다. 그래서 난 고민에 빠졌다. 원래 localStorage에 토큰을 저장해두고 사용했는데, localStorage에 저장하지 않고 쿠키나 sessionStorage에 저장해서 만료 시간을 설정해야 하는 걸까? 라며 이리저리 검색을 해보았다. 로컬스토리지에 만료시간을 저장해서 사용할 수 있는 방법도 있었다. 그래서 또 다른 고민에 빠졌다. 어떤 게 더 좋은 방법일까? ..

웹 개발시에 API를 호출하기 위해서 제일 먼저 떠오르는 것이 request, axios, jQuery 같은 라이브러리이다. 하지만 이제 브라우저가 fetch() 함수를 지원하기 때문에 이러한 라이브러리를 사용해서 자바스크립트 번들(bundle)파일의 크기를 늘리는 낭비를 하지 않아도 된다. 물론 나는 주로 reactJs, nextJs 로 작업하기 때문에 axios를 써서 호출한다. 그러다 이번에 이미지 url에서 파일을 추출하기 위해서 fetch 함수를 써서 response를 받아올 일이 있었다. 방법을 찾아서 알아보다가 fetch함수를 이렇게 쓸 수 있다는 것도 알게 되었다. 겸사겸사- fetch에 대해 알아보고 공부하려고 한다. 📢 Fetch 를 알자! fetch() 함수는 네트워크 요청하고 응답을..

1차원 배열에서 중복을 제거하는 방법은 다양하다! set, filter, reduce 등 상황에 따라서 다양하게 쓸 수 있는데, 프로젝트를 하다가 배열 중복 제거 할 일이 있었는데, 아무리 이 메소드를 사용해도 해결이 안되는것이다!! ㅠㅠ 1차원 배열하듯이 하면 될 것이라고 생각했는데, 웬걸?!? 아니 set, filter, indexOf 등 메소드를 사용하면 해결할 수 있다. 단지 1차원 배열보다 살짝 코드가 복잡해질 뿐이다. 계속 set으로 시도했었는데....ㅠㅠ....내 시간 ... ㅎ..... 우선, 2차원 배열을 1차원 배열로 만들어줘야한다. let a = [ [1, 2], [3, 4], [5, 6], [3, 4], ]; function arr(_arr) { return [...new Set(_..

✅문제 124 나라가 있습니다. 124 나라에서는 10진법이 아닌 다음과 같은 자신들만의 규칙으로 수를 표현합니다. 124 나라에는 자연수만 존재합니다. 124 나라에는 모든 수를 표현할 때 1, 2, 4만 사용합니다. 예를 들어서 124 나라에서 사용하는 숫자는 다음과 같이 변환됩니다. 10진법124 나라10진법124 나라 1 1 6 14 2 2 7 21 3 4 8 22 4 11 9 24 5 12 10 41 자연수 n이 매개변수로 주어질 때, n을 124 나라에서 사용하는 숫자로 바꾼 값을 return 하도록 solution 함수를 완성해 주세요. 제한사항 n은 500,000,000이하의 자연수 입니다. ✅입출력 예 1 1 2 2 3 4 4 11 ✅의식의 흐름 결과를 보면 1,2,4가 반복이 된다. 그..

자바스크립트의 데이터 소스를 크개 3가지로 나눠보자면 프로그램 자체애서 적어서 바로 받아온 것 UI에서 넣어온 소스 (from DOM) WEB Api같은 외부에서 fetch한 소스 이렇게 이 3개지의 소스에서 가져온 데이터를 저장하는 방식에는 총 4가지가 있다. 여기에는 몇 가지 기준이 있는데, 단순한 리스트가 필요한건지, 아니면 key, value 값이 필요한건지 생각을 해서 기준에 맞추어서 쓰면 된다. 저장방식은 Array, Set, Object, Map 총 4가지이다. 심플한 리스트가 필요하다면 array와 set을 이용해서 저장하면 된다. Array color = [‘red’, ‘gold’, ‘red’]; //{ ‘red’, ‘gold’, ‘red’} 👉 반복되는 값이 리스트에 포함이 될 수도 있..