일단 깃허브에 등록하기 위해 기본 폴더 구조를 잡자
깃허브 레포 만들기
- 깃허브 가서 레포 만들고
- 깃허브와 로컬 파일을 연결해준다
git init
git add README.md
git add .gitignore // 업로드하지 않을 파일들을 적는다 주로 node_modules를 한다(용량도 크고, 딱히 필요 없음, package.json에 명시가 되어있기 때문)
git add. // 스테이징 상태 -> git reset (스테이징을 해제)
git commit -m "first comit//summnary" // 스테이징된 파일들을 커밋해서 등록함
git branch -M main
git remote add origin https://깃허브 레포 주소 // 내 파일이 해당 주소를 가르켜야 그 곳으로 저장이됨
git push -u origin main // 내가 작업하고 있는 브랜치에 푸쉬하면됨깃허브에서 코드 가져오기
코드에서 → 파일을 다운받거나
클론 주소를 복사해서 가져오면됨
git clone 깃허브 주소 (옵션:파일이름)- 깃허브에 있는 package때문에 의존성까지 npm install로 다운 받아주면된다
src?
실제 배포되는 소스파일, 압축되기전 파일
작업중인 폴더들을 모두 src로 넣어준다
⇒ 깃허브는 이렇게 폴더를 관리함
License
깃허브 홈페이지 설정탭에가서 license를 생성하기 해서 원하는 라이센스를 눌러주면된다
쉽게 ignore하는법
깃허브 ignore에 가서 수정할때, node.js template를 이용하면된다
- 하지만 node_moudule은 앞에 **을 붙혀서 전체 디렉터리에서 검색해서 무시하게 하게 한다
깃허브 About에서 토픽을 설정해주고, 필요없는 체크리스트를 지워주면 깃허브 화면이 깔끔해진다.
폴더 구조 최적화
src말고 app으로
app안에 src를 만들고 그 안에 바뀌는 파일들을 넣자(상대경로가 바뀐거는 다시 해줘야함 주로 app.js만 바꿔주면됨 나머지는 똑같은 src라 상대경로는 똑같다)
app에는 모든 파일을 넣는다
폴더 최적화는 해줬으니..
이제는 실행을 담당하는 JS폴더를 설치해주자
js/home 을 만들어 그안에 임시적으로 login.js를 만들어주자
하지만 연결이 안된다 왜??
login.ejs에서 script로 연결해도 연결해주는 미들웨어가 필요하다
<!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">
<!-- 그냥하면 연결이 안되는 , 연결해주는 미들웨어가 필요함 || public 정적 경로를 추가해줫으니 ejs가 경로를 찾을수 있음-->
<script src="/js/home/login.js"></script>
<title>Document</title>
</head>
<body>
<input type="text" placeholder="아이디"><br>
<input type="text" placeholder="비밀번호"><br>
<button>로그인</button>
</body>
</html>이를 해결할려면 app.js에서 미들웨어로 연결해주자
app.js
"use strict"
//모듈
const express = require("express");
const app = express();
//라우팅
const home = require("./src/routes/home")
//맵 세팅
app.set("views", "./src/views")
app.set("view engine", "ejs")
app.use(express.static(`${__dirname}/src/public`)) // __dirname은 app.js의 위치를 반환함, 그 위치에서 public 폴더를 정적 경로로 추가하겠다는 뜻 / js를 public으로 이동
app.use("/", home);
module.exports = app;
이제 js를 public로 옮기면 잘 작동한다!
변경이 있을때마다 서버를 껐다 켰다..
너무 귀찮다..
nodemon 오픈소스를 사용하자!
npm install nodemon -g
...
nodemon 실행파일이제 vsc에서 저장할때마다 알아서 껐다 켜준다! (package.json도 변경해주면 더욱 좋다)
인터벌로 가득찬