본문 바로가기

FrontEnd84

[Next.js] NextAuth로 로그인 처리하기(feat. 로그인 페이지 커스텀) 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.. 2023. 1. 23.
[Next.js] bcrypt 를 통해 비밀번호 암호화 bcrypt.hashpw(password,bcrypt.gensalt()) Bcrypt 란? 1999년에 출시된 password-hashing function이다. Blowfish 암호를 기반으로 설계된 암호화 함수이며 현재까지 가장 강력한 해시 매커니즘 중 하나 보안으로 유명한 OpenBSD에서 사용 중 반복횟수를 늘려 연산 속도를 늦출 수 있으므로 연산 능력이 증가하더라고 brute-force 공격 대비 가능 구현이 쉽고 비교적 걍력하다 사용법 1. 설치 yarn add bcrypt 2. 비밀번호 암호화 hash는 동기, hashSync는 비동기 방식 파라미터로 넣은 숫자는 암호화에 사용되는 Salt로, 값이 높을수록 암호화 연산이 증가함.(속도는 느려짐) //비밀번호 암호화 const bcrypt =.. 2023. 1. 23.
[Next.js] Next.js API 만들기 (feat. handler, withHandler) 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.. 2023. 1. 22.
[Next.js] OAuth(2.0)를 통한 로그인 인증 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) 자원 소유자를 인증하는 과정을 통해 권한에 대한 유효성을 검증 모든 검증 종.. 2023. 1. 10.
페이지 렌더링 비교 (SSR vs CSR vs SSG 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에 전달.. 2023. 1. 4.
[Next.js][보수 공사 필요] getServerSideProps, getStaticProps ( Data Fetching in Next ) 1. getServerSideProps (Docs) getServerSideProps 라는 함수를 한 페이지 내부에서 export 할 경우, Next.js는 getServerSidePrpos에 의해 반환되는 각 페이지 별 요청에 따른 데이터를 pre-rendering 할 것이다.(자동적으로) export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as props } } Note that irrespective of rendering type, any props will be passed to the page component and can be viewed on.. 2023. 1. 4.
[React.js] React Query 에 대해 (feat. SWR 과의 차이) -v3 SWR, React Query 등장 이전 Redux, MobX 등의 상태 관리 라이브러리는 클라이언트 상태 관리에는 유용하지만, 서버 상태와 동기화 되지 않았기 때문에 개발자들이 직접 상태를 업데이트 해줬어야 함. => SWR과 React Query는 이러한 불편함을 해소하기 위해 등장 선언적으로 프로그래밍 가능 여러번 호출 된 동일한 API 요청은 한번만 실행 dirty해진 데이터는 적절한 시점에 알아서 업데이트 Global State 와 Server State의 관심사 분리 react-query가 swr을 앞지르고 있다. React query vs SWR React Query React Query는 리액트 에플리케이션에 서버 상태를 가져와서, 캐싱|동기화|업데이트를 쉽게 해준다 React Query .. 2022. 12. 30.
[React.js] video 태그에 동적 값 할당 const Clip= (url:string) =>{ return ( ) } 요렇게 선언했는데 이 후 url 값을 업데이트 해주어도 처음 할당된 영상만 보여지는 상황이 생겼다. 하고 싶은건 버튼 클릭시 url 값이 업데이트 되어 보여지는 영상도 바뀌는 것 이에 대한 해결책으로 video 태그에 키 값을 주거나 ref를 주는 것. const Clip= ( url:string ) => { const videoRef = useRef(); useEffect(() => { videoRef.current?.load(); }, [url]); return ( ); } const Clip=( url:string )=> { return ( ); } 참고 : https://stackoverflow.com/questions/4.. 2022. 12. 29.
[React & 브라우저] 브라우저의 동작 과정 (feat. 렌더링 실행) 프론트엔드(FE) 개발자가 브라우저(Br) 동작 원리를 알아야 하는 이유 FE에게 Br는 거의 모든 것. Br를 통해 개발, Br를 통해 테스트 및 배포 진행, 사용자들은 Br를 통해 웹에 접속 FE는 Br의 모든 것이 아닌 HTML, CSS, JS가 의도대로 동작하는지 확인해도 큰 문제x 하지만 기능이 많고 다양한 동작이 발생한다면 최적화가 필요해짐 Br의 최적화를 위해선 결국 Br의 동작 원리를 이해하는 것에서부터 시작 해당 포스트에서 알아볼 것 => Br의 렌더 과정 & 원리 ( 아래는 선 4줄 요약 ) HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 빌드 DOM & CSSOM을 결합하여 렌더 트리를 형성 렌더 트리에서 레이아웃을 실행 => 각 노드의 기학학적 형태를 계산 개별 노드를 .. 2022. 12. 23.

티스토리툴바