vs code - 셋팅 방법 (Frontend)

우리 팀 프로젝트 할 때 사용했던 방법.
까먹지 않기 위해서 작성한 것 입니다.

1) 원하는 git branch에 위치
2) css, html, js 에 원하는 이름의 파일을 3개 동일하게 만들어줌.
3) css와 js는 main.js파일 안에, html은 index.html안에
→ 코드는 쓰여진 순서대로 작동하니까 위치에 주의.
이번에는 home과 sidebar사이에 넣기로 함.
4) 만든 html 안에

<div id="post">  // post 는 내가만든 공통된 파일 이름
    <div class="container is-max-desktop">
// 만들고자 하는 html 코드
    </div>
</div>

5) css안에는 모든 클래스 앞에 #post 처럼 본인의 파일 이름 다 붙여주기

파일이름.css 파일) 모든 클래스 앞에 #파일이름을 적어준다. 예시 - home

6) js 제일 윗 줄에

import $ from 'jquery'; # 제이쿼리 사용 가능
import BACKEND_CONFIG from './authority/backend.js';  # js의 authority폴더에 backend.js파일에 있는 포트정보를 불러옴

# 그리고 ajax 만들 때,
url: BACKEND_CONFIG['URL'] + '/post'  # 넣어주기
# backend.js 안에 있는 코드
const CONFIG = {
    'HOST': 'http://localhost',
    'PORT': 5000,
    'URL': `${this.HOST}:${this.PORT}`
};

module.exports = CONFIG;

7) screen.js에 아래 코드 넣어주기

const SCREEN = { 

'파일이름대문자': '파일이름소문자'

}

8) 터미널에

npm install

9) 로컬호스트에 접속

python npm run dev

↳ 터미널에 이 코드 넣고, 나온 로컬호스트 주소로 접속하면 볼 수 있음.