[WEB 포트폴리오]2. 메인 화면 구축하기

[WEB 포트폴리오]2. 메인 화면 구축하기 - (1)기본 설정

2020. 11. 24. 11:02

안녕하세요 Hi Create입니다!!

이번 포스팅에서는 포트폴리오의 메인 화면을 구축해보겠습니다.

메인 화면에서는 사이트의 제목과 다른 화면으로 가는 버튼을 만들겁니다.

1. Node.js 프로젝트 구조 보기

Node.js 프로젝트는 다음과 같은 구조로 생성됩니다.

여기서 'app.js'파일은 Node.js에서 가장 중요한 메인 파일입니다. 모든 함수나 다른 파일을 관리한다고 생각하시면 될 것 같습니다. 그 밑에 있는 'package.json' 파일에서는 우리가 설치하고 사용할 모듈을 넣을 수 있습니다. 이 파일에 사용할 모듈이 없으면 컴파일 에러가 발생합니다. 그래서 항상 모듈을 설치할 때 '--save' 를 이용해 자동으로 입력할 수 있습니다.

맨 위의 'bin' > 'www'에는 Node.js를 실행할 때 필요한 기본 정보들이 들어가 있습니다. 'node_modules'폴더에는 설치한 NPM 모듈들이 들어가 있습니다. 이는 Node.js를 베이스로 한 Vue.js 같은 다양한 라이브러리들에도 똑같이 적용됩니다.

'public' 폴더 안의 폴더 안에는 이 홈페이지에서 사용할 이미지와 CSS파일들, JavaScript파일들을 저장하는 곳입니다.

'routes'에서는 router를 사용할 때 쓰이는 파일들이고 'views'안의 파일들이 실제 화면을 구성하는 파일들입니다.

2. 메인 화면 구성하기

그럼 본격적으로 메인화면을 구성해보도록 하겠습니다.

기본적으로는 views 내부 파일을 수정하고 'app.js'에서 루트라던지 이런것들을 변경해주시면 됩니다.

저희는 라우터를 여러 개로 쓰지 않고 하나의 라우터에서 싹 다 관리할 수 있도록 만들어보겠습니다.

우선 routes 폴더에서 'users.js' 파일을 삭제해주시고, 'index.js' 파일을 열어주세요.

var express = require('express');
var router = express.Router();

// page data

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'NodeExample' });
});

router.get('/html5', function(req, res, next) {
  res.render('html');
});

module.exports = router;

이것은 routes 폴더의 index.js 파일입니다.

원래는 index에 대한 내용 밖에는 없습니다만 위에서는 제가 따로 더 추가해서 이 파일만으로 전체 페이지를 다 관리할 수 있게 바꿨습니다.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var routes = require('./routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

'app.js' 파일도 위처럼 바꿔주면 됩니다.

바뀐 부분은 routes부분입니다. 원래는 app.js 파일 내부에 여러 파일들을 불러오고 일일이 지정해서 화면에 보이게 해야하지만, 위에서는 routes에 이미 지정된 내용이 있기 때문에 app.js에서는 부르기만 하면 됩니다.

그럼 views 폴더의 index.ejs 파일을 열어보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

기본적으로는 HTML 파일과 같은 형태입니다만, 다른 점은 javascript 내용을 HTML의 body 부분에 넣을 수 있다는 것입니다. head부분의 title 태그를 보시면 '<%= =>' 이 사이에 javascript 내용을 써넣은 걸 보실 수 있을겁니다. 이런 것들을 이용해서 메인 화면을 구성해봅시다.

저작자표시 비영리

'프로그래밍 > 웹 포트폴리오' 카테고리의 다른 글

[WEB 포트폴리오]1-2. Visual Studio Code 설치와 개발 환경 구축하기 (0)	2020.11.19
[WEB 포트폴리오] 1-1. NPM과 Node.js 설치 (0)	2020.11.19

Hi Create

CATEGORIES