Frontend(19)
-
[JavaScript][정규식] 숫자에 1000단위로 콤마(쉼표 ,) 구분자 넣기
목표 정규식에 대한 이해, 간단 학습 일반 숫자 콤마(,) 구분자 넣기 구현 코드 정답부터 알려주자면 다음과 같다. // x는 숫자 function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } 1. 문자 변환 우선, 정규식을 사용하기 위하여 그리고 구분자가 포함된 새로운 문자열을 얻기 위하여 toString함수를 사용해 문자열로 변환해준다. 2. 조건에 맞는 문자를 찾아 대체 우리는 1000단위로 끊어, 콤마(,)를 삽입해야 한다. 즉, 특정 패턴을 찾아 새로운 문자열로 대체해야 한다. JS에선 이러한 기능을 제공하는 replace 메소드가 있다. String.prototype.replace() : r..
2019.10.13 -
F/E Testing Tool (프론트엔드 테스팅 도구)
F/E의 Test Test란? 애플리케이션이 요구 사항에 맞게 동작하는지를 검증하는 행위 QA(Quality Assuarance) 프로토타입 UX 검증 및 개선, 서버 API 호출 및 확인 특정 작업 이후 UI 변경 사항 확인 등의 모든 작업들... Test 종류 1. 단위 테스트 작은 단위(주로 모듈 단위)를 전체 애플리케이션에서 떼어 내어 분리된 환경에서 테스트하는 것 장점 세밀한 부분까지 테스트 가능 빠르게 실행 가능 단점 의존성 있는 모듈 제어를 위해 모의 객체를 무조건 사용해야 하며, 이 경우에도 잘 연결되어 상호작용하는지 검증하지 못한다 작은 단위의 리팩토링에도 쉽게 깨진다 2. 통합 테스트 단위 테스트보다 좀 더 넓은 범위의 테스트로, 주로 두 개 이상의 모듈이 상호 작용하는 것을 테스트하는..
2019.08.06 -
[Vue.js] 다국어 처리 vue-i18n
고급 vue-loader를 사용한 방법 공식 문서 구체적 방법은 찾지 못함, 학습 후 vue-loader 활용해 직접 개발해야 할 듯 vue-loader가 추측하는 대신 언어에 맞는 사용자 정의 로더를 사용해야합니다. 기본 언어에 대한 로더를 덮어써야합니다. 특정 language block을 위한 사용자 정의 프리 또는 포스트 프로세스를 해야합니다. 이를 위해 vue-loader에 loaders 옵션을 지정해야합니다. vue-i18n 공식 문서 라이브러리. 가장 많이 사용하는 방법이다. 비교적 간단해 보인다. 공식 문서에 사용 예제가 잘 나타나있다. html 예제 javaScript 예제
2019.04.17 -
[AngularJS] AngularJS 학습 (3)
해당 포스트는 Inflearn AngularJS 강좌를 기반으로 작성되었으며, 언급되는 개념 및 실습 과정을 담았습니다. 따라서, 코드는 단계적으로 작성되어 이전 코드와 연결되어 있습니다. > AngularJS 학습(1) 포스트 보러가기 > AngularJS 학습(2) 포스트 보러가기 AngularJS Service Controller의 분리 이전 포스트에서 Controller, Directives, app을 분리했었는데 이번엔 Controller 내부의 코드를 분리하는 작업을 할 것이다. Controller의 역할 Data 관리 기능 View 관리 기능 이 두가지를 분리할 것인데, Data 관리(조작)하는 부분을 Angular의 Service 기능을 사용해서 분리할 것이다. Angular Service..
2019.04.07 -
[AngularJS] AngularJS 학습 (2)
해당 포스트는 Inflearn AngularJS 강좌를 기반으로 작성되었으며, 언급되는 개념 및 실습 과정을 담았습니다. 따라서, 코드는 단계적으로 작성되어 이전 코드와 연결되어 있습니다. > AngularJS 학습(1) 포스트 보러가기 AngularJS 폼 폼 만들기 목표 최종 결과물은 다음과 같다. 사진과 같은 폼을 생성한다 페이지 리플레쉬할 때 자동으로 커서가 가르키도록 한다. placeholder에 친절한 안내메세지를 작성한다. 텍스트 입력 후 추가 버튼을 눌렀을 때 아래와 같이 새로운 투두가 추가되도록 한다. 새로운 투두는 입력 받은 값 / 현재 시간 / 완료되지 않음으로 표시한다. input text는 지워주도록 한다. html 코드 짜기 index.html 1. 2. 3. 4. 5. 6. 7..
2019.04.04 -
[AngularJS] AngularJS 학습 (1)
해당 포스트는 Inflearn AngularJS 강좌를 기반으로 작성되었으며, 언급되는 개념 및 실습 과정을 담았습니다. 따라서, 코드는 단계적으로 작성되어 이전 코드와 연결되어 있습니다. AngularJS AngularJS 1. AngularJS 개념 개발 환경 구성 2. Controller index.html로 시작하기 module & controller & 출력하기 3. 내장 Directive ng-repeat ng-filter ng-Click Filter Button 1. AngularJS 개념 공식 페이지의 Coceptual Overview를 보면 개념들이 정의되어 있다. Directives : 확장된 HTML로, custom 속성과 elements를 뜻함 directives를 사용해 직접 태그..
2019.04.03