인생 투자 노트 📒

상황에 따라 사용될 컴포넌트가 동적으로 변경되어야 할 때가 있다. 그럴 때 아래와 같은 방법을 사용한다. var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } } }) components에 사용할 컴포넌트 목록을 추가한다. 아래처럼 is prop에 변경할 컴포넌트명을 가지고 있는 data를 바인딩한다. 초기 값이 home으로 되어 있기 때문에 home 컴포넌트가 노출된다. 조건에 따라 currentView 값을 바꾸면 그에 맞는 컴포넌트가 노출된다. 참고 https://kr.vuejs.org/v2/g..

Metadata Cotent Flow Content Phrasing Content Embedded Content Sectioning Content Heading Content Interactive Content # 참고 https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories

Spring Boot + Maven 환경으로 프로젝트를 만들고 기본적인 구조를 파악해보자. 간단하게 intelliJ IDE로 프로젝트를 생성했다. 사용한 intellJ IDE 버전은 2019.3.3.입니다. 메뉴 File > New > Project 선택하면 아래와 같은 창이 나오는데 Spring Initializr를 선택하고 수정 없이 다음 버튼을 눌렀다. 만약 다른 에디터를 사용한다면 https://start.spring.io/에서 설정한 후 파일을 다운로드하면 된다. Type을 Maven Project를 선택하고 다음 버튼을 눌렀다. Web으로 만들 것이라 Spring Web 체크한 후 다음 버튼을 누르면 뭔가 설치가 되면서 프로젝트가 만들어진다. 처음 만든 프로젝트의 폴더 구조는 다음과 같다. m..

프로젝트 구성 방법은 구성하는 사람의 선호도와 경험에 따라 다양할 것이다. 그러나 한국에서 자바 기반의 웹 프로그래밍이 보편화되어 있고 스프링 부트(Spring Boot)로 구성된 경우가 많다. 스프링 부트 기반의 프로젝트를 clone 받았을 때 어떻게 구동해야 할지부터 막막했던 완전 초심자가 구동하는 방법을 익히기 위해서 학습한 내용을 정리해본다. 📃 JAVA와 JSP(Java Server Page) 자바를 현업에서 사용해본 적 없었고 JSP도 오래전에 스터디로 학습했던 게 전부였다. 그래서 둘은 무슨 관계인가부터 학습해야 했다. 자바는 객체지향형 프로그래밍 언어로 정리하고 보니 그러면 JSP는 무엇이며 왜 생겨났을까 궁금했다. JSP의 효용을 알기 위해서는 Java Servlet과 톰캣으로 웹 애플리..

코드가 변경되면 자동으로 테스트가 수행되도록 스크립트를 하나 추가했습니다. // package.json "scripts": { "test": "jest", "test:watch": "jest --watchAll" }, 그리고 layouts 폴더도 테스트 커버리지에 포함시켰습니다. // jest.config.js collectCoverageFrom: [ '/components/**/*.vue', '/pages/**/*.vue', '/layouts/**/*.vue' ] 테스트 코드를 작성하면서 만났던 이슈는 체크 박스의 checked 값을 확인할 수 없다는 사실이었습니다. 그래서 체크 박스에 vlaue 값을 추가했고 그 값으로 렌더링이 정상적으로 되었는지 체크했습니다. // TodoList.vue // be..

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 폴더 안에 ..