개발자의 개발 블로그

VS Code를 사용하다가, 변수 선언 중 색상이 다른 한 개를 발견했다.

다른것들은 하늘색인데, 이것만 회색...

뭔가 다른가해서 마우스를 갖다대보니...

위와 같이 경고가 뜬다.

'items'이(가) 선언은 되었지만 해당 값이 읽히지는 않았습니다.

선언은 되었으나 해당 파일에서 사용하지 않고 있다는 의미이다.

자바나 안드로이드 같은 경우 노란색으로 밑줄이 가는데, vs code에서는 경고 밑줄이 없어 놓치기 쉽다.

코드가 틀렸거나, 이 변수가 필요없거나 두 개 중 하나이다.

중복된 코드 부분을 복붙하다가 이 변수를 바꿔주는 것을 잊은 헤프닝이다.

쓸일이 없다면 제거해주면 된다.

1. FLEXBOX란 무엇인가?

레이아웃이란, 엘리먼트들의 크기나 위치등을 배치하는 것이다. 

- 레이아웃을 쉽게 작성하기 위해 사용하는 도구.

- 이전까지는 레이아웃이 효과적이지 않았다.

- 예전에는, 표(Table)을 이용해서 레이아웃을 잡았는데 큰 문제점이 있었다.

- 표 = 구조화된 정보를 표현하기 위한 용도인데, 레이아웃으로 사용하

- 변경 및 유지 보수가 쉽지 않아 표로 레이아웃을 

- position, float등을 이용하여 HTML내 요소들을 배치해왔다. 

FLEX를 사용하기 위해서는 

<container>

<item></item>

<item></item>

<item></item>

</container>

2. FLEXBOX를 사용하는 방법

https://opentutorials.org/course/2418/13526

Flexbox관련해서 게임을 통해 실습해볼 수 있는 사이트가 있다.

이름하여 

에 이어서 두 번째.

[개념] 

아키텍터 모델은 다음과 같다. 같은 의미의 이미지 두 개를 올렸다.

MVVM 방식이다.

MVVM 모델의 ViewModel을 Vue.js가 담당한다.

MVVM은 Model View ViewModel의 약자이다.

ViewModel은 View와 Model의 가운데 존재하는 중간정도라 할 수 있다.

프로세스는 다음과 같다.

1) View에 입력이 들어오게 오면 ViewModel에 요청한다.

2) ViewModel은 1) 처리를 위해 필요한 데이터를 Model에 요청한다.

3) Model은 ViewModel에 필요한 데이터를 응답(Response)한다.

4) ViewModel은 응답 받은 데이터를 처리해서 저장한다.

5) View로 보내지 않아도 ViewModel과의 Data Binding으로 인해 View는 자동으로 업데이트된다.