본문 바로가기

분류 전체보기

 (11)
[Node.js] 유저 회원가입/로그인 구현하기 With Mongoose - 2 이제 앞서 구현한 내용에 JWT를 살포시 얹어보자. 이에 앞서 JWT 관련 라이브러리를 설치하자. `npm install jsonwebtoken` /Controllers/authController.js const signToken = (id) => jwt.sign({ id: id }, process.env.JWT_SECRET, { expiresIn: process.env.JWT_EXPIRES_IN, }); 이렇게 간단하게 JWT 토큰을 생성할 수 있다. 여기서 JWT_SECRET, JWT_EXPIRES_IN을 설정해줘야 한다. JWT_SECRET는 해싱하는 나만의 키? 같은 느낌으로, 알려지면 안되니 config.env 파일에 설정해두고 사용하자. 값은 내가 원하는 값 아무렇게나 설정해도 되는 것 같다...
[Node.js] 유저 회원가입/로그인 구현하기 With Mongoose - 1 어떤 프로그램이든 회원가입 로그인은 기본적으로 구현해야 하는 부분 ,,, 효율적인 방법인지는 모르겠지만 간단하게 회원가입과 로그인을 구현해보자. 우선 유저 데이터에 어떤 값이 들어갈지를 미리 설정해야 한다. DayDream에는 회원가입 시 이메일, 비밀번호, 비밀번호 확인, 휴대폰 인증(추후 시간이 된다면...), 나이, 키, 몸무게, 자기소개, 닉네임을 받고 있다. 그에 맞춰서 유저 모델을 설정해주면 된다. /models/userModel.js const userSchema = new mongoose.Schema({ email: { type: String, required: [true, "이메일을 입력해주세요."], unique: true, lowercase: true, validate: [valida..
[Node.js] MongoDB 연결하기 With Mongoose 데이터베이스는 MongoDB를 사용하기로 했다. 아무래도 채팅 로그를 가지고 있으려면 확장성이 좋아야 한다고 생각하는데, 이러한 부분에서 NoSQL 쪽이 더 효율적이라고 판단해 MongoDB를 채택! 데이터를 클라우드에 올려놓고 사용할 수 있는 MongoDB Atlas를 사용하기로 했다. https://www.mongodb.com/ko-kr/atlas MongoDB Atlas | 멀티 클라우드 개발자 플랫폼 MongoDB Atlas는 유일한 멀티 클라우드 개발자 데이터 플랫폼으로, 데이터를 사용해 빠르고 손쉽게 구축할 수 있습니다. 지금 무료로 시작하세요! www.mongodb.com 계정을 대충 만들고 클러스터를 만들자. 일확천금을 꿈꾸며 공짜 클러스터인 M0을 선택! 그럼 이렇게 클러스터를 생성해주고..
React 프로젝트에 Three.js 도입하기 방학에(이제는 졸업이지만) 기존에 진행했던 프로젝트 리팩토링과 더불어 새로운 기능을 넣기로 했다. 1년 뒤의 나에게 편지를 쓰는 사이트를 구현하던 도중, 이런 생각이 들었다. 내가 편지를 작성 완료하면, 내가 작성한 편지를 3D 이미지로 제공하면 좀 더 재밌는 경험을 제공할 수 있지 않을까? 사실 토스에서 이런 경험을 했기 때문에, 이를 모티브로 제작해보고 싶었다. React에서는 react-three라는 라이브러리를 통해 3D 이미지를 구현할 수 있다. three.js는 초심자가 사용하기에는 굉장히 어려운 라이브러리지만, 역시 나 또한 잘 사용하지 못했다. 그래서 야매로 3D 이미지를 구현하는 방식을 구글링을 통해 찾았고, 이를 통해 내가 구현한 방법을 소개하고자 한다. 우선 나의 개발 환경은 Reac..
[알고리즘] 효율적인 소수 구하기, 에라토스테네스의 체 소수는 1과 자기 자신만을 약수로 가지는 수를 말한다. 즉 직관적으로 이를 코드로 표현한다면, for i in range(2, n): if n%i == 0: return False return True 단순히 2부터 n-1까지 순회하며 나눠지는 수가 있다면 소수가 아니라고 판단하면 된다. 하지만 이는 n까지 모두 순회하므로 O(n)의 시간복잡도를 가진다. 만약 n이 엄청 커진다면? 시간초과가 날 확률이 높다. 그렇다면 효율적인 소수를 구하려면 어떤 방식을 사용해야 할까? 우선 약수의 특성을 확인해야 한다. 예를 들어 16의 약수를 확인해보면, [1, 2, 4, 8, 16] 를 얻을 수 있다. 15의 약수는 [1, 3, 5, 15] 를 얻을 수 있다. 즉 가운데의 수를 기준으로 대칭적인 모습을 보이는데, ..
Vercel을 통해 Front 간단 배포하기! 이번 하반기 서류들을 작성하면서, 포트폴리오를 내야하는 곳이 있었다. 저번 신한은행 지원하면서 PPT로 간단하게 포트폴리오를 만들었었는데, 프론트엔드 개발자로서 포트폴리오 사이트 정도는 하나 있으면 좋지 않을까? 라는 생각에 주섬주섬 만들기 시작했다. 그런데, 남들이 보려면 배포를 해야 하는데 ... 항상 배포는 Backend 팀원들한테 맡겼기 때문에 경험이 없었지 . . . 만! Vercel이라는 초 간단한 툴이 있었다! Vercel은 클릭 몇번으로 프론트 배포를 가능하게 해준다 ! 대신, 규모가 작은 개인 토이프로젝트 정도에 적합한 것 같고 ... 큰 규모는 AWS 이용하도록 하자~ 정말 놀랍게 '딸깍' 몇번이면 배포 완료! 우선 Vercel에 회원 가입을 하고 Git 연동을 하면, 내 레포지토리들이..
소프티어 2기 후기 소프티어 2기에 입과하는 과정과, 교육을 들으면서 느낀점들을 작성해보려고 한다. 참고로 나는 **현대자동차 웹프론트엔드 직무**에 지원했다 ! 처음 소프티어를 알게 된 건 학교에 걸려있는 현수막이었다. 당시 카드사 신입사원 면접을 앞두고 있던 때라 눈에 담아두고만 있었다. 지원서를 작성해보려고 하니 자기소개서 없이 간단한 나의 정보만 입력하면 지원이 완료된다고 하여 지원서를 작성했던 것 같다. 결과적으론 면접에 떨어져 정말 잘한 일이지 않나(...) 싶다. 지원서를 넣고 얼마 되지 않아 메일 하나가 도착했다. 사실 뭐 하지도 않았는데 대상자 선발이라는 말이 뭔가 기분 좋았다. 코딩 테스트에 약한 터라... 걱정이 많았지만 짧은 시간에 여러 유형을 공부하려고 노력했던 것 같다. 깊게보단 넓게? 코딩 테스트..
UX 개선을 위한 이미지 프리로딩 With Promise 프로젝트 거의 막바지에 겪은 문제가 있었다. 바로 '이미지 최적화' 문제! 360도 회전 이미지를 구현하는데, 이미지가 버벅거리며 움직이는 문제가 있었다 ... 사실 이유는 알고 있었다. 근데 어떻게 해야할지 몰랐다. 우선 동작 방식은, 마우스를 클릭할 때 돌린다는 신호를 주고, 마우스를 좌, 우로 움직일 때 이미지의 index를 +1 하거나 -1 해주는 방식이다. const [image, setImage] = useState(1); const [prevX, setPrevX] = useState(0); const [start, setStart] = useState(false); const startSwipe = (event: React.MouseEvent) => { if (start) { setPrevX..

티스토리툴바