전체 글 (115) 썸네일형 리스트형 [Text] 글자 수 제한 및 말 줄임 Text 속성 중 numberOfLines를 사용한다. ellipsizeMode 속성을 이용하여 말 줄임(...) 표시를 어느 위치에 할 지 설정한다. 참고 : https://reactnative.dev/docs/text FlatList - FlatList : 다양한 기능들을 가지고 있는 기본적인 List Component ex) `${item.notiId}`} onEndReached={onDataFetch} onEndReachedThreshold={0.6} ListFooterComponent={renderListFooterComponent} ListEmptyComponent={() => } /> - 주요 속성 - data : List로 표현할 data - renderItem : data의 item을 어떤 형태로 render 할 것인지 설정 - onRefresh : refresh (list를 위에서 아래로 당겼을 때) 했을 때 실행시킬 함수를 설정 - refreshing : 새로운 data를 기다리는 동안 true - keyExtract.. Next.js 기본 개념 - Next.js 빠른 웹 어플리케이션을 만들기 위한 React 프레임워크 아래 그림과 같이 빌딩 블록을 제공함으로써 유연한 개발과 좋은 UX를 제공할 수 있도록 한다. Next.js는 CSR(Client Side Rendering)을 포함하여 SSR(Server Side Rendering)과 SSG(Static Site Generation) 기능을 제공함으로써 기존 SPA(Single Page Application)의 단점을 쉽게 보완 할 수 있게 되었다. pages 폴더 안에 js 파일을 만들고 export하면 해당 이름으로 바로 Routing이 가능하다. 를 통해 빠르고 매끄러운 페이지 전환이 가능하다. useQuery 기초 GraphQL 튜토리얼 사이트 : https://www.apollographql.com/tutorials/ Learn with our GraphQL Tutorials, Examples, and Training Level up with Apollo's official GraphQL tutorials. Get practical, hands-on trainings and become an Apollo GraphQL certified developer. www.apollographql.com 기본 프로세스 아래 나와 있는 소스는 튜토리얼 4번째 프로젝트 - Client - index.js import React from 'react'; import ReactDOM from 'react-dom'; import G.. GraphQL + Apollo - GraphQL 페이스북(현 메타)에서 만든 API를 위한 쿼리 언어이며, 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적 1. GraphQL의 구조 - Query : 데이터 요청, CRUD에서 R을 의미 ex) // 요청 (일반 query) { tracksForHome { id title } } // 요청 (operation name query) : 변수 사용 시 query Query { tracksForHome { id title } } // 응답 (둘 다 응답은 같음) { "data": { "hero": { "name": "R2-D2" } } } - Mutation : 데이터 변경 요청, CRUD에서 R 제외한 나머지 Mutation은 반드시 Schema에 정의해야 하며, Resol.. 자주 사용하는 mac 단축키 정리 계속 업데이트 예정 command : Ctrl과 유사 option : Alt와 유사 브라우저 새로고침 : command + R 복사 / 붙여넣기 : command + C / command + V 한영전환 : CapsLock 창(탭) 닫기 : command + W 창 이동 : command + Tab 파일 이름 바꾸기 : enter / 마우스 이름 클릭 TypeScript 기본 (Utility Type) 1. keyof interface의 key 값을 union 형태로 받을 수 있음 - 예제 interface User { id: number; name: string; age: number; gender: "M" | "F"; } type UserKey = keyof User; const uk:UserKey = "age" // User interface에 있는 key 값만 가능 2. Partial property를 optional 하게 만들어 줌 - 예제 interface User { id: number; name: string; age: number; gender: "M" | "F"; } let admin: Partial = { id: 1, name: "An", }; // Partial을 사용하면 User.. TypeScript 기본 (Generic) - Generic class, function, interface를 다양한 type으로 재사용 가능 변수 type의 변수 다른 인자가 들어가도 상관없지만 보통 T를 사용 - 기본 예제 1. function function getSize(arr: T[]): number { return arr.length; } const numArr = [1, 2, 3]; getSize(numArr); // 3 const strArr = ['A', 'B', 'C', 'D']; getSize(strArr); // 4 // generic으로 선언하면 굳이 타입 지정해주지 않아도 알아서 판단하긴 함 const boolArr = [false, true, false]; getSize(boolArr); // 3 2. interface.. 이전 1 2 3 4 ··· 15 다음
