프도

NextJs + Typescript 를 gh-pages를 통해 배포 진행 중에 생긴 이미지 로더 에러 next/Image에서 임포트하는 컴포넌트의 default loader가 next export에서는 지원되지 않기 때문에 발생하는 에러다. 그래서 next.congif.js에 images 안에 loader: "akamai", path:"/" 이런식으로 설정을 해주면 이미지의 기본 주소값이 설정이 되어 이미지가 잘 로딩이 된다.

Next.js 로 미니프로젝트를 만드는데 Error: invalid src prop next image .... 라는 에러가 떠 버렸다 그래서 해결방법은 위에 에러 부분 hostname "firebasestorage.gooleapis.com" 이있다 next.comfig.js 로 가서 이렇게 하시면 에러가 뜨지 않습니다.

firbase Next.js 배포하는 법 간략하게 소개하겠습니다! 먼저 Hosting에서 Get strarted 클릭합니다. 그대로 복사해서 작업중인 터미널에 설치 하고 Next를 클릭합니다 차례대로 설치합니다. 다 설치하면 Next클릭 꼭! firebase init 하기전에 npm run build 와 export: next export 를 추가해줘서 npm run export 설치후 out 폴더 생성을 확인합니다. firebase init 설치 할때 next.js는 이렇게 설정 해줍니다 Next클릭 꼭 해주시고 그러면 .firebaserc, firebase.json 파일 생성됩니다 배포 완료됩니다! https://nwitter-48f6e.web.app/ https://nwitter-48f6e.web...

https://next-js-study-book.vercel.app/ 개발자 스터디Book 안녕하세요 프론트엔드 개발자입니다!같이 공부하실까요? 안녕하세요! 현재 프로젝트는 노션 API로 사용해서 블로그나 노션에 개인적으로 스터디한걸 취준생 분들 또는 개인 스터디 하시는 분 next-js-study-book.vercel.app 노션API 사용해서 notion에 스터디한 부분을 프로젝트로 만들었습니다 카드형식으로 무한스크롤로 10개 데이터씩 보이게 만들었습니다 설명 자세히 버튼 누르면 자세히 페이지로 이동합니다. 여기서 좀 더 업그레이드를 할 계획입니다 감사합니다!

대화창 삭제 기능을 만들어 보겠습니다. 대화리스트 부분에 마우스 오른쪽 클릭시 삭제 부분 클릭시 삭제 하겠습니다. 먼저 백엔드 작업부터하겠습니다. //backend src/graphql/typeDefs/conversation.ts type Mutation { deleteConversation(conversationId: String!): Boolean } type Subscription { conversationDeleted: ConversationDeletedSubscriptionPayload } resolver도 만들어줍니다 //backend src/graphql/resolvers/conversations.ts import { GraphQLError } from "graphql"; import { P..

먼제 상대방 유저가 메시지를 읽었는지 확인하는 아이콘을 만들껀데 왼쪽에 보라색 아이콘이 보입니다 읽지않은 상태를 말합니다 만들어 보겠습니다. //frontend src/components/Chat/Conversations/ConversationList.tsx import { Box, Text } from "@chakra-ui/react"; import { Session } from "next-auth"; import { useRouter } from "next/router"; import { useState } from "react"; // import { ConversationPopulated } from "../../../../../backend/src/util/types"; import Conver..

GraphQL 쿼리 종류 간단하게 쿼리의 종류를 알아보려고 한다. 자세한 내용은 실제 채팅 서비스를 구현하면서 학습하는게 좋을 것 같아 간단한 설명만 적어놓았다. REST API와 GraphQL 역할을 잠깐 비교하자면 Query REST API의 GET메서드라고 생각하면 된다. 보통 데이터를 조회할 때 많이 사용한다. Mutation REST API의 POST, PUT, DELETE 등의 메서드라고 생각하면 된다. 보통 데이터를 조작할 때 많이 사용한다. Subscription 실시간 통신을 할때 사용하는 쿼리이다. 이름 그대로 구독하는 기능을 가지고 있으며 Mutation쿼리에서 데이터를 조작할 때 그 값을 구독해 변경사항을 실시간으로 가져올 수 있다. query와 mutation은 전통적인 서버/클라..

input 메시지를 서버로 보내기 위해서 백엔드에서 먼저 구현해줍니다. //backend src/graphql/typeDefs import gql from "graphql-tag"; const typeDefs = gql` type Message { id: String sender: User body: String createdAt: Date } type Query { messages(conversationId: String): [Message] } type Mutation { sendMessage( id: String senderId: String conversationId: String body: String ): Boolean } type Subscription { messageSent(convers..

대화생성 Subscription 만드는 방법을 하겠습니다. https://www.apollographql.com/docs/apollo-server/data/subscriptions/ *참고자료 Subscriptions in Apollo Server Persistent GraphQL read operations www.apollographql.com //backend src/graphql/typeDefs/conversation.ts import { gql } from "apollo-server-core"; const typeDefs = gql` scalar Date type Mutation { createConversation(participantIds: [String]): CreateConversatio..

메시지웹을 만들려면 WevSocket이 필요합니다 세팅을 시작하겠습니다. https://www.apollographql.com/docs/react/data/subscriptions Subscriptions Get real-time updates from your GraphQL server www.apollographql.com npm i graphql-ws 설치해줍니다. //frontend src/graphql/apollo-client.ts import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client"; import { GraphQLWsLink } from "@apollo/client/link/subscriptions"; imp..