삽질Oㅔ는 끝2 없ㄷr...

TDD 란 앞서 말한 것처럼 실패하는 테스트 코드부터 만드는 것이다. 그런 의미에서 아래 플로우를 웬만하면 지키고자 한다. 테스트 할 코드의 껍데기 생성 (페이지라든지, 컴포넌트라든지, 스토어라든지… 껍데기만 만들기) 테스트 파일 생성 테스트 파일에 껍데기에서 만들 기능을 주석으로 정리 주석을 지워가면서 실패하는 테스트를 작성 테스트가 성공하도록 껍데기를 채워나감 리팩토링 할 때도 위 플로우를 반복하여 코딩하는 것으로 가자 예를 들어 테마 설정, 홈으로 이동하는 Nuxt Link 만 있는 header 컴포넌트를 만들고자 할 때 1. 빈 껍데기 component 부터 만든다. 2. 같은 위치에 __tests__/header.test.ts 테스트 파일을 추가한다. 3. 만들 기능을 주석으로 정리한다. des..

ㅎㅎ 블로그에 개발 얘기를 적는 건 오랜만이라,,, 떨리네요 여러분의 따뜻한 한 마디가 또 한 명의 개발자를 살립니다 개요 Nuxt3 에 Jest 를 적용한 사례는 꽤나 적다. (그냥 Nuxt3 자체가 적을지도) 다른 사람들이 먼저 해 주기를 기다리다가, 더 이상은 현기증이 날 것 같아서 찍먹을 해 보기로 하였다. 들어가기 전 스펙은 대략 이렇습니다. Nuxt3 Typescript Pinia Jest Vue test utils 아래에서 해당 내용 프로젝트 구성을 볼 수 있습니다. https://github.com/zestlee1106/nuxt3-starter GitHub - zestlee1106/nuxt3-starter: Nuxt3 + Typescript + Jest 맛보기 프로젝트 Nuxt3 + Typ..

유닛테스트 (단위테스트)가 몬가요 이름 그대로 작은 단위로 나눠 테스트 하는 것이다 테스트에 네트워크나 DB 접근이 들어가면 안 된다 보통 axios 관련 테스트를 할 땐 데이터 mocking 을 한다 e2e 와 다른 장점이 몬가요 빈번히 일어나는 수정의 버그를 막는데 효과적이다 들어가는 비용이 저렴하다 (네트워크 통신을 안 하기 때문) 그럼 유닛테스트가 e2e보다 무조건 좋을까? 더보기 그건 당연히 아님 어떤 목적으로 테스트 하느냐에 따라 방법이 달라지는 것이다 e2e 는 사용자의 입장에서 테스트를 하는 것으로, 실제 브라우저를 띄워 네트워크 통신까지 한다 따라서 실제 상황에서 발생할 수 있는 에러를 잡을 수 있다 크로스 브라우징, 렌더링, 네트워크, 내비게이션 관련 테스트가 필요할 경우에는 e2e 테..

TDD 테스트 주도 개발이다 테스트 주도 개발이라 함은… 이름 그대로 테스트가 주도하는 개발이다 (…?) 함수 단위의 테스트를 권장한다 테스트 코드를 먼저 짜고, 테스트가 정상적으로 돌아갈 때까지 테스트를 하면서 코드를 작성한다 장점이 무엇일까 모듈의 역할이 단순하고, 명확해진다 만들어야 하는 기능을 좀 더 명확하게 만들 수 있다 실제 상황에서 발생할 에러를 발견할 수 있다 BDD 행동 주도 개발이다 TDD 에서 파생된 프로세스이다 (동작 작성으로 시작한다) 시나리오 기반의 테스트 케이스를 작성한다 (비개발자가 이해할 수 있을 정도로 테스트 케이스를 작성한다) Given When Then 을 기본 패턴으로 권장한다 비즈니스 요구사항에 집중하여 개발한다 최종 사용자를 위한 동작에 중점을 둔다 장점이 무엇일..

2020-06-01 에 작성된 글입니다. 현재 OAuth2를 지원하는 많은 소셜사이트가 있는데요, 저는 그 중 카카오톡과 네이버를 이용하도록 하겠습니다. 사실 OAuth 연동은 공식 개발 문서만 봐도 충분하나, Nuxt만 그런 건지 Vue 자체가 그런 건지… 버그가 발견되어 공유를 하려 합니다. 일단, Naver부터 시작하겠습니다. 1. Naver로 로그인하기 (네아로) 시작하기 전, 애플리케이션 등록을 먼저 해 주세요. 애플리케이션 - NAVER Developers 사용 API에는 네아로를 선택해 주시고, 주소에는 로컬호스트 주소를 넣도록 하겠습니다. OAuth 기능을 프론트엔드에서 지원할 것이기 때문에 Javascript로 연동을 시키려 합니다. 아래 공식 문서에서 튜토리얼을 확인할 수 있습니다. W..

오프라인 서비스를 하기 위한 많은 방법이 있는데, 저는 이 중 service worker를 이용한 캐싱으로 진행하려고 합니다. 사실 이는 pwa에서 이미 지원해 주고 있기 때문에 그렇게 복잡한 일이 아닙니다. 저는 프로젝트를 만들 때 pwa를 설치했기 때문에, nuxt.config.js에 가서 몇가지 설정만 변경해 주도록 하겠습니다. pwa 설치 및 모듈 적용은 이전 포스팅을 확인해 주세요. 1. NUXT PWA Cache 적용 설정이 완료됐다면 nuxt.config.js에 workbox 설정을 추가해 주겠습니다. workbox: { runtimeCaching: [ { handler: 'CacheFirst', urlPattern: '/*', strategyOptions: { cacheName: `v1`,..

2020-04 에 작성된 글입니다. NUXT universal mode에 있는 에러입니다. 참고해 주세요!! 저의 기존 로그인, 인증 방식은 이렇습니다. 1. 로그인 로그인 요청 > 백앤드에 post 요청 (store)> 응답 온 토큰을 쿠키에 저장 2. 인증 쿠키에 있는 토큰을 꺼내어 store의 action을 실행 (middleware)> axios의 default header에 넣어 줌 (store) 페이지 이동 혹은 새로고침 할 때마다 middleware가 동작하기 때문에, 2번 인증은 매번 동작합니다. 이 방법을 여럿 사용하고 있으며, 튜토리얼에서도 많이 보실 수 있을 겁니다. 하지만, 저는 이 플로우를 통해 에러를 접하게 되었고, 그때부터 삽질을 하기 시작하였습니다…. axios 통신으로 da..

2020-03 에 작성된 글입니다. 인덱스에 지도를 보여 주고 싶은데, 지도를 제 마음대로 변경하고, 지도 위에 특정 숫자도 보여 주려고 합니다. 그래서 찾은 게 바로 highChart입니다. Interactive JavaScript charts for your webpage | Highcharts "I absolutely LOVE Highcharts & maps, very cool! We use it for a web metrics dashboard, which is shared with internal…www.highcharts.com highCharts는 highmaps라는 기능도 제공하는데, 제가 사용할 기능이 바로 이 기능입니다. highcharts 공식 페이지의 데모에는 jQuery로 이용하는..

2020-03 에 작성된 글입니다. 이번 포스트에서는 앱 이름과 스플래시를 국제화 하려고 합니다. (스플래시는 Lanch Screen이라고 말해도 될 것 같네요. 앱이 켜질 때 보여지는 이미지입니다.) 그럼 이제 시작해 볼까요? 1. App name Localization (앱 이름 국제화) 먼저, File -> New -> File… 을 클릭하여 filter에 String을 검색한 후 Strings File을 선택하여, InfoPlist.strings라는 이름의 파일을 추가해 주세요. 그리고 프로젝트의 Info 부분에서 Localization 섹션의 +를 클릭하여 언어들을 추가해 주세요. finish를 눌러 추가해 주시면 됩니다. 그리고 InfoPlist.strings 파일을 선택하고 오른쪽 부분 의 ..

2019-12 에 작성된 글입니다. 현재 진행중인 플젝은 다국어 지원이 되어야 하는데요, vue에서 이러한 기능이 있다고 하여 찾아 보았습니다. Introduction | Vue I18n Notice ⚠️ This documentation is for Vue I18n v6.0 or later. if you use v5.x, see the legacy section. Vue I18n is…kazupon.github.io 그것이 바로 i18n 입니다. 역시 필요한 기능들은 다 만들어져 있네요. 👏👏👏 이는 vue 3.x만 지원이 된다고 하니, 아직 설치가 되지 않으셨다면 아래를 입력하여 설치해 주세요. $ npm install @vue/cli -g 그럼 i18n을 현재 프로젝트에 추가해 보겠습니다. $ vu..