Weeeeey Weeeeey

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) 자원 소유자를 인증하는 과정을 통해 권한에 대한 유효성을 검증 모든 검증 종..

글 작성 계기 ( 참고 벨로그 ) 포트폴리오 작성하면서 너무 별 생각 없이 짜는 기분이 들어 구성요소들에 대해 제대로 짚어보고 계획에 맞게 짜기로 결정 현대의 웹 서비스 구성 요소들 과거에는 단순히 클라이언트 - 서버 로 구성되었던 웹이 속도와 관리의 용이를 위해 로그서버, 웹 캐시, 파일 서버 등으로 세분화 됨. CDN Load Balancer Web Application Service (WAS) DataBase File Storage Cache Service Message Queue Log Service Log Storage Other Service ( Authorization, Payment, Open Data, ...) 1. CDN ( Contents Delivery Network ) 웹 서비스의..

꼭 볼것 : https://toss.tech/article/smart-web-service-cache 웹 서비스 캐시 똑똑하게 다루기 웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다. toss.tech 참고: https://guiyomi.tistory.com/130?category=993662 웹 캐시(web cache) 종류 및 동작 순서 캐시란 데이터에 빠르게 접근하기 위해 자주 사용되는 데이터나 값을 미리 복사해 놓는 임시 장소를 의미한다. 캐시를 적용하기 좋은 데이터는 다음과 같다. - 자주 참조되는 데이터 - 자주 변경 guiyomi.tistory.com 캐시의 정의 및 종류 Cache란 데이터에 자주 ..

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에 전달..