본문 바로가기
반응형

언어/Javascript, Typescript39

[TypeScript] Object(객체)를 입력받아 values의 길이가 너무 긴 것을 "[values 글자 수 제한] + ... "로 바꾸기 [Next.js, ts, js] 객체의 values 길이 제한을 둬 "[values 글자 수 제한] + ... "으로 필터링하기 // 제한하고싶은 글자수 길이 let MAXLENGTH = 15; // 일반 함수식 + any타입을 제거하면 js에서 사용가능 export const dataLengthFilter: any = (list: any) => { for (let i = 0; i MAXLENGTH) { console.log(i, key, values.slice(0, MAXLENGTH-1)); list[i][key] = valu.. 2023. 4. 5.
[js] 배열 .filter() 메소드 ( 배열, 객체에서 필터링 ) [js] Array.prototype.filter() 메소드를 사용하여 여러가지 상황에서 사용할 수 있는 필터링 예제 Array.prototype.filter()란? filter() 메소드는 함수에 의해 구현된 테스트를 통과하는 배열의 요소로만 필터링된 원 배열의 일부에 대한 얕은 복사본을 만든다. 문법 (arrow 함수만 ) filter((element) => { /* … */ }) filter((element, index) => { /* … */ }) filter((element, index, array) => { /* … */ }) Array.prototype.filter() 예제 1. 배열 요소의 길이가 6보다 큰 배열을 출력하는 예제 const words = ['spray', 'limit', '.. 2023. 3. 30.
AJAX란?, AJAX사용방법 AJAX란? AJAX (Asynchronous JavaScript And XML)는 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술이다. * 서버는 데이터를 요구하면 데이터를 보내주는 프로그램이다. 유튜브, 넷플릭스 등은 고객(클라이언트)이 영상 데이터를 요구하면 서버에서 영상데이터를 보내준다. 네이버 웹툰, 카카오 웹툰 등은 고객(클라이언트)이 웹툰(이미지) 데이터를 요구하면서버에서 웹툰데이터를 보내준다. 데이터를 가져오기 위해서는 개발자가 만든 API를 사용해야 한다. 원하는 데이터 URL이 뭔지 알아야하고 해당 URL로 GET요청을 해야한다. 따라서 GET요청을 하는 URL을 직접입력하여 요청하거나 요청 위 코드와 같은 버튼을 눌러 해당 요청 URL을 GET하는 방법이 있다. 하지만 위와 같.. 2023. 3. 29.
[js] 현재 페이지 URL 관련 정보를 가져오기 Javascript를 사용해 현재 페이지의 URL을 가져오는 방법 예시 코드) React, js에서 현재 페이지 URL 관련 정보를 가져오는 방법 현재 페이지의 URL을 http://dev.kfdd6630.net:3000/blog/post?page=1 라고 가정하자. 1. window.location.href = 현재 페이지의 href (URL) 반환한다. console.log(window.location.href); 출력값 http://dev.kfdd6630.net:3000/blog/post?page=1 2. window.location.host = 호스트의 도메인 네임 / 포트 번호 반환한다. console.log(window.location.host); 출력값 dev.kfdd6630.net:3000.. 2023. 3. 28.
[js] 객체안에 함수넣기 [js] 객체안에서 함수를 사용하는 방법, 조심해야할 점 1. 객체안에서 함수를 사용하는 4가지 방법 const buttonData = [ { btnBlue: "로그인", active: function test() { console.log("파란색 로그인버튼 눌림!"); }, }, { btnBlue: "검색", active: function () { console.log("파란색 검색버튼 눌림!"); }, }, { btnWhite: "로그인", active() { console.log("하얀색 로그인 버튼 눌림!"); }, }, { btnWhite: "검색", active: () => { console.log("하얀색 검색버튼 눌림!"); }, }, ]; buttonData[0].active(); but.. 2023. 3. 27.
[js] Dayjs 라이브러리 (설치방법, i18n, 객체생성, get(), set(), DateFormat 설정 등) Dayjs 라이브러리 (설치방법, i18n, 객체생성, get(), set(), DateFormat 설정 등) Dayjs 라이브러리란? Dayjs 라이브러리는 Javascript에서 날짜/시간을 쉽게 파싱하고 계산할 수 있도록 도와주는 Date 라이브러리이다. 1. Dayjs 라이브러리 설치방법 npm install dayjs --save 2. API 참조: i18n 100여개 이상의 다국어를 지원하고 사용하지 않은 것은 빌드에 포함되지 않는다. 100여개 이상의 다국어, 자세한 locale을 확인하는 링크 https://github.com/iamkun/dayjs/tree/dev/src/locale GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time lib.. 2023. 3. 24.
[js] 자바스크립트 Date객체 (기간 조회 및 날짜 계산) 자바스크립트 Date객체 (기간 조회 및 날짜 계산) 자바스크립트 Date 객체 기본적으로 자바스크립트의 Date 객체는 setMonth(), setDate()를 이용하여 날짜를 직접 지정할 수 있는 기능을 제공하고, setMonth(월 + N) 과 같은 기능을 통해 날짜 계산이 가능하다. 예) // 직접 날짜를 지정하는 방식 let birthday = new Date('February 2, 1997 03:24:00') let birthday = new Date('1997-02-2T03:24:00') let birthday = new Date(1997, 1, 2) // 월은 0부터 시작 let birthday = new Date(1997, 1, 2, 3, 24, 0) // Date의 연도에 0부터 99까.. 2023. 3. 24.
[js] 콜백지옥 코드 수정 콜백지옥이란? 1. 콜백지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 2. 콜백함수를 이용해서 비동기 로직처리 시, 코드가 깊어지는 것을 말한다. 3. 일반적으로 콜백지옥을 해결하는 방법에는 Promise 나 async & await를 사용하는 방법이 있다. 콜백지옥 -> Promise -> async & await 순서로 수정한다. 콜백지옥 예시 코드) class UserStorage{ loginUser(id, password, onSuccess, onError){ setTimeout(() =>{ if( id === 'kfdd6630' && password === '123' ) { onSuccess(id); } else{ onError(new Error('error.. 2023. 3. 23.
[js] try...catch, finally 정리 try...catch문, finally 블록 정리 1. try...catch문이란? 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정한다. try { // 수행하고싶은 로직을 수행한다. doSomething(); } catch (error) { console.error(error); } 위 코드에서 doSomething() 부분에서 error 발생시 console에 error가 출력된다. 2. try...catch문 문법 try { try_statements } [catch (exception_var) { catch_statements }] [finally { finally_statements }] try_statements: try 블록에서 실행될 선언들이다... 2023. 3. 23.
[js] async & await 정리 async & await 사용방법, useFul Promise APIs(Promise.all(), Promise.race()) async & await란? 1. async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 2. 비동기 방식을 사용함에 있어 Promise보다 명확한 방식이라고 할 수 있다. 3. 비동기 처리 동작은 기본적으로 callback, Promise와 동일하지만 앞 둘의 단점을 보완했다. 1 .async 사용방법 동기적 실행 // 1. Sync function fetchUser() { // 네트워크 응답이 10초 걸린다고 가정한다. return 'userName'; } const user = fetchUser(); console.log(user); con.. 2023. 3. 22.
반응형