야훔의 저렴한 개발

Nuxt.js의 Store기능을 익히기 위해 Vuex를 공부한지 어언 2주. 이제 마지막 Modules에 대해서 알아볼 시간이 도래하였다. Modules의 의도를 아주 간단히 풀어보자면 우리가 다운로드 받는 파일들을 하드디스크에 저장할 때 바탕화면에 계속 저장한다고 해보자. 위의 이미지와 같이 혼란함이 가득해질 것이다. Store객체도 마찬가지. 웹 어플리케이션에서 상태를 저장할 일이 얼마나 많은데 이것 저것 분류해서 넣어놓지 않으면 코드양이 늘어나면 늘어날 수록 Store객체의 속은 혼란함 만이 가득하게 될 것이다. 우리는 저 복잡해진 바탕화면을 정리하기 위해 폴더를 만들고 비슷하거나 연관되어있는 파일들을 정리해 담는 작업을 한다. 이때 만드는 폴더가 바로 Vuex에서 "Modules"에 해당한다고 생..

Vuex를 번외편으로 총 6부작 생각하고 시작한 라이브러리 설명을 벌써 4부를 마무리하고 이제 다섯번째 Actions 를 시작하려고 하니 급 아련한 느낌이 들었다. 사실 하다가 관둘줄 알았거든. 내용이 길어서 이거 끝까지 설명할 수 있으려나 생각을 했는데 다음시간이면 Vuex내용 중 중요한 부분들은 다 끝난다니 다행스럽다고 생각한다. 그러니 이제 조금 더 달려서 Nuxt.js 로 돌아가도록 하자. 난 Nuxt.js 초급부분을 한 10편이면 끝날줄 알고 막 달리는데 번외편까지 생기고 공부할게 한두가지가 아니라서 벌써 15편째 연재 중인데 곰곰이 생각해보니까 Nuxt.js는 얼마 다루지도 않은 것 같아서 앞으로 한참 더 달려야겠다고 생각을 하니.. 아 지겹...........지 않아. 더 열심히 해야지. 자..

서론 : 왜 Mutation을 사용하는가 이제 Vuex의 네 번째 챕터 Mutation(변이)에 대한 이야기를 할 시간이 왔다. Mutation는 말 그대로 상태(state) 값을 변경하는 것으로 이해하면 된다. 다만 주의할 점이 Mutation의 상태 값의 변경에 대해서 "동기"방식으로 처리할 때 사용해야 한다는 점이다. 여기서 동기, 비동기라는 말이 헷갈린다고 생각하시는 분들을 위해 동기 방식 / 비동기 방식에 대해서 설명을 확인하고 돌아오자.(https://blog.thereis.xyz/72) 사실 변이라는 것은 별게 아니다. 그냥 state 값을 변경하는 것인데 mutations라는 옵션에서 메서드를 통해 값의 변경을 가하는 것 뿐이다. 그렇다면 이렇게 생각할 수도 있다. "그냥 state 값을 ..

오늘은 Vuex의 세번째 이야기인 Getters에 대해서 이야기해보기 전에 잠깐 잡설을 풀어보려고 한다. Vuex를 공부하면서 Vue에서 사용되는 Option들인 "el" 이라던가 "data"라던가 "computed" 같은 애들이 어떤 방식으로 동작을 하는지, 그리고 어떻게 코딩을 하면되는지 스스로 다시금 연구를 하게 되었다. Javascript라는 언어 자체는 굉장히 유연한 언어라는 점에서 사고를 출발해야한다. "객체"라는 것에 대한 것, 그리고 동기, 비동기방식의 오묘함에 대해서 제대로된 이해가 안된다면 사실 Javascript는 너무나도 난해한 언어밖에 되지 않는다는 것을 이해해야한다. 그래서 Javascript라는 언어가 처음에 시작하기에 쉽지만 어려운 언어라는 이야기를 하게되는 것인지도 모른다...

지난번 시간엔 Vuex를 이용하기 위해 개발환경을 만드는 작업까지 했었다. Vuex에서 공부할 내용은 아래와 같다. State(상태) Getters Mutations(변이) Actions Modules 이 다섯가지 중 오늘은 그 첫번째 State에 대해서 배워보도록 하겠다. State는 말 그대로 상태를 저장하는 Vue에서는 data 와 같은 역할이라고 생각하면 편하다. 이 쯤되서 공부하기 싫은 사람들은 이렇게 생각할 수 있다. "그러면 Vue의 data를 사용하면 되지 왜 귀찮게 Vuex를 쓰는건가?" 첫번째 이야기에서 내가 어플리케이션은 전역적으로 저장해야하고 사용할 정보를 제어해야하는 기능이 필요한데 그것이 Vuex가 제공해준다고 소개를 했었다. "전역적"으로 어떻게 사용할 수 있는지 컴포넌트를 하..

Nuxt.js에서 Store라는 기능을 이해할 필요가 있는데 그러기 위해서는 일단 Store가 무엇인지부터 알아야 한다. Store는 어플리케이션 전역적으로 어떠한 상태 값을 저장해야할 때 그리고 그 상태를 전역적으로 반영해야할 때 Store 라고 부르는 저장소에 값을 저장한 뒤에 활용할 수 있도록 해주는 기능을 이야기한다. Nuxt.js의 Store는 Vuex 라이브러리를 기반으로 만들어졌고 Vuex에 대해서 알아야 Store에 대한 설명을 이해하기 용이 하겠다 싶어서 선행학습을 진행하는 포스트로 꾸며보았다. Vuex는 일단 ES2015을 기본 문법으로 사용한다. 그러니 일반적인 방법으로는 사용하기엔 조금 애매한 부분들이 있다. 그러니 샘플 페이지 만드는 작업부터 좀 설명해야겠다. 그러면 테스트 할만한..