JH 개발 블로그

클로저.. 개념은 많이 공부해봤지만 대체 언제 사용하는 것일까 문득 궁금해졌다. 클래스를 대체해서 사용한다고는 들었지만.. 전역 변수의 접근을 막기 위해서도 알고 있지만.. 정확하게!!!!!! 언제 어떻게 쓰이는지 궁금했다. 그래서 https://poiemaweb.com/js-closure 여기 인터넷에 있는 예시를 참고해서 클로저의 활용 사례를 정리해보려고 한다. (정리가 잘 되어 있으니 직접 읽어보는걸 추천) 즉시 실행 함수란? 클로저를 들어가기 전에 먼저 "즉시 실행 함수" 에 대해서 알아야 한다. 한 번만 실행하고 다시는 실행할 필요가 없는 함수들이 있다. 이럴 때 꼭 알맞은 기법이 있는데 바로 즉시 실행 함수를 만들어서 사용하는 것이다. 즉시 실행 함수는 함수를 정의하자마자 실행하게 만들어진 함..

자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 비동기 처리가 필수적이다. 비동기 처리는 그 결과가 언제 반환될지 알 수 없기 때문에 동기식으로 처리하는 기법들이 사용되어야 하는데, 대표적으로 setTimeout, callback, promise 가 있다. async 와 await 는 절차적 언어에서 작성하는 코드와 같이 사용법도 간단하고 이해하기도 쉽다. function 키워드 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. async가 붙은 함수는 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다. await 키워드를 만나면 프라미스가 처리(settled)될 때까지 기다린다. 사용 예시 const todayVisitCount = awai..

객체, 배열 객체 – 키가 있는 컬렉션을 저장함 배열 – 순서가 있는 컬렉션을 저장함 맵 맵(Map)은 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다. 맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다. new Map() – 맵을 만듭니다. map.set(key, value) – key를 이용해 value를 저장합니다. map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다. map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다. map.delete(key) – key에 해당하는 값을 삭제합니다. map.clear() –..

typesafe 프로그래밍 언어의 장점에 대해 많은 글이 작성되었습니다. 하지만 Typesafe 방식으로 GraphQL 스키마를 구축한다는 것은 무엇을 의미합니까? GraphQL 스키마의 코드 우선 구현(code first implementation)은 어떤 모습입니까? 우리는 GraphQL과 같은 기술을 사용하여 React 웹 애플리케이션과 백엔드 서비스를 연결합니다. 우리는 Nexus 라는 라이브러리와 함께 코드 우선 접근 방식을 사용하여 GraphQL 스키마를 개발합니다. Nexus 문서에서는 type safe 방식으로 GraphQL 스키마를 개발하는 방법에 대해 설명하고 있으며 오늘은 이것이 개발 측면에서 의미하는 바를 보여줍니다. 여기서 code first 라는 것이 무엇일까요? 일단 위에랑 직..

고차 함수 const apply1 = f => f(1); const add2 = a => a + 2; console.log(apply1(add2)) const apply1 = f => f(1); // 위와 동일 const apply1 = (a => a + 2) => (a => a + 2)(1); 함수를 받아서 안에서 실행한다는 뜻 고차함수란 함수를 인자로 받아서 실행하는 함수를 얘기 한다. const times = (f, n) => { let i = -1; while (++i log(a + 10), 3); 10 11 12 출력됨 함수를 인자로 받아서 안에서 함수를 실행하게 함 함수를 만들어 리턴하는 함수 (클로저를 만들어 리턴하는 함수) const addMake..

material ui v4 에서는 keyframes 에 props 를 넘겨주면 애니메이션이 작동하지 않게 된다. 나는 꼭 넘겨주어야 할 일이 생겼기 때문에 정말 한참동안 찾은 방법이다. 나와 같이 헤매는 분들을 위해 공유한다. const defaultProps: StylePropType = { selectedItem, rotate, nbTurn: 9, }; const classes = useStyles(defaultProps)(); 위와 같이 useStyle 인자에 props 를 넘겨준다. 그리고 뒤에 ( ) 를 붙여서 useStyle 의 결괏값(= makeStyle)을 바로 classes 변수에 넘겨주자. import { makeStyles } from "@material-ui/core/styles";..

대다 관계 필터 Prisma Client는 관계의 "대다" 측면에서 관련 레코드의 속성으로 레코드를 필터링 하는 some, every, none 및 옵션을 제공합니다. 예를 들어, 게시물의 속성을 기반으로 사용자를 필터링합니다. RequirementQuery / option to use "I want a list of every User that has at least one unpublished Post record" some posts are unpublished "I want a list of every User that has no unpublished Post records" none of the posts are unpublished "I want a list of every User that..

React 16.6 버전에서는 코드를 불러오는 동안 “기다릴 수 있고”, 기다리는 동안 로딩 상태(스피너와 같은 것)를 선언적으로 지정할 수 있도록 컴포넌트가 추가되었습니다. const ProfilePage = React.lazy(() => import('./ProfilePage')); // 지연 로딩 // 프로필을 불러오는 동안 스피너를 표시합니다 데이터를 가져오기 위한 Suspense는 를 사용하여 선언적으로 데이터를 비롯한 무엇이든 “기다릴” 수 있도록 해주는 새로운 기능입니다. 이 페이지에서는 사용 사례 가운데 데이터 로딩에 초점을 두지만, 이 기능은 이미지, 스크립트, 그 밖의 비동기 작업을 기다리는 데에도 사용될 수 있습니다. Suspense를 사용하면 컴포넌트가 렌더링되기 전까지 기다릴 수 ..

How GraphQL GraphQL 은 백엔드 기술의 떠오르는 별입니다. API 설계 패러다임으로 REST를 대체하며 웹 서버의 데이터와 기능을 노출시키는 새로운 표준이 되고 있습니다. 이 튜토리얼에서는 관용적인 GraphQL 서버를 처음부터 완전히 구축하는 방법을 배웁니다. 다음 기술을 사용할 것입니다. Apollo Server 2.18 : 손쉬운 설정, 성능, 뛰어난 개발자 경험 등에 중점을 둔 완전한 기능을 갖춘 GraphQL Server입니다 . Prisma : 기존 ORM을 대체합니다. Prisma Client를 사용하여 GraphQL 리졸버 내부의 데이터베이스에 액세스하십시오. GraphQL Playground : 쿼리 및 변형을 전송하여 GraphQL API의 기능을 대화식으로 탐색할 수 있..

Apollo Client 는 GraphQL을 사용하여 로컬 및 원격 데이터를 모두 관리할 수 있는 JavaScript 용 포괄적인 상태 관리 라이브러리입니다. 이를 사용하여 UI를 자동으로 업데이트하면서 애플리케이션 데이터를 가져오고, 캐시하고, 수정합니다. Apollo Client는 최신 개발 방식과 일치하는 경제적이고 예측 가능하며 선언적인 방식으로 코드를 구성할 수 있도록 도와줍니다. 핵심 @apollo/client 라이브러리는 React와의 내장 통합을 제공하며 더 큰 Apollo 커뮤니티는 다른 인기 있는 보기 계층에 대한 통합을 유지 관리 합니다. Apollo Client 는 useQuery, useLazyQuery 를 제공한다. src/apolloClient.t..