Emma.log()

이번에는 목록을 보여주는컴포넌트다. 목록은 인풋박스 두개에서 입력한것을 각각 키밸류로 로컬스토리지에 저장해두니까 스토리지에 저장된 데이터를 가져와서 뷰 데이터에 저장해야한다. 그리고 뷰 데이터에 저장되있는 갯수만큼 목록에서 보여주면된다. 말은 참 쉽다.\ 흠.... data ()에다가 words 와 meanings를 각각 [] 배열로 초기화 하고 뭐 어쩌구 저쩌구 한거같은데 왜 잘안되는지 하 맘에 안든다. 암튼 다시적어보자면 저렇게data에 하고 그 vue의 생명주기메소드 created()로 컴포넌트 생성될때 로컬스토리지의length읽어서 뭐가 있으면 ㄱ각각의 단어와뜻을 적도록 하였다. 그래서 단어는 키로 넣었고 뜻은 밸류로 넣었으니 저렇게꺼내왔다 근데 뭐 화면에 목록이 나오긴하는데 새로고침해야 잘보인다..

Doit Vue.js 입문편을 보며 작성된 게시물입니다. 개인적 공부를 위해 문맥이 좀 안맞거나 혼자마의 생각이 담겨있기도 합니다. HTML파일에서 뷰 코드를 작성할대 여러 컴포넌트로 화면을 구성하고 페이지 이동할때 라우터를 사용해 구성하는데 이때 화면이 눈에그려지지 않을수 있다 . 실제로 나는 아직 뷰가 익숙하지 않아서 컴포넌트로 구성된 화면만 보면 잘이해가 안된다. 대충 el에서 매핑한곳에 해당 스크립트내 template가 붙는건 알겠고 그럼 new Vue(_+부분이 인스턴스가 되고 그 안에 갖고있는 컴포넌트들이;ㄴ데 그걸 또 그 안에 들어가고 하는것 보면 좀 복잡하다. 이를 해소하기위해 싱글파일 컴포넌트(Single File Component)체계를 사용한다고 한다. 싱글파일 컴포넌트 란 .vue ..

이 글은 doit Vue.js입문 을 보고 만들었습니다. 개인 공부용으로 만들어서 개인 의견이 틈틈히 들어가있습니다. 템플릿은 HTML CSS 등 마크업 속성과 뷰 인스턴스에서 정의 한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수있는 형태의 HTML로 변환해주는 속성이다. 템플릿속성을 사용하는 방법 ES5에서 뷰 인스턴스의template 속성을 활용하는 방법이다. new Vue({ template : 'Hello{{message}} ' }); 템플릿 속성은 사용자가 볼수는 없지만 라이브러리 내부적으로 template속성에서 정의한 마크업 + 뷰 데이터를 가상돔기반의 render()함수로 변환한다. 변환된 render()함수가최종적으로 사용자가 보는 화면을 그리는 역할을 한다. 이변환과정에서 뷰..

더보기 본문글의 내용과 예제는 모두 Doit vue.js 입문편을 보고 작성되었다. 아직도 이해가 잘안되니까 인스턴스와 컴포넌트 영역을다시 공부해야할듯하다. 라우팅이란 라우팅은 웹페이지 간의 이동방법을 말한다. SPA 싱글페이지 어플리케이션에서 주로 사용하고 있다. ( SPA : 페이지를 이동할때마다 서버에서 웹페이지를 요청해 새로 갱신하는것이 아니라 미리 해당 페이지들을 받아놓고 페이지 이동시에 클라이언트의 라우팅을 이용해 화면을 갱신하는 패턴을 적용한 어플리케이션 ) 라우팅을 이용하면 화면간의 전환이 매끄러울 뿐만 아니라 어플리케이션의 사용자 경험을 향상시킬수있다. 뷰 뿐아니라 리액트/ 앵귤러 모두 라우팅을 이용해 화면을 전환하고 있고, 프론트엔드 프레임워크를 사용하지않고 일반 HTMl파일들로도 라우..