전체 글 (96) 썸네일형 리스트형 Node.js 백엔드 맛 보기/로그인 화면 만들기 요번엔 일단 하드코딩으로 로그인 화면을 만들 것입니다. 바디에다가 로그인과 비밀번호를 입력하는 input 텍스트를 띄워볼 것입니다.' input 태그를 만들 때 꿀팁 하나를 알려주겠습니다. 만약 자신이 input 태그를 두개 만들고 싶다 하시면, 위처럼 치시고 바로 엔터를 누르시게 되면, 이렇게 2개를 생성할 수 있습니다. 만약 2개말고 5개를 생성하고 싶으시면 그냥 숫자만 바꾸시면 됩니다. 저 html코드를 js 코드에 가져올 것입니다. 그 코드를 res.send안에 넣을건데 그 때 따옴표 안에 있는게 아니고 백틱안에 있습니다. 백팅 = ` ` Node.js 백엔드 맛보기 | 로그인 뷰(view) 최적화 | MVC의 V(view) 분리하기 일단 index.html 파일은 필요 없으니 지워줄 것입니다. 그리고 이 app.js에서 뷰 화면에 해당하는 부분을 처리할 수 있는 뷰 엔진을 세팅을 해줄 것입니다. 일단 views라는 폴더를 만들어줍니다. 그리고 app.set을 통해서 views를 세팅해줄 것인데요. 화면 뷰를 관리해줄 파일이 저장될 폴더 이름인 views라는 폴더로 지정을해줍니다. 그리고 프로젝트 안에 생성될 html 코드들이 있짢아요 그 코드들을 어떤 엔진으로 해석할지를 정해줄 수 있습니다. 저희는 view engine을 ejs라는 것으로 지정을 해줄것입니다. 굉장히 많이 사용하는 뷰 엔진중 하나입니다. 지금 코드를 보면 ejs를 서버에 연동을 안 시켜줬는데요. res.render를 통해서 서버랑 연동을 시켜주겠습니다. index... Node.js 백엔드 맛보기 | 라우팅 분리 저번에는 html 문서들을 서로 분리해주는 작업을 했는데요. 이번에는 routing하는 것들을 보기 쉽도록 다른 파일들로 분리해주도록 하겠습니다. 보통 라우팅과 관련된 파일들은 routes라는 폴더에 넣습니다. 저번에 app.js에서 라우팅 했던 코드들을 routes안에 있는 homes 폴더 안에 있는 index.js 파일 안에 넣을 것입니다. 자바스크립트 파일을 항상 만들 때, 맨 상단에다가는 use strict라고해서 ECMAScript(이크마 스크립트) 문법을 준수하겠다고 명시해주면 좋습니다. index.js 위처럼하면 index.js 안에서는 동작하지만 그런데 app.js인 메인 파일에서는 index.js가 동작을 안합니다. 그래서 위에 있는 라우터를 외부 파일에서 사용할 수 있기 위해 던져줄 것.. Request,Response 처리 기본2(JSON을 활용한 Ajax처리) Ajax처리는 브라우저 새로 고침 없이 어떤 xml http reques로 서버에 데이터를 보낼 수 있습니다. 보내고 서버에서 받은 데이터를 가지고 유효한지 맞는지 틀리는지 확인한 다음에 응답 값을 줍니다. 이번에는 ajax를 보낼 때에도 json 형태로 보내보고 또 서버에서 확인했다고 가정을하고 또 응답 값을 줄 때에도 ajax로 한번 보내보는 코드를 구현할 것입니다. forms[0] 부분은 위에 form 태그 부분을 뜻하고 elements[0]부분은 첫번째 input type을 나타내는 것이고 value는 실제 입력하는 값을 뜻합니다. 그리고 이제 sendAjax 함수에 대해서 말하자면, 우리가 일단 데이터를 어떻게 만들거냐면 json 형태로 만들건데요. 그리고 아래 xhr.open을 보면 open .. Node.js MVC의 C(controller) 컨트롤러 분리하기 지난번에는 라우팅을 별도로 분리 해줬는데요. 이번에는 이 라우팅 안에서 컨트롤러에 해당하는 부분을 분리를 해주겠습니다. 보통 서비스 개발을 할 때에는 MVC 패턴을 주로 많이 이용하는데요. 그거 말고도 사실 MVP, MTV 되게 다양한 설계 패턴들이 있습니다. 그중에서 저희는 MVC를 이용해주겠습니다. routes\home\home.ctrl.js views\home\index.js 그리고 hello랑 login을 index.js에서 사용할 수 있도록 모듈을 바같으로 빼줄 것입니다. 그리고 오브젝트는 key: value형태로 되어있는데 위 코드를 보면 key만 설정해놓은걸로 보이잖아요. 저렇게 value를 지정 안했을 경우에는 value에 알아서 자체적으로 key와 같은 값이 들어가게 됩니다. 결과: 결과.. Node.js 백엔드 맛보기 | app.listen() 모듈화, 폴더 구조 최적화 개발에서는 최적화라는 것은 끝이 없습니다. 요번에는 app.listen()을 모듈화 시킴으로써 최적화를 해줄 것입니다. 일단 bin이라는 폴더를 만들고 거기에 www.js라는 파일을 만들어줍니다. app.js에서 app.listen 부분을 복사하고 잘라줍니다. 그러고 나서 www.js에 붙여줍니다. bin/www.js const app = require("../app"); Node.js DOM으로 HTML 객체 제어하기 | 프런트 기능 구현 프런트 딴에서는 아이디와 비밀번호를 입력을 받고요. 입력 받은 값을 로그인 버튼이 눌릴 때, 해당 값들이 서버로 전달이 됩니다. 서버는 그러한 데이터를 받아서 로직을 처리하게 됩 니다. 우리가 값을 HTML에을 통해서 입력을하게 되면, 이 데이터들을 자바스크립트에서 제어할 수 있어야합니다. HTML에 존재하는 값을 단순히 자바스크립트에서 제어할 수 없습니다. 그런데 그를 가능하게 하는 것이 DOM(Document Object Model)입니다. 한국말로 문서 객체 모델로, 이것은 일정한 인터페이스인데요. 이 인터페이스를 사용해서 자바스크립트에서 HTML에 존재하는 데이터들을 가져와서 제어할 수 있게 됩니다. login.js에서 id Text에 해당하는 부분을 자바스크립트에서 id라는 변수로 담아줄거에요... Node.js | fetch | 프런트에서 서버로 데이터 보내기 fetch라는 것을 이용해서 브라우저에 입력한 아이디와 비밀번호 값을 서버에게 전달해보는 네트워크 통신을 해볼 것입니다. 저희가 전달할 값은 req에 해당하는 값이죠. 일단 어떤 경로로 전달할지를 정해줘야합니다. 서버랑 프런트랑 해당 데이터를 어떤 경로에서 주고 받을지를 정해줘야합니다. 그런 경로는 서버 개발자가 설계하게 되고요. 프런트 개발자가 해당 경로를 요청하기전에 그 해당 경로에 API라는게 만들어져있어야합니다. 근데 저희는 라우트에 index.js를 보면 해당 API가 만들어져있는데요. 그런데 아직 아이디와 비밀번호를 받을 API는 만들어지지 않은 상태입니다. 그 API는 다음에 만들건데 그전에 데이터를 전달하는 과정을 설명드리겠습니다. 일단 fetch()라는 것을 통해서 어떠한 경로로 데이터를.. 이전 1 ··· 8 9 10 11 12 다음
