[TIL] 2021.07.25 일

Today Ariticle

---

Today Idea

---

Today I Learned

youtube 코딩애플 vue.js 강의

--
vue cli 설치

npm install -g @vue/cli

vue 프로젝트 생성

vue create vuedongsan -> vue 3 선택 후 엔터

미리보기 띄우고 싶으면

npm run serve

잘 진행되나 싶었지만...
역시나 오류가 발생했다. 라이브 서버가 안켜지더라.
구글링해보니 localhost가 아닌 0.0.0.0으로 바꿔줘야 한다는거.
package.json의 "scripts"에 아래와 같이 host 0.0.0.0을 추가해줬다.

"scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0",
    "build": "vue-cli-service build --host 0.0.0.0",
    "lint": "vue-cli-service lint --host 0.0.0.0"
  }

또 문제 발생.
라이브서버에서 자꾸 "Invalid Host Header"라는 텍스트 외에 다른 내용이 나오지 않았다.
구글링 끝에 가장 상위 디렉터리에 vue.config.js파일을 생성한 후 아래와 같이 코드를 작성하면 된다는 사실을 알게 되었다.

module.exports = {
	publicPath: '',
	devServer: {
		disableHostCheck: true
	}
}

드디어 성공...! 아무래도 구름 ide다 보니 설정이 좀 필요하다.

--
기본문법
{{데이터바인딩}}을 통해 데이터를 가져올 수 있다.
data안의 return안의 데이터를 가져온다. object 타입.

export default {
		name: 'App',
		data() {
			return {
				price1: 60,
				price2: 80,
			};
		},
		components: {},
	};

태그 안에 스타일 바인딩 할때는 콜론 : 을 붙인다.

<h4 class="red" :style="스타일">XX 원룸</h4>

---

Today Commit

---

Today Works

---

Today Review

휴가 전에 설계했던 로드맵에 따라 프론트엔드를 공부중이다.

HTML/CSS/JS -> Git -> (TypeScript) -> SCSS -> Bundler(Webpack) -> Vue.js

일단 웹팩 자꾸 설치오류로 건너뛰고 코딩애플의 vue.js강의를 듣기 시작했다.