프론트엔드 썸네일형 리스트형 Mixpanel + vue 연동 데이터팀에서 믹스패널 적용에 대한 요청이 왔다. 믹스패널은 아래에 페이지에 잘 설명되어 있다. https://docs.mixpanel.com/docs/what-is-mixpanel What Is Mixpanel? - Mixpanel Docs docs.mixpanel.com 간단히 얘기해보자면 우리 서비스에서 사용자가 어떻게 행동하는지 분석해주는, 사용자 행동기반의 제품 데이터 분석 툴(Product Data Analystics Tool)이다. 믹스패널은 좀 더 쉬운 의사결정을 위해, 또 사용자의 편의를 위해 기본 리포트인 인사이트, 퍼널, 플로우, 리텐션 리포트 이외에도 대시보드, 코호트 등 다양한 기능을 제공한다. Vue.js 기반 프로젝트에서 믹스패널 연동한 과정 1. package 설치 npm in.. 더보기 TDD (Test-Driven Development) 테스트 주도 개발 개발(코드 작성) 전 테스트 코드를 먼저 작성해나가는 방식 TDD 를 하기 위해서는 코드를 구현하기 전에 테스트코드를 먼저 작성한다 이 테스트코드를 실행하고 -> 구현하기 전에 테스트 코드를 먼저 작성했기 때문에 테스트를 실행하면 "실패" 할 것이다 -> 작성된 이 테스트코드가 "성공"할 수 있도록 그 테스트만을 통과할 수 있을만큼만 심플한 코드를 작성한다 -> 성공 그러면 다음 테스트로 넘어가서 이 단계를 반복. 이런식으로 테스트를 먼저 작성하고 전체적인 기능을 구현한다면 이제 그때서야 이미 작성된 코드를 여기저기 수정하고 깨끗하게 만드는 "Refactoring" 작업을 할 수 있다. 리팩토링을 자신감 있게 할 수 있는 이유는 , 구현된 코드를 다 테스트하는 테스트코드가 있기 때문이다.. 더보기 [Vue.js] Vue.js 개발 환경 설정 Vue.js로 웹 앱을 개발하기 위해 필요한 환경을 구성해보겠다 Vue.js 로 웹 앱을 개발하기 위한 도구 설치 크롬 브라우저 Node.js 개발자 도구(Vue.js devtools. 크롬 확장 플러그인) Visual Studio Code 📌 Node.js 설치하기 node.js에서는 서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경 vue CLI를 이용하여 쉽게 뷰 프로젝트를 구성하려면 Node.js가 설치되어 있어야 한다 (+ 뷰 CLI로 생성한 프로젝트에서 프로토타이핑을 할때에도 Node.js 서버 사용) CLI 커맨드 라인 명령어 윈도우의 명령 프롬프트 창과 맥의 터미널 등 명령어로 특정 동작을 수행할 수 있는 콘솔 창을 의미 서버 사이드 웹 화면과 관계된 서버 로직을 처.. 더보기 [Vue.js] Vue.js 란 회사에서 쓰는 프론트엔드 프레임워크는 '뷰'를 쓰고 있다. 무엇보다 프론트엔드는 자바스크립트만 잘 할 줄 안다면(물론, HTML, CSS 도 알아야 하지만) 어느 프레임워크를 쓰던지 쉽게 적응이 가능하다 그야말로 프레임워크는 자바스크립트를 유용하게 쓰기위한 '프레임워크' 일뿐! 틈틈이 자바스크립트를 얼른 마스터해야겠다... 📌 Vue.js 란? 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크 뷰는 화면단 라이브러리이자 프레임워크이다 프레임워크 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 라이브러리 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 돔 HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있.. 더보기 이전 1 다음
