티스토리

프도
검색하기

블로그 홈

프도

happy8131.tistory.com/m

프도의길 님의 블로그입니다.

구독자
0
방명록 방문하기

주요 글 목록

  • 사진첩 Open api 프로젝트 안녕하세요 Unsplash open api로 React, NextJS, TypeScript로 미니 프로젝트를 만들어 보았습니다. unsplash 제공하는 쿼리부분 검색페이지를 만들었습니다. 페이지네이션을 활용하면서 다음 페이지를 볼 수 있습니다. 사진 클릭시 모달창이 뜨면서 상세 페이지를 확인할 수 있습니다 태그에는 유저이름, 사진기 브랜드, 간단 설명이 있습니다. 헤더 창에 부분에 Collection 부분 클릭하면 사진, 컬렉션 사진 Unsplash 통계가 있습니다. Unsplash 제공하는 쿼리부분이 많아서 최대한 요약해서 사진 첩을 만들었습니다. cat, dog, smoke, star등 상당한 많은 수의 영어 단어(한글도 가능합니다)들로 검색할 수 있으니 필요한 사진이 있으면 모달 오른쪽 상단에 다.. 공감수 0 댓글수 0 2024. 1. 21.
  • 파일 저장 React, Next.js, Typescript 프로젝트 사용법 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 이라는 곳을 클릭해서 로그인을 해줘야 합니다. 클릭해서 파일을 업로드 해주세요! 부분을 클릭말고 파일을 올려줘도 파일 업로드가 가능합니다. 삭제 기능도 있습니다 테이블 끝에 휴지통 아이콘을 클릭시 파일 삭제가 가능합니다. 파일명 수정도 파일이름 클릭시 저장하고 싶은 파일명을 수정할 수 있.. 공감수 0 댓글수 0 2023. 12. 21.
  • React, NextJS, TypeScript로 캠핑후기 프로젝트 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 요즘 많은 분들이 캠핑여행을 즐겨 하시길래 캠핑 후기를 올리면서 공유할 수 있는 프로젝트를 만들어봤습니다. 캠핑을 좋아하시고, 곧 계획하실 분들은 참고하면서 계획을 짜면 좋을 것 같습니다. 먼저 홈 화면 입니다. 비로그인시 게시글만 볼 수 있습니다. 이렇게 화면을 볼 수 있고요. 화면을 .. 공감수 0 댓글수 0 2023. 11. 4.
  • 개발자 스터디 Book https://next-js-study-book.vercel.app/ 개발자 스터디Book 안녕하세요 프론트엔드 개발자입니다!같이 공부하실까요? 안녕하세요! 현재 프로젝트는 노션 API로 사용해서 블로그나 노션에 개인적으로 스터디한걸 취준생 분들 또는 개인 스터디 하시는 분 next-js-study-book.vercel.app 노션API 사용해서 notion에 스터디한 부분을 프로젝트로 만들었습니다 카드형식으로 무한스크롤로 10개 데이터씩 보이게 만들었습니다 설명 자세히 버튼 누르면 자세히 페이지로 이동합니다. 여기서 좀 더 업그레이드를 할 계획입니다 감사합니다! 공감수 0 댓글수 0 2023. 9. 26.
  • GraphQL 메시지 대화 삭제 대화창 삭제 기능을 만들어 보겠습니다. 대화리스트 부분에 마우스 오른쪽 클릭시 삭제 부분 클릭시 삭제 하겠습니다. 먼저 백엔드 작업부터하겠습니다. //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.. 공감수 0 댓글수 0 2023. 9. 20.
  • GraphQL 메시지 읽음으로 표시 먼제 상대방 유저가 메시지를 읽었는지 확인하는 아이콘을 만들껀데 왼쪽에 보라색 아이콘이 보입니다 읽지않은 상태를 말합니다 만들어 보겠습니다. //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.. 공감수 0 댓글수 0 2023. 9. 18.
  • GraphQL 메시지 보내기 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.. 공감수 0 댓글수 0 2023. 9. 5.
  • GraphQL 대화생성 Subscription 대화생성 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.. 공감수 0 댓글수 0 2023. 8. 29.
  • WebSocket/ Subscription 메시지웹을 만들려면 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.. 공감수 0 댓글수 0 2023. 8. 29.
  • GraphQL 대화 생성 저번에 유저 검색하는 부분을 하였습니다 검색 한 유저와 대화를 할 수 있게 대화 생성을 만들어보겠습니다. 선택누르시 검색한 유저랑 채팅할 수 있는 대화방 생성을 만들어 보겠습니다. 먼저 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.. 공감수 0 댓글수 0 2023. 8. 28.
  • GraphQL- 유저 검색 기능 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.. 공감수 0 댓글수 0 2023. 8. 23.
  • Graphql Query, prisma 저번에 구글 로그인을 만들었다 프론트에서 보여준 정보를 백엔드 서버로 보낼 것 이다. 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 .. 공감수 0 댓글수 0 2023. 8. 22.
  • Graphql 리액트 연결 요즘 이직 준비하면서 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.. 공감수 0 댓글수 0 2023. 8. 22.
  • next-auth 적용하여 소셜 로그인 구현하기 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.. 공감수 0 댓글수 0 2023. 8. 22.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.