본문 바로가기

🚶🏻어디로 걷고있니?

(28)

🚶🏻#28 [Apollo Server & GraphQL & Prisma] - 서버세팅 GraphQL Node.js를 이용해, 데이터베이스에 접근하는 나만의 명령어를 만들고 (Query, Mutation, TypeDefs, resolvers ) CRUD 요청, 응답을 더 효과적으로 처리할 수 있게 해주는 API ( 연결다리 ) Apollo Server GraphQL 을 사용하는 서버를 쉽게 만들어주는 Node.js 의 패키지 Prisma prisma 는 ORM 으로써 GraphQL 타입으로 DB 쿼리 조회, 테이블 생성 등을 담당한다 GraphQL 로 불러오고 싶은 데이터의 뼈대를 만들고, prisma 를 통해 원하는 데이터를 가지고온다 Step 01 - package.json 만들기 /* package.json 파일을 만드는 명령어 */ npm init --yes Step 02 - 패키지..

🚶🏻#27 [React & RN] - Flatlist Flatlist vs ScrollView ScrollView 는 ScrollView 안에 들어갈 데이터를 모두 가지고 온다 Flatlist 는 화면상에 보이는 데이터만 가지고 온다 사용법 및 Props import React from "react"; import { FlatList } from "react-native"; ( )} /> 필수 Props 는 data 와 renderItem 입니다 data 는 FlatList 에서 보여줄 data array 를 말합니다 renderItem 은 data 에 입력한 data array 를 하나씩 렌더링 시킵니다 onRefresh 는 스크롤 해서 새로고침 할때 사용합니다 refreshing 은 boolean 형으로 새로고침이 진행중인지 판별합니다 ItemSepar..

🚶🏻#26 [React & RN] - @react-navigation/native, Tab, Stack React Native Navigation, Tab, Stack /* 네비게이션 설치법 */ npm install @react-navigation/native npm install react-native-safe-area-context npm install react-native-screens /* Mac OS */ npx pod-install ios /* Tab 설치법 */ npm install @react-navigation/bottom-tabs /* Stack 설치법 */ npm install @react-navigation/native-stack How to used /* App.js */ import React from "react"; import { NavigationContainer } fr..

🚶🏻#25 [Javascript] - export 와 export default 의 차이 export /* color.js */ export const YELLOW_COLOR = "#ffa801"; export const BLACK_COLOR = "#1e272e"; export const DARK_GREY = "#d2dae2"; export const LIGHT_GREY = "#808e9b"; /* Tabs.js (color.js 의 export 되어있는 변수들을 사용하는 js파일입니다) */ import { BLACK_COLOR, DARK_GREY, LIGHT_GREY, YELLOW_COLOR } from "../colors"; export default /* Movies.js */ import React from "react"; import { View, Text } from "react..

🚶🏻#24 [React & RN] - 앱이 실행되기 전 Preload 하는 방법 Apploading /* 설치법 */ expo install expo-app-loading /* 사용법 */ import AppLoading from 'expo-app-loading'; RN 은 기본적으로 앱이 로딩중 일때 splash 이미지를 보여준다 Apploading 을 사용하면 앱이 실행되기 전에 font, image, 앱 실행 시 필요한 DB 정보 등등 필요한것들을 불러올수 있다 Case 01 - Apploading Props 사용하기 import AppLoading from "expo-app-loading"; import React, { useState } from "react"; import * as Font from "expo-font"; import { Text, Image } from..

🚶🏻#23 [React & RN] - While trying to resolve module '@apollo/client' from file Error Message While trying to resolve module '@apollo/client' from file ... 단순히 apolloprovider 로 app.js 의 return 되는 부분을 감싸주었는데 오류가 발생했다 해결방법 project root 경로에 metro.config.js 파일을 생성한다 const { getDefaultConfig } = require("metro-config"); const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues(); exports.resolver = { ...defaultResolver, sourceExts: [...defaultResolver.sourceExts, "..

🚶🏻#22 [React & RN] - some() 과 filter() 를 사용하여 체크박스 토글 함수 만들기 Some() some()은 배열의 각 엘리먼트에 대해서 함수의 반환 값이 하나라도 true가 있는지 확인한다 하나라도 true가 발생하면 true를 반환한다 모두 false인 경우만 false를 반환한다 /* example */ let testArray = ["walker", "jjh", "tistory"]; const someExample = testArray.some((item) => item == "jjh"); console.log(someExample); Toggle Function /* example */ const [checkbox, setCheckbox] = useState([]); const dataArray = ["walker", "jjh", "tistory"]; const handleC..

🚶🏻#21 [React] - filter() 함수를 사용해서 검색기능 만들기 How to used it? 지난 글에 filter() 와 find() 의 차이점에 대해 정리했던 글이 있다 그걸 바탕으로 filter() 와 includes() 와 useState() 를 사용해서 서버에 호출 없이 클라이언트 쪽에서 검색기능을 구현해봤다 /* 간단한 참고용 소스 */ import React from 'react'; const names = ['James', 'John', 'Paul', 'Ringo', 'George']; function App() { return ( {names.filter(name => name.includes('J')).map(filteredName => ( {filteredName} ))} ); } export default App; filter() 속에 inclu..

🚶🏻#20 [Nest.js] -ValidationPipe + class-validator 사용하여 유효성 검사하기 Case 영화 데이터를 추가하려한다 title, year, genres 를 입력받고, 입력받는 값들의 Type Validation 과 입력받을수 없는 값들에 대한 Validation 을 해보려고 한다 Step 01 - ValidationPipe Import 하기 /* main.ts 파일 */ import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; import { ValidationPipe } from '@nestjs/common'; async function bootstrap() { const app = await NestFactory.create(AppModule); app.useGlobalPipes( n..

🚶🏻#19 [Nest.js] - 설치부터 기본적인 구조 이해하기 Nest.js Node.js 로 서버를 구성할때, 조금 더 편하게 사용할수 있는 프레임워크 기본적으로 TypeScript 를 사용하기때문에, TypeScript 에 대한 이해가 있어야한다 Nest.js 설치하기 /* 설치 */ npm install -g @nestjs/cli /* nest project 생성 */ nest new project-name Nest.js 구조 Nest.js 는 기본적으로 main.ts 파일을 읽는다 src 폴더로 찾아오는 이유는 nest-cil.json 파일을 열어보면 알수있다 main.ts > app.module.ts > app.modules.ts 파일에 선언된 controller 와 service 를 사용하는 구조 Nest.js Controller import { Cont..

이전 1 2 3 다음

티스토리툴바