JH 개발 블로그

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 은 말 그대로 가장 일반적인 타입이다. 여러가지 자료형이 배열 내부에서 사용되고 있을 때, 그 여러가지 자료형을 포괄할..

Material UI 에서 제공하는 기본적인 컴포넌트가 있지만 완벽하게 가져다 쓰는 경우는 거의 없다. 사용자의 입맛에 따라 커스텀을 하는 경우가 많다. 그럼 사용자의 스타일을 적용하는 방법에 대해서 알아보자. makeStyles Hook Material UI는 직관적으로 사용자 정의 스타일을 적용할 수 있도록 makeStyles React hook을 제공합니다. makeStyles는 @material-ui/core/styles 패키지에서 import 할 수 있으며, 인자로 커스텀 스타일 객체를 받습니다. 커스텀 스타일 객체의 클래스 이름을 키로 갖고 해당 클래스의 CSS 속성을 정의한 객체를 값으로 갖습니다. 이것도 결국은 훅이구나... import React from "react"; import { ..

input 구성 value 의 초기값: keyword = '' onChange 에 함수를 넣음(setState) 검색기능 구현 자바스크립트의 내장 함수 sort, filter 이용 sort 는 원배열을 바꿈 (안에 인자를 생략하면 오름차순으로 정렬) 반면, filter 는 원배열을 바꾸지 않음 toLowerCase 는 대소문자에 관계없이 검색해주기 위함 React + Node Express 체크박스 필터 기능 위와 같이 체크박스 구성 Node Express 도 알면 좋을 것 같아서 다음도 같이 살펴보자. Product.find() 데이터를 조회 할 때는 find() 메소드가 사용됩니다. query를 파라미터 값으로 전달 할 수 있으며, 파라미터가 없을 시, 모든 데이터를 조회합니다. 다시 리액트 체크박스..

앞서 graphQL 의 스키마 작성을 nexus 를 통해 해보았다. (참고로 예전 게시물과 이어지는 포스팅이다.) 2022.02.26 - [GraphQL] - nexus 이해하기1 (공식문서 참고) 2022.02.26 - [GraphQL] - nexus 이해하기2 (공식문서 참고) 2022.02.26 - [GraphQL] - nexus 이해하기3 (공식문서 참고) 이제 DB 와의 상호작용을 prisma client 를 통해 할 수 있도록 해보겠다. prisma 를 통해 이렇게 바꿀 수가 있다.!!! // api/graphql/Post.ts // ... export const PostQuery = extendType({ type: 'Query', definition(t) { t.list.field('dra..

api 에 mutation 추가하기 mutation 이란 Mutation 은 데이터베이스 상태가 변할 때 사용되는 것이다. mutation 을 설정하는 context 와 입력 받는 인자와 같은 arg 에 대해서 배워볼 것이다. Writing GraphQL mutations Exposing GraphQL objects for mutation operations Working with GraphQL Context Working with GraphQL arguments context 연결 https://nexusjs.org/docs/getting-started/tutorial/chapter-adding-mutations-to-your-api/ 3. Adding mutations to your API 3. Ad..

SDL 이 뭘까 앞서서 // api/graphql/Post.ts import { objectType } from 'nexus' export const Post = objectType({ name: 'Post', //

graphql nexus 를 치면 인강도 없고.. 자료도 없다. 공식 문서조차 영어로 되어 있어서 이해하기 어렵다. 그래서 1도 모르는 nexus 사용자들을 위해 내가 번역해보고 이해해본다. 참고로 graphQL 의 기초 지식이 있어야 더 잘 이해할 수 있을 것이다. 또한 공식문서를 여러번 읽어보면 설명이 잘 되어있음을 느낀다. 공식문서를 읽고 느낀 점은... nexus 를 통해 graphQL 의 스키마를 작성할 수 있는 것 같다. 그리고 prisma 를 통해 데이터베이스 마이그레이션을 한다. The nexus package The ts-node-dev package to run your app Nexus project 레이아웃과 실행 GraphQL Playground 설치 -> p..

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. 필터링 기본값: 모든 체크박스들이 체크되도록 기본값 설정 예외처리: 각각의 필터링 조건들에는 최소 하나의 체크 ..