JavaScript/Vue.js (8) 썸네일형 리스트형 05. 길고도 험난한 4주 완성 Vue.js 반갑습니다 주인장입니다. 저번보다 오랜만에 왔지요. 인스타그램 따라 만들다가 왔습니다. 이렇게 vue.js 강의가 마무리가 되었는데요, 앞으로 또 뭘 해야 하나 고민입니다. 우선 vue 강의 듣겠다고 javascript를 날림으로 배워서 es6에 맞는 문법을 간단하게 배우는 중이구요, 이건 하루 이틀이면 마무리가 되니까 이후엔 typescript를 조금 해볼까 합니다,, 개발자 구인 공고 보니까 다 어느정도 필요로 하는 것 같네요,, 근데 그 전에 인스타그램 강의 들으면서 따라 친 거 백지 상태에서 시작해서 함 해보기도 할 거구요 그럼 당장 적은 걸로만 해도 일주일 정도 걸리겠네요(보통 일주일이라고 하면 열흘로 치환하게 되죠) 또 이후엔 Vue.js로 뭐 하나 해보려고 하는데 마땅히 생각나는 게 없습니다.. 04. 오랜만입니다(8일 만임). vue-router와 함께 돌아왔습니다. 8일 만에 작성하는 글입니다. 학교 퀴즈도 있었고(변명 맞음) 뭐 친구 이사 도와주는 것도 있었고(진짜 변명 맞음) 뭐 다 있었습니다. 공부를 게을리 할 수 밖에 없는 한 주가 아니었나 싶네요. 근데 뭐 어쩔 건데. 아 이새기 대충 사네ㅋ 하면서 웃어 넘기는 거 말고 니가 뭘 할 수 있는데ㅋㅋ 됐고, 이전에 만들던 부동산 매물 사이트는 얼추 정리가 되었습니다. 복습 없이 강의를 빠르게 한 번 쭉 듣고 2회차로 들을 때 코드를 따라 쳤는데 꽤 수완이 좋은 것 같습니다. 강의 호흡도 짧아서 금방 금방 지나가니,,, 그 이후엔 re:백지에서 시작하는 코딩 세계 컨셉으로 강의를 듣는 동안 만들었던 사이트를 강의 없이 혼자 만들어 보려고 했는데,,, 이게 여간 쉽지가 않더군요. 의존도가 높았다는 걸 체감할 수 있.. 03과 2/2. v-model로 input 데이터를 받으면서 watcher로 데이터 감시도 하면서 애니메이션 효과도 주면서 상품 정렬 기능을 구현하면서 vue의 라이프사이클에 hook을 걸면서 컷. -후속편- 상품 정렬 상품 정렬은 Vue.js의 문법이나 기능이 특별히 쓰인 부분은 없습니다. 자바스크립트의 .sort()와 spread operatior에 대한 내용이 대부분이었습니다. 자바스크립트의 .sort()는 뭐 악명이 높으니 알아서들 보시고,,, 사이트에서 상품 정렬을 하기 위해 객체들의 순서를 뒤섞게 되는데 이 때는 데이터 원본을 따로 보관하고 사본을 조작하여 정렬을 하는 것이 이후 일반 정렬로 돌아올 수 있는 길이기에 유의해야 한다는 걸 알게 되었습니다. 요런 식으로 [...]을 활용해서 다른 조작에 반응하지 않는 클론 배열을 만들어 내지요 이후 정렬하는 함수는 methods : {} 부에 적어줍미다. 컴포넌트(?)의 라이프사이클(Lifecycle) .vue 파일의 컴포넌트들은 일련의 과정을 거쳐 생.. 03과 1/2. v-model로 input 데이터를 받으면서 watcher로 데이터 감시도 하면서 애니메이션 효과도 주면서 상품 정렬 기능을 구현하면서 vue의 라이프사이클에 hook을 걸면서 컷. -후속편- 상품 정렬 상품 정렬은 Vue.js의 문법이나 기능이 특별히 쓰인 부분은 없습니다. 자바스크립트의 .sort()와 spread operatior에 대한 내용이 대부분이었습니다. 자바스크립트의 .sort()는 뭐 악명이 높으니 알아서들 보시고,,, 사이트에서 상품 정렬을 하기 위해 객체들의 순서를 뒤섞게 되는데 이 때는 데이터 원본을 따로 보관하고 사본을 조작하여 정렬을 하는 것이 이후 일반 정렬로 돌아올 수 있는 길이기에 유의해야 한다는 걸 알게 되었습니다. 요런 식으로 [...]을 활용해서 다른 조작에 반응하지 않는 클론 배열을 만들어 내지요 이후 정렬하는 함수는 methods : {} 부에 적어줍미다. 컴포넌트(?)의 라이프사이클(Lifecycle) .vue 파일의 컴포넌트들은 일련의 과정을 거쳐 생.. 03. v-model로 input 데이터를 받으면서 watcher로 데이터 감시도 하면서 애니메이션 효과도 주면서 상품 정렬 기능을 구현하면서 vue의 라이프사이클에 hook을 걸면서 컷. 하이~ 또 왔습니다~이번 게시물을 끝으로 부동산 매물 사이트는 얼추 정리가 되는 것 같습니다. 다음 세션에선 vue-router를 배울 겸 간단한 블로그 구현을 한다고 하네요~ v-model / watcher input 태그 없는 사이트가 어디있을까요 웹에서는 빠질 수 없는 태그 중에 하나인데 input 태그로 들어온 데이터를 깔끔하게 저장하는 vue 문법을 가져왔습니다. v-model인데, 일단 그 전에 다른 걸 보고 가도록 하죠~ 자 만약 input 태그에 들어온 내용을 month 라는 변수에 저장을 하고 싶다! 그러면 vue 문법 중 하나로 이런 식으로 $event.target.value를 뭐 쓰고 하면서 난리 난리를 쳐야하는데 v-model이란 문법을 사용하면 아주 깔끔하고 담백하게 데이터를 in.. 02. 컴포넌트는 read-only지만 props와 $emit이 있다면 무엇이든 할 수 있어 지야~ 세 번째 게시물인데 벌써 귀찮네요 창 열어놓고 한참을 괴로워하다가 씁니다 안 쓰면 배운 걸 제가 다 까먹을 것 같아서,, 지난 게시물 기준으로 모달창을 만들고 v-if를 사용해서 동적인 UI를 만드는 것까지 한 거 같은데요 아님 말고 그 이후엔 모달창 안에 상세 내용을 채워넣었습니다. 각 상품에 관한 데이터가 차곡차곡 정리된 파일을 따로 저장하고 export처리 해놓고 그걸 App.vue에서 import하는 일련의 과정을 성공했다는 말이죠~ 그보다도 import된 파일이 아주 많지요? 그게 이번 글의 핵심인 컴포넌트를 위함이랍니다~? 컴포넌트란 무엇이냐~라고 물어보신다면 대답해드리는 게 인지상정이겠지요~ 이전 게시물을 보면 App.vue 파일에 참 많은 태그들이 있었다 그쵸? 열릴 지 안 열릴 지.. 01. 데이터 바인딩 / v-for / @click / v-if를 배웠습니다. "난데없이 컴퓨터에 Node.js와 VScode가 나타났다?" 와 같은 일은 없습니다~ 인강 따라서 개발환경 셋팅과 Vue 3버전 설치를 마친 후입니다. Node.js를 설치하고 VScode를 설치하고 VScode에서 터미널 창을 열어 npm으로 이것 저것 따라 치고 각종 확장 기능을 다운 받고 뭐 하라는 건 다했습니다. 구체적인 내용을 적지 않는 건 나중에 Node.js와 node module에 관한 공부와 포스팅을 할 기회가 있지 않을까 하는 마음 때문입니다. {{데이터 바인딩}} Vue.js는 저기 보이는 App.vue라는 파일에서 대부분의 사건/사고가 일어난다고 합니다. HTML, CSS, Javascript 작성은 저기서 다 합니다. 컴포넌트 생성하고 뭐하고 하다보면 물론 다른 파일에서도 작업이.. 00. Vue.js를 배워보기로 했습니다. 여자저차 해서 Vue.js를 배우기로 했습니다. 프론트엔드 프레임워크와 라이브러리로 Vue.js와 React 중 무엇을 먼저 배울까 고민을 좀 해봤고, 난이도 면이나 개인으로 작업하기 비교적 수월하다는 점에서 Vue.js를 선택했습니다. 물론 React도 이후에 필연적으로 따라오겠지요. Vue.js 관련 서적도 여럿 있지만 책으로 배우기 시작하면 늘어진다는 걸 알기 때문에 호흡이 그나마 빠른 인강을 듣습니다. 코딩애플의 강의구요. 이 글을 적는 시점에서 기본 동작 방법을 어느정도 들었는데 돈이 아깝다거나 하는 생각은 들지 않습니다. 아직은 추후에 더 들어보고 판단할 문제인 것 같네요. 여튼 돌아 돌아 여기까지 왔습니다. 자바를 건드리고 스프링을 핥아보고 자료구조 흘겨보고 알고리즘 간을 보고 난리도 이런 .. 이전 1 다음
