프도

저번에 유저 검색하는 부분을 하였습니다 검색 한 유저와 대화를 할 수 있게 대화 생성을 만들어보겠습니다. 선택누르시 검색한 유저랑 채팅할 수 있는 대화방 생성을 만들어 보겠습니다. 먼저 schema.prisma에서 테이블을 만들어줍니다 generator client { provider = "prisma-client-js" binaryTargets = ["native","darwin","darwin-arm64","debian-openssl-1.1.x"] } datasource db { provider = "mongodb" url = env("MONGODB_URL") } model Account { id String @id @default(auto()) @map("_id") @db.ObjectId userI..

GrapQL 사용하면서 prisma를 같이 사용한다. TypeORM에 이어 타입스크립트 ORM으로 널리 사용되고 있기도 하고, 데이터베이스 마이그레이션에서도 사용되는 Prisma에 대해 알아보고자 한다. TypeORM과는 또다른 사용 방법을 가지고 있으며, 자체적으로 제공하는 스키마 형성 방식을 이용하면 SQL 쿼리를 직접 짜지 않아도 되는 장점이 있으며, 제공하는 ORM 메서드들 또한 다른 ORM과 비교했을 때 풍부함을 느낄 수 있다. 특히 서버리스 오픈소스 플랫폼인 Supabase에서 공식적으로 데이터베이스를 관리할 때 Prisma를 권장하고 있으며, 뿐만 아니라 여느 RDBMS와 같이 Prisma Studio라는 자체 GUI도 제공하는데, 이는 소프트웨어 설치가 필요하지 않아 더욱더 편리하게 느껴졌..

Message 채팅 웹을 만드는데 유저 검색 기능을 만들었습니다. import { gql } from "@apollo/client"; export default { Queries: { searchUsers: gql` query SearchUsers($username: String!) { searchUsers(username: $username) { id username } } `, }, Mutations: { createUsername: gql` mutation CreateUsername($username: String!) { createUsername(username: $username) { success error } } `, }, Subscriptions: {}, }; searchUsers 라는 q..

1) Apollo 소개 Apollo란 GraphQL의 클라이언트 라이브러리 중 하나로 GraphQL을 사용한다면 거의 필수적으로 사용하는 상태 관리 플랫폼입니다. 다른 선택지로 GraphQL을 개발한 Facebook에서 직접 만든 Relay가 있지만, 학습 비용이 높고 React 계열만 지원한다는 단점이 있으며, 그에 반해 Apollo는 유연하고 러닝 커브가 높지 않을뿐더러 Front-End 프레임워크 삼대장?인 React, Agular, Vue를 동시 지원한다는 점에서 인기가 높은 것 같습니다. 특히, 뷰에서 React를 쓸 경우 조합이 금상첨화가 되는데, 그 악명 높은 Redux를 Apollo로 대체가 가능해집니다. (GraphQL과 Apollo를 쓰면, REST API와 Redux를 없애버릴 수 있..

요즘회사에서 GraphQL을 많이 사용하고 현재 project에서 저도 사용해서 찾아봤습니다. 1) GraphQL 소개 GraphQL이란 페이스북이 모바일 앱을 재구성하기 위해 노력하던 2012년 개발되어 2015년 오픈소스로 공개된 데이터 쿼리 언어입니다. 자체적으로 서버와 클라이언트를 구축해 애플리케이션 서버 및 데이터베이스와 클라이언트 사이에서 Operation과 Resolve의 과정을 통해 서로 간의 데이터 상호작용을 도와줍니다. 특징으로는 어떤 종류의 Back-End(데이터베이스 및 다른 API 등)에도 연동이 가능하며, 강타입 및 단일 Endpoint를 지향합니다. 특히, REST API가 가진 구조적 문제인 Over-fetching과 Under-fetching을 해결할 수 있다는 큰 장점으로..

저번에 구글 로그인을 만들었다 프론트에서 보여준 정보를 백엔드 서버로 보낼 것 이다. src/graphql/operations/user.ts import { gql } from "@apollo/client"; export default { Queries: { searchUsers: gql` query SearchUsers($username: String!) { searchUsers(username: $username) { id username } } `, }, Mutations: { }, }; 쿼리 grapql 만들어준 다음에 Auth.tsx에서 해줍니다. import { CreateUsernameData, CreateUsernameVariables } from "@/util/types"; import ..

요즘 이직 준비하면서 Graphql 사용하는 회사들이 많아진 걸 느낍니다. 이번 포스트에서 Graphql 연결 방법에 대해서 알아보겠습니다. npm i @apollo/client graphql 라이브러리 설치를 진행 해줍니다. src/graphql/apollo-client-ts import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client"; const httpLink = new HttpLink({ uri: "http://localhost:4000/graphql", credentials: "include", }); export const client = new ApolloClient({ link: httpLink, cache: new InMe..

NextJS 에서 next-auth 라는 라이브러리를 이용하면 google , facebook , naver 같은 소셜 로그인 기능을 쉽게 관리 및 추가 할 수 있습니다. 이번 포스트에서는 next-auth 를 통해 소셜 로그인을 구현하는 방법에 대해서 알아보겠습니다. 먼저 next-auth 라이브러리 설치를 진행 해줍니다 npm i next-auth pages/api 경로에 auth 폴더를 생성하고 그 안에 [...nextauth].js 파일을 생성 한 뒤 next-auth 관련 설정 작성합니다. 원하는 소셜로그인의 provider를 providers 객체에 추가해줍니다. 여기서는 google 로그인을 기능을 위해 GoogleProvider를 추가하겠습니다. .env 환경 변수에 clientId와 cl..

Prop Drilling (면접대답) 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다. import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({ content }) { return ( I am the first component; | ); } function SecondComponent({ content }) { return ( I am the second component; ); } function ThirdCompo..

virtual 돔은 Dom에 접근하여 조작하는 대신에 이를 추상화 시킨 JS객체를 구성하여 사용합니다. 그래서 좋은점은 DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영해서 성능 향상에 도움이 됩니다 예를 들어 특정 페이지에 데이터가 변했다면 전체UI에서 가상돔을 리렌더링합니다 이전에 있던 Dom내용과 현재 내용을 비교합니다 그래서 바뀐 부분만 실제 DOM에 적용됩니다. https://dev-cini.tistory.com/11