Weeeeey Weeeeey

libs 폴더는 Next.js 프로젝트에서 프론트엔드 개발자들이 사용하는 라이브러리 및 유틸리티 함수들을 모아놓는 공통 디렉토리 공통 함수 및 유틸리티: libs 폴더는 여러 컴포넌트나 페이지에서 공통으로 사용되는 함수나 유틸리티 기능들을 저장하는 곳입니다. 이러한 함수들은 중복 코드를 피하고 코드 재사용성을 높이는 데 도움을 줍니다. 외부 라이브러리 및 통합: libs 폴더는 프로젝트에서 사용하는 외부 라이브러리들을 관리하는 곳으로 활용될 수 있습니다. 예를 들어, Next.js에서는 libs 폴더에 외부 라이브러리들을 가져와 사용하는 코드를 작성할 수 있습니다. API 클라이언트: libs 폴더는 백엔드 API와 통신하는 클라이언트 코드를 작성하는 데 사용될 수 있습니다. 예를 들어, REST API..

eslint-parser에 의해 발생. babel에 처리하는 형식으로 변환되지 않아서 발생 프로젝트 루트 경로에 .babelrc 파일 생성 후 아래 코드 작성 { "presets": ["next/babel"], "plugins": [] } 이 후 루트 경로에 있는 .eslintrc.json 파일을 열어 아래 코드로 수정 { "extends": ["next/core-web-vitals", "next/babel"] }

https://cpro95.tistory.com/516 카카오 로그인 구현 React(리액트) Nextjs NextAuth kakao login 안녕하세요? 지난 시간에는 NextJS와 MongoDB로 유저 로그인 세션 구현하기에 도전해 봤는데요. 최근에는 직접 유저 가입과 그 정보를 DB에 저장하는 거는 굉장히 위험한 일입니다. 그래서 각 대표 cpro95.tistory.com

export default NextAuth({ providers: [ CredentialsProvider({ id: "email-password-credential", name: "Credentials", //NextAuth에서 만들어주는 Form 태그의 로그인 버튼에 노출될 텍스트 type: "credentials", credentials: { email: { label: "email", type: "email", }, password: { label: "password", type: "password", }, }, async authorize(credentials) { if (!credentials) throw new Error("잘못된 입력값으로 인한 오류 발생"); const { email, pa..

bcrypt.hashpw(password,bcrypt.gensalt()) Bcrypt 란? 1999년에 출시된 password-hashing function이다. Blowfish 암호를 기반으로 설계된 암호화 함수이며 현재까지 가장 강력한 해시 매커니즘 중 하나 보안으로 유명한 OpenBSD에서 사용 중 반복횟수를 늘려 연산 속도를 늦출 수 있으므로 연산 능력이 증가하더라고 brute-force 공격 대비 가능 구현이 쉽고 비교적 걍력하다 사용법 1. 설치 yarn add bcrypt 2. 비밀번호 암호화 hash는 동기, hashSync는 비동기 방식 파라미터로 넣은 숫자는 암호화에 사용되는 Salt로, 값이 높을수록 암호화 연산이 증가함.(속도는 느려짐) //비밀번호 암호화 const bcrypt =..

Next.js에서 제공하는 api 기능을 이용해서, api 서버를 만들고 orm을 통해 실제 DB와 연결시키는 것이 목적 1. Next.js api 기능 이용 pages 디렉터리 구조가 router가 되듯이 pages 폴더 안에 api 폴더를 생성한다. api폴더를 생성 후 그 안에 파일을 작성하면 api url이 된다. import { NextApiRequest, NextApiResponse } from "next"; import withHandler from '../../libs/server/withHandler' async function handler(req: NextApiRequest, res: NextApiResponse) { //... 로직 res.status(200).json({ ok: t..

1. OAuth란? Open standard for Authorization, Open Authorization 권한 부여를 위한 공개된 인증 프로토콜 ( 접근 권한을 위임하는 개방형 표준 프로토콜 ) eg) SNS , Google, Github, Apple, kakao, Naver 등등 2. OAuth 의 구성 요소 자원 소유자 (Resource Owner) 접근 권한과 엑세스 권한에 대해서는 아래 작동 과정 그림을 보며 접목해보면 쉽게 이해 가능 eg) 깃헙 계정으로 로그인 할려는 사람 클라이언트 (Client) eg) Velog 등 OAuth 로그인을 지원하는 애플리케이션 인가 서버 (Authorization Server) 자원 소유자를 인증하는 과정을 통해 권한에 대한 유효성을 검증 모든 검증 종..

1. SSR ( Server Side Rendering 1-1 최초 페이지 로딩 시간 짧음 (CSR 보다) 1-2 JS 실행이 완료될 때까지 인터렉션 불가 1-3 페이지 이동에 걸리는 시간이 CSR보다 길다 1-4 검색엔진 최적화(SEO)에 적합 2. CSR (Client Side Rendering) 2-1 최초 페이지 로딩 시간이 김 (SSR보다) 2-2 페이지 이동 시간 짧음 2-3 data request를 받아올때까지 빈 화면 표출 (로딩) 3. SSG (Static Site Generation) SSR 서버에서 페이지를 렌더링하는 방식 ( Next.js , PHP ASP ) Client가 특정 페이지 요청 Server에서는 해당 페이지에 필요한 data를 포함한 HTML 파일을 Client에 전달..