'Project' 카테고리의 글 목록

Next-auth v5 session 커스텀 - NestJS

2024.01.02

next-auth session을 사용하다보면 session에 값을 추가하고 싶을 때가 있다. 예를 들어 user의 role을 추가 하고 싶으면 어떻게 해야 될까? next-auth session에 정보 추가 src/auth.ts import NextAuth from 'next-auth'; import KakaoProvider from 'next-auth/providers/kakao'; import { cookies } from 'next/headers'; export const { handlers: { GET, POST }, auth, } = NextAuth({ providers: [ KakaoProvider({ clientId: process.env.AUTH_KAKAO_CLIENT_ID!, clien..

Project/코하루 마켓

Next-auth v5 데이터베이스에 유저 정보 추가 - NestJS

2023.12.28

만약 next에서 서버와 데이터베이스를 사용하려면 next-auth의 adapters 함수를 사용하면 되는데 나는 서버를 따로 두었기에 다른 방법으로 시도를 하려고 한다. next에서 풀스택으로 사용하려면 아래 문서를 참고하면 된다. https://authjs.dev/guides/adapters/creating-a-database-adapter Next-auth callbacks 콜백은 작업이 수행될 때 발생하는 작업을 제어하는 데 사용할 수 있는 비동기 함수 공식문서를 보면 callbacks에 signIn, redirect, session, jwt 등이 있다. 여기에서는 signIn 콜백을 이용해 nestJS 서버랑 통신하고 데이터베이스에 값을 저장하려고 한다. signIn 콜백을 이용한 데이터 베..

Project/코하루 마켓

Next-auth v5 카카오 로그인 구현

2023.12.22

Next-auth v5 버전 설치 npm install next-auth@beta next-auth v4 와 달라진 점 https://authjs.dev/guides/upgrade-to-v5 파일 세팅 시작 전 함께 보면 좋은 공식 문서 https://authjs.dev/reference/nextjs src/auth.ts import NextAuth from 'next-auth'; import KakaoProvider from 'next-auth/providers/kakao'; export const { handlers: { GET, POST }, auth, } = NextAuth({ pages: { signIn: '/login', }, providers: [ KakaoProvider({ clientId..

Project/코하루 마켓

Nextjs 공통 레이아웃 만들기

2023.12.12

Nextjs 13버전 이후 공통 레이아웃 만들기 Nextjs 13 버전 (App Router) 이후 버전 기본 구조는 이렇다. src ┗ app ┣ favicon.ico ┣ globals.css ┣ layout.tsx ┗ page.tsx src(source)를 쓸 건지는 옵션이지만 폴더 구조를 좀 더 명확히 하려면 쓰는 게 가독성이 더 좋다. layout.tsx는 공통 레이아웃을 잡는데 쓰이고, page.tsx는 페이지를 만들때 쓰이는 파일이다. 새로운 경로를 만들때에는 app 폴더 안에 notice/page.tsx라고 적으면 notice라는 경로의 페이지가 생성이 된다. app 폴더 바로 하위에 있는 layout.tsx에 공통으로 쓸 header나 footer를 만들면 모든 페이지가 감싸진다. layo..

Project/열줌쉬어

[새싹x코딩온] 프로젝트 회고 (열줌쉬어) - 프로젝트 소개 및 폴더 구조 세팅

2023.10.24

프로젝트 소개 스탑워치 / 타이머기능을 통해 실시간으로 공부시간을 기록하고, 가입한 그룹 내에 공부량을 시각화하여 보여주는 웹사이트 개발 기간 23. 10. 23 ~ 23. 11. 10 (약 2주) 기술 스택 프론트 엔드 - 2명 Vite ReactJS JavaScript Redux-Toolkit TailwindCSS Socket.IO-client 백엔드 - 3명 Express Mongoose JWT (jsonwebtoken) Socket.IO MongoDB, AWS EC2, NGINX 협업 툴 노션 깃허브 프론트 엔드 기술 스택 선택 이유 Vite VS create-react-app 매번 create-react-app으로만 했었는데 vite가 기존의 번들러와 비교하여 개발 속도가 월등히 빠르다고 하고,..

Project/bounding-box

React에서 Tooltip 만들기

2023.04.15

Tooltip.js import React, { useState } from 'react'; import styled from 'styled-components'; function Tooltip({ children, text }) { const [show, setShow] = useState(false); return ( setShow(true)} onMouseLeave={() => setShow(false)} > {children} {text} ); } export default Tooltip; const StyledWrap = styled.div` position: relative; `; const StyledTooltip = styled.span` display: flex; align-items: ..

Project/bounding-box

React에서 Canvas 이미지 줌, 이동 기능 만들기

2023.04.07

canvas에서 이미지 줌, 이동 기능을 구현 코드 import React, { useRef, useEffect } from 'react'; const img = new Image(); const INITIAL_POSITION = { x: 0, y: 0 }; const MIN_SCALE = 0.1; const MAX_SCALE = 10; function App() { const zoomCanvasRef = useRef(null); const scaleRef = useRef(1); const panningRef = useRef(false); const viewPosRef = useRef(INITIAL_POSITION); const startPosRef = useRef(INITIAL_POSITION); co..

Next-auth v5 session 커스텀 - NestJS

Next-auth v5 데이터베이스에 유저 정보 추가 - NestJS

Next-auth v5 카카오 로그인 구현

Nextjs 공통 레이아웃 만들기

[새싹x코딩온] 프로젝트 회고 (열줌쉬어) - 프로젝트 소개 및 폴더 구조 세팅

React에서 Tooltip 만들기

React에서 Canvas 이미지 줌, 이동 기능 만들기

티스토리툴바