[축구모임 홈페이지개발] 11/28 개발일지 Nodejs

먼저 ejs 파일로는 server.js 에서 데이터를 주고받는 것이 가능했고, 

 

 <%- include('nav.ejs') %>

 

코드를 통해 코드를 입력하는 것도 가능했던 반면,

html 파일로는 그게 불가능하다고 판단해서 홈 화면을 

ejs 파일로 구현했어야 했다.

views 폴더에 home.ejs 를 index.html 과 똑같이 복사해서 집어넣고

 

app.get('/', (req, res) => {    

  res.render('home.ejs')

})

 

위처럼 코드를 치니까 정상적으로 작동했다.

 

 

---

 

회원가입에 id 와 pw 뿐만 아니라 이름을 치게 하고싶었다.

게시물과 댓글 등등 로그인시 변화되는 부분들에 적용시키기 위함이다.

 

app.post('/register', async (req, res) => {

  let 해시 = await bcrypt.hash(req.body.password, 10)

  await db.collection('user').insertOne({

    userID: req.body.userID,

    username:req.body.username,

    password: 해시

  })

  res.redirect('/')

})

 

서버에 다음과 같이 username 을 추가해줬고,

 

<form class="form-box" action="/register" method="POST">

                    <h4>회원가입</h4>

                    <div>

                        Name <input name="username">

                    </div>

                    <div>

                        ID <input name="userID">

                    </div>

                    <div>

                        PW <input name="password" type="password">

                    </div>

                    <button type="submit">가입</button>

                </form>

 

name 속성이 username 인 input 태그를 넣어줬다

 

---

 

 

위 게시판 목록에서 게시된 날짜와 시간이 뜨는데, 

게시판 목록에서부터 저렇게 시간까지 나올 필요는 없어보여서

좀 간추려야겠다.

그리고 핸드폰으로 등록했을 때의 시간이랑 컴퓨터로 등록할 때 게시된 시간이 다른데

핸드폰으로 등록했을때가 시간이 9시간 느리다.

영국쪽 어딘가에 뭐가 있나?   // 표준시간 GMT 가 이용되는 거 같다. 

이거 꼭 해결해야되고 컴퓨터는 오전오후라고 뜨는 반면에 핸드폰(아이폰)에서는

AMPM 으로 뜬다. 해결하자 꼭

 

우선 new Date() 관련해서 찾아봄

 

 

원래는 toLocaleString() 을 썼는데 우선 toLocaleDateString() 으로 바꿔서 좀 더 간략히 보이게 했다.

나중에 게시물에 시간이 보일 필요가 있다고 판단되면 다시 알아볼 예정이다.

 

---

로그아웃 기능을 구현하기 위해 검색을 했다.

Error: req#logout requires a callback function

다음과 같은 에러가 떴는데 이는 passport.js 버전이 올라감에 따라 사용법이 변경되었기 때문이란다.

그래서 아래와 같이 코드를 짜줬다. 원래는 동기함수였던 애가 비동기함수가 되었다고 한다.

 

app.get('/logout', (req, res, next) => {

  req.logOut(err => {

    if (err) {

      return next(err);

    } else {

      console.log('로그아웃됨.');

      res.redirect('/');

    }

  });

});

---

 

근데 로그아웃하고 유저 정보가 없는 상태에서 유저 값이 필요했던 ejs 파일들에 접근하니까 에러가 뜬다.

req.user.username 이 필요한 notice-detail.ejs 가 대표적인데 이를 어찌 해결한담..

 

검색을 해봤다.

exports.isLoggedIn = (req, res, next) => {

  // isAuthenticated()로 검사해 로그인이 되어있으면

  if (req.isAuthenticated()) {

     next(); // 다음 미들웨어

  } else {

     res.render('login.ejs');

  }

};

 

위처럼 미들웨어를 만들어준다.

로그인이 되어있으면 next() 를 통해 다음으로 넘어가게 하고 

else 아니면 login.ejs 화면으로 넘어가게 해줬다.

 

로그인권한이 필요한 notice-detail 에

 

app.get('/notice-detail/:id', this.isLoggedIn, async (req, res, next) => {

 

이렇게 코드를 추가해줬더니 잘 작동된다.

출처:

https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-Passport-%EB%AA%A8%EB%93%88-%EA%B7%B8%EB%A6%BC%EC%9C%BC%EB%A1%9C-%EC%B2%98%EB%A6%AC%EA%B3%BC%EC%A0%95-%F0%9F%92%AF-%EC%9D%B4%ED%95%B4%ED%95%98%EC%9E%90#passport_%EB%A1%9C%EA%B7%B8%EC%9D%B8_%EC%9D%B4%ED%9B%84_%EA%B3%BC%EC%A0%95

---

로그인에 성공하면 회원이름인 username 을 nav.ejs 안에 로그인하기 a태그 가 사라지면서 그 자리에 뜨게끔 설정하고싶다.

app.get('/nav', async (req, res) => {

  let test = 'hi'

  res.render('nav', {test})

})

 

그냥 대놓고 전달해봤는데 실패.

 

일단 보류...

 

 

---

MVP 기능을 만들려한다.

management.ejs 파일에서 select 속성을 이용해서 보기를 주고, 선택한다음 서버로 전송시킨다.

서버에서 값을 받으면 mongoDB 에 그 값을 저장시키고 Home.ejs이 렌더링될 때마다 그 값을 화면에 출력시키면 끝.

<div>

          <div>

            <select class="form-select"  id="WeeklyMVPSelect">

              <option value="한대규">한대규</option>

              <option value="이찬웅">이찬웅</option>

              <option value="양철진">양철진</option>

              <option value="권진백">권진백</option>

            </select>

            <button onclick="showMVP()">선정</button>

          </div>

          <div id="MVP">MVP</div>

      </div>

 

div태그로 MVP 선정 영역을 만들어주고 Bootstrap 에 있는 select 디자인을 적용시켜 우선 4개의 value 값을 지정해놓고

마지막에 showMVP() 함수가 실행되는 버튼을 만들었다.

아래는 지정된 MVP 를 볼 수 있게 만들어놓은 영역이다.

  <script>

    function showMVP() {

      var WeeklyMVPSelect = document.getElementById("WeeklyMVPSelect");

      var selectedMVP = WeeklyMVPSelect.value;

      var resultDiv = document.getElementById("MVP");

      resultDiv.innerHTML = selectedMVP;

      location.href='/mvp?val=' + selectedMVP

    }

  </script>

 

showMVP() 함수 설명

WeeklyMVPSelect 변수는 id가 WeeklyMVPSelect 인 곳을 타겟한다.

selectedMVP 변수는 WeeklyMVPSelect 에서 얻은 value 값을 지정한다.

resultDiv 변수는 id 가 MVP 인 곳을 타겟한다. 

/mvp route 로 selectedMVP 변수를 전송한다.

 

우선 이 부분은 나중에 value 값만 전송시키는 것이 아니라 HTML 코드 자체가 이동시켜져야될거라서 

한 번 생각해봐야한다.

 

switch, case 를 이용해서 시도해볼 생각이다.

app.get('/', async (req, res) => {    

  // res.sendFile(__dirname + '/index.ejs')

  let result = await db.collection('mvp').find().sort({ _id: -1 }).limit(1).toArray();

  let Weeklymvp = result.length > 0 ? result[0].mvp : null;

  res.render('home.ejs',{MVPname: Weeklymvp})

})

 

/mvp route 에서 데이터를 mongoDB 에 저장시켰고, home화면일 때 

mongoDB 로 부터 가장 최근에 저장된 값을 불러오고싶었다.

그래서 내가 알아낸 코드는

  let result = await db.collection('mvp').find().sort({ _id: -1 }).limit(1).toArray();

sort 와 limit 를 이용했고 저장된 고유 id 값을 이용해 가장 최근에 저장된 값을 파악했다.

처음에 그대로 result 를 출력해보니 배열꼴로 id 와 mvp 데이터가 보여지길래

  let Weeklymvp = result.length > 0 ? result[0].mvp : null;

나는 mvp 데이터만 필요해서 헤매다가 위처럼 코드를 짜니 정상적으로 작동했다.

위에 코드 뜻이 정확히 모르니 검색한 번 해봐야겠다.