프도

안녕하세요 Unsplash open api로 React, NextJS, TypeScript로 미니 프로젝트를 만들어 보았습니다. unsplash 제공하는 쿼리부분 검색페이지를 만들었습니다. 페이지네이션을 활용하면서 다음 페이지를 볼 수 있습니다. 사진 클릭시 모달창이 뜨면서 상세 페이지를 확인할 수 있습니다 태그에는 유저이름, 사진기 브랜드, 간단 설명이 있습니다. 헤더 창에 부분에 Collection 부분 클릭하면 사진, 컬렉션 사진 Unsplash 통계가 있습니다. Unsplash 제공하는 쿼리부분이 많아서 최대한 요약해서 사진 첩을 만들었습니다. cat, dog, smoke, star등 상당한 많은 수의 영어 단어(한글도 가능합니다)들로 검색할 수 있으니 필요한 사진이 있으면 모달 오른쪽 상단에 다..

https://dropbox-ashy.vercel.app/ DropBox Welcome to Dropbox. Storing everything for you and your business needs. All in one place Dropbox Try it for free Your broser does not support the video tag. dropbox-ashy.vercel.app 우측 상단에 Sign in 이라는 곳을 클릭해서 로그인을 해줘야 합니다. 클릭해서 파일을 업로드 해주세요! 부분을 클릭말고 파일을 올려줘도 파일 업로드가 가능합니다. 삭제 기능도 있습니다 테이블 끝에 휴지통 아이콘을 클릭시 파일 삭제가 가능합니다. 파일명 수정도 파일이름 클릭시 저장하고 싶은 파일명을 수정할 수 있..

https://camping-18dbf.web.app/ https://camping-18dbf.web.app/ camping-18dbf.web.app https://github.com/happy8131/WYC GitHub - happy8131/WYC: 캠핌후기 캠핌후기. Contribute to happy8131/WYC development by creating an account on GitHub. github.com 요즘 많은 분들이 캠핑여행을 즐겨 하시길래 캠핑 후기를 올리면서 공유할 수 있는 프로젝트를 만들어봤습니다. 캠핑을 좋아하시고, 곧 계획하실 분들은 참고하면서 계획을 짜면 좋을 것 같습니다. 먼저 홈 화면 입니다. 비로그인시 게시글만 볼 수 있습니다. 이렇게 화면을 볼 수 있고요. 화면을 ..

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..

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..

저번에 유저 검색하는 부분을 하였습니다 검색 한 유저와 대화를 할 수 있게 대화 생성을 만들어보겠습니다. 선택누르시 검색한 유저랑 채팅할 수 있는 대화방 생성을 만들어 보겠습니다. 먼저 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..