카테고리 없음

Nodejs index.html 만들기 (1-2)

Canyi 2022. 9. 29. 00:10

index.html이라는 파일을 만든다. !를 입력한다.

! 을 입력하고 enter 입력,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

이와 비슷한 코드가 나오지 않을 경우 마켓플레이스에서 HTML CSS Support 설치

위 코드는 반응형 웹페이지의 기본코드이다. 

lang = 'en' > lang = 'ko' 로 변경 (영어 > 한국어)
input * 2&nbsp; 입력 해서 생성

 

index.html이 적용이 되지가 않음 , app.js 와 index.html이 연동이 되지 않았기 때문이다.

const { response } = require("express");
const express  = require("express");    //express 모듈 다운받기
const { request } = require("http");
const app = express();                 //app 변수에 express 실행

app.get("/",(request, response)=>{
    response.send("여기는 루트입니다.");     //localhost:3000에 반환값 보내기
});

app.get("/login", (request, response)=>{
    response.send(`
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
       <input type="text"><br>
       <input type="text"><br>
    </body>
    </html>`
    );    //localhost:3000/login  **/login 슬래시 꼭 넣기
});

app.listen(3000, function(){

    console.log("서버 가동");
});

app.js response.send 에 index.html 코드를 복사해서 넣는다. 그냥 넣으면 아래와 같이 에러남!! 반드시 코드 바깥쪽에 백틱( `` ) 부호를 넣어줌 . 영어 입력기 에서 입력가능 (Tab키 위에 있는 키)

 

placeholder : 텍스트박스 힌트
로그인 버튼 추가
로그인 버튼이 이상하게 나온다...
닫을때 </button> 으로 해줘야 한다.

app.get("/",(request, response)=>{
    response.send(`
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
       <input type="text" placeholder = "아이디"><br>
       <input type="text" placeholder = "비밀번호"><br>
    <button>여기는 루트입니다.</button>
    </body>
    </html>`);     //localhost:3000에 반환값 보내기
});

루트부분도 똑같이 response.send 에 넣는다.

 

 

const { response } = require("express");
const express  = require("express");    //express 모듈 다운받기
const { request } = require("http");
const app = express();                 //app 변수에 express 실행

app.get("/",(request, response)=>{
    response.send(`
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
       <input type="text" placeholder = "아이디"><br>
       <input type="text" placeholder = "비밀번호"><br>
    <button>여기는 루트입니다.</button>
    </body>
    </html>`);     //localhost:3000에 반환값 보내기
});

app.get("/login", (request, response)=>{
    response.send(`
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
       <input type="text" placeholder = "아이디"><br>
       <input type="text" placeholder = "비밀번호"><br>
    <button>로그인</button>
    </body>
    </html>`
    );    //localhost:3000/login  **/login 슬래시 꼭 넣기
});

app.listen(3000, function(){

    console.log("서버 가동");
});

app.js 와 index.html을 merge한 코드 !  다만 코드가 섞여 있어서 너무 지저분 하다. 다음 링크에서 view라는 폴더를 만들어 ejs파일로 분리하도 록 하자

 

https://piaocanyi.tistory.com/179

 

Nodejs mvc view 분리하기 (1-3)

const { response } = require("express"); const express = require("express"); //express 모듈 다운받기 const { request } = require("http"); const app = express(); //app 변수에 express 실행 //앱 세팅 a..

piaocanyi.tistory.com