티스토리

릴리즈

검색하기

블로그 홈

릴리즈

crmrelease.tistory.com/m

개발자1344 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[정리] graphQL code generator graphql-code-generator.com/ GraphQL Code Generator | GraphQL Code Generator And more! You can generate your resolvers' signatures, dump schemas, model types, query builders, React Hooks, Angular Services, and much more! graphql-code-generator.com Typescript와 graphQL을 함께 이용하면, type이라는 용어탓에 헷갈리는 경우가 생긴다. 리졸버, MongoDB 모델, graphQL의 타입정의들이 자주 중복되기 때문이다. 이러한 문제때문에 graphQL을 빌드한 산출물에 대한 모든 type이 적절하게 ge.. 공감수 0 댓글수 0 2021. 3. 8.
[aggregate] redact 사용 aggregate에서 자주 사용되지만 꽤 복잡한 쿼리 중 하나라 정리해본다. 사실상 filter와 유사한 operator라고 생각하면 된다. aggregate는 각각의 stage가 존재하는데, filter가 project stage에서 사용되는 커맨드라면 redact는 또 하나의 stage이다. stackoverflow를 찾아보면 filter가 근소하게 성능이 좋다고는 한다 실제로 최신 Mongodb버전에 등장한 filter를 사용하는것이 선호되는것으로 보인다. 나 역시 실제 적용하는 상황에서는 filter를 사용할듯 하다. 무튼 redact는 복잡하게 nested한 document에 대해서 개발자가 원하는 조건에 맞는 결과만 리턴하게 만든다. 해당 설명은 공식문서의 예시를 사용해보겠다. 다음과 같은 n.. 공감수 0 댓글수 0 2021. 3. 8.
[이슈] useEffect에 dependency props이 있을때 cleanup 함수 기본적으로 useEffect의 clean-up함수는 컴포넌트가 unmount 될 때 실행된다. 따라서 컴포넌트가 unmount 될때의 이벤트를 clean up 함수에 걸어주는것이 일반적이다. 그러나 props가 비어있지 않다면 clean up 함수는 우리 기대와 다르게 동작한다. 다음과 같은 예시에서 해당 컴포넌트는 ratingId가 바뀔때 '마운트'라는 콘솔이 찍힐것이다. 그러나 ratingId가 바뀔때마다 cleanup 함수인 '언마운트' 콘솔도 함께 찍힌다 그 이유는 실제 화면에서 테스트해보면 알 수 있다. props가 바뀔때마다 hook이 새로 만들어지기때문에, 항상 이전 useEffect를 unmount하고 다시 새로운 useEffect를 mount하는 것이다. 실제로 ratingId라는 pro.. 공감수 2 댓글수 0 2021. 3. 5.
[정리] Mongoose 쿼리별 트랜잭션 적용방법 session을 공유하는 방법이 쿼리마다 조금씩 달라서 잠깐 정리 일단 하나의 세션을 여러개의 api에서 공유하기 위해서는 함수화가 필요하다. 예시의 경우에는 이전 포스팅에서 짜둔 useTransaction함수를 사용한다. 트랜젝션은 항상 세션을 시작시킨후, 그 세션에 해당하는 트랜젝션을 시작해주어야 한다. 또한 예시처럼 부모 리졸버와 자식 리졸버가 동일한 트랜잭션을 공유하길 원한다면 컨텍스트를 이용하여 세션을 넘겨준다. 따라서 다음과 같은 절차를 거쳐야한다 1) startSession을 통해 새로운 session객체 생성 2) ctx.session을 통해 1에서 생성한 세션을 정의 3) session객체에서 startTransaction으로 트랜잭션 실행 4) api 로직 수행 5) 트랜잭션 commi.. 공감수 0 댓글수 0 2021. 3. 5.
[aggregate] 원하는 element만 가져오기 가장 많이 쓰이는 형태의 aggregate 구문이다. 배열의 element중 조건에 맞는 document를 찾아서, 해당하는 element만 가져오는 것이다. 이는 document단위로 가져오는 mongoose 쿼리로는 해결하지 못하고, aggregate를 이용하는것이 편하다. 이때 주의할부분은 element 조건에 대해선 elemMatch operator를 사용한다는 점. 공감수 0 댓글수 0 2021. 3. 4.
[aggregate] 서로 다른 collection의 child element 조건으로 lookup하기 콜렉션 A(CBS) { _id: ObjectId('아이디') itemList: [ { _id: ObjectId('아이디'), itemId:ObjectId('아이디'), quantity: 0} ....] }.... 콜렉션 B(Zone) { _id: ObjectId('아이디') itemList: [ { _id: ObjectId('아이디'), itemId:ObjectId('아이디'), quantity: number }.... ] }.... 약간 까다로운 lookup상황을 맞이했다. 위와 같은 두개의 콜렉션이 존재할때, A 컬렉션의 모든 itemList의 itemId를 조회하고 그것과 일치하는 itemId를 가진 콜렉션B의 itemList들을 조회한다. 콜렉션 A의 itemId는 unique하지만, 콜렉션B의 .. 공감수 0 댓글수 0 2021. 3. 3.
[이슈] 조건에 맞는 element 지우기 pull operatore를 사용한다. 이때 Document는 itemList:[{object}.... ] 의 형태로 구성되어있다. 따라서 내부 key를 이용해 조건을 찾으면, 해당 조건을 포함하고 있는 element가 빠진다. 이때 multi 옵션을 설정해주어야, 일치하는 모든 element를 제거할 수 있다. 종종 pullAll과 헷갈리는데, pullAll은 Document를 multi로 수정하는 것이 아니고, 조건에 해당하는 값만 빼내는 것이다. 예시의 경우 itemId만 pull된다. 공감수 0 댓글수 0 2021. 3. 3.
[이슈] MongoDB의 Transaction Limit Time 1분이다. 따라서 하나의 session객체에 포함된 트랜젝션들의 총 처리시간은 1분이 넘어가면 안된다. 멍청하게 aggregate를 포함한 많은 쿼리에 session을 공유하다가 계속 timeout 에러가 발생했다. 이러한 이슈에 대비하기 위해, 단순히 find해오는 쿼리에는 같은 session을 공유해주지 않는 것이 좋겠다. 물론 update한 데이터를 다시 find해와서 가공하는 경우는 적절하게 session을 분배해야 한다. 공감수 0 댓글수 0 2021. 2. 26.
[정리] MongoDB의 Transaction과 session문제 aggregate 쿼리에 session을 달아주지 않아 API가 서로 다른 트랜젝션에서 움직이는 문제가 생겼다. 기존 쿼리가 session객체를 쿼리 옵션에 실어서 주는 반면 aggregation은 전달하는 방법이 조금 다르다. option 메소드를 사용한다. 무튼 이건 그냥 실수. 중요한건 아니고. 트랜잭션은 논리적으로 하나의 작업으로 처리되는 쿼리들의 모음을 말한다 보통 commit과 rollback으로 나뉘어, 변경 후 상태를 유지하며 트랜잭션을 종료하거나, 이상이 있을 경우 이전 상태로 돌려놓은 후 트랜잭션을 종료한다 트랜잭션 과정에서는 '세션'이라는 개념을 사용하는데, 얘는 DB관련 작업을 수행 시작부터 종료까지의 기간을 말한다. 우리가 특정 쿼리를 DB에 보낸다면, DB 접속부터 수행한 후 쿼.. 공감수 0 댓글수 0 2021. 2. 25.
[aggregate] project로 filter 하기 match 전에 사용해도 상관없다 이 예시의 경우는 result를 lookup의 결과물로 받아서, 결과물에 대한 filtering을 위해 dot command를 사용했다 공감수 0 댓글수 0 2021. 2. 24.
[이슈] 원하는 field만 가져오기 두번째 인자에 원하는 필드 지정해주기 공감수 0 댓글수 0 2021. 2. 24.
[aggregate] aggregate에서 match시 regex 활용 특정 string이 포함된 document를 찾고싶은 경우 match command의 변수에 regex라는 옵션을 달아준다 그러면 해당 변수로 검색해서 일치하는 모든 도큐먼트를 셀렉트해온다 공감수 0 댓글수 0 2021. 2. 24.
[이슈] Mongodb의 배열 원소 업데이트 자주 쓰이는 간단한 형태의 쿼리지만 정리 - Document에 대한 속성은 기존대로 표기 - Document의 array element에 대한 속성은 dot command로 표기 - 조금 더 명확한 filter를 위해서는 elemMatch를 사용할 수 있다 - Document에 대한 업데이트는 기존대로 표기 - Document의 array element에 대한 업데이트는 $ expression 표기, 단 이 경우 조건을 만족하는 첫번째 원소만 업데이트 한다 - multi 로 업데이트를 하고 싶은 경우, arrayFilter를 동일하게 두고, multi 옵션을 켜준다. 해당 예시에서는 filter와 update 구문에서 조작하는 필드가 다르므로 사용 가능. 공감수 0 댓글수 0 2021. 2. 24.
[이슈] foreach에서 break사용하기 정확히는 foreach대신 some메소드를 사용하면 된다. 그리고 조건을 만족하는 Loop에서 true를 리턴해준다 예시의 경우라면 zoneIndex가 wbsIndex와 같은 조건에 대해 Loop가 종료될것이다. 공감수 0 댓글수 0 2021. 2. 23.
[이슈] nodejs에서 MongoDB document의 Object Id 비교하기 습관적으로 ===을 쓰다가 어이없이 헤맸다.. 결론만 말하면 이렇다 애초에 Mongoose의 objectId는 객체라서 === 로 비교가 불가능하고, 모두 ObjectId 타입으로 바꾸어 equals로 비교해야 한다. 공감수 0 댓글수 0 2021. 2. 23.
[aggregate] lookup에서 pipeline사용 상황 - Join과 유사한 방법으로 처리된 두 개의 컬렉션 데이터가 필요한데, 여러가지 조건이 존재하는 경우 - 예컨데 'A컬렉션의 name이라는 데이터가 포함된 description'이라는 데이터를 가지고 있는 B 컬렉션 데이터가 필요한 경우--- 설명이 장황하니 아래 실제 예시를 보자 위의 데이터는 work라는 도큐먼트이고 얘는 zone이라는 도큐먼트이다 zone도큐먼트의 name이 포함된 work의 name을 찾고싶은 상황이다. 그러나 이는 같은 project에 속해야하므로 projectId도 같은 데이터들만 반환해야 한다. 이렇게 복합적인 Join은 pipeline을 이용해 풀어낼 수 있다. 결과 코드는 다음과 같다. 이전 포스팅처럼 Lookup을 이용하지만, foreign과 local field.. 공감수 0 댓글수 0 2021. 2. 23.
[정리] Mongoose Index 설정 이슈 및 기본세팅 무분별하게 다량의 데이터에 인덱싱을 하는 경우, CUD에 큰 문제가 생길 수 있다. 기본적으로 대부분의 인덱스는, 인덱싱된 데이터를 기준으로 Binary tree 탐색을 수행한다. 이로 인해 필요한 영역에 대해서만 데이터 스캔이 가능하다. 예컨데 다음과 같은 데이터가 있다고 해보자. 해당 데이터 중 '이름'에 인덱싱 처리를 하면 아래와 같은 테이블이 생길것이다. 만약 이름에 '송종국'이라는 데이터를 가지고 있는 Document에 대한 질의를 수행한다면 5번 도큐먼트만 메모리로 끌어올리는 Single block I/O가 일어난다 반면 '토트넘'으로 찾는다면, 여기에는 인덱싱 처리가 되어있지 않으므로 모든 Document를 끌어올려 질의를 수행하는 Multi block I/O가 일어난다 이렇게 적절한 인덱싱.. 공감수 1 댓글수 0 2021. 2. 22.
[aggregate] lookup으로 필요한 부분 JOIN하여 계산하기 aggregate를 하나의 컬렉션에서 복잡한 연산 처리하는 목적으로도 사용하지만, 보통 nosql에 존재하지 않는 JOIN을 유사하게 따라하기 위해 사용한다. 아래 예시는 aggregate로 다른 collection 데이터를 가져와 JOIN후 결과를 리턴하는 로직이다. 해당 로직은 CBSModel이라는 콜렉션에서 동작하고, JOIN을 위해 cbs라는 콜렉션에 접근한다 (사실 두개는 같은 콜렉션이지만, from에 위치한 collection이 같고다름은 중요하지 않다) CBSModel 컬렉션에는 childIdList라는 필드가 존재한다. 해당 필드는 id를 배열로 가지고 있으며, 각 id의 value는 cbs 콜렉션의 필드에 해당된다. 헷갈리니 CBSMdoel은 원컬렉션, cbs는 목적컬렉션으로 지칭하겠다... 공감수 0 댓글수 0 2021. 2. 10.
[이슈] lookup의 from절 예컨데 lookup의 from절을 설정한다고 해보자. 기존 서버코드에서 따로 모델객체 이름을 설정했다고 하더라도, from은 컬렉션 이름으로 기입하여야 한다. 예시코드의 경우에도 cbs라는 컬렉션에 대해 다양한 이유로 이름을 설정했다고 하더라도, 실제 물리적 DB 스키마의 컬렉션이름으로 써줘야 command가 도달한다. 공감수 0 댓글수 0 2021. 2. 10.
[aggregate] 기본적인 aggregate 사용 방식 & 배열이 존재하는 경우 aggregate는 복잡한 연산이 필요한 read에 대한 내용이다. find만으로는 데이터 가공에 한계가 있기 때문에, aggregate를 활용하여 복잡한 연산을 수행한다. 가장 흔하게 사용하는 방식은 다음과 같다. match command로 조건에 맞는 document를 filtering해주고, group을 사용하여 필요한 연산을 진행하는 것이다. 이 과정에서 배열이 argument로 존재한다면 까다로워진다. 예시코드의 경우도 itemList가 배열로 존재하는 경우이다. 이 경우에는 unwind 를 통해 배열을 iterate하며 원소 하나당 POJO 객체를 만들어준다 배열을 풀어놓으면 dot command로 접근이 가능하다. 해당 로직은 nested한 document 배열의 cost값들을 읽어 quan.. 공감수 0 댓글수 0 2021. 2. 10.
[정리] Mongoose (2) 도큐먼트와 쿼리 1) Document - 몽구스는 기본단위로 Document를 가진다. 이는 모델의 인스턴스이다. - Model 역시 기본적으로 Document 클래스에 해당된다. 몽구스의 특정 메소드로 쿼리를 처리하고 난 후에도 Document 자료형이 반환된다. 2) save( ) - save의 결과는 promise를 리턴한다. - save는 middleware와 validation을 실행할 수 있지만, findOneAndUpdate나 update구문은 불가능하다. - save( )는 미들웨어다. findOneAndUpdate등의 쿼리는 미들웨어를 실행시키지 않는다. 그래서 save처럼 비동기처리가 불가능하다. 3) SubDocuments - Document 객체의 하나의 컬럼으로 다시 객체를 갖는 경우 - Nest.. 공감수 0 댓글수 0 2021. 2. 9.
[정리] Mongoose (1) 스키마와 모델 1) Schema와 type의 정의 - 모든 스키마는 MongoDB의 콜렉션과 매핑되어 있다. 각 property의 자료형을 지정하여 Schema 객체를 생성한다. 이때 실제로 type과 schema에서 정의하는 type은 다르다. schema에 key를 type으로 설정하고 자료형을 정의한다면, 얘는 API가 스키마에 쉽게 접근하기 위한 방법이 될 뿐이지, 실제로 DB에 type으로 들어간다는 보장은 없다. - 각 type에 대한 다양한 옵션들이 존재한다. (mongoosejs.com/docs/schematypes.html 참고하자) - 그 후 API에서 직접 사용할 모델 인스턴스를 만들어 내보낸다. 실제 API들은 모델 인스턴스(예시코드의 경우 CBSModel)에 접근하여 find 등의 쿼리로직을 수.. 공감수 0 댓글수 0 2021. 2. 8.
[이슈] useCallback의 empty array 조건 켄도 라이브러리를 사용하다가 grid의 cell을 custom으로 가공할 일이 생겼다 예시 코드처럼 이벤트를 받아 ActivityReportButton이라는 컴포넌트를 리턴한다. 그런데 문제는 한칸의 cell만 변경하더라도 모든 cell이 리턴 작업을 수행한다는 것이다. useCallback으로 이를 해결할 수 있다. 사실 함수는 바뀌지 않으므로 매번 동일하게 ActivityReportButton을 리턴하면 된다. 다만 ActivityReportButton 컴포넌트 내부 로직에 state가 있기 때문에, state가 변경되는 cell만 컴포넌트가 리렌더링 된다. useCallback의 두번째 인자로 빈 배열을 설정하면, 항상 바로 직전의 함수를 수행한다. (즉, state가 변하지 않는 이상 mount .. 공감수 2 댓글수 0 2021. 2. 5.
[이슈] Upsert 옵션 사용시 주의점 - E11000 duplicate key error 1. Upsert 동작 원리 및 문제 발생 상황 upsert는 filter에 정의된 Document를 확인한 후, filter에 해당하는 document가 존재하는 경우 update, 존재하지 않는 경우 insert를 수행하게 하는 옵션이다 Upsert의 수행과정을 나눠보면 조건확인 -> 쿼리실행의 순서로 진행된다. 이렇게 Step을 나누는 이유는 upsert가 모든 절차에 대해 Atomic하지 않고, 각 step마다 atomic하기 때문이다. 따라서 Upsert 옵션이 true인 여러개의 쿼리를 순차적으로 실행하는 경우, 1번 원소의 쿼리실행이 끝나지 않았음에도 2번 원소에 대한 쿼리가 실행될 수 있다. 예시 코드는 itemList에 대한 find를 수행한 후, 조건에 따라 itemList의 value.. 공감수 2 댓글수 0 2021. 2. 5.
[이슈] nested한 Input을 useQuery/useMutation으로 전달하기 nested한 형태의 input을 서버로 쏘는데, 아폴로 클라이언트가 계속 인식을 못하는 이슈가 있었다. 해결 내용 정리해봄 gql 스키마에 이렇게 복잡한 input이 정의되어있다. makeQuantity라는 mutation에 전달되는 형태는 이렇다 이 경우 클라이언트에서 쿼리를 정의할 때 item, zoneList,equation값을 일일이 정의하면 안된다. mutation의 input인 projectId와 indirectInput만 정의해주면, nested하게 정의된 자료형은 전부 알아서 정의가 된다. 실제로 useMutation의 변수를 이렇게 담는다. indirectInput이 배열객체이므로 map을 통해 배열을 리턴해주고, 그 내부에는 필요한 형태의 자료들을 정의하여 담는다. 공감수 0 댓글수 0 2021. 2. 5.
[이슈] state 배열 수정하기 kendo 컴포넌트 쓰다가 state의 배열을 수정할 일이 생겼다 역시나 마찬가지로 배열을 깊은 복사 처리한 후 조건에 따라 리턴하는 방식이었다. zoneList라는 배열을 변경하고 싶었다 zoneList는 여러가지 key를 가진 객체들의 배열이다. 나는 이벤트로 넘어온 id와 같은 id를 가진 원소들만 골라서, 원소들의 selected라는 key를 기존 값과 반대로 만들어주고 싶었다. 삭제에 filter를, 추가에 concat이나 spread operator를 이용한것처럼, 수정에도 map을 이용한다. 각 key에 대해 조건을 달아주고, 조건을 충족하면 기존 key는 spread operator형태로, 변경을 원하는 key의 key(원소의 key)는 수정 후 리턴해준다. 단 조건에 해당하지 않으면 ke.. 공감수 0 댓글수 0 2021. 2. 3.
[이슈] usestate의 배열 속 원소 찾아서 제거하기 앞서 말했듯 리액트가 추구하는 불변성탓에 push나 splice등의 메소드를 사용할 수 없다 따라서 매번 새로운 배열을 만들어 조작해야 정상적인 객체간 비교가 가능하다 얕은 복사를 통해 조작하면, 배열같은 객체들의 State가 변경되었다고 감지할 수 없기 때문이다. (primitive type의 자료가 아닌이상 참조가 항상 유지된다) 따라서 새로운 배열을 만들어 조작해야, 버츄얼DOM과 실제 DOM의 변화가 인지되며 리렌더링이 된다. 배열 속 원소의 삭제도 마찬가지다. 예시코드이다. 해당 코드는 Grid에서 특정 원소를 한번 눌렀을때 selectedZone 배열에 추가되고, 한번 더 누르면 제거되는 로직이다. findIndex함수를 이용하여 배열 속 name이 event에서 넘어온 name과 같은 것들을.. 공감수 0 댓글수 0 2021. 2. 3.
[이슈] state에 항목 추가하기 리액트의 불변성 유지 문제로 push를 이용하여 state에 새로운 항목을 추가할 수 없다 따라서 concat을 사용한다. 예시 코드처럼 selectedZone이라는 state가 있을때, 특정 이벤트마다 항목을 추가하려면 setState를 하되 기존의 selectedZone에 concat을 사용하여 배열을 추가하는 방식으로 한다. concat은 기존 배열을 수정하지 않고 새로운 배열을 만들어주기 때문에 불변성이 유지된다. + spread 연산자도 동일하게 사용 가능하다 공감수 0 댓글수 0 2021. 2. 3.
[정리] 객체,배열 깊은 복사하기 요약: JS에서 깊은 복사를 하는 방법은 라이브러리를 사용하지 않는 이상, JSON을 사용하는 방법 뿐이다. 1. slice 메소드 - nested하지 않은 배열에서 얕은 복사를 수행 - 얕은 복사가 수행된다 2. spread operator - 내부적으로 iterator-looping을 수행, 얕은 복사가 수행된다. 3. Object.assign - object.assign은 첫번째 args에 두번째 value를 담는 것으로 복사를 수행한다. - 얕은 복사가 수행된다. 4. JSON.parse와 JSON.stringify - 객체를 문자열로 바꿨다가 그대로 담으므로 nested도 간단하게 복사 가능 - 객체를 문자열로 바꾼다는 것의 뜻은, primitive type을 다룬다는 것이고, 이 때문에 깊은 .. 공감수 0 댓글수 0 2021. 2. 3.
[정리] Virtual Scroll과 Infinity Scroll 참고: yeoulcoding.tistory.com/171 [React] 가상스크롤 구현 (1) Lab은 최신 기술 스택이나, 실험적인 문법, 라이브러리들을 테스트하고 적용해보는 섹션입니다. Overview 프레임워크를 떠나서, 리스트는 모든 애플리케이션에 필수로 구현되어야 하는 기능 중의 yeoulcoding.tistory.com 많은 양의 리스트 데이터를 화면에 그리는 경우, 모든 항목을 그리면 성능상 문제를 초래한다. 즉, 10만개의 데이터를 그리기 위해 10만개의 DOM노드를 그리려고 하면 Call Stack size error가 발생한다는 것이다. 따라서 화면에 직접적으로 보여지는 부분만 그리고, 나머지 부분은 가상으로 그려내는 것이 Virtual Scroll의 목표이다. 실제로 화면에서 보여지는.. 공감수 0 댓글수 0 2021. 2. 2.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.