GraphQL을 쓰면서도 자꾸 장점을 까먹게 되는데 내가 피부로느끼는 GraphQL의 장점은 크게 세가지다 1. Type을 정의하여 한번의 call로 필요한 데이터를 다양하게 가져올 수 있다 2. 필요한 데이터가 너무 많은 경우 DataLoader를 활용해 하나의 쿼리로 치환할 수 있다 3. 클라이언트에서 1을 정의할 수 있다. 3번이야 뻔한 얘기고, 2번은 나중에 포스팅 할꺼다 1번은 좀 당연한 장점이긴한데, graphQL은 기본적으로 서로 관련없는 데이터들도 gql type으로 정의하면 유연하게 가져올 수 있다는 뜻이다. 예를 들어 보자 ProjectComapny라는 컬렉션이 있고, 기본적으로 해당 컬렉션에 call을 날리는 상황이다. 하지만 ProjectCompany라는 애는 Member ID, I..

잊지말자...

기존 sass방식의 문제 - 기존에는 sass 파일을 설정해서, 같은 클래스네임 정의 후 관리하였다 - 하지만 sass코드와 컴포넌트가 문법적으로 연결이 되어있지 않았기 때문에, 적용되지 않는 부분을 알아차릴 수 없다는 문제가 있었다 - 그 외에도, 컴포넌트별로 sass 파일을 달아놓으면 이름이 충돌할 수도 있다 styled-component - 얘는 라이브러리를 불러와서 아예 리액트 컴포넌트를 생성한다. - 예시 코드의 경우는 CodeTd라는 컴포넌트를 만들었다 - 우선 이 방식은 js코드로 제어가 가능하고, 심지어 props를 받아 사용할 수도 있다. 즉 js 로직과 연동이 되기 때문에 누락의 위험이 사라지게 된다. - 이때 template literal 방식으로 코드를 정의하여 이를 Tagged T..

둘 다 배열에 원소를 추가하는 목적으로 사용되는데 push는 중복체크를 하지 않고, addToset은 중복체크를 한다. 둘 다 배열을 조작하는 command고 체크 여부의 차이만 있으므로, 예시는 push만 들어본다. 0) set의 사용 기본적인 update 구문에서 set은 '수정'을 의미한다. 이를 설정하지 않으면 name 필터로 찾은 도큐먼트 전체가 hp:30으로 변경되니 주의 1) 기본적인 push 사용 보통 push할 element가 정해진 경우 $push:{element:value}형태로 입력하면 된다 filter로 걸러낸 document에 대해 element, value를 입력한다 물론 addToSet은 중복체크 여부에만 차이가 있고 용법은 같다 2) element를 여러개 넣는 경우 $ea..

- CASE: 특정 상황에서만 동작되어야 하는 함수가, Component의 렌더링 조건에 따라 지속적으로 함수가 실행되는 경우 예시 이런 경우. countActiveUser는 users가 변화가 있을때만 다시 실행되어야 하는데, 예시코드처럼 로직을 짜면 모든 state변화마다 count가 다시 호출되어 실행된다. 이러한 경우에 useMemo를 사용한다. useEffect와 사용법은 유사하다. useMemo의 동작조건을 설정하고, 그 변수에 내가 원하는 상황을 등록해주면 된다. - useRef와의 차이 useMemo는 deps가 변경되기 전까지 값을 기억하고, 실행후 값을 보관하는 역할로도 사용한다. 얘는 복잡한 함수의 return 값을 기억한다는 점에서 useRef와는 다르다. useRef는 특정 값을 ..

- useRef의 사용처: 기존 기타 프레임워크에서 getElementID나 쿼리셀렉터를 이용해 DOM요소를 선택한다. React에서는 특정 DOM요소에 대한 조작이 필요한 경우(DOM의 위치정보를 가져와 조작한다거나 하는 경우) ref를 사용한다. - useRef의 사용 1) useRef 객체 생성 2) DOM요소에 객체 할당 3) current로 객체를 초기화 4) focus()를 이용하여 초기화시킨 객체(DOM요소)를 잡는다 - useState와의 차이: useRef는 component를 변화시킨 후 다시 rendering하지 않는다. 따라서 DOM요소와 별개로, 렌더링이 필요하지 않는 state는 ref로 관리한다. - useRef로 state 관리하기 예시: DOM을 조작하는 예시는 많은데, r..