오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

CSS가 복잡한 언어는 아니지만 작업이 크고 고도화 될수록 불편함이 생긴다. 이에 Sass는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다. SCSS 설치 및 컴파일 컴파일러 설치는 이 블로그를 참고했습니다. 출처: https://inpa.tistory.com/entry/SCSS-💎-SassSCSS-란-설치-및-컴파일 [👨‍💻 Dev Scroll] SCSS 파일을 만들때 _을 넣는건 css로 변환되지 않길 원하는 것들을 저장함 & 변수 선언(var, const, let) 과 같은 개념이라고 할 수 있다. // _variables.scss ..

데이터 타입을 단일 데이터를 담을 수 있는 원시(primitive)타입과 복합 데이터를 담을 수 있는 객체(object)타입 두 가지로 나눌 수 있습니다. 원시 타입 원시 타입에는 number, string, boolean, null, undefined, Symbol 객체 타입 객체 타입에는 object(arrray나 다양한 자료구조들), function string 이스케이프 표현 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String 원시 타입 vs 객체 타입 원시 타입은 값 자체가 메모리 셀에 저장이 되지만 객체 타입은 **메모리 주소(참조값)**를 저장합니다. let a = 1 let b = a 이렇게..

display : inline과 block의 특징을 설명해보세요 inline display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. block display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. inline-block display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다. 특징 block inlin..

CORRECT Conformance 특정 포맷을 준수하는지 확인하는 테스트가 있어야합니다. ex) 전화번호, 이메일, 아이디같은 특정한 포맷을 준수해야하는 경우 포맷에 맞을 때 또는 맞지 않을 때 코드가 어떻게 동작하는지 예상하는 테스트 코드를 작성해야합니다. Ordering 순서 조건을 확인해야합니다. 만약 우리의 코드가 어떠한 배열의 순서를 중요시하는 코드라면 예를들어 학생들의 순번대로 배열이 저장되어있지 않은 경우 어떻게 반응할 것인지 예상하는 것들도 테스트로 나타낼 수 있어야 합니다. Range 숫자의 범위 우리가 예상하는 input의 범위가 특정한 범위이고 그 범위를 넘었을 때 어떻게 동작해야 하는지 코드를 작성해야 합니다. Reference 외부 의존성 유무, 특정한 조건의 유무 구현한 함수에..

카페에서 공부를 하면 마음이 조금 편안해진다. 나와 같은 입장에 서있는 분들이 있기 때문이다. 취준을 하면서 가장 우울한 때는 내가 아무것도 하지 않는 것 같다는 생각이 들 때이다. 그렇기 때문에 1일 1블로깅을 시작하게 되었다. 블로깅을 시작하면 내가 무언가를 하고 있다는 것을 느낄 수 있기 때문이다.

Right-BICEP 모든 요구 사항이 정상 동작 하는지 확인해야 합니다. 어떤 것을 집중하여 확인하여야 하는지 알아볼까요? Boundary conditions 모든 코너 케이스에 대해 테스트를 해야합니다. ex) 학생이 0명일 때 1000명일 때 그 이상일 때 이런 모든 케이스들에 대해서 테스트를 해야합니다. 잘못된 포맷의 인풋, null, 특수문자, 잘못된 이메일, 작은 숫자, 큰 숫자, 중복, 순서가 맞지 않은 경우 어떻게 동작 해야 하는지 이러한 케이스에 대해서 테스트가 이루어질 수 있도록 해야합니다. Inverse relationship 역관계를 적용해서 결과값을 확인해야합니다. 즉 일관성을 유지해야 합니다. ex) 5 + 5 = 10 인 것을 테스트했다면 10 - 5 = 5도 적용이 되어야 합..

Fast 테스트코드가 빠르게 수행될 수 있도록 만드는 것 즉 느린것에 대한 의존성 낮추기 테스트하고자 하는 코드에서 파일을 읽거나 데이터베이스에 접근하거나 네트워크를 사용한다면 이건 테스트 코드를 느리게 만들 수 있습니다. Isolated 고립적으로 독립적으로 만들어야 한다는 원칙, 최소한의 유닛으로 검증해야합니다. Repeatable 반복이 가능하도록 만들어라 이 말은 테스트 코드를 실행 할 때마다 동일한 결과를 유지 해야 한다.예) 다른 테스트 코드에 의존하거나 네트워크나 외부적 환경에 의존하는 코드는 환경에 의해서 결과 값이 달라집니다. 그렇기 때문에 테스트 코드는 환경에 영향을 받지 않도록 작성해야한다. Self-Validating 테스트코드는 스스로 실행한 값과 예상 값을 비교해서 성공하거나 실..

자바스크립트에서 정말 헷갈리는 개념으로, 자바스크립트를 다루는데 있어서 굉장히 중요한 역할을 하기 때문에 반드시 이해하여야 한다. 정의 자바스크립트의 모든 객체는 자신의 "원형(Prototype)" 이 되는 객체를 가지며 이를 프로토타입이라고 한다. 보이지 않는 속성인 [[Prototype]] 이 자신의 프로토타입 객체를 참조한다. 이를 __proto__ 라는 속성으로 참조할 수 있으나 이는 비표준이고 모든 브라우저에서 동작하는 것은 아니기 때문에 실제로 사용하는 것은 피해야 한다. .prototype과 [[Prototype]] 프로토타입이 헷갈리는 이유는 그 명명법과 연결방식에 있는데, 모든 객체는 은닉 속성인 [[Prototype]] 을 갖는데 특별히 함수 객체 는 접근할 수 있는 속성인 protot..

테스트의 비밀 한번 작성된 테스트 코드는 영원히 유지보수 해야 한다. 테스트 코드에서는 내부 구현 사항을 테스트하면 안된다.너무 내부적인 상황을 넣게 되면 구현 사항을 조금만 변경해도 테스트가 실패합니다. 사용자가 사용하는 함수, 클래스, API만을 가지고 테스트해야합니다. 재사용성 높이기(테스트 유틸리티) 반복되는 코드가 있다면 함수나 클래스로 만들어서 재사용성을 높입니다. 배포용 코드와 철저히 분리 test코드와 mock stub같은 것들을 철저히 분리해야합니다. 테스트코드를 통한 문서화 테스트코드 우리가 하나의 테스트를 작성하게되면 호출이 실행되기 전에 수행되는 beforeEach와 beforeAll가 실행되고 테스트 코드가 실행되고 나서 호출되는 afterEach affterAll이 있습니다. 그..

stub는 기존의 함수의 인터페이스를 모두 충족하는 다른 객체 product_service_no_di_refactor.js class ProductService_stub { constructor(productClient) { // Dependency Injection에 맞게 this.productClient = productClient } fetchAvailableItems() { return this.productClient .fetchItems() .then(items => items.filter(item => item.available)) } } module.exports = ProductService_stub stub_product_client.js class StubProductClient { ..