계속 헷갈려서 애먹는..더 공부해야될 거
어제 오늘 해본거
1. 회원가입할 때 프로필 이미지로 넣을 사진 업로드 사진경로가 로컬에 잘 들어가는지 확인
이제, 사진이 화면에 뜨는지 확인
2. 마이페이지에 이미지가 들어와져서 보이는지
3. 마이페이지에서 닉네임과 비밀번호 변경
일단 코드다 적어놓고 어디서 왜 막혔는지 볼까유
1. 회원가입할 때 프로필 이미지로 넣을 사진 업로드 app.js 에 사용할 라우터 넣어놓고 ()
const signupRouter = require ( "./routes/login/signup" );
정해놓고
app . use ( "/signup" , signupRouter );
/이거 부를때, 이 라우터불러서 쓰겠다..
signup 라우터
//모듈
const express = require("express");
const path = require("path");
const multer = require("multer");
const fs = require("fs");
const { User } = require("../../models");
const bcrypt = require("bcrypt");
const passport = require("passport");
const { isNotLoggedIn } = require("../middlewares");
//라우터
const router = express.Router();
//회원가입 창띄우기(get)
router.get("/", (req, res, next) => {
res.render("login/signup", { title: "회원가입" });
});
// 회원가입 데이터 입력한거 전송하는 코드
// 여기로 이동! signUp 들어왔을때 뒤에 실행
// post 데이터들 있어서(post데이터 전송)
router.post("/",isNotLoggedIn, async (req, res, next) => {
const { email, nick, password, img } = req.body;
//User는 데이터베이스!거기에서 email 가져옴(기존 email확인하려고! 그전 유저exUser)
try {
const exUser = await User.findOne({ where: { email } });
if (exUser) {
return res.redirect("/signUp?error=exist");
}
const hash = await bcrypt.hash(password, 12);
User.create({
email,
nick,
password: hash,
img: req.body.url,
});
//로그인 완료 메인으로~
return res.redirect("/");
} catch (error) {
//여기 안에서 에러나면 catch로
console.error(error);
//app.js로 되돌림 얘를 호출한 데로 부르는거. return 되돌려~
return next(error);
}
});
// uploads 폴더
try {
fs.readdirSync("uploads");
} catch (error) {
console.error("uploads 폴더가 없어 폴더를 생성합니다.");
fs.mkdirSync("uploads");
}
/* multer 기본 설정 */
const upload = multer({
storage: multer.diskStorage({
destination(req, file, cb) {
cb(null, "uploads/");
},
filename(req, file, cb) {
const ext = path.extname(file.originalname);
cb(null, path.basename(file.originalname, ext) + Date.now() + ext);
},
}),
limits: { fieldSize: 5 * 1024 * 1024 },
});
/* 게시글 IMG CREATE */
router.post("/img", upload.single("img"), (req, res) => {
console.log(req.file);
res.json({ url: `/img/${req.file.filename}` });
});
/* 게시글 TEXT CREATE */
router.post("/", upload.none(), async (req, res, next) => {
try {
await User.create({
// nick: req.body.nick,
img: req.body.url,
});
res.redirect("/signup");
} catch (error) {
console.error(error);
next(error);
}
});
//모듈 전체 라우터 사용하려고
module.exports = router;
signup.html
{% extends "layout.html" %} {% block css %} {% endblock %} {% block content %}
<div id="join-form-body">
<div class="join-form-title">회원가입</div>
<!-- action에 페이지 주소입력 -->
<form
method="POST"
class="join-form-container"
id="user-id"
onsubmit="return true"
action="signup"
>
<fieldset class="join-form-field">
<div class="input-container">
<label for="email">Email<small style="color: red">*</small></label
><br />
<input
class="input-box"
type="email"
id="user-email"
name="email"
placeholder="Enter Your Email"
onchange="checkMail()"
/>
<!--유효성 검사 후 잘못되었을때 경고 문자-->
<text
id="usereMail"
class="wrong-message"
style="color: red; font-size: small"
></text>
</div>
<div class="input-container">
<label for="password">Password<small style="color: red">*</small></label
><br />
<input
class="input-box"
type="password"
id="user-pw"
name="password"
placeholder="Enter Your Password"
onchange="checkPw()"
required
/>
<!--유효성 검사 후 잘못되었을때 경고 문자-->
<text
id="wrongPw"
class="wrong-message"
style="color: red; font-size: small"
></text>
</div>
<div class="input-container">
<input
class="input-box"
type="password"
id="user-pw-confirm"
name="reUserpw"
placeholder="Confirm Password"
onchange="reCheckPw()"
required
/><br />
<!--유효성 검사 후 잘못되었을때 경고 문자-->
<text
id="wrongRePw"
class="wrong-message"
style="color: red; font-size: small"
></text>
</div>
<div class="input-container">
<label for="nick">Nickname<small style="color: red">*</small></label
><br />
<input
class="input-box"
type="text"
id="user-nickname"
name="nick"
placeholder="Enter Your Nickname"
onchange="checkId()"
required
/>
<!--유효성 검사 후 잘못되었을때 경고 문자-->
<text
id="wrongid"
class="wrong-message"
style="color: red; font-size: small"
></text>
</div>
<div class="input-container">
<label for="birthdate">Date of Birth</label><br />
<input
class="input-box"
type="date"
id="user-birth"
name="birth"
/><br />
</div>
<div class="profile-upload-content upload-img">
<div class="img-preview">
<img
id="img-preview"
src=""
style="display: none"
width="250"
alt="미리보기"
/>
<input id="img-url" type="hidden" name="url" />
</div>
</div>
<div class="profile-img">
<label class="img-btn img-file" id="img-label" for="img"
>첨부 파일</label
>
<input id="img" type="file" accept="image/*" style="display: none" />
</div>
</fieldset>
<input type="submit" value="Sign Up" id="signUp" onclick="checkForm()" />
</form>
<!-- 이미지테스트 -->
</div>
{% endblock %} {% block script %}
<script src="/login/javascripts/signupcheck.js"></script>
<script src="/login/javascripts/signup-myimg.js"></script>
{% endblock %}//회원가입 창띄우기(get)
router . get ( "/" , ( req , res , next ) => {
res . render ( "login/signup" , { title : "회원가입" });
});
이걸로 signup.html 띄워져
signup.html에서 이미지 삽입 부분
< div class = "profile-upload-content upload-img" >
< div class = "img-preview" >
< img
id = "img-preview"
src = ""
style = " display: none "
width = "250"
alt = "미리보기"
/>
< input id = "img-url" type = "hidden" name = "url" /> //안보이다가 이미지 넣으면 보이게
</ div >
</ div >
< div class = "profile-img" >
< label class = "img-btn img-file" id = "img-label" for = "img"
> 첨부 파일 </ label
>
< input id = "img" type = "file" accept = "image/*" style = " display: none " />
//여기display:none은 파일추가버튼안보이게한거
</ div >
input type = "submit" 하면 폼 전송됨
폼 전송 받음
// 회원가입 데이터 입력한거 전송하는 코드
// 여기로 이동! signUp 들어왔을때 뒤에 실행
// post 데이터들 있어서(post데이터 전송)
router . post ( "/" ,
~~~~~~잘되면~~
//로그인 완료 메인으로~
return res . redirect ( "/" );
multer 이미지 업로드 위해씀
/* 게시글 IMG CREATE */
router . post ( "/img" , upload . single ( "img" ), ( req , res ) => {
console . log ( req . file );
res . json ({ url : `/img/ ${ req . file . filename } ` });
});
/* 게시글 TEXT CREATE */
router . post ( "/" , upload . none (), async ( req , res , next ) => {
try {
await User . create ({
// nick: req.body.nick,
img : req . body . url ,
});
res . redirect ( "/signup" );
} catch ( error ) {
console . error ( error );
next ( error );
}
});
근데 이부분은 게시글 참고해서 쓴건데 병합하면서 좀 달라져서 헷갈린다..
업로드할 이미지를 경로로 부르고 User에서 찾아서 띄운다는 거같은데
밑에 코드를 게시글에서는 text띄울때썼나?싶어서
2. 마이페이지에 이미지가 들어와져서 보이는지
layout.html 에
< a href = "/mypage" > {{'안녕하세요! ' + user.nick + '님'}} </ a >
누르면
mypage.js
const express = require("express");
const { User, Club } = require("../../models");
const { isLoggedIn, isNotLoggedIn } = require("../middlewares");
const router = express.Router();
router.use((req, res, next) => {
res.locals.user = req.user;
res.locals.followerCount = req.user ? req.user.Followers.length : 0;
res.locals.followingCount = req.user ? req.user.Followings.length : 0;
res.locals.followerIdList = req.user
? req.user.Followings.map((f) => f.id)
: [];
next();
});
//프로필 사진 읽기
router.get("/", async (req, res, next) => {
try {
const getImage = await User.findOne({
// where: { id: req.user.id }, // 여기서 id 에러창뜨고 로그인됨
where: { id: `${req.user.id}` }, // 문자로 바꿈. 아마도. 암튼 개선함
});
console.log(getImage);
res.render("mypage/mypage", {
title: "mountain 커뮤니티",
signupImages: getImage,
});
} catch (error) {
console.error(error);
next(error);
}
});
module.exports = router;가져올 팔로우 정보들 넣어주고
get으로 mypage.html 띄워줘
mypage.html
{% extends "layout.html" %} {% block css %} {% endblock %} {% block content %}
<div class="timeline">
<div class="user-name">{{'안녕하세요! ' + user.nick + '님'}}</div>
<div class="half">
<div>팔로잉</div>
<div class="count following-count">{{followingCount}}</div>
</div>
<div class="half">
<div>팔로워</div>
<div class="count follower-count">{{followerCount}}</div>
</div>
<div class="followings half">
<h2>팔로잉 목록</h2>
{% if user.Followings %} {% for following in user.Followings %}
<div>{{following.nick}}</div>
{% endfor %} {% endif %}
</div>
<div class="followers half">
<h2>팔로워 목록</h2>
{% if user.Followers %} {% for follower in user.Followers %}
<div>{{follower.nick}}</div>
{% endfor %} {% endif %}
</div>
<a id="modify" href="/modify" class="btn">정보 수정</a>
<body>
<div>
<p><div class="mypage-img">{{signupImages.content}}</div></p>
<img style="width: 200px;" src="{{signupImages.img}}" alt="섬네일">
</div>
</body>
</div>
{% endblock %} {% block script %} {% endblock %} try {
const getImage = await User . findOne ({
// where: { id: req.user.id }, // 여기서 id 에러창뜨고 로그인됨
where : { id : ` ${ req . user . id } ` }, // 문자로 바꿈. 아마도. 암튼 개선함
});
console . log ( getImage );
res . render ( "mypage/mypage" , {
title : "mountain 커뮤니티" ,
signupImages : getImage ,
});
}
models에서 user.js 로
데이터베이스 설정해준거 User에서 찾아 id값을 . 그걸 getImage로 선언하고
마이페이지 띄우고
getImage를 signupImages로 다시 이름 정해주고 마이페이지에서 써먹기
signupImages의 이미지
< p >< div class = "mypage-img" > {{signupImages.content}} </ div ></ p >
< img style = " width: 200px; " src = "{{signupImages.img}}" alt = "섬네일" >
3. 마이페이지에서 닉네임과 비밀번호 변경
다 마찬가지로 라우트 만들고
< a id = "modify" href = "/modify" class = "btn" > 정보 수정 </ a >
마이페이지에서 이거 누르면 라우트로 넘어가
modify.js
const express = require("express");
const passport = require("passport");
const bcrypt = require("bcrypt");
const { isLoggedIn, isNotLoggedIn } = require("../middlewares");
const { User } = require("../../models");
const router = express.Router();
router.get("/", (req, res, next) => {
console.log("너니?");
res.render("mypage/modify");
});
router.post("/", isLoggedIn, async (req, res, next) => {
console.log("로그인됐을때수정되려나");
const { email, nick, password } = req.body;
try {
if (nick && password) {
const hash = await bcrypt.hash(password, 12);
await User.update(
{
nick,
password: hash,
},
{
where: { email: email },
}
);
} else if (nick) {
await User.update(
{
nick,
},
{
where: { email: email },
}
);
} else if (password) {
const hash = await bcrypt.hash(password, 12);
await User.update(
{
password: hash,
},
{
where: { email: email },
}
);
}
return res.redirect("/");
} catch (err) {
console.error(err);
return next(err);
}
});
module.exports = router;router . get ( "/" , ( req , res , next ) => {
console . log ( "너니?" );
res . render ( "mypage/modify" );
});
get으로
html의 마이페이지 폴더 안에 있는 modify.html 띄워줌
바꾼 닉넴 아이디를
폼안에 써주고
< form id = "modify-form" action = "modify" method = "POST" >
action이 경로, 여기로 보내는거 의미하는 듯함..
그리고 버튼 눌러 전송하면
< button id = "modify-form" type = "submit" class = "btn" > 변경 </ button >
router . post ( "/" , isLoggedIn , async ( req , res , next ) => {
console . log ( "로그인됐을때수정되려나" );
const { email , nick , password } = req . body ;
try {
if ( nick && password ) {
const hash = await bcrypt . hash ( password , 12 );
await User . up~~~~~~
modify.js 라우터로 넘어와서 post에서 받아서 어쩌고 수정~
내가 에러났던게
바꾸고나서 리턴을
return res . redirect ( "/" );
이렇게 해야되는데 /mypage/modify로 하고 있었음.. 그래서 변경버튼 눌렀을때 이 라우트 없다고 알람뜨고 돌아가보면 변경은 잘 되어있는..
좀 두서없이 써놓긴 했는데
내가 관계설정이랑 이동하는걸 아직 정확하게 이해한 게 아닌거같음
팀플하면서 맡은부분 먼저 결과물 나타나는거에 집중 중! 그리고 책은 이미 읽었지만 다 이해하지 못하는 부분도 많아서 해보면서 알아야할 거같아
점점 하면서 감잡아간다고 생각해...ㅎㅎ 콘솔찍어보면서 얘가 어디로 가는지 찾아보는중이야
//+
컴퓨터는 계속 전체코드 읽다가
사용자가 눌렀을때 거기서 멈춘대 (코드 읽는 순서 더 공부해봐야겠다. 아직 많이 헷갈려)
지금은 다른 형식으로 하지만
아까는 id값을 위에 붙여서 프로필 이미지 가져오는거 봤었음
mypage.js
const express = require("express");
const { User, Club } = require("../../models");
const { isLoggedIn, isNotLoggedIn } = require("../middlewares");
const router = express.Router();
router.use((req, res, next) => {
res.locals.user = req.user;
res.locals.followerCount = req.user ? req.user.Followers.length : 0;
res.locals.followingCount = req.user ? req.user.Followings.length : 0;
res.locals.followerIdList = req.user
? req.user.Followings.map((f) => f.id)
: [];
next();
});
//프로필 사진 읽기
router.get("/:id", async (req, res, next) => {
console.log("mypage의get"); //콘솔에 안찍힘
try {
const getImage = await User.findOne({
where: { nick: `${req.params.id}` },
});
console.log(getImage);
res.render("mypage/mypage", {
title: "mountain 커뮤니티",
signupImages: getImage,
});
} catch (error) {
console.error(error);
next(error);
}
});
module.exports = router;
router . get ( "/:id" , async ( req , res , next ) => {
console . log ( "mypage의get" ); //콘솔에 안찍힘
try {
const getImage = await User . findOne ({
where : { nick : ` ${ req . params . id } ` },
});
console . log ( getImage );
res . render ( "mypage/mypage" , {
title : "mountain 커뮤니티" ,
signupImages : getImage ,
});
} catch ( error ) {
console . error ( error );
next ( error );
}
});
//콘솔에 안찍힘 -> 아까 안찍혔음 지금은 돼
안됐던 이유가 /mypage 뒤에 아이디값을 붙일거를 계속 찾고 있어서...
나는 mypage.js랑
mypage.html만 보고 있었음
근데 마이페이지로 들어가는
메인 layout.html을 봤어야했어..
<a href="/mypage/{{user.nick}}"
>{{'안녕하세요! ' + user.nick + '님'}}</a
>
전에는
a href = "/mypage"
mypage에 id값을 붙이고 mypage.html 부르려고하니까 안됐어
아예 mypage 페이지 안불러와짐
a href = "/mypage/{{user.nick}}"
이렇게 해주니까
라우트에서 아이디값붙이고 콘솔찍히고
User에서 nick 찾고
mypage.html 렌더해줌
////근데 이렇게 하면 주소창에
/mypage/User.nick 이 찍히니까
개선한 지금이 나아~
이해하려고 이것도 읽어봤음..
https://fierycoding.tistory.com/20
