html 페이지 생성
-views 폴더 생성. 여기에 html파일들을 넣는다. 나중에 동적으로 콘텐츠 추가하는것도 배울예정
const paht 후에 sendFile로 경로로 만든 파일을 보내준다.
const path = require('path);
app.use((req, res, next) => {
res.status(404).sendFile(path.join(__dirname, 'views', '404.html'));
});
상위폴더에 있는경우엔 아래와 같이 '../'를 설정한다.
const path = require('path');
router.get('/', (req, res, next) => {
res.sendFile(path.join(__dirname, '../', 'views', 'shop.html'));
});
helper 함수
util 폴더 만들고 그안에 path.js 생성. '../' 혹은 '..' 보다 더 편리하게 경로를 이동하기 위함.
<path.js>
const path = require('path');
//상위 디렉토리로 가는 경로를 구축하는데 도움주는 함수
module.exports = path.dirname(process.mainModule.filename);→dirname은 경로의 디렉터리 이름을 회신한다. 디렉토리 이름을 알아내고자하는 디렉토리나 파일명만 알면 손쉽게 이용 가능하다.
→ 그리고 dirname 안은 전역 변수인 process를 사용한다. 모든 파일에 사용가능하므로 import할 필요없다. 이안에는 mainModule 속성이 들어간다. 이는 어플리케이션을 시작한 주요 모듈을 나타내는데, 나의경우 app.js이다.
(! 혹시 오류가 난다면?
- deprecation warning시, 다음과 같은 코드로 바꿔준다.)
module.exports = path.dirname(require.main.filename);
<admin.js>
const rootDir = require('../util/path');
//실행하게될 함수
const router = express.Router();
router.get('/add-product', (req, res, next) => {
res.sendFile(path.join(rootDir, 'views', 'add-product.html')
);
});→ shop.js 에서도 반복해준다. 사용하기 간단하고 깔끔하게 경로를 설정해줄 수 있다. 또한 모든 운영체제에서 사용할 수 있고, 항상 루트 파일 경로를 알려준다.
Style
CCS BEM 검색해서 참고. 이중 클래스명을 피하기위해 클래스를 명명하는 특정한 방식임.
자동서식기능 참고 : Preferences의 Keyboard Shortcuts에서 format document 검색해서 찾기 - keybinding의 가운데친구..
빠른 작업을 위해서 IDE의 다중선택기능을 선택하면 편리하다. 같은색을 사용한 친구들을 한번에 바꾸고 싶을때 다같이 선택해서 한번에 바꿀 수 있다.
Style 기능 지정시 참고.
언제나 모바일까지, 반응형 css로 만들기.
display: block;은 전체너비를 차지하기 위해서 해준다.
margin: auto; 는 자동으로 수평 가운데로 맞춰진다.
정적파일
public파일 만들어준다. (대중에게 항상 공개되는 내용을 담고있는 폴더임을 나타내기 위함.)
그리고 그걸 연결하기 위해서는 Express.js의 파일을 정적으로 서비스하는 기능이 필요하다. 정적(static)이란 express.Router나 다른 미들웨어에서 처리되지 않고 파일 시스템으로 직접 포워딩된다는 뜻이다.
이를 하기위해서 app.js에서 app.use로 새로운 미들웨어를 등록한다.
path.join으로 경로를 구축하고 다음엔 루트폴더:__dirname 그리고 public을 설정해준다. public 폴더에 대한 액세스를 허용하고 하는것이다. 이렇게하면 사용자가 public경로에 액세스 할 수 있다.
app.use(express.static(path.join(__dirname, 'public')));(참고, 여러 정적폴더를 등록 할 수도 있다. 그리고 요청은 원하는 파일을 찾을때까지 모든 폴더를 통과하게 된다. )
그리고 shop.html에
<link rel="stylesheet" href="/css/main.css">이렇게 추가하고 css파일을 만들어주면 잘 연결되어 실행된다.