본문 바로가기

분류 전체보기233

[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.
[Web] 웹 서비스 구성 요소 글 작성 계기 ( 참고 벨로그 ) 포트폴리오 작성하면서 너무 별 생각 없이 짜는 기분이 들어 구성요소들에 대해 제대로 짚어보고 계획에 맞게 짜기로 결정 현대의 웹 서비스 구성 요소들 과거에는 단순히 클라이언트 - 서버 로 구성되었던 웹이 속도와 관리의 용이를 위해 로그서버, 웹 캐시, 파일 서버 등으로 세분화 됨. 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 ) 웹 서비스의.. 2023. 1. 9.
[Web] 캐시의 종류 및 동작 순 꼭 볼것 : https://toss.tech/article/smart-web-service-cache 웹 서비스 캐시 똑똑하게 다루기 웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다. toss.tech 참고: https://guiyomi.tistory.com/130?category=993662 웹 캐시(web cache) 종류 및 동작 순서 캐시란 데이터에 빠르게 접근하기 위해 자주 사용되는 데이터나 값을 미리 복사해 놓는 임시 장소를 의미한다. 캐시를 적용하기 좋은 데이터는 다음과 같다. - 자주 참조되는 데이터 - 자주 변경 guiyomi.tistory.com 캐시의 정의 및 종류 Cache란 데이터에 자주 .. 2023. 1. 4.
페이지 렌더링 비교 (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.

티스토리툴바