아래 명령어로 새 프로젝트를 생성 한다.Vuetify를 선택 해주는 것 외에는 본인 환경에 맞게 적당히 선택 해준다.yarn dev로 서버를 실행 한다.브라우저로 http://localhost:3000을 열어보면 아래와 같이 기본 페이지가 생성 되어 있다.pa

Vue.js Nuxt.js 프로젝트에서 Axios로 API요청했는데 아래 에러 발생시크롬 익스텐션 중 AdBlocker를 종료 한다.

아래 에러 발생 하는 경우스토어 setter에서는 .obj를 사용 중인데정작 사용 할 때는 arr:으로 넘기고 있어서 undefined 로 접근이 발생 한 것이다.

예를들어서 페이로드가 예상대로 들어오지 않았다면 아래처럼 예외를 강제로 발생 시킨다.store/actions.js에서파라메터 뿐 아니라 API의 리턴값 등에 대해서도 조건을 걸면 되겠다.

어느날 갑자기 맥북의 크롬이 업데이트 되더니 그전까지 잘 되던 Nuxt프로젝트에서의 나이트워치 테스트가 실행이 안되었다. 나중에 크롬 드라이버가 업데이트되면 또 비슷한 경우가 있을 것 같아서 해결법을 블로그에 남겨둔다.

Nuxt.js(vue)+Rails API 게시판 구현 하기. 넉스트와 레일즈서버를 이용해서 게시판을 만드는 방법을 알아 보겠습니다.

Nuxt.js + Rails 이미지 파일 업로드 하기

Nuxt에서 SASS/SCSS 사용 하기 Sass는 신텍스 어섬 스타일 시트의 약자로 CSS작성시 여러가지 개발 편의성을 제공 한다.(변수 이용, 계산식 사용 가능 등) 만약 nuxt프로젝트에 이를 도입 하고 싶다면 어떻게 하면 되는지 알아보자.

넉스트는 무엇인가?The intuitive Vue Framework공식 홈페이지에 써 있는 말이다.즉, Nuxt는 Vue.js의 직관적인 프레임워크이다.Vue.js도 프레임 워크이므로 프레임워크의 프레임워크 되시겠다. 전문용으로 하이레벨 프레임워크이다.

필자는 수개월째 Nuxt.js 로 프론트엔드 개발 작업을 하고 있다. 그러던중 작업한 변수명, 함수명 등이 표준에 맞지 않고 거기에 더해서 다른 수많은 변수명, 함수명과 중복이 되거나 뜻을 직관적으로 알기 어려워 유지보수 비용이 증가 하고 있음을 알게 되었다.

현대 프로그래밍에서 자동화 테스트는 개발자들의 디버깅 시간을 아껴주고 동시에 생산성을 높여 주고 있으므로 필수라고 할 수 있겠다. 이후에 Jenkins 등의 CI/CD 툴과 연계 하면 그 시너지는 엄청나게 커진다.프론트엔드 개발에서도 마찬가지인데

넉스트를 처음 설치 하고프로젝트를 생성 하면 테스트 프레임워크를 옵션으로 선택 할 수 있다. 친절하게도 샘플 테스트도 같이 딸려온다.하지만 상용 웹앱을 제작 하거나 꽤나 규모가 있는 프로젝트를 진행 중이라면 대부분의 메인로직이 Vuex 스토어(Store)에 저장 되어

Nuxt.js 튜토리얼 : 네비게이션바 (Navbar) 추가하기모든 페이지에 같은 엘레먼트를 표시 하고 싶다면 어떻게 하면 될까?예를 들어 네비게이션바(Navbar), 사이드바(Sidebar) 같은 기본 배치 말이다.

페이지는 컴포넌트가 아니다.컴포넌트 이름에는 두단어 이상 사용 할것을 추천 한다. 왜냐하면 케밥 케이스(모두 소문자로 하되 단어 사이에는 하이푼을 넣는 명명법)를 사용하는 HTML 태그와 같은 이름이 겹칠 수 있기 때문이다.

이번 포스팅에서는 초보자 기준으로 뷰티파이 사용법에 대해서 알아본다.Vuetify(뷰티파이)의 UI컴포넌트중 <v-btn> 하나만 잘써도 UI를 이쁘게 꾸밀 수 있다.

엑시오스는 자바스크립트 기반의 비동기 HTTP 클라이언트이다. yarn create nuxt-app myapi 커맨드를 이용해 프로젝트를 생성 한다.이어 나타나는 헬퍼에서 다른건 자유롭게 골라도 되지만 Nuxt.js modules: 질문에서 Axios를 고르도록 하자.

웹 프로젝트를 진행 하다보면 점점 규모가 커짐에 따라 이런 저런 데이터를 저장해야 한다. 유저의 세션 정보 라던지, 게시판의 글이나 댓글 등 Frontend 측의 로컬 환경에 저장 하며, 모든 페이지들에서 자유롭게 읽고 쓸 수 있는 저장소가 스토어이다.

현대 프로그래밍에 있어서 빼놓을 수 없는 것이 TDD를 이용한 생산성 향상인데, 이번 포스팅에서는 NUXT프로젝트에 이를 도입하기 위해서 jest 를 이용해 간단한 TDD 패턴을 한바퀴 돌려보자.

Vuex 라이브러리를 이용 해서 넉스트 프로젝트 진행중, jest를 이용한 자동화 유닛테스트 부분에서 에러는 아니지만 아래와 같은 경고 메시지가 Lint에서 발생 하였다.문제 되는 부분 전체 소스 코드문제 되는 부분은 new Vuex.Store 라인으로 원인은 Vuex

뷰티파이란?뷰티파이는 완전 UI 프레임 워크로 Vue.js위에 만들어졌으며 개발자들에게 풍부한 유저경험을 쉽고 빠르게 만들 수 있게 하는 것이 목표이다. 머터리얼 디자인 스펙을 베이스로 한 컴포넌트들을 완성도 있게 제공 한다.왜 뷰티파이인가?