nodejs

MVC모델을 공부하다가 컨트롤러에서 render와 redirect 로 페이지를 이동하는데 둘의 차이가 궁금했다. 먼저 두 함수의 쓰임새는 이러하다 res.redirect([status,] path) res.render(view [, locals][, callback]) 보면 redirect는 파라미터에 path를, render는 view객체를 전달한다. 이말인 즉슨 render는 단순히 view파일을 띄워주고, redirect는 해당경로로 이동한다는 것을 의미한다. 예를들어 login요청시에 login화면을 띄워주는 두가지 방법에 대해 render는 등록된 view경로에서 login화면을 컨트롤러를 통해 가져다 주고, redirect는 현재 경로에서 /login 이 붙은 URL로 이동하는것이다.

이제 nodejs에 로컬에서 실행하는 DB로 MYsql을 연결해보겠다. 먼저 nodejs mysql을 연결해주는 라이브러리를 설치해준다 npm install -s mysql 이제 아래코드로 DB에 시험해볼 간단한 테이블을 생성한다. CREATE DATABASE login_lecture; CREATE TABLE users( id varchar(30) NOT NULL, name varchar(30) NOT NULL, psword varchar(30) NOT NULL, in_date datetime DEFAULT current_timestamp, PRIMARY KEY (id) ); INSERT INTO users(id,name,psword) values("lls","김철수","123"), ("asd","김강원..

MVC패턴에서의 model이란 데이터를 가지거나, 가져오는 처리를 해주는 기능을 의미한다 오늘은 컨트롤러에 존재하는 user데이터를 저장하는 기능과 user데이터를 조작하는 기능을 나눠 model을 분리해본다 먼저 src아래 models폴더와 그아래 UserStorage.js파일을 만들고 컨트롤러의 user를 옮겨주자 그다음 home.ctrl.js에서 models의 UserStorage를 가져오고, console에 로그로 띄워보자. 편의를 위해 response코드는 잠시 주석처리하자 이제 서버 실행후 로그인 버튼을 누르면 이렇게 user데이터들이 출력된다 하지만 MVC패턴의 구조상 controller에서 데이터를 직접 접근할수 없어야 한다. 따라서 데이터 은닉화를 위해 user앞에 #을 붙여주도록 수정한..

오늘은 지난번에 컨트롤러로 데이터를 받아오는 기능을 이용해, 인증기능을 간단하게 구현해본다. home.ctrl.js에서 먼저 user변수를 추가해 임의로 세명의 사용자를 만든다. 각 아이디는 lls,eeo,abv이다. 또 process.login()함수에서 id와 psword변수에 req로 받은 데이터의 id,psword를 저장한다. 저장한 id,psword를 이용해 간단한 인증을 한다. if절부터는 입력한 id가 존재하면, id의 인덱스를 저장하고 해당 인덱스의 비밀번호 값과 받은 입력데이터의 비밀번호가 같으면 succes에 true 담는다. id가 없거나 비밀번호가 id의 인덱스와 일치하지 않는다면, succes를 false로 설정하고 로그인 실패 메세지를 msg에 담는다. 이때 담은 데이터는 res..

지난번까지 해서 login.js파일에 req변수에 입력 id와 pwd를 저장하는 과정을 거쳤다 오늘은 입력값을 서버까지 보내는 것까지 할것이다. 원래 데이터를 서버와 주고받을때 서버개발자와 프론트엔드 개발자 사이에 API가 만들어져 있어야 한다. (API란 프론트개발자와, 백엔드 개발자가 데이터를 동일한 경로로 주고받기 위해 사용하는 약속 이라고 생각하면 된다) 우리는 로그인 화면의 router를 index.js에 만들어 놓긴 했지만, 아이디와 비밀번호를 받는 것까지는 구현이 안되어 있다. 일단은 , 구현이 되어있다 가정하고 프론트(login.js)에서 데이터를 보낼수 있도록 먼저 수정하겠다. login.js파일에 JSON형태로 저장되어있는 req 변수를, string으로 바꿔준다. stringfy함수의..

오늘은 로그인을 했을때 입력한 아이디등을 DOM을통해 서버에 전달하는 방법을 배울것이다. DOM은 Document Object Model로 일종의 인터페이스인데, 이를 이용해 js에서 html의 데이터를 가져올수 있게된다. login.js를 다음과같이 작성한다. querySelector를 이용하면 id = "이름" 에 입력된 이름 으로 html의 데이터를 가져오고, #이 없으면 해당 객체의 데이터를 가져온다 또한 loginbtn에 login함수를 연결해주어 로그인 버튼을 클릭시 아이디에 입력한 값을 console에 출력하도록 수정했다. 따라서 login.ejs파일 또한 수정해줘야 한다. 다음과 같이 입력하여 아이디에입력한 값은 id, 비밀번호에 입력한 값은 psword으로 가져올수 있도록 한다 이제 서버..

이제 본격적으로 프론트를 만들기위한 js폴더를 생성해줍니다 src폴더 아래 public, public폴더 아래js, js폴더 아래 home폴더, home 폴더에 login.js 파일을 생성합니다. 이제 views의 ejs파일들과 js를 연결해주기위한 미들웨어를 생성해줍니다. app.js에서 내용을 다음과 같이 바꿔주겠습니다. login.js파일은 생성만 하고 login.ejs파일을 먼저 수정해 둘을 연결해 줍니다. 이제 login.js가 잘 연결되는지 확인하기 위해 login.js파일에서 로그를 찍겠습니다. login.js 파일에 다음과 같이 작성해줍니다. 다시 서버 실행후, localhost:3000/login을 접속하고 개발자 도구 -> 콘솔을 보면 log가 잘 출력됩니다

이제 어느정도 뼈대가 잡혔고 파일을 용이하게 관리하기 위해 폴더 구조를 변경해보자 login-lecture 아래 app폴더를 만들어 .gitignore파일을 제외한 파일들을 몰아넣는다 app폴더 안에 src폴더를 만들어 routes,views폴더 전체를 넣는다 이제 디렉토리 구조를 바꿨으니 라우터,서버의 코드를 그에따라 변경해야한다 routes와 views가 src아래 있기 때문에 다음과같이 고쳐준다 서버 실행이 잘되는것을 확인할수 있다.