후기좋아요 기능을 구현하였다.UI상의 표시와 백엔드의 좋아요 기능을 가진 것은 따로 분리하여 구현이 되어있다. 함께 서버 액션과 연동하니 시간도 오래걸리는 것을 알게 되었다. 그래서 사용자에게 즉각적인 반응을 주기로 했다.표현할 Thread 객체를 불러와서 좋아요 현황을 렌더링한다. import React, { useEffect, useState } from "react";import { HeartIcon, MessageCircle, RepeatIcon, SendIcon } from "lucide-react";import { threadLike } from "@/actions/thread/ThreadLike";import { ThreadType } from "@/type/ThreadType";import..

문제점[auth][error] AccessDenied: AccessDenied. Read more at https://errors.authjs.dev#accessdenied Auth.js | ErrorsAuthentication for the Webauthjs.dev  해결방법OAuth의 경우 SignIn 로직을 타고 회원가입이 SignUp 없이 진행된다.true false로 SignIn 처리를 하느넛을 알게되었다.// auth.tsimport authConfig from "@/auth.config";import { PrismaAdapter } from "@auth/prisma-adapter";import db from "@/lib/db";import { getUserById } from "@/data/..

후기뭔가 스레드 클론코딩 처럼 되었지만 기능을 공부하면서 무한스크롤 및 다양한 UI/UX 적용을 했으니 만족한다. useTransitional을 통해서 버튼의 disabled를 제어하였다. UI 컴포넌트간 설계에 많은 도움이 되었다. 홈페이지https://richable.cyber-luna.com/ 리치에이블 - 로그인더 높은 성장을 위한 커뮤니티richable.cyber-luna.com소스코드https://github.com/TwoIceFIsh/richable-web-server GitHub - TwoIceFIsh/richable-web-server: richable-web-serverrichable-web-server. Contribute to TwoIceFIsh/richable-web-server ..

문제점SessionProvider로 감싸고 useSession을 사용할 시 최초 로그인 상에서는 동작으며 Hard Reload 시 동작하는 현상이 있었다. 해결전해결후 버전정보 "next": "14.2.4", "next-auth": "^5.0.0-beta.19", 해결방법useSession대신 아래의 hook을 사용하여 호출한다.매우 감사하게도 유저분(bocarw121)께서 만들어 주셨다.아래 Github Issue 참고 - 많은 사람들이 고통받고 있다. 규모가 커짐에 따른 유지보수가 불안정한 느낌이다. use-current-session.ts// This hook doesn't rely on the session providerexport const useCurrentSession = () => { ..

1.스레드 기능근래 최근 나온 스레드의 디자인을 참고하여 모방 구현 해보았다.화면조회 작성 데이터 베이스 스키마model Thread { id String @id @default(cuid()) content String User User @relation(fields: [userId], references: [id], onDelete: Cascade) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt userId String ThreadComment ThreadComment[]}model Thr..

개요Shadcn의 Data Table에서 불러온 데이터를 CSV로 저장하는 기능이 필요하여 적용해보았다. export-to-csv 모듈을 설치하고 Shadcn Data Table 모듈에 버튼을 추가하여 커스텀한 페이지를 작성해 보았다. 설치다음의 모듈을 설치하고 다음의 함수를 사용한다.npm install export-to-csv --saveimport { mkConfig, generateCsv, download } from 'export-to-csv' 본문(Shadcn 커스텀)Shadcn Data Table에 CSV 다운 버튼을 적용한 파일이다.ProjectPage.tsx"use client";import * as React from "react";import { useEffect, useState }..

설치하기wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb# 다운로드 받은 .deb 파일을 설치 sudo dpkg -i google-chrome-stable_current_amd64.deb # 만약 의존성 문제로 설치가 중단된 경우 의존성 문제를 해결하고 설치를 완료 sudo apt --fix-broken install  소스코드우분투 기반 headless Selenium 드라이버 소스코드 이다.import timefrom selenium import webdriverfrom selenium.webdriver.chrome.service import Service## WINDOWSfrom webdriver_manage..

개발목적현대사회에 들어서는 사람들이 저마다 자신의 장점을 표현하고 싶은 욕구가 있다. 보통 사람들은 온라인 공간에 이야기를 하게되면 시기 질투를 받게된다. 이러한 욕구를 충족할 수 있도록 사회적 합의하에 자랑이 용인된 곳에서 자유롭게 의사교환을 하면 좋겠다고 생각을 하여 다음의 금융 커뮤니티를 만들고자 한다. 개발일지Next.js 기반에 Auth.js로 인증 인가를 적용 후 회원 가입시 이메일 인증을 통하여 로그인 가능하게 구현하였다. 자체 이메일 서버를 구축을 하여 발송 전용 계정을 생성했다. 추후 서비스가 오픈되면 이메일/메신저 서비스 추가도 고려 예정이다. 메인화면은 트위터의 컨샙으로 피드를 작성할 수 있으며 따로 전통적인 커뮤니티 게시판을 마련하였다. 추후 포인트 제도를 통해서 각 게시판의 대결구..