삽질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 을 기본 패턴으로 권장한다 비즈니스 요구사항에 집중하여 개발한다 최종 사용자를 위한 동작에 중점을 둔다 장점이 무엇일..

뭔가 본 건 많아서 젯브레인의 datagrip 이라는 IDE? 를 사용하고자 한다. datagrip 을 실행한 후 MySQL DB를 만들어 보자 New Project 해서 프로젝트를 하나 만들어 준 뒤, + 버튼을 눌러 MySQL을 선택한다. 혹시나 빨간 박스 같은게 뜬다면, 다운로드 버튼을 눌러 설치해 주자. 필요한 드라이버 파일들이 없다는 뜻이다. User, Password 를 입력한 뒤, OK를 눌러준다. 방금 생성한 데이터베이스 > New > Query Console cmd+enter 성공적으로 디비가 만들어진다... 백엔드는 넘 오랜만이라 두근거리는구만!! Spring boot + Mysql 을 할 예정이기 때문에 datagrip 셋팅은 여기까지 하도록 한다..

백엔드를 다시 도전해 보고자 한다. 아니 하던 프론트나 열심히 하세요 ㅎ;; 라고 할 수도 있겠지만 지식에 대한 갈망은 어느 개발자나 있지 않을까 싶다. (아닐지도) 백엔드는 1년 전에 마지막으로 했기 때문에, 이상한 내용이 나올 수도 있다. 그럴 땐 쯧쯧 하고 넘어가지 말고, 마음껏 훈수해 주셨으면 한다. (욕은 삼가주세요 ^^;;;) 1. MySQL 설치 $ brew install mysql 준비물부터 준비하시라... brew 에서 mysql 을 설치하면 된다. (초간단) brew 가 무엇이냐 하는 분들은 아래 링크에서 설치부터 하시라 https://whitepaek.tistory.com/3 Homebrew(홈브류) 설치 및 사용법, MacOS에서 프로그램을 쉽게 다운로드 및 삭제할 수 있는 패키지 ..

제곧내.. 너무나 어이가 없게도 ㅎㅎ;; 미디엄에 올려놓은 이미지들이 죄다 삭제되었다. 따라서 미디엄을 못 쓰게 될 것 같다..;; ㅎㅎ 다시는 외국 블로그 안 쓸 것임 .. 너무 화나네 ^^;;;

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`,..