JH 개발 블로그

let arr = [{ a: 1 }]; let [{a}] = arr; console.log(a) // 1 let arr2 = [{first: 1},{second: 2},{third: 3}] let [{first}]= arr2 console.log(first) // 1

https://momentjscom.readthedocs.io/en/latest/moment/05-query/06-is-between/ Is Between - momentjs.com From here you can search these documents. Enter your search terms below. momentjscom.readthedocs.io https://velog.io/@dojunggeun/JavaScript-Moment.js%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-Date-Time-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0 [JavaScript] Moment.js를 이용하여 Date 다루기 자바스크립트에서 날짜, 시간..

타입 추론 let bool = true; const arr = [1, 2, 3]; const tuple = [true, 1]; // bool = 1; // Error! 3번째는 배열의 요소가 각각 boolean과 number이기에 최종적으로 추론되는 타입은 boolean과 number의 유니온 타입의 배열, 코드로 나타내면 (boolean | number)[] 이다. 여기에서 배열에서 사용된 요소들의 타입을 각각 추론하여 유니온 타입으로 만들어 내는 방식을 TypeScirpt 에서는 Best common type이라고 부른다. Best common type Best common type 은 말 그대로 가장 일반적인 타입이다. 여러가지 자료형이 배열 내부에서 사용되고 있을 때, 그 여러가지 자료형을 포괄할..

https://stackoverflow.com/questions/68285637/got-type-void-is-not-assignable-to-type-void-in-react-typescript got Type 'void' is not assignable to type '() => void' in react typescript I tried to pass the props like to another component. I write the props like interface AccProps { deleteAcc: () => void; } and call the fu... stackoverflow.com container const handlePage = (page: number): void => {..

체크박스 typescript 참고 useState Type 지정하는 방법 참고하자. (인턴때 헤맸던 부분) 1. DatePicker 기본값: 접속한 날짜를 기준으로 30일간의 데이터를 조회할 수 있도록 설정 - 예외처리 최대 기간: 최대로 조회할 수 있는 날짜의 범위는 1년 날짜 조회: 오늘 이후의 날짜는 조회할 수 없도록 예외처리 시작일과 종료일: 시작일이 종료일을 넘을 수 없도록 예외처리 2. 검색 창 글자 제한: 20글자 이상의 검색어를 입력할 수 없도록 예외처리 3. 검색 초기화 조회 기간 및 검색어, 필터링(성별, 광고 종류, 비고) 초기화 및 데이터 Reload 4. 필터링 기본값: 모든 체크박스들이 체크되도록 기본값 설정 예외처리: 각각의 필터링 조건들에는 최소 하나의 체크 ..

인턴때 했던 페이지네이션 코드. react + material ui + typescript 사용 import * as React from "react"; import { useNavigate } from "react-router-dom"; import Pagination from "@mui/material/Pagination"; import Stack from "@mui/material/Stack"; import styled from "styled-components"; export interface PageType { page: number; setPage: React.Dispatch; totalPage: number; } export default function PaginationRounded(pr..

1. 비동기 방식이란 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 요청과 응답의 순서가 보장되지 않는다. 물론 동기적으로 작업하게 되면 코드 파악이 쉬워지고 유지보수나 디버깅도 쉬워진다. 하지만 싱글스레드 방식의 자바스크립트에서는 동기적 방식을 사용하면 문제가 많아진다. 때문에 자바스크립트에서는 비동기방식으로 작업이 진행되게 된다. JavaScript에서 클라이언트와 서버 간 데이터를 주고받기 위해 비동기 HTTP 통신을 사용한다. 그 예로 Ajax, Axios, fetch 가 있다. 2. AJAX (Asynchronous Javascript And XML) ajax 는 어떤 언어나 기술이 아니라, 비..

동기식 (Synchronous) / 비동기식 (Asynchronous) 동기식 먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식 비동기식 동기식 방식과는 다르게 먼저 시작된 작업의 완료 여부와는 상관없이 새로운 작업을 시작하는 방식 작업의 순서가 확실하지 않아서 나중에 시작된 작업이 먼저 끝나는 경우도 발생 자바스크립트는 기본적으로 비동기적으로 동작을 한다. 개발하다 보면 비동기식으로 동작하는 부분이 동기적으로 동작해야 하는 경우가 생긴다. 이럴 때 비동기식 동작이 동기식으로 동작하도록 해주는 걸 비동기 처리라고 한다. 1. 콜백함수 사용 2. promise 3. promise 를 활용한 asyne/awai..

const information = { name: '김개발' } 여기에서 키 하나를 생성하고, 그 키에 값을 할당하기 위해서는 다음과 같이 써줘야 한다. const verb = 'developes' const project = 'facebook' information[verb] = project // [A] information.developes = 'facebook' // [B] B의 방식으로도 할당이 가능하지만 이 경우 키와 값은 항상 정해진다... 하지만 A와 같은 방법은 변수 verb와 project 가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능해진다. 객체 순회하기 object.keys 메서드 Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드..

자바스크립트 클래스 개념 // 클래스를 쓴다. (옛날 방식) function 기계(){ this.q = 'consume'; this.w = 'snowball'; } var nunu = new 기계(); var garen = new 기계(); // 클래스를 쓰지 않고 객체만 생성하였을 때 var nunu = { q: 'consume', w: 'snowball' } var garen = { q: 'strike', w: 'courage' } function 기계(구멍){ this.q = 구멍; this.w = 'snowball'; } var nunu = new 기계('consume'); var garen = new 기계('strike'); nunu 의 출력결과는 기계 {q: "consume", w: "snow..