vue.js 러닝 커브가 제일 쉽대! 강의 수강하고 오기. Part 1 : 부동산 쇼핑몰

[hunter-hwang-dev]

새로 살 가구, 집들이 선물로 받고 싶은 물건을 리스트업하다 보니 포트폴리오로 만들면 좋겠다는 생각이 들었다.

• Single page application (주소 하나에 반응형...)
• 모바일 웹뷰를 기본으로...

figma에서 간단히 끄적여 봤으니 이제 구현을 알아보아야 하는데, React나 Angular.js도 있다지만 Vue.js를 입문자에게 추천하길래!

[hunter-hwang-dev]

node_modules: 라이브러리들...
src: 소스코드들...
public: html이랑 기타등등...
package.json: 라이브러리 버전, 프로젝트 설정 기록...

[hunter-hwang-dev]

npm run serve

[hunter-hwang-dev]

template, script, style - 각각 html, js, css v-for 문법 주의! :key 이렇게 붙여 써야 함.

[hunter-hwang-dev]

v-on:click="js code..." == @click="js code..." 함수 안에서 data 쓸 땐 this. 꼭 붙여주기

[hunter-hwang-dev]

v-if="조건식"

[hunter-hwang-dev]

export default [{} {} {} {} {}]

[hunter-hwang-dev]

[hunter-hwang-dev]

vue에서도 v-if, v-else-if, v-else 문법으로 if, else-if, else 조건문을 사용 가능!

[hunter-hwang-dev]

[hunter-hwang-dev]

부모/자식 props

부모.Vue에서 <ComponentName :데이터이름1="데이터이름1" :데이터이름2="데이터이름2"/>

자식.Vue에서

<script>
export default {
  name: "ComponentName",
  props: {
     데이터이름1: Type,
     데이터이름2: Type,
  }
};
</script>

[hunter-hwang-dev]

<RealEstateCard :원룸="원룸들[i]" v-for="(작명, i) in 원룸들" :key="작명" />

[hunter-hwang-dev]

custom event

[hunter-hwang-dev]

[hunter-hwang-dev]

[hunter-hwang-dev]

{{변수명}} 이걸 data binding 이라고 함

[hunter-hwang-dev]

@input="month = $event.target.value" == v-model="month"

[hunter-hwang-dev]

js 는 연산할 때 우선 string으로 바꿔치기 해버리는 점 주의 타입 명시..를 하던지 아님 ts로 넘어가던지

[hunter-hwang-dev]

[hunter-hwang-dev]

script에서 자기 파일에 있는 변수는 앞에 this. 까먹지 말 것!

[hunter-hwang-dev]

참고: 영문일 때엔 의도한 대로 if (isNaN(a)) 구문 실행되는데, 한글 입력시에는 '커서가 다음으로' 가야 문자 취급 한다. 필요할 때 해결법 찾기. 한글 입력 방식 때문에 그런가?

[hunter-hwang-dev]

애니메이션 쌩 css로도 만들 수 있구나. 신기! 아 물론 지금 작업환경은 Vue긴 해.

[hunter-hwang-dev]

[hunter-hwang-dev]

[hunter-hwang-dev]

퇴장은 leave

[hunter-hwang-dev]

array.sort() 하면 되는데, js String 오름차순 이라서 숫자 다룰때 주의

[hunter-hwang-dev]

array의 [...shallow copy]와 deep copy

그냥 둘다 data로 넣으면 둘이 같은 값 가지게 되어서 곤란! 등호도 문제야 array의 개별 복사본 만들기!

. . .  < spread operator. 
array나 object 앞에 붙일 수 있으며 , array, object의 괄호를 제거해주는 문법
그래서 . . . [1,2,3] 이런 식으로 쓰면 1,2,3만 남는다

array를 복사할 때 이걸로 괄호를 벗겼다가 다시 씌우면
값공유 현상이 일어나지않게 복사할 수 있다.

왜 그냥 복사하면 값공유가 일어나는지는? reference data type 검색

[hunter-hwang-dev]

함수명 대소문자 구분 주의!

[hunter-hwang-dev]

[hunter-hwang-dev]

setTimeout() setInterval() arrow function으로 써서 this 잘 들어가게 하기

[hunter-hwang-dev]

데이터가 변경되면 HTML (컴포넌트)가 재렌더링되는데 이걸 라이프사이클 용어로 update라고 합니다.

[hunter-hwang-dev]

beforeUpdate() mounted() ...