본문 바로가기
728x90
반응형

Javascript11

[dayjs] JavaScript Date 객체는 불변성을 지켜주기 않는다 + dayjs의 필요성 JavaScript는 날짜 표현을 해줄 수 있는 Date 객체를 제공해준다. 따로 라이브러리를 사용하지 않더라도 손 쉽게 날짜을 얻을 수 있기 때문에 사용을 자주해줬다. 불변성 문제 발생 하지만 불편한 점이 발견됐다. 바로 불변성이다. const date = new Date(); // 2023-11-01T02:06:14.974Z date.setFullYear(2002); console.log(date); set 함수를 쓴 date를 콘솔로 찍으면 어떻게 될까? 당연히 2002-11-01T02:06:14.974Z로 바뀐다. 인제 date는 원래 값인 2023-11-01T02:06:14.974Z을 잃게 된다. 예를들어 우리가 date와 set 함수를 사용해 나온 date를 비교해주고 싶다면? 당연히 둘 다 .. 2023. 11. 1.
인코딩 된 문자열 생성하기 btoa()는 NodeJS에서 사용 ❌ const encodedData = btoa('Hello, world'); // 문자열 인코딩 const decodedData = atob(encodedData); // 문자열 디코딩 문자열을 인코딩할 일이 있어 이거저거 알아보다가 JavaScript에서 제공해주는 btoa() 함수가 있다는 것을 알게 되었다. 바로 사용해주겠어 하고 NodeJS 로직에 작성해보니 아래와 같이 btoa이 이상하다. 마우스를 올려보니 The signature '(data: string): string' of 'btoa' is deprecated. 라는 메시지가 뜬다. 찾아보니 Node에선 더이상 btoa()와 atob()를 사용하지 않는다고 한다. 그러면 어떻게 해야할까? Buffer.. 2023. 2. 14.
백엔드에서 페이지네이션 하는 방법 2가지 MongoDB or JavaScript 페이지네이션 페이지네이션은 데이터를 컨트롤 방식이 아닌 버튼 형식으로 보여주는 방식을 말한다. 방대한 데이터를 다룬다면 끝없이 내려가는 컨트롤 방식보다는 버튼 형식이 더 낫다고 생각한다. 백엔드 개발자이기 때문에 프론트가 아닌 백엔드에서 데이터 전달 시에 어떻게 페이지네이션 할 수 있는지 알아보도록 하자. 1. MongoDB 메소드 사용하기 가장 간단하면서, 자주 사용하는 방식이 아닐까 생각한다. const page = Number(req.query.page || 1); // 현재페이지 const perPage = Number(req.query.perPage || 10); // 페이지 당 게시글 수 const total = await Post.countDocument({}); // MongoDB 함수 사.. 2023. 2. 10.
[JS] FormData를 이용한 Local 이미지(+ file) Axios로 전송하기 MSA 아키텍처를 이용하여 서버를 구성하고 있기 때문에 여러 서비스 간 통신은 필수다. 그러던 중 A 서비스에서 B 서비스로 Axios를 통해 통신하는데 테스트를 위해 Local 이미지를 보내줘야 하는 상황이었다. 프론트단에서 Axios를 사용하여 전달해주는 것과 달라 공유하고자 한다. FormData가 무엇인고? FormData 형식은 postman 등 다양한 API 테스트 툴을 사용했다면 익숙할 단어다. 간단하게 말하면 file을 보내는 형식이라고 할 수 있다. key-value을 한 쌍으로 key에는 name을 value엔 file을 업로드한다. 프론트에서는? const uploadFile = e.target.files[0] const formData = new FormData() formData... 2022. 11. 22.
[Babel] TypeScript 코드를 JavaScript로 바꾸기 위해 떠난 여정기 시작은 말이지.. TypeScript로 작성한 코드를 JavaScript로 바꾸고 싶을 때는 어떻게 해야할까? 나의 경우 TypeScript로 작성한 코드를 Parse 해야하는 작업을 해야했다. 하지만 메타성 정보가 아닌 실제 동작하는 코드가 runtime에서는 JavaScript이여야 한다는 피드백을 들었다. 그렇게 TypeScript to JavaScript가 되는 여정이 시작되었다..! 혹시 Babel 구성 조차 하지 않았다면 맨 아래 "+ Babel 구성이 되어 있지 않다면"만 참고하길 바란다. Babel을 사용하자 Jest에서 테스트코드를 돌리기 위해 Babel을 처음 써봤었다. 하지만 아직도 Babel은 나한테 낯선 존재로 코드 바꾸기를 들어갈 때 Babel을 고려하지 못했다. 감이 잡하지 않.. 2022. 11. 18.
[JS] console.log [Object] 출력하기 + JSON.stringity() console로 데이터들이 잘 나오는지 확인할려고 할 때 type 필드만 [Object]로 데이터를 알 수 없었다. 이유를 찾아보니 console.log나 alert의 경우 이중, 삼중 객체로 데이터를 출력할 경우 [Object]만 나온다고 한다. 데이터를 알기 위해 이중 삼중 객체를 풀어 console.log로 찍기엔 불편하기 때문에 데이터를 볼 수 있는 방법을 찾아보도록 하자. console.log(JSON.string(data, null, 2)); JSON.stringity() 메소드를 사용하면 겹겹히 쌓인 객체도 깨끗하게 출력될 수 있다. JSON.stringity() 메소드는 JavaScript 값이나 객체를 JSON 문자열로 변환할 수 있다. JSON.stringify(value[, repla.. 2022. 11. 16.
[JS] 배열에 사용할 수 있는 메소드 모음 - forEach, every, some 1. forEach() const array1 = ['a', 'b', 'c']; array1.forEach(element => console.log(element)); // expected output: "a" // expected output: "b" // expected output: "c" for문과 비슷하게 유명한 배열 메서드이다. 단, 배열 전체 값을 순회하지만 콜백 함수의 반환 값은 무시한다. 2. every() const isBelowThreshold = (currentValue) => currentValue < 40; const array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); // expected .. 2022. 10. 10.
[JS] == vs. === JavaScript 개발자라면 알아야 하는 개념 궁금증 지금가지 ==만 사용해 봤는데 Array equal에 대해서 어제 포스팅을 위해 자료 검색을 하다가 신기한 코드를 발견했다. https://bcoding-lab.tistory.com/345 [JS] 자네, 두 Array를 비교하고 싶지 않은가? feat.객체 비교하는 법 문제 Type 검증과 관련해서 A라는 객체와 B라는 객체가 같은가를 비교하고 싶었다. 정말 평소처럼 아래와 같은 코드를 작성했다. if (i.name === { test: 'test', tset: 'tset' }) { console.log('yes!'); } i.nam.. bcoding-lab.tistory.com '' == false // true '' === false // false 아니.. 둘 다 '같다'를 의미하는 연산자.. 2022. 10. 7.
[JS] forEach에서 비동기 함수 사용 금지! 상황 forEach 함수를 이용하여 배열 안에 있는 id로 axios를 사용할 생각이었습니다. 하지만 아무리 해도 원하는 상태값이 되지 않는 것이었습니다. 위와 같이 postmam으로 실행했을 때 해당 API 결과 값으로 빈 배열이 나옵니다. 원래였다면 아래에 있는 1, 2라는 숫자를 담아져 있는 [1, 2]가 나와야 했습니다. 원인 이유는 바로 forEach 함수는 콜백 함수로 비동기 함수를 받더라도 실행을 기다려주지 않는다고 합니다! Javascript 공식문서에 적혀있는데 역시 공식문서로 정보를 확인해야 합니다. 공식문서 바로가기 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEac.. 2022. 9. 29.
728x90
반응형

티스토리툴바