"난데없이 컴퓨터에 Node.js와 VScode가 나타났다?"
와 같은 일은 없습니다~ 인강 따라서 개발환경 셋팅과 Vue 3버전 설치를 마친 후입니다. Node.js를 설치하고 VScode를 설치하고 VScode에서 터미널 창을 열어 npm으로 이것 저것 따라 치고 각종 확장 기능을 다운 받고 뭐 하라는 건 다했습니다. 구체적인 내용을 적지 않는 건 나중에 Node.js와 node module에 관한 공부와 포스팅을 할 기회가 있지 않을까 하는 마음 때문입니다.
{{데이터 바인딩}}
Vue.js는 저기 보이는 App.vue라는 파일에서 대부분의 사건/사고가 일어난다고 합니다. HTML, CSS, Javascript 작성은 저기서 다 합니다. 컴포넌트 생성하고 뭐하고 하다보면 물론 다른 파일에서도 작업이 일어나는데 그것도 .vue 형식이니까 그 나물에 그 밥이라고 생각하기로 합니다.
App.vue에서 HTML 작성하는 부분인데 밑줄 친 {{ }}형식이 바로 데이터 바인딩입니다. HTML에 Javascript 변수를 바로 꽂아넣을 수 있는 문법으로 Vue.js 없었으면 도큐먼트.겟바이뭐시기.이너에이치티엠엘 뭐 뭐 하면서 귀찮고 어렵게 넣었을 일을 아주 간단하게 끝내줍니다. 데이터 바인딩을 할 변수와 값은
이렇게 Javascript를 짜는 부분에 적어주면 됩니다. 웬만한 타입의 데이터는 다 들어가는 것 같습니다. 뒤에 Object형 자료도 데이터 바인딩 하는 거 생각하면 그냥 다 되지 않나 싶음. Javascript에선 함수도 값처럼 다룰 수 있어서 저기에 넣어도 되나? 싶기도 한데 굳이 이 궁금증은 해결하지 않기로 합니다.
v-for
부동산 매물 사이트를 만든다는 얘기를 이제 처음 하는군요. 예 뭐 커리큘럼에 따라 그렇게 됐습니다~ 여튼 메인 페이지에서 매물들을 쭉 나열한 부분인데 <div>태그를 경계로 내용만 달라진 반복적인 태그가 보이지요. 이걸 또 간단하게 줄여주는 Vue문법이 있다고 합니다. 바로 v-for.
위에 반복되는 태그들을 요로코롬 줄여버릴 수 있다는 사실. <div> 태그의 속성 값으로(반복하고자 하는 태그의 속성 값으로) v-for 문법을 입력해주시면 됩니다. 일반적인 for in 문법과 유사하지요. iterable한 데이터를 돌면서 값을 변경해주는데 그 값으로 (a, i) 둘 씩이나 들어가는 이유는 a는 반복되는 값, i는 데이터의 양에 따라 올라가는 숫자(0, 1, 2, 3,,,)으로 필요에 따라 값을 골라 넣을 수 있습니다. i 없이 a 만 적어도 되긴 함. 뒤에 :key = 'a'는 정확히 뭔지 몰라서 설명하는 것을 포기하도록 하겠습니다.
@click
딱 봐도 Onclick을 대신하는 느낌이랄까요,,,??
버튼을 눌렀을 때 발생할 이벤트를 아주 간단하게 입력할 수 있는 문법입니다. reports는 Array변수로 아까 데이터 바인딩할 때 적어놓은 거임.
v-if
동적인 UI를 만들기 위해 필요한 문법입니다. 여기서 잠깐, 동적인 UI란 무엇일까요? 저도 잘 몰라요~ㅋㅋ~ 뭐 상황에 따라 보여지기도 하고 숨겨지기도 하는 UI가 그런 거 아니겠어요. 모달창이 대표적인 예시가 되겠습니다. 사실 여기선 동적인 UI를 만들기 위해서 v-if를 사용했다! 보단 동적인 UI를 어떻게 만드느냐에 좀 더 포커스를 맞출 필요가 있습니다. 배운대로 말씀드리자면,
0. 동적으로 보여줄 UI를 일단 만들어 놓고
1. 현재 HTML UI의 상태를 데이터로 저장해둔다 (지금 보이는지 안보이는지 이런거)
2. 그 상태에 따라 HTML UI을 보여줄지 말지를 Vue문법으로 작성함
이런 느낌 딱 아시겠죠,,?? v-if 문법 자체는 쉬운데 그걸 적용하는 과정이 참 도움되는 것 같습니다,,,
일단 배운 거 여기까지 끝. 사실 Vue.js를 배우려고 HTML, CSS, Javascript를 핥는 것도 아니고 냄새만 맡고 지나오는 수준으로 보기만 해서 직접 타이핑을 하는 게 여간 곤란한 것 같습니다. 이거야 뭐 어떻게든 되겠지 싶고 사실,,,
