분류 전체보기 (317) # GraphQL/GraphQL.js 타입스크립트 GraphQL Union Type 클래스 GraphQL Union Type GraphQL Union Type은 여러 오브젝트 타입을 하나의 그룹으로 만든것과 같습니다. 인터페이스interface와 다른점은 각 오브젝트 타입이 전혀 별개라는 점입니다. 인터페이스 타입을 구현한 각각의 오브젝트 타입은 서로 공통 필드common field를 가지고 있지만, 유니온은 그렇지 않습니다. 먼저 오브젝트 타입부터 만들어볼까요?type Human { givenName: String! famillyName: String! } type Elf { firstName: String! middleName: String! lastName: String! } GraphQL에서 사용하는 스키마 정의 언어schema defined language로 유니온을 표현하려면 아래의.. 2019. 12. 14. 17:27 # GraphQL/GraphQL.js 타입스크립트 GraphQL Interface Type 클래스 GraphQL Interface Type GraphQL Interface Type은 오브젝트 타입object type의 공통적인 필드와 반환형을 알려줍니다. 유니온union과 다른점은 모든 오브젝트 타입이 공통 필드common field를 가지고 있다는 점입니다. GraphQL에서 사용하는 스키마 정의 언어schema define language로 인터페이스를 표현하려면 아래의 방식을 따릅니다. 캐릭터 인터페이스 타입 : 이 인터페이스 타입을 구현한 객체 타입들은 firstName이라는 필드를 구현해야 합니다. 그 외에는 자유롭고, 자신만의 필드도 가질 수 있습니다. 캐릭터 인터페이스를 구현한 타입 : type Human implements Character { firstName: String! last.. 2019. 12. 14. 16:55 # GraphQL/GraphQL.js 타입스크립트 GraphQL Object Type 클래스 오브젝트 타입 GraphQL Object는 필드라는 단위로 구성되어 있으며, 클래스와 유사한 성질을 가지고 있습니다. 예를 들어 bookType 이라는 오브젝트 타입을 정의하는 스키마 정의 문법(SDL)을 생각해보겠습니다. 이것은 다음 타입스크립트 문법으로 표현될 수 있습니다. // TypeScript. const bookType: GraphQLObjectType = new GraphQLObjectType({ name: "bookType", fields: { title: { type: GraphQLString }, author: { type: GraphQLString } } });bookType 이라는 오브젝트 타입은 생성되었지만 아직은 사용할 수 없습니다. 이것은 말 그대로 타입에 불과하기 때문에 실제.. 2019. 12. 11. 17:33 # Tech/DynamoDB DynamoDB + GUI 로컬 개발환경 세팅하기 테스트는 로컬환경에서 하자! 개발 환경> Windows 10> Node.js (with NPM) 데이터베이스 로직이 잘 동작하는지 확인하기 위해서는실제 데이터베이스에 데이터를 주어가며 확인하는 것이 좋지만. DynamoDB를 AWS 위에서 테스트를 한다면,테스트 과정도 실사용량에 청구되는 것은 물론이고, 테스트케이스 데이터를 매번 삭제하는 것도 귀찮은 작업입니다. 그럴때는 DynamoDB를 로컬에서 테스트하는 것을 고려할 수 있습니다. 데이터베이스를 싹다 날려버리는 것도 편하고,로컬에서 이루어지므로 사용량도 청구되지 않기 때문이죠! Local DynamoDB 설치하기 DynamoDB는 쿼리와 최적화가 어려울뿐이지 설치와 셋팅 자체는 어렵지 않습니다!먼저 아래의 링크에서 자신의 환경에 맞는 DynamoDB.. 2019. 12. 9. 12:33 # 미사용 React에 Atlas ui-kit 설치하기 리액트를 멋있게 쓰자 Atlaskit은 리액트에서 사용가능한 사용자 인터페이스 킷이다. 보기좋은 떡이 먹기도 좋다고,미리 디자인된 컴포넌트들을 쉽게 사용할 수 있게 도와준다. 설치 방법도 간단하다.먼저 atlaskit이 의존하고 있는 라이브러리부터 설치하자. npm i styled-components Attention!만약 위의 패키지가 설치되어 있지 않다면,JSX 빌드 단계에서 아래의 오류 메시지가 뜬다. ERROR in ./node_modules/styled-components/dist/styled-components.browser.esm.js Module not found: Error: Can't resolve '@emotion/is-prop-valid' in 'C:\Users\aerocode\My.. 2019. 12. 7. 16:05 # Tech/React [Typescript React] 상태 끌어올리기 공통된 상태는 끌어올리자 어떤 컴포넌트들은 본질이 같은 데이터를 보여주어야 할 경우가 있습니다. 화씨와 섭씨 변환기가 대표적인 예시인데,둘 중 하나를 바꾸면 반대쪽도 바뀌어야 하기 때문이죠. 사실 화씨와 섭씨의 본질 데이터는 같습니다.본질 데이터를 공유할 수 있도록 제어되는 컴포넌트 기법을 활용하면 되겠군요. 공통된 상태를 공통 조상의 상태로 끌어올리는 것.이것을 상태 끌어올리기라고 합니다. 2019. 12. 7. 14:13 # Tech/React [Typescript React] 컴포넌트 제어 form 요소는 또 다른 내부 데이터를 갖는다. 리액트에서 제공하는 HTML 컴포넌트 중 form 요소는 특별하게 작동합니다.폼 요소 내부에 담긴 데이터는 this.state와는 다르기 때문이죠. 아래의 코드를 한번 살펴볼까요? interface Prop {} interface State { name: string; } class NameForm extends React.Component { constructor(prop: Prop) { super(prop); this.setState({ name: "" }); } render() { return ( ); } } 위 코드에서 this.state.name와 #name.value는 따로 놉니다.사용자가 폼의 값을 바꾸어도 컴포넌트의 상태는 변경시킬 수 없죠... 2019. 12. 7. 13:03 # Tech/React [Typescript React] 리스트 컴포넌트 컴포넌트를 배열에 담아 렌더링하자 여러개의 리액트 객체를 표시해야 할 때는, JSX 문법에 배열을 사용할 수 있습니다.각각의 컴포넌트 타입이 달라도 동작하며, 특히 리스트를 보여줘야 하는 컴포넌트를 만들 때 유용합니다. let list: ReactNode[] = [ Hello, React!, Installation, First, Download the library from the link below. ]; let element = {list}; ReactDOM.render(element, document.getElementById("app")); 이런 사용방법은 리스팅아이템li을 쉽게 출력할 수 있도록 도와줍니다.아래는 순서없는 리스트 태그ul의 예시입니다. HTML : Lorem Ipsum Dolor.. 2019. 12. 7. 02:42 이전 1 ··· 5 6 7 8 9 10 11 ··· 40 다음
