인생 투자 노트 📒

Cousera라는 사이트가 있습니다. 유명한 대학교 강의를 들을 수 있는 곳이죠. 아는 분도 있겠지만 모르시는 분들을 위해 무료로 듣는 법을 소개합니다. 회원 가입 후 듣고 싶은 강좌를 검색합니다. 무료로 등록 버튼을 클릭하면 안내 창이 나옵니다. 하단에 청강이라는 링크를 발견할 수 있을 텐데요. (없는 경우에는 청강 불가능) 청강 버튼을 누른 후 새로 고침 하면 무료로 등록하기 버튼이 강좌로 이동으로 바뀝니다. 그리고 아래처럼 강좌를 들을 수 있게 됩니다. HTML, CSS, and Javascript for Web Developers 과정은 한글 자막도 제공하고 있으니 관심 있는 분이라면 들어보면 좋겠습니다. 청강은 수료증이 나오지 않습니다. 유로로 신청 후 강의를 듣고 과제를 완수하면 수료증이 발급..

create-nuxt-app로 프로젝트를 설정할 때 단위 테스트 프레임워크를 선택할 수 있다. AVA, Jest 중에 선택할 수 있는데 React.js로 개발했을 때 사용한 Jest를 사용한 경험이 있었기 때문에 Jest로 선택했다. 참고로 Jest는 facebook에서 만들었다. 선택하지 않은 경우에는 테스트 관련 모듈을 수동으로 설치 및 설정해줘야 한다. 아래 모듈을 --save-dev로 추가하자. @vue/test-utils : vue 코드를 단위 테스트할 때 필요한 유틸을 제공한다. jest : 단위 테스트 작성에 필요한 matcher, teardown 등을 제공한다. mock, spy로 테스트하는 방법도 안내하고 있으니 공식 사이트를 방문해서 꼭 보도록 하자. vue-jest , babel-je..

이번 시간에는 이전 포스팅에서 이야기했듯 API(Application Programming Interface) 연동하는 방식으로 변경한다. API를 구성하기 위해서 json-server 모듈을 사용할 것이라 먼저 설치했다. npm install -g json-server db.json 파일을 만들고 데이터를 넣은 후 // db.json { "todos": [{ "id": "todo-1", "text": "API 연동하기", "completed": false }] } json-server를 실행하고 콘솔에 노출되는 URL로 접근하자. json-server --watch db.json nuxtjs/axios가 설치되어 있지 않다면 설치하자. 그리고 API 호출하는 코드를 작성했다. service 폴더 안에 ..

지난 글에 이어 이번에는 수정 기능을 추가했다. 😀 할 일 목록을 추가할 때와 수정할 때 폼이 동일해서 TodoInpuForm이라는 컴포넌트로 분리했고 추가, 수정 함수를 callback props로 받았다. 추가, 수정일 때 버튼의 문자도 다르게 노출시켰다. 수정 일 때는 입력한 텍스트를 노출해야 하기 때문에 옵션으로 기본 텍스트 값을 추가했다. // TodoInputForm.vue {{ mode === 'add' ? 'ADD' : 'EDIT' }} 할 일을 추가할 때는 defaultText가 필요하지 않기 때문에 props를 생략했고 수정할 때는 defaultText를 props로 전달했다. // pages/create.vue Create Todo // pages/edit.vue Edit Todo U..

nuxt를 학습한 후 Todo App을 만들었다. 이전과 다르게 라우터를 사용하기 위해서 List와 Create 페이지를 분리했다. 가장 먼저 네비게이션 바 컴포넌트를 만들었다. 컴포넌트 옵션에 name 지정하지 않으면 그 컴포넌트를 가져오는 곳에 이름이 kebab-case 변환돼서 사용할 수 있다. // NavBar.vue List | Create // index.vue // kebab-case 그리고 기존에 store를 가져와서 약간만 수정했다. 모듈 방식으로 스토어를 사용하도록 아래와 같이 변경하였다. store 내부 구조를 파악해서 알아서 모듈 방식으로 변경해 준다. 특이한 점은 기존은 state를 JSON으로 반환했는데 함수를 반환한다. Singleton 으로 상태를 같은 값으로 반환해주기 위해..

Nuxt.js 공식 사이트에서 다음과 같이 소개하고 있다. Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt's goal is to make web development powerful and performant with a great developer experience in mind. 앞서 학습했던 vue, vue-router, vuex + webpack, babel ..

첫 번째 Todo App을 완성하는데 약 1시간이 걸렸고 vuex를 적용하는 데는 2시간가량이 걸렸다. 주말에 Vue Mastery 사이트에서 전 강좌를 무료로 풀었는데 vuex 강좌를 쭉 들으면서 사용 방법을 익혔다. 시작하기 전에 불필요한 Home 관련 코드를 삭제해서 정리한 후 오늘 vuex로 상태를 관리하도록 변경, 컴포넌트를 3개로 나누는 작업을 진행했다. React.js를 사용할때는 Redux.js를 사용했는데 Vuex.js 사용해 보니 동작 방식은 유사했지만 getters는 차이가 있었다. Redux의 reducer가 vuex에서는 mutations와 같은 역할로 보였다. 그리고 컴포넌트에서 사용했던 각각의 옵션과 유사한 기능을 하는 옵션이 store 존재한다. 아래 표는 각 기능을 매핑해 ..

Vue Mastery에 Intro 학습하고 나서 Todo App을 구현해 봤다. 프로젝트는 Vue CLI로 손쉽게 구성할 수 있었다. Vue CLI 설치한 후 vue ui 명령을 수행하면 프로젝트를 웹페이지에서 쉽게 설정할 수 있다. 👍 .prettierrc.js 파일을 설정하여 몇 가지 규칙을 추가했다. module.exports = { singleQuote: true, semi: false, } 프로젝트를 생성하면 기본적으로 만들어 주는 페이지 중에 Home은 그대로 두고 About 페이지를 Todo로 변경해서 진행했다. 구현한 기능은 다음과 같다. - 할일 추가, 삭제, 수정 - 완료된 할 일 목록, 남은 할 일 목록, 전체 할 일 목록 보여주기 - 완료한 할일 모두 삭제 Todo App {{ ed..