개발/JavaScript

예전에 언젠가 면접을 보면서 들었던 질문 중에 하나이다.  "typescript에서 type과 interface의 차이점을 아시나요?" 공통점type타입에 대한 이름을 지어주기 위해 사용한다. type Home { living : string; bed : string;} interfacetype과 동일하게 타입에 대한 이름을 지어주기 위해 사용한다. interface Home{ living: string; bed: string;}  둘 다 타입을 지정하는 방법 중에 하나로 굉장히 유사하다. 둘 중에 하나만 선택해서 사용해도 되지만 차이점도 존재한다.    차이점 1. 확장 방식 비교  interface 는 extends라는 것을 사용해서 확장할 수 있다. 기존의 interface에 추가해서 확장된다. i..

자바스크립트에서 데이터를 담고 사용하는데 이용되는 배열과 이를 loop으로 처리하기 위해서 forEach()와 map()을 주로 사용한다.  forEach()Array 인스턴스 forEach() 메서드는 순회 메서드로 각 배열 요소에 대해 제공된 콜백 함수를 한 번씩 실행한다.반한 값은 사용되지 않는다.호출되는 배열을 변경하지 않지만, 콜백 함수로 제공되는 함수는 변경 할 수 있다.그러나 배열의 length는 콜백함수를 처음 호출하기 전에 저장된다는 점을 유의해야함.그리고 루프를 중지하거나 중단할 수 있는 방법이 없다. const array1 = ['a', 'b', 'c'];array1.forEach((element) => console.log(element));// Expected output: "a"..

두 가지 모두 이벤트 발생에서 사용되는 것을 많이 봤을 것입니다. 둘 다 기본적으로 이벤트를 중단시키는 코드랍니다. 하지만 다른 점이 있답니다. 그것은 바로 이벤트 전달방식에 따라서 사용된다는 것입니다. e.preventDefault() 는 기본적으로 고유의 이벤트 동작을 중단시킵니다. e.stopPropagation() 중첩되어있는 엘리먼트들 중에서 하위에서 상위로 이벤트가 전달되는 것을 중단시킵니다. 즉, 고유 자신만의 이벤트만을 감지하도록합니다.

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

리액트 프로젝트를 새로 만들 기회가 있어서 어떤 라이브러리를 써야하나 라며 고민하다가 타입스크립트는 배제하게 되었고 그 안에서도 js 와 jsx 둘 중에 뭐가 더 낫나? 뭐가 다르지? 라는 의문이 들었다. 맨날 누가 쓰는거 그대로 쓰고 jsx가 자바스크립트의 확장문법이라는 정도만 알았다. 그렇다보니 문법도 크게 다르지 않고 정확한 차이점을 알지 못 했다. jsx javascript 의 확장 문법 자바스크립트 안에서 HTML 문법을 사용할 수 있다. 주로 리액트 같은 프론트엔드 프레임워크에서 사용이 가능하다 사실, 논쟁이 있긴하지만 js나 jsx나 크게 차이가 없다는 점에서 중요한 점이 아니라는 의견도 지배적이다. jsx를 쓰면 ui적인 면에서 직관적으로 쓸 수 있다는 정도? 순수한 js가 아니라는 점~ ..

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

npm install qs Content-Type 이란? api 연동 시에 자원을 보낼 때, 그 자원의 명시하기 위해서 사용합니다. body에 들어갈 내용을 header에서 명시해주는 것입니다. 이 중에서는 여러 가지 타입으로 나뉘는데, Text타입으로는 text/css, text/javascript, text/html, text/plain 등 file을 실어보내기 위해서는 multipart/form-data가 있고 Application 타입으로는 application/json, application/x-www-urlencoded가 있습니다. REST API를 쓰면서 데이터를 받아 올 때 주로 application/json, 데이터를 보낼 때, multipart/form-data를 사용했었습니다 이번에 ..

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(_..

필요에 의해서 구글링을 엄청해서 찾아낸 자바스크립트 타임 맵! ㅎㅎ 365일을 초로 환산해서 계산하는 방법이다. export const mapTime = timestamp => { const seconds = Math.floor((new Date() - timestamp * 1000) / 1000); // 환산된 초를 365일을 초로 환산한 것으로 나눈다~ let interval = Math.floor(seconds / 31536000); if (interval > 1) { return `${interval} years`; } interval = Math.floor(seconds / 2592000); if (interval > 1) { return `${interval} months`; } interva..

자바스크립트의 데이터 소스를 크개 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’} 👉 반복되는 값이 리스트에 포함이 될 수도 있..