[Week1] 06 - Assignment1

Normaltic Study

[Week1] 06 - Assignment1

min8282 2024. 4. 20. 20:26

과제)

웹 서버 복습
간이 로그인 페이지 구현(DB 연결X)
css/bootstrap으로 최대한 꾸미기
할 수 있다면 DB와 연결? -> 맛보기 정도만 검색해 보기

이번주는 간이 로그인 페이지 구현으로 DB 연결까지는 하지 않는다. 다만 내가 지정한 id와 password가 입력됐을 때 로그인이 성공되게까지 하는 게 목표다. 여기까지 구현하게 되면 DB 연결 시에는 로직을 크게 바꾸지 않아도 될 것 같다. 강의에서는 php를 사용해서 웹 서버를 구현하지만, 현재 나는 Node.js도 공부하고 있기 때문에 헷갈리지 않게 Node.js로 구현해보려고 한다. 이거 말고도 너무 여러 개를 배우다 보니 각 언어마다 문법들이 너무 헷갈린다.

먼저 Node.js의 web application framework인 express를 사용할 것이다. 지금 과제에는 복잡한 것이 없기 때문에 http 모듈로 웹 서버를 만들어도 된다. 다만 추후에 DB 연결부터 여러 기능을 추가하게 되면 코드의 가독성과 확장성이 낮아지기 때문에 express를 사용한다.

웹 서버 폴더 구조

app.js : main 서버 javascript 파일

public 폴더 : 외부에서 접근 가능한 파일(e.g. html, css, js, image 등)을 모아둔 곳

frontUser.js : 사용자가 직접적으로 쓰게 되는 이벤트들을 작성. e.g. submit 버튼
login.css : 로그인 페이지에 적용할 css 파일
login.html : 로그인 페이지
upload.html : 나중에 첨부파일을 추가할 수 있게 하기 위한 페이지. 현재 미구현
visit.html : 방문자나 댓글 등을 추가할 수 있게 하기 위한 페이지. 현재 미구현

routes 폴더 : 서버의 라우터 파일들을 모아둔 곳

login.js : 로그인과 관련된 라우터 작성하는 곳
upload.js : 업로드와 관련된 라우터 작성하는 곳
visit.js : 방문자나 댓글 기능과 관련된 라우터 작성하는 곳

프로젝트 시작

$ npm init -y

package.json 생성. 이때는 sudo를 붙이게 되면 외부 모듈이나 미들웨어를 설치할 때마다 사용자 비밀번호를 입력해야 돼서 번거롭기 때문에 붙이지 않는다.

$ sudo npm i express
$ sudo npm i -D nodemon
$ sudo npm i morgan
$ sudo npm i cookie-parser

express와 nodemon, 미들웨어인 morgan과 cookie-parser를 설치한다. 메인 자바스크립트인 app.js를 수정할 때마다 서버를 다시 실행시켜야 적용이 되는데 nodemon을 사용할 경우 서버를 다시 실행시키지 안하도 바로 적용이 가능하다. morgand은 서버로 들어온 요청과 응답을 콘솔에 기록해 주는 미들웨어고, cokie-parser는 클라이언트 요청 객체의 쿠키를 분석하는 미들웨어로 로그인 기능을 구현할 때 사용한다. 미들웨어란 클라이언트가 서버에게 요청한 것을 분석하고 처리하는 모듈이다. 설치된 것은 아래와 같이 package.json에 기록된다.

app.js

app.js에서는 필요한 모듈과 라우터들을 import 해준다. express를 사용하고 포트번호는 3000번으로 설정했다. 그리고 express 내부/외부 미들웨어들을 app에 사용하기 위해서 .use를 사용해서 장착(?)시키고, 각각의 요청 경로에 따라 그에 맞는 라우터들이 실행 가능하게 작성했다.

서버 쪽 문제가 생겼을 때 발생하는 500 에러와 없는 경로나 이상한 경로로 이동했을 때 발생하는 404 에러에 대해서 위와 같이 처리했고, app.liten으로 내가 setting 한 포트에서 실행될 수 있게 작성했다.

routes/login.js

GET ['/'] ➡️ / 요청을 받을 때 쿠키가 있으면 로그인 성공 페이지로 이동하게 되고, 쿠키가 없으면 '/login'으로 redirect 시킨다.

GET ['/login'] ➡️ /login 요청받으면 public 디렉터리에 있는 login.html로 이동시킨다.

POST ['/admit'] ➡️ 사용자가 입력한 id와 password를 아래와 같이 확인할 수 있고, id(login)가 admin, password가 123 일 때 쿠키를 부여하고 '/'으로 redirect 시킨다. 그럼 다시 쿠키 여부를 확인하고 내가 설정한 아이디와 비밀번호가 맞을 경우 로그인 성공 페이지로 이동하게 되고, 아닐 경우 로그인 페이지 그대로 머물게 되는 로직이다.

id로 student, password로 studnet124를 입력 했을 경우 네트워크 창

Network 탭에서 입력한 값을 확인할 수 있게 작성했고, exports를 사용해서 router를 내보냈다.

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
  }

  .container {
    width: 300px;
    /* margin: auto; */
    margin: 50px auto;
    padding-top: 50px;
  }

  h2 {
    text-align: center;
    color: #00c73c;
  }

  form {
    background-color: #fff;
    /* margin: center; */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  }

  label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
  }

  input[type="text"],
  input[type="password"] {
    /* width: 100%; */
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
  }

  button[type="submit"] {
    /* width: 100%; */
    width: calc(100% - 22px);
    background-color: #00c73c;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  button[type="submit"]:hover {
    background-color: #009933;
}

실행결과