About Me
친구들이 생각하는 나는 어떤 사람일까? 친구들의 마음이 모여 나의 새싹을 키워보세요!
Vue로 웹개발을 시작하여 Vanilla JS에 대해 관심이 없다가 프로그래머스의 dev-matching 과제를 통해 처음으로 접하게 되었고 웹 프로그래밍의 기본이라는 생각이 들었습니다.
Vanilla JS에 익숙해지기 위해 프로젝트를 시작했습니다.
💾파일 구조
기본적인 파일 구조는 아래와 같이 잡았습니다. 프레임워크를 쓰는 것이 아니기에 별다른 명령어 없이 직접 파일과 폴더를 생성해주면 됩니다.
├── src
│ ├── assets
│ │ ├── css
│ │ ├── images
│ ├── components
│ ├── pages
│ ├── lib
│ ├── router.js
│ ├── index.js
│ └── app.js
└── index.html- assets : css와 image 파일 등의 프로젝트 자산들을 담는 폴더
- components : 컴포넌트 폴더
- pages : 각 url에 해당되는 페이지 폴더
- lib : db통신 등 비즈니스 로직이 필요한 파일들을 담는 폴더
- router.js : 라우팅 설정 파일
- index.js : html에 app.js를 등록해주고 기본적인 설정을 위한 파일
- app.js : SPA로 동작하기 위한 로직 파일
- index.html : 단일 페이지를 보여주는 html 파일
📃SPA 페이지 만들기
먼저 index.html 파일에 SPA로 동작하기 위한 js파일을 삽입해줍니다.
그리고 동작을 컨트롤할 수 있도록 div 태그에 app이라는 id를 지정해줍니다.
<!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>About Me</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/index.js"></script>
</body>
</html>이제 app.js에 SPA가 되도록 코드를 작성해줍니다.
export default class App {
constructor({ $target }) {
this.$target = $target;
}
render() {
const $main = document.createElement('main');
$main.setAttribute('id', 'page_content');
this.$target.appendChild($main);
}
}index.js에서 app.jss가 html에 붙을 수 있도록 해줍니다.
import App from "./App.js";
new App({ $target: document.querySelector("#app") }).render();이제 SPA를 위한 기본적인 틀이 생성이 되었습니다.
🖥실행하기
SPA로만 프로젝트를 진행하여 따로 서버용 파일을 만들지 않았습니다.
serve를 install 받아서 실행시키도록 하겠습니다.
npm install serveserve 패키지가 install되고나면 package.json에 명령어 스크립트를 추가해줍니다.
{
"name": "aboutme",
"version": "1.0.0",
"description": "",
"main": "./src/index.js",
"scripts": {
"start": "serve", // 이 부분 추가
},
"author": "",
"license": "ISC",
...
}이제 터미널창에서 npm run start로 프로젝트를 실행시켜 main 태그가 잘 붙었는지 확인하시면 됩니다.
사람은 모로가도 제자리에 놓이게 된다.