전체 글
-
Social Media 만들기 - 2) Authentification 기능 만들기NODE.JS 2021. 6. 16. 12:08
우선 npm run dev해서 백엔드를 실행해주고, models에 userModel.js파일을 만들어준다. const mongoose = require('mongoose') const userSchema = new mongoose.Schema({ fullname:{ type:String, required:true, trim:true, maxlength:25 }, username:{ type:String, required:true, trim:true, maxlength:25, unique:true }, email:{ type:String, required:true, trim:true, unique:true }, password:{ type:String, required:true }, avatar:{ typ..
-
Instagram 클론 -3) backend와 frontend 합치기Spring 2021. 6. 12. 00:30
먼저 sign in, up 페이지를 합치자 먼저 firebase로 가서 authentification을 시작한다. 이번에는 firebase documentation으로 가서 웹시작하기를 눌러준다. 빌드> 인증>비밀번호로 인증하기를 들어간다. 이제 우리 프로젝트에 firebase를 넣자. 다음의 문서를 참고해서 순서대로 진행한다. frontend에 npm install --save firebase 이후 components에 firebase.js파일을 만들어주자. import firebase from "firebase/app"; var firebaseConfig = { apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO", authDomain: "myapp-project-123..
-
Instagram 클론 -2) status, post, comment모델 만들기Spring 2021. 6. 12. 00:20
user에 이어 이제 status모델을 만들자. 먼저 status entity를 만든다. entity에 Status자바 클래스를 만들어준다. 자동생성되는 id를 만들어주고 나서, 필요한 요소들을 만들고 기본 생성자와 요소 생성자, getter, setter도 만들어준다. package com.yunhalee.Instagram_App.Entity; import java.sql.Timestamp; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.Id; @Entity(name = "Status") public class Status { @Id @GeneratedValue privat..
-
Instagram 클론 -1) springboot시작하고 user모델 만들기Spring 2021. 6. 11. 19:07
참고한 강의 https://www.youtube.com/watch?v=wlu3pgPIuuM&list=PLtwLEdgwCmnUsGJebQP-NjTuC7FlrLjNR&index=3&ab_channel=TechnicalInterviewTechnicalInterview 인스타그램클론의 frontend 부분은 강의를 보고 만들어 놓았는데, 리액트 부분은 다른 강의에서도 만힝 보고 따라배우는 것을 했기 때문에, 정리하는 것은 생략했다. 코드는 다음에서 확인 가능하다. https://github.com/cracktechnicalinterview/insta-frontend/blob/master/src/Components/StatusBar/StatusBar.css cracktechnicalinterview/insta-f..
-
아마존 E-commerce 클론 -33) 채팅 기능 만들기(socket io)NODE.JS 2021. 5. 30. 22:39
socket io는 자바스크립 라이브러리이고 리얼타임 인터랙션을 만들어내는 라이브러리다. 최상위 폴더에 npm install socket.io server.js에 다음과 같이 입력해준다. import http from 'http' import {Server} from 'socket.io' const httpServer = http.Server(app); const io = new Server(httpServer,{cors:{origin:'*'}})//오류방지 const users = []; io.on('connection', (socket)=>{//연결끊기 socket.on('disconnect',()=>{ const user = users.find(x=>x.socketId===socket.id); if..
-
아마존 E-commerce 클론 -32) 차트 스크린 만들기NODE.JS 2021. 5. 30. 20:32
orderRouter로 가보자. get/다음에 작성해주자. mongoDB의 aggregate기능을 사용할 것이다. 각각의 주문들에 대해서 sum, 판매량 구하고, 각각의 사용자에 대해서 사용자 수를 구해서 사용한다. orderRouter.get( '/summary', isAuth, isAdmin, expressAsyncHandler(async (req, res) => { const orders = await Order.aggregate([ { $group: { _id: null, numOrders: { $sum: 1 }, totalSales: { $sum: '$totalPrice' }, }, }, ]); const users = await User.aggregate([ { $group: { _id: nu..
-
아마존 E-commerce 클론 -31) Order Receipt 이메일로 보내기NODE.JS 2021. 5. 30. 19:17
우선 mailgun.com에 들어가서가입을 해준다. 여기서 도메인을 생성하고 도메인을 클릭하면 여기서 apikey를 복사한다. .env에 추가해준다. 여기서 도메인은 api base url의 sandbox~이다. MALIGUN_API_KEY = ca4ad22c9e03a4a558b1bb875d3896f6-fa6e84b7-ea6a79b1 MALIGUN_DOMAIN = sandbox024144b1dd7844b5a7ccd9c1ceff518d.mailgun.org 최상위 폴더에서 npm install mailgun-js를 해준다. 백엔드의 utils.jsdp 다음을 추가해준다. import mg from 'mailgun-js' export const mailgun =() => mg({ apiKey: process..