회원가입 프로필 이미지 넣고 보이게 하기/닉네임,비밀번호 변경

계속 헷갈려서 애먹는..더 공부해야될 거 

• 코드 어떤 순서로 읽혀지는지
• 라우트

어제 오늘 해본거

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="미리보기"

          />

<inputid="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