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

유닛테스트 (단위테스트)가 몬가요 이름 그대로 작은 단위로 나눠 테스트 하는 것이다 테스트에 네트워크나 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`,..

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로 이용하는..