Typescript Typescript는 Javascript의 상위 집합으로 JavaScript의 모든 기능을 포함하면서 추가적인 기능을 제공합니다. Javascript 엔진을 사용하며 변수의 타입을 정의하고 프로그래밍을 하면 Javascript로 컴파일되어 실행할 수 있습니다. 이 때, 컴파일은 브라우저에서 실행하기위해 Typescript 컴파...

OAuth 2.0 인증을 구현해보자. Naver 계정을 통해 OAuth 인증을 구현해보겠습니다. 참고글 : OAuth OAuth 서비스 등록 (Naver) OAuth 2.0 로그인을 사용하기 위해서는 이용하고자 하는 Resource Server에 자신의 어플리케이션을 등록해야합니다. Naver Developers 페이지의 ‘Appl...

OAuth (Open Authorization) 사용자들이 비밀번호와 같은 자신의 자격 증명 없이 다른 애플리케이션이나 서비스가 사용자의 리소스에 접근할 수 있도록 권한을 부여할 수 있는 수단으로 인증 및 권한 부여를 위한 표준 프로토콜입니다. ID, PW를 제공하지 않아도 클릭 한 번으로 간편하게 로그인할 수 있을 뿐만 아니라, 연동되는 외부 웹...

로그인 상태 유지 인증을 구현했으니 로그인 상태를 유지해보겠습니다. 참고글 : jwt, 로그인 페이지 만들기 - 09 jwt 토큰 방식 서버는 로그인 성공 시, 토큰을 생성해 전달합니다. 사용자는 이후의 서버로 요청을 보낼 때, 토큰을 함께 보내는 것으로 인증 절차를 대신할 수 있습니다. AccessToken, Refre...

passport 모듈 적용 추가적으로 SSO를 사용할 예정이므로 사용자 인증 과정에 passport 모듈을 적용하겠습니다. 참고글 : passport, 로그인 페이지 만들기 - 08 index.js 작성 passport 폴더를 만들고 index.js 파일을 작성합니다. import local from "./localStrategy....

비밀번호 암호화 참고 글 : crypto,로그인 페이지 만들기 - 07 비밀번호 암호화 함수 32 Byte의 임의의 문자열을 salt로 만들고 crypto의 pbkdf2Sync 메서드를 사용해 암호화합니다. // 암호화된 비밀번호 생성 함수 const createPasswordAndSalt = (userInputPassword) =&...

해시 알고리즘에 대해 알아보자. bcrypt 1999년 USENIX에서 발표한 Blowfish 암호에 기반을 둔 해시 함수로 되었으며 OpenBSD 및 수세 리눅스 등의 일부 리눅스 배포판을 포함한 기타 시스템용 기본 암호 해시 함수 입니다. SHA 계열에서 약점으로 지적된 빠른 연산으로 인한 Brute force 공격에 대한 대비책으로 Bl...

bcrypt 모듈에 대해 알아보자. bcrypt 모듈 bcrypt 모듈은 비밀번호를 안전하게 저장하기 위한 해싱 알고리즘입니다. 특징 각 해시마다 Salt를 자동 생성하여 보안성을 강화합니다. saltRounds를 조정하여 해싱 연산 속도를 제어합니다....

유저 회원가입 Validation 구현 참고 글 : express-validator,로그인 페이지 만들기 - 06 validation 구현 먼저 회원 정보 관련 요구사항을 추가 정리합니다. 아이디는 4 ~ 12 글자이어야 하고 영어 대소문자, 숫자로만 구성되어야합니다. 비밀번호는 4 ~ 12 글자이어야...

react-slick 라이브러리를 이용해 Carousel을 구현해보자. Carousel Carousel이란 여러 개의 이미지, 비디오, 텍스트 등의 콘텐츠를 일정한 간격으로 순서대로 보여주는 UI 요소입니다. Carousel은 다양한 콘텐츠를 스크롤 없이 한 화면에서 제공할 수 있어 사용자들에게 더 많은 콘텐츠를 쉽게 제공할 수 있습니다....