Frontend/일요스터디
-
[Node.js] bcrypt로 비밀번호 암호화하기Frontend/일요스터디 2023. 1. 8. 23:06
비밀번호를 암호화하지 않고 저장하게 되면 데이터베이스에 비밀번호가 그대로 노출되게 됩니다. 이는 보안상 매우 위험할 수 있기 때문에 암호화에 대한 개념과 bcrypt를 통해 비밀번호 암호화 하는 방법에 대해 알아봅시다. 암호화 암호화는 코딩된 알고리즘, 해시, 서명 사용을 통해 정보를 보호하는 방식입니다. 해시 함수 해시 함수는 평문을 암호화된 문장으로 만들어 주고 암호화된 값으로부터 복호화를 할 수 없는 단방향 암호화 기법입니다. 해시 알고리즘은 같은 입력 값에 대해 항상 같은 리턴 값을 출력합니다. bcrypt 비밀번호 암호화를 위한 단방향 해시 함수로 강력한 해시 알고리즘입니다. bcrypt 설치하기 npm install bcrypt 비밀번호 해시하기 salt는 평문 데이터에 의미 없는 데이터를 추..
-
[MERN] MongoDB + Express + React + Node + Typescript 백엔드 설정하기Frontend/일요스터디 2023. 1. 1. 22:41
2022년 12월, 처음으로 클론 코딩을 통해 백엔드를 공부하게 되었습니다. 그토록 프론트만 고집하던 제가 다른 것을 다 제쳐두고 백엔드를 공부하게 된 이유는 결국 두루두루 알아야 프론트를 더 잘할 수 있다는 것을 깨달았기 때문이죠! 백엔드를 직접 만들어보고 나니 전체 프로세스가 한눈에 들어왔습니다. 물론 클론해서 배운 것이기 때문에 지식을 완벽하게 습득했다고 말하기 어려워 풀스택으로 새로운 프로젝트를 만들게 되었습니다. 프로젝트에 앞서 제가 이 스택을 선택한 이유와 백엔드 설정을 기록해보려고 합니다. Why MERN stack? 저는 제목에서 알 수 있듯 MongoDB + Express + React + Node ( + Typescript )으로 프로젝트를 구성했습니다. MongoDB에서 MERN 아키..
-
Webpack으로 React 개발환경 설정하기Frontend/일요스터디 2022. 12. 4. 14:26
첫 일요스터디로 제가 주제를 정해온 주제를 가지고 스터디하는 시간을 가졌습니다! 그동안 개념으로만 알고 있었던 webpack을 꺼내어 면밀히 살펴보고 스터디원과 함께 공유하는 시간을 가졌는데요. create-react-app을 통해 자동으로 깔렸던 webpack은 왜 필요한 것인지, 어떤 역할을 하고 있었는지 알 수 있었습니다. 그리고 빈 폴더로 시작해서 webpack으로 react 개발환경을 설정해보았습니다. webpack에 대한 정리는 이 전 포스팅에 남겨두었습니다. https://jihye-dev.tistory.com/10 [webpack] 웹팩의 개념과 활용 웹팩의 개념 웹팩은 자바스크립트 정적 모듈 번들러로 그림과 같이 애플리케이션을 구성하는 여러 개의 파일들을 하나의 자바스크립트 코드로 압축하..