일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- domain
- 코테
- React
- WIS
- nextjs
- 프로그래머스
- Next
- 소셜 로그인
- git
- 코딩테스트
- OAuth
- 리터럴
- 코드카타
- vscode
- useRouter
- deep dive
- 셋팅
- 모던 자바스크립트
- 초기셋팅
- 스파르타코딩클럽
- 프로젝트 셋팅
- 자주 까먹는
- world it show
- 모던자바스크립트
- SSR
- 내일배움캠프
- vercel
- 구글 로그인
- js
- array정적메서드
- Today
- Total
목록분류 전체보기 (131)
하루 기록
페이지 방문 순서를 history stack에 저장한다. 내장 함수push : 새로운 URL 추가replace : 현재 URL을 새로운 URL로 교체back : 뒤로가기 reload : 새로고침 (히스토리 스택에 영향 없음) router.replace의 사용 예시 로그인 페이지에서 사용자가 정상적으로 로그인을 완료했을 때, router.push 가 아니라 router.replace를 쓰곤한다.뒤로 가기 버튼으로 다시 로그인 페이지에 다시 접근하는 것을 막기 위함이다. history stack 의 데이터에 접근하는 방법은? 없다. stack 자체를 조회할 수 없기에 각각의 페이지 이동 시 push가 맞는지 replace가 맞는지 적절히 잘 쓰는 것이 좋다.로그인 페이지가 n개의 단계로 페이지 이동하면서 ..
정적 metadata 설정// layout.tsx 또는 특정 페이지 컴포넌트 파일 export const metadata = { title: '초보 개발자를 위한 리액트 입문', description: '리액트를 처음 배우는 개발자를 위한 기초부터 심화까지의 과정을 담은 페이지' }; 동적 metadata 설정import fetchProductDetails from '../path/to/api'; export async function generateMetadata({ params }) { const product = await fetchProductDetails(params.id); return { title: `${product.name} - 상품 정보`, ..
1. 원하는 로티 파일 찾아서 다운받기https://lottiefiles.com/featured-free-animations Featured Free Lottie Animations - Curated Motion DesignsExplore our featured free Lottie animations, handpicked for quality and creativity. Discover free animations to enhance your projects with stunning motion graphics.lottiefiles.com 2. 다운받은 파일을 프로젝트 내의 폴더로 옮기기 3. lottie player 설치npm i react-lottie-player 4. Lottie renderin..
앞서 말하자면 아래 url로 접속하면 튜토리얼이 잘 되어 있다.https://console.cloud.google.com/customer-identity/providers?project=calendar-with&walkthrough_id=identity-platform--sign-in-user-email 1. Identity Toolkit API 를 사용 설정한다.2. identity platform 을 사용설정한다 (추가하려는 프로젝트명이 맞는지 확인한다) (링크)3. 공급업체 추가하기 4. 테스트용 사용자 추가하기나는 사용자 aaa@test.aa , aaaa1111 의 정보로 게정을 추가했다. 5. API 키로 Identity Platform 클라이언트 SDK 초기화 6. 구글에서 제공한 테스트 ..
Next Client Component = React const { name } = useParams(); Next Server componenttype PageProps = { params: { slug: string } searchParams: { [key: string]: string | string[] | undefined }};export default function Page({ params, searchParams } : PageProps ) { return My Page} Next app router 1. GETimport { type NextRequest } from 'next/server' export function GET(request: NextRequest) { ..
사용자가 애플리케이션(클라이언트)을 통해 리소스 서버에 접근하기 위해 권한을 부여받는 과정 flow사용자 요청: 사용자가 클라이언트에게 로그인 및 권한을 요청합니다.인증 요청: 클라이언트가 사용자 대신 인증 서버로 인증 요청을 보냅니다.사용자 인증 및 승인: 인증 서버는 사용자를 인증하고, 사용자가 권한 부여를 승인합니다.Authorization Code 발급: 인증 서버는 클라이언트에게 인증 코드를 발급합니다.Access Token 요청: 클라이언트는 인증 코드를 사용하여 인증 서버에 액세스 토큰을 요청합니다.Access Token 발급: 인증 서버가 클라이언트에게 액세스 토큰을 발급합니다.자원 요청: 클라이언트가 액세스 토큰을 사용하여 자원 서버에 리소스를 요청합니다.자원 반환: 자원 서버가 요청된 ..