Enjoy Programming

음 이번 포스팅은 react로 할지 graphql로 넣을지 고민하다가... 어짜피 apollo client의 useLazyQuery를 사용하게된게 포스팅의 주 목적이니 graphql로 섹션을 잡았다. 자 보통 버튼 클릭이 일어났을 때 api로 부터 data를 fetching 한다면 당연히 이벤트 callback에서 fetch해서 가져오면 된다 callback 밖에 있다면 버튼 클릭시가 아니라 그냥 input의 데이터가 변화되면서 재 랜더링 될때마다 계속 fetching을 하기에 불필요하다 매우! 그런데 여기서 한가지 문제가 발생했다. 지금 사용하는 useQuery의 경우 공식문서에 따르면 useQuery hook은 component가 mount && render될 때 이미 Apollo Provider가 ..

지금 진행 중인 project가 크게 typescript , nextjs, graphql, apollo client를 사용해 진행중이다. 생각보다 nextjs와 apollo client에서 많이 막히게 된다.. 기본적으로 둘에대한 국내 reference가 별로 없다. 전부 stackoverflow또는 해외 it community가 전부이다. 근데 검색하고 하다보면 역시 공식문서가 짱이다.. 그렇게 생각하고 공식문서를 열심히 보면 또 extends된 기능들이나 공식문서 만으로는 해결이 안되는 문제들이 많다.. ㅠㅠ 첫번째로 최근에 경험 했던 간단한 에러를 살펴보겠다. 먼저 필자는 공식문서에 나온 apollo:codegen을 기본적으로 사용하고 있고 부가적으로 graphql-codegen도 사용중에 있다. ..

오늘부터 기초적인 자바스크립트 내용부터 시작해서 차근차근 다시 포스팅하려고 한다. 모던자바스크립트 도서를 기준으로 작성하고~ react나 nextjs graphql은 프로젝트 도중 필요한 시점에 작성하겠다~! 먼저 짧게 변수의 선언과 할당에 대해 짚고 넘어가자. Runtime을 기준으로 생각하면 좀 더 쉽게 이해하기 쉽다고 생각한다. 먼저 score라는 변수를 선언하고 할당해보자 순서는 콘솔창에 선언되지 않은 score를 표시하고 그 다음 score를 선언한다. 그리고 score에 80을 할당하자. 결과부터 보면 먼저 undefined가 뜨고 80이 찍힌다. 자바스크립트는 순서대로 읽어 내려간다. 그럼 첫 console.log에 왜 reference오류가 아닌 undefined가 떴는가! 하면 이는 바로..

오랜만의 포스팅이다 이제 다시 포스팅을 짬짬이 조금씩이라도 해보려한다. 현재 react 프로젝트를 진행중이라 react에 관한 포스팅을 기재한다. 자 react는 virtual Dom을 사용한다. 뭐가 좋은가 virtrual DOM을 브라우저의 memory에 올려 브라우저의 Dom을 변경하기 전에 이전 v-dom과 현재의 v-dom을 비교해서 바뀐 최소 부분만 반영을 한다. 그러니 랜더링 과정이 최소로 이루어지고 이를 자식 노드까지 반복한다. 모든 비교가 끝나면 Dom Tree에 반영! 비교하는 Elem이 바뀐 경우 이전 v-dom을 제거하게 된다. (컴포넌트 윌 언마운트, useEffect 정리) 이때 모든 자식들도 제거되고 재생성 된다. elem이 같다면 prop을 수정한 뒤 자식들의 노드를 비교한다..

타입스크립트의 핵심중 하나인 인터페이스에 대해서 오늘은 써본다. 위 예제 코드는 printLabel함수를 호출 시 argument로 string타입 label을 갖는 labeledObj오브젝트를 갖는다. 객체가 더 많은 프로퍼티를 갖고 있더라도, 컴파일러는 최소한 필요한 프로퍼티가 있는지와 타입이 잘 맞는지만 검사한다. 이 타입작성을 label을 가진 interface로 다시 작성해보면 이러하다~ 위에 { label : string } 대신 interface에 이 타입을 넣어주고 오브젝트는 이런 인터페이스야~! 라고 알려준다. 다행인건 타입 검사에서는 props의 순서를 지킬 필요는 없다. 오직 인터페이스가 요구하는 props가 존재하는지와 props들이 적절한 타입을 가졌는지만 확인한다. - Optio..

오늘부터 타입스크립트 공식문서를 하나씩 정리해본다. 공홈은 뭔가 ui가 나랑 맞지않아서 gitbook으로 읽는다~ https://typescript-kr.github.io/pages/basic-types.html TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 자 오늘 정리할 내용은 기본타입에 대해서 알아보자. 자바스크립트와 거의 유사하다. 먼저 - Boolean - let isDone: boolean = false; 뭐 설명할게 없다. - Number - 마찬가지다. 일단 자바스크립트 처럼 모두 부동 소수 값이다. typescropt는 16진수, 10진수 리터럴에 더불어 ECMAScript2015에서 나온 2진수, 8진수 리터럴도 지원한..