profile
Nuxt.js
post-thumbnail

Nuxt 레이아웃 동적 구성 하기

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

2021년 10월 25일
·
0개의 댓글

Vue.js Nuxt.js 에서 Axios net::ERR_BLOCKED_BY_CLIENT 에러 발생시

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

2021년 9월 22일
·
0개의 댓글
post-thumbnail

Vue.js/Nuxt.js Vuex 스토어 에러 : TypeError: undefined is not iterable

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

2021년 9월 17일
·
0개의 댓글
post-thumbnail

Nuxt/Vuex/Jest 테스트에서 Promise 예외 핸들링 하기

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

2021년 9월 15일
·
0개의 댓글
post-thumbnail

Nuxt(vue.js) Nightwatch E2E 나이트워치 크롬드라이버 버전 문제로 테스트 실행 실패시 해결 방법 - Chromedriver

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

2021년 9월 9일
·
0개의 댓글
post-thumbnail

[백엔드/프론트엔드] Rails API+Nuxt(Vue.js)로 게시판 구현 하기 Vuetify, Vuex Stores활용

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

2021년 9월 7일
·
0개의 댓글

Nuxt(Vuetify) + Rails 이미지 파일 업로드 하기

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

2021년 9월 5일
·
0개의 댓글

Nuxt에서 SASS/SCSS 사용 하기

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

2021년 9월 4일
·
0개의 댓글
post-thumbnail

NUXT 기초 강의 : 넉스트는 무엇인가?

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

2021년 9월 3일
·
0개의 댓글
post-thumbnail

[Vuex] Store actions, mutations, getters 명명 규칙 꿀팁들 (Vue, Nuxt)

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

2021년 9월 2일
·
0개의 댓글
post-thumbnail

Jest로 Vue/Nuxt 컴포넌트 테스트 만들기 (Store, Routes Params 사용)

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

2021년 9월 1일
·
0개의 댓글
post-thumbnail

Jest로 Nuxt Store 스토어 테스트 만들기 (모듈화, 네임스페이스 사용)

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

2021년 8월 31일
·
0개의 댓글
post-thumbnail

Nuxt.js 튜토리얼 : 네비게이션바 추가하기

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

2021년 8월 30일
·
0개의 댓글
post-thumbnail

Nuxt.js 기초 강좌 : 페이지와 컴포넌트

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

2021년 8월 29일
·
0개의 댓글
post-thumbnail

Nuxt/Vue.js에서 Vuetify(머티리얼 디자인) 버튼 마스터 하기 : 아이콘, 컬러, 그림자, 스피너

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

2021년 8월 28일
·
0개의 댓글
post-thumbnail

Nuxt.js/Vue.js에서 Vuex(Store) 사용 하여 Axios API 호출 하고 세션에 값을 저장 하기

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

2021년 8월 27일
·
0개의 댓글
post-thumbnail

Nuxt.js에서 Vuex(Store) 사용 하기

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

2021년 8월 26일
·
0개의 댓글
post-thumbnail

[튜토리얼] NUXT.js에 jest테스트 넣는법

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

2021년 8월 25일
·
0개의 댓글
post-thumbnail

Vue.js/Nuxt.js에서 Vuex(Store) 사용시 Cause 발생 해결 방법

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

2021년 8월 24일
·
0개의 댓글
post-thumbnail

NUXT 에서 Vuetify (머티리얼 디자인) 사용하기

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

2021년 8월 23일
·
0개의 댓글