TIL 썸네일형 리스트형 [Next.js] Nextjs에 Clerk 적용 2 이 전 문서는 클록을 설치하고 세팅하는 방법에 대해서 다뤄봤습니다. 이번엔 페이지에 관련해서 작성해보겠습니다. 5. 회원가입(sign-up) 페이지 만들기// /app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsximport { SignUp } from "@clerk/nextjs";export default function Page() {/* 아래에 SignUp 컴포넌트는 아까 Clerk 사이트에서 Clerk Application 만들 때선택했던 UI 기반으로 컴포넌트를 만든 것입니다.*/ return ; } 6. 로그인(sign-in) 페이지 만들기// /app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsximport { .. 더보기 [Next.js] Nextjs에 Clerk 적용 1 안녕하세요.오늘은 Clerk을 사용해서 간단한 회원가입/로그인을 해보려고 합니다. 먼저 사이트에 접속 후 왼쪽에서 필요한 부분을 활성화 해주고 Create Application를 해준다.Application 을 만들면 대시보드 페이지로 이동하게 됩니다.이제 아래 표시된 순서에 따라 우리 프로젝트에 Clerk 을 붙여보겠습니다. 1. Clerk 설치npm install @clerk/nextjs2. .env 파일에 환경변수 입력3. Middleware 생성 및 설정// /middleware.tsimport { clerkMiddleware } from "@clerk/nextjs/server";export default clerkMiddleware();export const config = { matcher:.. 더보기 Git 프로그램 설치 안녕하세요.저번 포스팅에 이어서 gitbub 가입 및 git 설치에 대해 알려드리려고 합니다.Github 가입하기1. github.com 에 접속해서 상단의 sign up 버튼을 누릅니다 2. 각 항목을 채워줍니다 Username은 github 에서 사용할 id 라고 생각하시면 됩니다. username 이 무엇인지 꼭 기억해두세요. 다른 설정에서도 계속 사용합니다! 나중에 바꿔줄 수는 있지만 관련된 설정을 모두 바꾸어야하는 불편함이 있으므로 신중하게 결정해주세요. 하단 verify 버튼을 눌러서 문제에 맞는 답을 골라주세요. 문제를 모두 맞추면 create account 버튼을 눌러서 가입을 완료합니다. Git 설치Windows다운로드: https://git-scm.com/ Git git-scm.com다.. 더보기 Git commit, 원격 repo, .gitignore 안녕하세요.오늘은 평소에 사용하고 있는 git에 대해 순서대로 정리를 해보려고 합니다.01. Git 구조개발자라면 git을 무조건 사용하실텐데 그렇다면 git과 github는 같은걸까요?밑에 그림을 참고해서 확인해주세요. git에서 관리하는 영역은 크게 3가지가 있습니다.현재 작업중인 Working Directorycommit 할 파일의 예비 저장소, 혹은 추적 대상 파일의 공간인 Staging Area각 유저의 컴퓨터에서 관리되고 있는 로컬 저장소여기서 우리가 직접 눈으로 확인할 수 있는 저장 공간은 Working Directory이며, 현재 프로젝트가 담긴 디렉토리입니다.또 많은 사람이 혼란스러워 하는 부분은 바로 로컬 저장소라고 생각이 듭니다. 내 컴퓨터에 분명이 있는 저장 공간이지만 실제로는 눈에.. 더보기 설계 단계_아키텍처 설계 이 글을 쓰게 된 계기는 설계를 진행하면서 용어들에 대해 정확하게 인지하지 못하여 정리하게 되었다. 기본 설계 과정은1. 아키텍처 설계 : 정보 시스템을 서브시스템으로 분할하기 위한 기능 목록과 인프라가 되는 하드웨어, 네트워크, SW 구성 요소 파악2. UI 설계 : 화면의 레이아웃, 화면의 관계 및 전환을 설계3. 데이터 설계 : 코드화할 데이터가 있다면 코드 설계와 데이터가 어떤식으로 저장되고 관리 될 것인지 논리 데이터 설계4. 외부 인터페이스 설계 : 다른 시스템과 연동될 때 주고받는 데이터의 형식과 호출 방식을 설계이렇게로 나눌 수 있는데 이제부터 하나씩 정리를 시작해 보겠다!!!아키텍처 설계컴포넌트 구성과 연계 방법서비스 지향 아키텍처(SOA, 소프트웨어 구성 요소를 사용해 비즈니스 애플리.. 더보기 React Query 정리를 하게 된 계기는 Query를 사용하고 있었고, 사용했었고 어떻게 흘러가는지 알고 있다고 생각했다. 하지만 설명을 하라고 하면 정확하게 내가 알고 있는대로 설명할 수 없는 나를 보고 이건 모르는것이다. 라고 생각하게 되었고, 정리를 통해서 설명해보려고 한다. React-Query 이점 우리가 React-Query를 사용하는 이유는 데이터 조회, 캐싱, 동기화, 업데이트 등 많은 이점이 있다는 것이다. Query Refetching 조건 1. 런타임에 stale인 특정 쿼리 인스턴스가 다시 만들어졌을 때 2. window가 다시 포커스가 되었을때(옵션으로 조절가능) 3. 네트워크가 다시 연결되었을때(옵션으로 조절가능) 4. refetch interval이 있을때 요청 실패한 쿼리는 디폴트로 3번 더 .. 더보기 [React] React에서 모달을 활용한 날짜와 시간 선택 관리하기 이번 프로젝트에서는 모달을 열어 사용자가 선택할 수 있는 날짜와 시간을 제공해야 했습니다. 이 과정에서 셀렉트 박스와 달력을 통해 사용자에게 직관적인 인터페이스를 제공하고, 선택된 값들을 함께 처리하는 기능을 구현했습니다. import 부분import * as z from "zod";import { zodResolver } from "@hookform/resolvers/zod";import { useForm } from "react-hook-form";import dayjs from "dayjs"; // 날짜 처리 라이브러리import "dayjs/locale/ko"; // 한국어 로케일import { format } from "date-fns"import { useMutation, useQueryCl.. 더보기 TypeScript를 활용한 안전한 클라이언트-서버 통신 및 인증 관리 안녕하세요.오늘은 프론트 개발자가 TypeScript로 개발하기 편한 환경을 만들기 위해 한발짝 더 다가가보겠습니다. 최근 TypeScript를 사용하여 백엔드와 통신할 때 데이터 타입 추론이 어려운 경우가 있었습니다.그래서 백엔드에서 전송된 데이터의 타입과 내가 설정한 타입이 일치하지 않을 때, 콘솔에서 어떤 부분이 다른지 명확하게 표시되도록 작업해주었습니다. /** * print zod error log in console * @param error zod error */export function logZodError(error: z.ZodError) { error.issues.map((el) => { if ("received" in el && "expected" in el) { c.. 더보기 이전 1 2 3 4 5 다음 목록 더보기
