diff --git a/backend/app.js b/backend/app.js index 92a0005cf6849f218554f32f3b2afd99359b2a2e..ca0dc6d6bea109080fd4b8536f345345dab3178d 100644 --- a/backend/app.js +++ b/backend/app.js @@ -8,6 +8,7 @@ var flash = require("connect-flash"); var expressSession = require("express-session"); var bodyParser = require("body-parser"); const cors = require("cors"); +var multer = require("multer"); const mongoose = require("mongoose"); const mongooseAutoInc = require("mongoose-auto-increment"); @@ -24,11 +25,21 @@ mongooseAutoInc.initialize(mongoose.connection); var usersRouter = require("./routes/users"); var app = express(); +// app.all("/*", function (req, res, next) { +// //이미지 권한문제의 핵심 나중에 서버쪽 사람들한테 이걸 붙이라고 해라!!!!!!!!!!!!!//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! +// res.header("Access-Control-Allow-Origin", "*"); +// res.header("Access-Control-Allow-Headers", "X-Requested-With"); +// next(); +// }); +app.use(cors({ origin: "http://localhost:3000", credentials: true })); +// app.use(cors()); +// app.options("*", cors()); + app.use(bodyParser.json({ type: "application/json" })); -app.use(bodyParser.urlencoded({ extended: true })); -// view engine setup -app.set("views", path.join(__dirname, "views")); -app.set("view engine", "jade"); +app.use(bodyParser.urlencoded({ extended: false })); +// // view engine setup +// app.set("views", path.join(__dirname, "views")); +// app.set("view engine", "jade"); app.use(logger("dev")); app.use(express.json()); @@ -42,19 +53,26 @@ app.use( //cookie: { maxAge: 30000, secure: false, httpOnly: false }, }) ); -//app.use(cors({ origin: "http://localhost:3000", credentials: true })); -app.use(cors()); -app.options("*", cors()); app.use(express.static(path.join(__dirname, "public"))); -app.use(passport.initialize()); -app.use(passport.session()); -app.use(flash()); +app.use("/uploads", express.static(path.join(__dirname, "uploads"))); +// app.use(passport.initialize()); +// app.use(passport.session()); +// app.use(flash()); -var UserModel = require("./models/user"); -const { POINT_CONVERSION_COMPRESSED } = require("constants"); -const { doesNotMatch } = require("assert"); +// var storage = multer.diskStorage({ +// destination: function (req, file, callback) { +// callback(null, "uploads"); +// }, +// filename: function (req, file, callback) { +// var extension = path.extname(file.originalname); +// var basename = path.basename(file.originalname, extension); +// callback(null, basename + Date.now() + extension); +// }, +// }); -let LocalStrategy = require("passport-local").Strategy; +// var upload = multer({ +// storage: storage, +// }); //app.use("/", indexRouter); app.use("/", usersRouter); diff --git a/backend/models/board.js b/backend/models/board.js index c72e07e39baebbe2d9b5249f7eec28054fb50c3b..09d270d4dde17b9c09af274d3fec1a807297407e 100644 --- a/backend/models/board.js +++ b/backend/models/board.js @@ -6,6 +6,7 @@ const BoardSchema = new mongoose.Schema({ content: { type: String, required: true }, hobby: { type: String }, created_at: { type: Date, default: Date.now }, + picture: { type: String }, }); // mongoose.connect("mongodb://localhost:27017/local", { diff --git a/backend/package-lock.json b/backend/package-lock.json index 9de4edc4939338e95e75a296068d3c8d47c39295..e6346a9e286d8cb89d045c10ae21f50e8ede73e0 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -41,6 +41,11 @@ "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=" }, + "append-field": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz", + "integrity": "sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY=" + }, "array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", @@ -95,6 +100,43 @@ "resolved": "https://registry.npmjs.org/bson/-/bson-1.1.5.tgz", "integrity": "sha512-kDuEzldR21lHciPQAIulLs1LZlCXdLziXI6Mb/TDkwXhb//UORJNPXgcRs2CuO4H0DcMkpfT3/ySsP3unoZjBg==" }, + "buffer-from": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", + "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==" + }, + "busboy": { + "version": "0.2.14", + "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz", + "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=", + "requires": { + "dicer": "0.2.5", + "readable-stream": "1.1.x" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" + } + } + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -160,6 +202,17 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz", "integrity": "sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=" }, + "concat-stream": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", + "requires": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" + } + }, "connect-flash": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/connect-flash/-/connect-flash-0.1.1.tgz", @@ -263,6 +316,38 @@ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" }, + "dicer": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz", + "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=", + "requires": { + "readable-stream": "1.1.x", + "streamsearch": "0.1.2" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" + } + } + }, "dotenv": { "version": "8.2.0", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz", @@ -638,6 +723,21 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, + "multer": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.2.tgz", + "integrity": "sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==", + "requires": { + "append-field": "^1.0.0", + "busboy": "^0.2.11", + "concat-stream": "^1.5.2", + "mkdirp": "^0.5.1", + "object-assign": "^4.1.1", + "on-finished": "^2.3.0", + "type-is": "^1.6.4", + "xtend": "^4.0.0" + } + }, "negotiator": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", @@ -892,6 +992,11 @@ "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" }, + "streamsearch": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz", + "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo=" + }, "string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -951,6 +1056,11 @@ "mime-types": "~2.1.24" } }, + "typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" + }, "uglify-js": { "version": "2.8.29", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", @@ -1033,6 +1143,11 @@ "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=" }, + "xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==" + }, "yargs": { "version": "3.10.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", diff --git a/backend/package.json b/backend/package.json index f81eee76db6488bed78c013b13ca6e55aa83ba8a..4b36ce05c929d6b4d207133572628320df55f652 100644 --- a/backend/package.json +++ b/backend/package.json @@ -18,6 +18,7 @@ "mongoose": "^5.10.15", "mongoose-auto-increment": "^5.0.1", "morgan": "~1.9.1", + "multer": "^1.4.2", "passport": "^0.4.1", "passport-local": "^1.0.0" } diff --git a/backend/routes/users.js b/backend/routes/users.js index a463dbb5201cb3805a65466fe81f491ca977b8c6..076c1b686b1590a5b2ebc1fd9918bfb1c08614a4 100644 --- a/backend/routes/users.js +++ b/backend/routes/users.js @@ -3,6 +3,10 @@ const passport = require("passport"); var flash = require("connect-flash"); var router = express.Router(); var UserModel = require("../models/user"); +var BoardModel = require("../models/board"); +var cors = require("cors"); +const { ConnectionStates } = require("mongoose"); +var path = require("path"); // let LocalStrategy = require("passport-local").Strategy; @@ -165,7 +169,7 @@ router.post("/login", async function (req, res) { if (found_user) { console.log("이메일과 비번이 일치하는 사용자 찾음 "); - res.redirect("/board"); + res.redirect("http://localhost:3000/board"); } else { console.log("이메일과 비밀번호를 다시 확인해주세요."); res.redirect("http://localhost:3000/login"); @@ -192,11 +196,107 @@ router.get("/logout", function (req, res) { } }); -router.get("/board", function (req, res) { +router.get("/board", async function (req, res) { console.log("/board 패스 요청됨."); // console.log("세션:" + req.session.user); // console.dir(req.session); - res.send("axios test"); + // try { + // let boards = await BoardModel.find({}); + // console.log(boards); + // res.send(boards); + // } catch (err) { + // console.log(err); + // } + + BoardModel.find({}, function (err, results) { + if (err) { + console.log(err); + return; + } + if (results.length > 0) { + console.log(results); + res.send(results); + } else { + res.send(null); + } + }); +}); + +var multer = require("multer"); + +var storage = multer.diskStorage({ + destination: function (req, file, callback) { + callback(null, "uploads"); + }, + filename: function (req, file, callback) { + var extension = path.extname(file.originalname); + var basename = path.basename(file.originalname, extension); + callback(null, basename + Date.now() + extension); + }, +}); + +var upload = multer({ + storage: storage, +}); + +router.post("/writeBoard", upload.array("photo", 1), function (req, res) { + console.log("/writeBoard 호출됨."); + + try { + var files = req.files; + + if (files.length > 0) { + console.log(files[0]); + } else { + console.log("업로드된 파일 x"); + } + + let originalname = ""; + let filename = ""; + let mimetype = ""; + let size = 0; + + if (Array.isArray(files)) { + console.log("배열에 들어있는 파일 갯수 : %d", files.length); + + for (let i = 0; i < files.length; i++) { + originalname = files[i].originalname; + filename = files[i].filename; + mimetype = files[i].mimetype; + size = files[i].size; + } + } else { + console.log("파일 개수 : 1"); + originalname = files[0].originalname; + filename = files[0].name; + mimetype = files[0].mimetype; + size = files[0].size; + } + + console.log( + "현재 파일 정보 : " + + originalname + + ", " + + filename + + ", " + + mimetype + + ", " + + size + ); + + let save_board = new BoardModel({ + title: req.body.title, + content: req.body.content, + hobby: req.body.hobby, + picture: filename, + }); + + save_board.save(); + console.log("게시글 저장 완료"); + res.redirect("http://localhost:3000/board"); + } catch (err) { + console.log(err); + } }); module.exports = router; diff --git "a/backend/uploads/\354\272\241\354\262\23021607104103660.PNG" "b/backend/uploads/\354\272\241\354\262\23021607104103660.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..c071fd8a30e93dbcbdc226158dcf41d4efd0e0a0 Binary files /dev/null and "b/backend/uploads/\354\272\241\354\262\23021607104103660.PNG" differ diff --git "a/backend/uploads/\354\272\241\354\262\23021607104162782.PNG" "b/backend/uploads/\354\272\241\354\262\23021607104162782.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..c071fd8a30e93dbcbdc226158dcf41d4efd0e0a0 Binary files /dev/null and "b/backend/uploads/\354\272\241\354\262\23021607104162782.PNG" differ diff --git a/frontend/.eslintcache b/frontend/.eslintcache index 15c6b363f82b2bf15c66b87deafeb7f48904991a..4f79d8ec85c17fc6e2224093ab960d5ffe1a2055 100644 --- a/frontend/.eslintcache +++ b/frontend/.eslintcache @@ -1 +1 @@ -[{"C:\\WYH\\frontend\\src\\reportWebVitals.js":"1","C:\\WYH\\frontend\\src\\App.js":"2","C:\\WYH\\frontend\\src\\index.js":"3","C:\\WYH\\frontend\\src\\components\\Profile.js":"4","C:\\WYH\\frontend\\src\\components\\Board.js":"5","C:\\WYH\\frontend\\src\\components\\Home.js":"6"},{"size":362,"mtime":1606157613272,"results":"7","hashOfConfig":"8"},{"size":1067,"mtime":1606663325293,"results":"9","hashOfConfig":"8"},{"size":544,"mtime":1606240034288,"results":"10","hashOfConfig":"8"},{"size":1175,"mtime":1606662802658,"results":"11","hashOfConfig":"8"},{"size":805,"mtime":1607026420418,"results":"12","hashOfConfig":"8"},{"size":370,"mtime":1606662762631,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"10w9ldj",{"filePath":"16","messages":"17","errorCount":1,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\WYH\\frontend\\src\\reportWebVitals.js",[],"C:\\WYH\\frontend\\src\\App.js",["26","27"],"C:\\WYH\\frontend\\src\\index.js",[],"C:\\WYH\\frontend\\src\\components\\Profile.js",[],"C:\\WYH\\frontend\\src\\components\\Board.js",["28","29","30","31"],"C:\\WYH\\frontend\\src\\components\\Home.js",["32"],{"ruleId":"33","severity":1,"message":"34","line":1,"column":17,"nodeType":"35","messageId":"36","endLine":1,"endColumn":26},{"ruleId":"37","severity":2,"message":"38","line":38,"column":39,"nodeType":"35","messageId":"39","endLine":38,"endColumn":44},{"ruleId":"33","severity":1,"message":"40","line":2,"column":10,"nodeType":"35","messageId":"36","endLine":2,"endColumn":15},{"ruleId":"33","severity":1,"message":"41","line":6,"column":10,"nodeType":"35","messageId":"36","endLine":6,"endColumn":18},{"ruleId":"42","severity":1,"message":"43","line":8,"column":3,"nodeType":"35","endLine":8,"endColumn":12,"suggestions":"44"},{"ruleId":"42","severity":1,"message":"45","line":8,"column":13,"nodeType":"46","endLine":15,"endColumn":4},{"ruleId":"33","severity":1,"message":"40","line":2,"column":10,"nodeType":"35","messageId":"36","endLine":2,"endColumn":15},"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","no-undef","'Board' is not defined.","undef","'Route' is defined but never used.","'response' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useEffect contains a call to 'setResponse'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [] as a second argument to the useEffect Hook.",["47"],"Effect callbacks are synchronous to prevent race conditions. Put the async function inside:\n\nuseEffect(() => {\n async function fetchData() {\n // You can await here\n const response = await MyAPI.getData(someId);\n // ...\n }\n fetchData();\n}, [someId]); // Or [] if effect doesn't need props or state\n\nLearn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching","ArrowFunctionExpression",{"desc":"48","fix":"49"},"Add dependencies array: []",{"range":"50","text":"51"},[419,419],", []"] \ No newline at end of file +[{"C:\\WYH\\frontend\\src\\reportWebVitals.js":"1","C:\\WYH\\frontend\\src\\App.js":"2","C:\\WYH\\frontend\\src\\index.js":"3","C:\\WYH\\frontend\\src\\components\\Profile.js":"4","C:\\WYH\\frontend\\src\\components\\Board.js":"5","C:\\WYH\\frontend\\src\\components\\Home.js":"6","C:\\WYH\\frontend\\src\\components\\Signup.js":"7","C:\\WYH\\frontend\\src\\components\\Login.js":"8","C:\\WYH\\frontend\\src\\components\\WriteBoard.js":"9"},{"size":362,"mtime":1606157613272,"results":"10","hashOfConfig":"11"},{"size":1218,"mtime":1607099502736,"results":"12","hashOfConfig":"11"},{"size":544,"mtime":1606240034288,"results":"13","hashOfConfig":"11"},{"size":1175,"mtime":1606662802658,"results":"14","hashOfConfig":"11"},{"size":1032,"mtime":1607105664770,"results":"15","hashOfConfig":"11"},{"size":370,"mtime":1606662762631,"results":"16","hashOfConfig":"11"},{"size":1575,"mtime":1606662809909,"results":"17","hashOfConfig":"11"},{"size":1232,"mtime":1606662786263,"results":"18","hashOfConfig":"11"},{"size":3419,"mtime":1607104090152,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"10w9ldj",{"filePath":"22","messages":"23","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"32","messages":"33","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"34"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"37"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"40"},"C:\\WYH\\frontend\\src\\reportWebVitals.js",[],"C:\\WYH\\frontend\\src\\App.js",["41"],"C:\\WYH\\frontend\\src\\index.js",[],"C:\\WYH\\frontend\\src\\components\\Profile.js",[],"C:\\WYH\\frontend\\src\\components\\Board.js",["42","43","44"],"C:\\WYH\\frontend\\src\\components\\Home.js",["45"],"C:\\WYH\\frontend\\src\\components\\Signup.js",["46"],"import React, { useState } from \"react\";\r\n//import { post } from \"../../backend/app\";\r\nimport { post } from \"axios\";\r\n\r\nconst Signup = () => {\r\n const [email, setEmail] = useState(\"\");\r\n const [nicname, setNicname] = useState(\"\");\r\n const [password, setPassword] = useState(\"\");\r\n\r\n const onChangeEmail = (e) => setEmail(e.target.value);\r\n const onChangeNicname = (e) => setNicname(e.target.value);\r\n const onChangePassword = (e) => setPassword(e.target.value);\r\n\r\n // const handleFormSubmit = () => {\r\n // const url = \"/signup\";\r\n // const formData = new FormData();\r\n // formData.append(\"username\", username);\r\n // formData.append(\"password\", password);\r\n // formData.append(\"nicname\", nicname);\r\n\r\n // const config = {\r\n // headers: {\r\n // \"content-type\": \"multipart/form-data\",\r\n // },\r\n // };\r\n\r\n // return post(url, formData, config);\r\n // };\r\n\r\n return (\r\n <form action=\"http://localhost:3001/signup\" method=\"post\">\r\n <h1>회원가입</h1>\r\n 이메일:\r\n <input\r\n type=\"text\"\r\n name=\"email\"\r\n value={email}\r\n onChange={onChangeEmail}\r\n ></input>\r\n 비밀번호:\r\n <input\r\n type=\"password\"\r\n name=\"password\"\r\n value={password}\r\n onChange={onChangePassword}\r\n ></input>\r\n 닉네임:\r\n <input\r\n type=\"text\"\r\n name=\"nicname\"\r\n value={nicname}\r\n onChange={onChangeNicname}\r\n ></input>\r\n <button type=\"submit\">가입완료</button>\r\n </form>\r\n );\r\n};\r\n\r\nexport default Signup;\r\n","C:\\WYH\\frontend\\src\\components\\Login.js",["47"],"import React, { useState } from \"react\";\r\nimport { post } from \"axios\";\r\n\r\nconst Login = () => {\r\n const [username, setUsername] = useState(\"\");\r\n const [password, setPassword] = useState(\"\");\r\n\r\n const onChangeUsername = (e) => setUsername(e.target.value);\r\n const onChangePassword = (e) => setPassword(e.target.value);\r\n\r\n // const handleFormSubmit = () => {\r\n // const url = \"/login\";\r\n // let formData = new FormData();\r\n // formData.append(\"username\", username);\r\n // formData.append(\"password\", password);\r\n\r\n // let config = {\r\n // headers: {\r\n // \"content-type\": \"multipart/form-data\",\r\n // },\r\n // };\r\n\r\n // return post(url, formData, config);\r\n // };\r\n\r\n return (\r\n <form action=\"http://localhost:3001/login\" method=\"post\">\r\n <h1>로그인 화면</h1>\r\n 이메일:\r\n <input\r\n type=\"text\"\r\n name=\"email\"\r\n value={username}\r\n onChange={onChangeUsername}\r\n ></input>\r\n 비밀번호:\r\n <input\r\n type=\"password\"\r\n name=\"password\"\r\n value={password}\r\n onChange={onChangePassword}\r\n ></input>\r\n <button type=\"submit\">로그인</button>\r\n </form>\r\n );\r\n};\r\n\r\nexport default Login;\r\n","C:\\WYH\\frontend\\src\\components\\WriteBoard.js",["48","49","50","51"],"import React, { useState } from \"react\";\r\n\r\nconst WriteBoard = () => {\r\n const [title, setTitle] = useState(\"\");\r\n const [content, setContent] = useState(\"\");\r\n const [hobby, setHobby] = useState(\"\");\r\n\r\n const onChangeTitle = (e) => setTitle(e.target.value);\r\n const onChangeContent = (e) => setContent(e.target.value);\r\n const onChangeHobby = (e) => setHobby(e.target.value);\r\n\r\n return (\r\n <div>\r\n <form\r\n action=\"http://localhost:3001/writeBoard\"\r\n method=\"post\"\r\n encType=\"multipart/form-data\"\r\n >\r\n <label>제목</label>\r\n <input type=\"text\" name=\"title\" onChange={onChangeTitle}></input>\r\n <br></br>\r\n <label>본문</label>\r\n <textarea\r\n type=\"text\"\r\n name=\"content\"\r\n onChange={onChangeContent}\r\n ></textarea>\r\n <br></br>\r\n <label>취미</label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"ex/sp\" name=\"hobby\" />\r\n 운동/스포츠\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"out/tr\" name=\"hobby\" />\r\n 아웃도어/여행\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"bk/wr\" name=\"hobby\" />\r\n 인문학/책/글\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"fg/lg\" name=\"hobby\" />\r\n 외국/언어\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"cul/pfm\" name=\"hobby\" />\r\n 문화/공연\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"mu/inst\" name=\"hobby\" />\r\n 음악/악기\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"cft\" name=\"hobby\" />\r\n 공예/만들기\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"dan\" name=\"hobby\" />\r\n 댄스/무용\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"volu\" name=\"hobby\" />\r\n 봉사활동\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"par\" name=\"hobby\" />\r\n 사교/인맥\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"game\" name=\"hobby\" />\r\n 게임/오락\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"pic\" name=\"hobby\" />\r\n 사진/편집/촬영/영상\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"inv\" name=\"hobby\" />\r\n 제테크/투자\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"cok/fod\" name=\"hobby\" />\r\n 요리/음식/맛집\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"fas/bea\" name=\"hobby\" />\r\n 패션/뷰티/코디\r\n </label>\r\n <br></br>\r\n <label>\r\n <input type=\"radio\" value=\"art/draw\" name=\"hobby\" />\r\n 미술/그림\r\n </label>\r\n <br></br>\r\n <br></br>\r\n <label>사진첨부</label>\r\n <input type=\"file\" name=\"photo\"></input>\r\n <br></br>\r\n <button type=\"submit\">ok</button>\r\n </form>\r\n </div>\r\n );\r\n};\r\n\r\nexport default WriteBoard;\r\n",{"ruleId":"52","severity":1,"message":"53","line":1,"column":17,"nodeType":"54","messageId":"55","endLine":1,"endColumn":26},{"ruleId":"52","severity":1,"message":"56","line":2,"column":10,"nodeType":"54","messageId":"55","endLine":2,"endColumn":15},{"ruleId":"57","severity":1,"message":"58","line":8,"column":3,"nodeType":"54","endLine":8,"endColumn":12,"suggestions":"59"},{"ruleId":"57","severity":1,"message":"60","line":8,"column":13,"nodeType":"61","endLine":20,"endColumn":4},{"ruleId":"52","severity":1,"message":"56","line":2,"column":10,"nodeType":"54","messageId":"55","endLine":2,"endColumn":15},{"ruleId":"52","severity":1,"message":"62","line":3,"column":10,"nodeType":"54","messageId":"55","endLine":3,"endColumn":14},{"ruleId":"52","severity":1,"message":"62","line":2,"column":10,"nodeType":"54","messageId":"55","endLine":2,"endColumn":14},{"ruleId":"52","severity":1,"message":"63","line":4,"column":10,"nodeType":"54","messageId":"55","endLine":4,"endColumn":15},{"ruleId":"52","severity":1,"message":"64","line":5,"column":10,"nodeType":"54","messageId":"55","endLine":5,"endColumn":17},{"ruleId":"52","severity":1,"message":"65","line":6,"column":10,"nodeType":"54","messageId":"55","endLine":6,"endColumn":15},{"ruleId":"52","severity":1,"message":"66","line":10,"column":9,"nodeType":"54","messageId":"55","endLine":10,"endColumn":22},"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","'Route' is defined but never used.","react-hooks/exhaustive-deps","React Hook useEffect contains a call to 'setResponse'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [response] as a second argument to the useEffect Hook.",["67"],"Effect callbacks are synchronous to prevent race conditions. Put the async function inside:\n\nuseEffect(() => {\n async function fetchData() {\n // You can await here\n const response = await MyAPI.getData(someId);\n // ...\n }\n fetchData();\n}, [someId]); // Or [] if effect doesn't need props or state\n\nLearn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching","ArrowFunctionExpression","'post' is defined but never used.","'title' is assigned a value but never used.","'content' is assigned a value but never used.","'hobby' is assigned a value but never used.","'onChangeHobby' is assigned a value but never used.",{"desc":"68","fix":"69"},"Add dependencies array: [response]",{"range":"70","text":"71"},[532,532],", [response]"] \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json index c0c85113321802f16f8fa06792aed8d0fb030b16..40829eea998214971aceda0cc1745a1b1961a124 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -47,6 +47,6 @@ "last 1 firefox version", "last 1 safari version" ] - }, - "proxy": "http://localhost:3001" + } + } diff --git a/frontend/src/App.js b/frontend/src/App.js index c72e71efe79825d06ed409c0492d25e5753bdaaf..fd9c652fc42db1fe83bf925da4865f594faf30c5 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -5,6 +5,7 @@ import Login from "./components/Login"; import Signup from "./components/Signup"; import Profile from "./components/Profile"; import Board from "./components/Board"; +import WriteBoard from "./components/WriteBoard"; //class App extends Component { // state = { @@ -36,7 +37,8 @@ const App = () => { <Route path="/login" component={Login} /> <Route path="/signup" component={Signup} /> <Route path="/profile" component={Profile} /> - <Route path="/Board" component={Board} /> + <Route path="/board" component={Board} /> + <Route path="/writeBoard" component={WriteBoard} /> </div> ); }; diff --git a/frontend/src/components/Board.js b/frontend/src/components/Board.js index c74fb50aff95375d7d137ac55b02d50689abf281..7e9358c2714b08be4d9f87476ce7e7576b321acd 100644 --- a/frontend/src/components/Board.js +++ b/frontend/src/components/Board.js @@ -3,15 +3,20 @@ import { Route, Link } from "react-router-dom"; import axios from "axios"; const Board = () => { - const [response, setResponse] = useState(null); + const [response, setResponse] = useState([]); useEffect(async () => { try { console.log("axios 실행"); - let res = await axios.get("http://localhost:30001/board"); + let res = []; + res = await axios.get("http://localhost:3001/board"); console.log(res); - setResponse(res); - } catch (err) {} + setResponse(res.data); + console.log(response); + } catch (err) { + console.log("axios err"); + console.log(err); + } }); return ( @@ -23,7 +28,15 @@ const Board = () => { <input type="text" name="searchKeyword"></input> <button type="submit">게시글검색</button> </form> - <ol></ol> + <ol> + {response.map((res) => ( + <li> + <Link to="/detailBoard"> + {res.title} {res.created_at} + </Link> + </li> + ))} + </ol> </div> ); }; diff --git a/frontend/src/components/WriteBoard.js b/frontend/src/components/WriteBoard.js new file mode 100644 index 0000000000000000000000000000000000000000..1a1d9dd80f648a2c86952934d4424aaa508554d2 --- /dev/null +++ b/frontend/src/components/WriteBoard.js @@ -0,0 +1,121 @@ +import React, { useState } from "react"; + +const WriteBoard = () => { + const [title, setTitle] = useState(""); + const [content, setContent] = useState(""); + const [hobby, setHobby] = useState(""); + + const onChangeTitle = (e) => setTitle(e.target.value); + const onChangeContent = (e) => setContent(e.target.value); + const onChangeHobby = (e) => setHobby(e.target.value); + + return ( + <div> + <form + action="http://localhost:3001/writeBoard" + method="post" + encType="multipart/form-data" + > + <label>제목</label> + <input type="text" name="title" onChange={onChangeTitle}></input> + <br></br> + <label>본문</label> + <textarea + type="text" + name="content" + onChange={onChangeContent} + ></textarea> + <br></br> + <label>취미</label> + <br></br> + <label> + <input type="radio" value="ex/sp" name="hobby" /> + 운동/스포츠 + </label> + <br></br> + <label> + <input type="radio" value="out/tr" name="hobby" /> + 아웃도어/여행 + </label> + <br></br> + <label> + <input type="radio" value="bk/wr" name="hobby" /> + 인문학/책/글 + </label> + <br></br> + <label> + <input type="radio" value="fg/lg" name="hobby" /> + 외국/언어 + </label> + <br></br> + <label> + <input type="radio" value="cul/pfm" name="hobby" /> + 문화/공연 + </label> + <br></br> + <label> + <input type="radio" value="mu/inst" name="hobby" /> + 음악/악기 + </label> + <br></br> + <label> + <input type="radio" value="cft" name="hobby" /> + 공예/만들기 + </label> + <br></br> + <label> + <input type="radio" value="dan" name="hobby" /> + 댄스/무용 + </label> + <br></br> + <label> + <input type="radio" value="volu" name="hobby" /> + 봉사활동 + </label> + <br></br> + <label> + <input type="radio" value="par" name="hobby" /> + 사교/인맥 + </label> + <br></br> + <label> + <input type="radio" value="game" name="hobby" /> + 게임/오락 + </label> + <br></br> + <label> + <input type="radio" value="pic" name="hobby" /> + 사진/편집/촬영/영상 + </label> + <br></br> + <label> + <input type="radio" value="inv" name="hobby" /> + 제테크/투자 + </label> + <br></br> + <label> + <input type="radio" value="cok/fod" name="hobby" /> + 요리/음식/맛집 + </label> + <br></br> + <label> + <input type="radio" value="fas/bea" name="hobby" /> + 패션/뷰티/코디 + </label> + <br></br> + <label> + <input type="radio" value="art/draw" name="hobby" /> + 미술/그림 + </label> + <br></br> + <br></br> + <label>사진첨부</label> + <input type="file" name="photo"></input> + <br></br> + <button type="submit">ok</button> + </form> + </div> + ); +}; + +export default WriteBoard;