인생 투자 노트 📒

1. HomeBrew 설치하기터미널에서 아래 명령어를 통해 HomeBrew가 설치되어 있는지 확인합니다. brew -v 만약 버전 정보가 제대로 나오지 않는다면 https://brew.sh 사이트에서 설치법을 확인하여 설치하세요. 2. MySQL 설치하기아래 명령어로 설치합니다.brew install mysql설치가 완료되면 아래 경로로 설치됩니다. /usr/local/Cellar/mysql 3. 실행하기아래 명령어로 mysql sever를 실행합니다.mysql.server start 아래 명령어로 중지합니다.mysql.server stop 4. 데몬으로 실행하기HomeBrew로 다음과 같이 mysql 데몬을 실행합니다. brew services start mysql 서비스를 재시작하려면 아래 명령어를 ..

UI 테스트를 위한 여정 React 기반의 서비스에 Jest로 단위 테스트 적용하면서 만났던 이슈, 해결 방법을 설명하고 있습니다. 프런트엔드 단위 테스트를 적용하는 경우가 많지 않아서 이런 사례는 가뭄에 단비 같은 강연이었어요. CSS 변경까지 탐지하기 위해서 스크린숏을 비교하는 기술을 도입한 부분도 재밌었습니다. PR 올릴 때 자동으로 테스트되게 해서 코드의 안정성을 유지하려는 노력도 꽤 인상적입니다. https://if.kakao.com/session/96 if(kakao)2020 오늘도 카카오는 일상을 바꾸는 중 if.kakao.com 카카오 FE개발 서바이벌 키트 이 세션에서는 iOS 인앱 웹뷰 디버깅하는 방법과 크롬 개발 도구로 성능 저하 코드 찾는 방법을 소개합니다. 카카오 서비스 중에서 문..

이전에 작성했던 Proyman으로 인앱 웹뷰 디버깅하는 방법 글은 최후의 방법입니다. 그런데 앱과 협업이 가능하다면 다음과 같은 방법도 가능합니다. Android 애플리케이션 내에서 WebView 디버깅이 활성화하는 코드를 넣어 달라고 요청합니다. 전체 적용하려면 아래 코드를 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } 디버깅이 true 상태에만 적용하려면 아래 코드를 추가합니다. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { if (0 != (getApplicationInfo().flags & App..

VeeValidate는 Vue에 폼 요소의 유효성 체크를 쉽게 도와주는 라이브러리입니다. 사용법이 간단해서 잘 알고 사용한다면 매우 유용합니다. 버전 2 이후 3, 4도 나왔는데 문법이 많이 다릅니다. 이 글에서는 프로젝트에서 사용한 2 버전을 기준으로 설명드립니다. 설치는 npm으로 설치하면 됩니다. npm install vee-validate@"

디렉티브라 함은 v-시작하는 대표적으로 v-model, v-show 말합니다. 이 편리한 기능을 커스텀으로 만들어서 사용할 수 있습니다. 특정 기능을 directive로 구현할 수도 있고 component로도 구현할 수 있습니다. 2가지 옵션 중에 어떤 것을 선택해야 할지 의문이 들었는데 Vue.js 공식 사이트에서 그 차이점을 알 수 있었습니다. Directives vs Components Vue has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while components are self-contained units that have t..

내 컴퓨터에 있는 파일을 선택해 브라우저 특정 영역에 드롭하면 업로드 되는 기능을 만들수 있습니다. 대부분의 브라우저에서 사용가능 하기 때문에 시도해볼만 합니다. 핵심 코드는 다음과 같습니다. event의 dataTransfer에서 드롭한 파일 정보를 가져 올 수 있습니다. function onDropHandler(event){ event.preventDefault(); const data = event.dataTransfer; const files = data.files; const count = files.length; for (var i = 0; i < count; i++) { const file = files[i]; consoleLog(`File ${i}: ${file.type} ${file.na..

Chrome, Safari 브라우저로 디버깅 방법은 웹뷰 디버깅에 비해 쉽습니다. Android 기반의 Chrome은 Chrome 브라우저를 사용해서 쉽게 디버깅 가능하고 iOS 기반의 Safari는 Safari technology preview 도구를 사용하면 됩니다. 하지만 App에 Webview경우 접근할 방법이 없어서 디버깅하기 어렵습니다. 제가 생각하는 최선의 방법은 Proxy 툴을 이용해서 로컬 서버 페이지와 스크립트를 바꿔서 이슈를 차근이 해결하는 방법뿐이다. Mac 사용자라면 무료도구인 Proxyman을 추천합니다. 같은 기능을 하는 도구로 charles proxy 도 있으나 이 도구는 30일 동안만 무료 사용 가능합니다. Windows 사용자라면 Fiddler를 추천합니다. 사용방법 Pr..

마틴 파울러의 리팩터링이 자바스크립트 언어로 다시 쓰여진다는 출간 소식을 듣자마자 그 책을 구입했지만 못 읽고 있었다. 최근 시간이 조금 나서 책의 예제를 따라 해봤다. 우선 1장을 따라했는데 실무에서 잘 사용하지 않는 몇가지 코드를 제외하고 내용은 꽤 훌륭했다. (예를 들어 aPerformance 에 a에 타입을 붙여서 쓰는 방식, 함수를 선언하는 방식 function amountFor()) 결과물은 이 저장소에서 확인해 볼 수 있다. 커밋을 상당히 작은 단계로 했는데 실제로 책에서 작게 수정하고 동작하는지 테스트하고 커밋하는 순서를 권장했다. 책과 다르게 작성한 부분은 README.md에 남겨두었다. 리팩터링 2판 (리팩토링 개정판) 마틴 파울러의 『리팩터링』의 2판으로, 새로운 리팩터링 카탈로그를 ..