본문 바로가기

프론트엔드5

220627 월 TDD 정의 및 효과 TDD란? (Test Driven Development) TDD의 효과 TDD에 관한 편견과 실상 TDD는 무조건 해야 한다? TDD는 버그를 박멸한다? TDD는 항상 느리다? 테스트 기법의 종류와 장단점 테스트 주도 개발 프로세스 TDD 메인 프로세스 단위테스트시 참고사항 TDD란? (Test Driven Development) 테스트 주도 개발(TDD) 은 소프트웨어를 개발하는 여러 방법론 중 하나이다. 제품이 오류 없이 정상 작동하는지 확인하기 위해 모든 코드는 프로그래머가 작성하고 나서 테스트를 거치게 되는데, TDD에서는 제품의 기능 구현을 위한 코드와 별개로, 해당 기능이 정상적으로 움직이는지 검증하기 위한 테스트 코드를 작성한다. 이를 통해 테스트가 실패할 경우, 테스트를 통과하기 위한 최소.. 2022. 6. 27.
220426 CSS Toggles css-toggles 패키지 사용방법 해당 포스팅은 큰 특징만 정리하였습니다. 기타 다른 사항은 oddbird.net/ Docs 를 참고하세요 Global Color Toggle light / dark 모드를 변경할 때 사용할 수 있습니다. html { toggle-root: mode [auto light dark]; } html:toggle (mode light) { ... } html:toggle (mode dark) { ... } .mode-btn { toggle-trigger: mode; } Binary self-toggle switches .todo li { toggle: todo self; list-style-type: '❌ '; } .todo li:toggle(todo) { l.. 2022. 4. 26.
211201 Javascript Reduce Method 활용법 JavaScript Reduce Method Made Simple reduce() 메서드는 가장 자주 사용되는 Array 메서드인 ES6(ECMAScript 2015) 에 추가된 JS 기능입니다. reduce() 의 역할은 제공된 reducer function 을 실행하여 주어진 Array 를 한 개의 값으로 줄여나가는 역할을 합니다. 결과적으로는 한 개의 값으로 줄여나가는 것 입니다. // reduce() 문법 array.reduce(callback, initialValue) const reducer = (accumulator, currentValue, index) => { // ... } 사용법 reduce 메서드는 보통 전체 총합/평균/최소/최대 값을 구할 때 사용됩니다. 이 말은 다른데에도 사용할.. 2021. 12. 1.
Map, WeakMap, Set, WeakSet Map, WeakMap, Set, WeakSet Map, WeakMap, Set, WeakSet Map set() 과 get() 으로 값 할당하기 Map 내부 순회 Array 와의 관계 WeakMap 사용 방법 Set add() 와 delete() 로 Set 객체 사용 Set 내부 순회 Array 와의 관계 String 과의 관계 WeakSet 사용 방법 Map Map 객체는 Object 와 동일하게 키-값 쌍을 저장하며 삽입 순서도 기억하는 콜렉션 입니다. 어떤 값이라도 key, value 로 설정할 수 있습니다. Map 이 Object 와 구별되는 중요한 특징이 있는데, 주요한 특징들은, Map 의 key 는 함수, 객체 등을 포함한 모든 값이 가능합니다. Map 은 명시적으로 제공한 키 외에는 어떤.. 2021. 5. 9.
200905 Vue - Lifecycle & Hooks Vue instance의 lifecycle & Hooks beforeCreate() new 키워드로 인스턴스를 생성한 바로 직후, vue는 첫번째 lifecycle (beforeCreate) 를 동기적으로 호출합니다. 이 hook을 호출한 후에, vue는 data observation(관찰)과 event를 초기화하는 과정을 진행합니다. create() 다음으로, create 라는 hook을 가지는데, 인스턴스가 생성된 후에 동기적으로 호출됩니다. 이 hook 이 호출되면, vue 인스턴스의 옵션들은 data observation, computed properties, methods 등등을 세팅하는 과정을 진행합니다. 그리고 우리가 제작한 을 가지고 컴파일링 하게됩니다. 이 말은 즉, Virtual DOM.. 2020. 9. 6.

티스토리툴바