우리는 리액트 입문 10일차이지만 이 미션을 완성해야만 해..! 처음 레벨2의 payments 미션을 만났을 때 솔직히 막막했다. 시간은 없고 미션은 끝내야하고,, 나는 리액트의 가장 큰 장점 중 하나를 컴포넌트의 재사용이라고 생각했다. 하지만 컴포넌트를 어디까지 나눌 것인가에 대한 이야기를 시작하자 답답해졌다. 가장 작은 단위로 쪼개서 필요에 따라 재사용 하고 싶은데 그럴 능력도 시간도 우리에겐 없었다. 그래서 일단 컴포넌트를 크게크게 자르기로 결정! 카드번호, 만료일, 소유자 이름, 보안 코드, 카드 비밀번호 이렇게 한 묶음이다. payments에서 가장 재사용이 활발한 친구는 input 요소이다. 내 로직에서 끝까지 가장 날 괴롭힌 컴포넌트인 카드 번호 인풋의 코드를 예시로 들겠다. 이런 애들이 각..
블록 수준 요소에는 미리 정의된 100% 너비가 있음 인라인 요소에는 미리 정의된 너비나 패딩이 없음 auto 값으로 width 속성이나 margin을 적용한다면 효과가 없음 태그 내에 존재하는 공간만 소비하도록 바인딩된 요소를 만들기 때문 따라서 직접 width값을 지정해줘야 auto가 적용
grid-column-gap minmax() repeat와 같이 쓰면 좋다. 최소 간격과 최대 간격을 지정해줌 .gird { grid-template-columns: repeat(6, minmax(150px, 1fr)); } auto-fill / auto-fix repeat()와 함께 사용된다. repeat()함수의 파라미터로 열 또는 행의 개수를 미리 지정해 주지 않고, 설정된 너비가 허용하는 한 최대한 셀을 채우게 된다 .gird { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .gird { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } auto-fit: 그리드 컨테..
jest 여러가지 비교 함수 toBe() 기본형을 비교할 때 가장 많이 사용. (두 값이 같은지 비교) 비교 대상이 기본형 : 두 원시 값이 같은지 object : 같은 오브젝트에 대한 참조 인지 비교 toEqual() 비교 대상이 기본형: 두 원시 값이 같은지(toBe와 동일) object : 재귀적으로 프로퍼티를 비교하며 깊은 비교를 수행 → 참조하는 오브젝트가 다르더라도 같은 프로퍼티에 같은 값이 있다면 성공. → 다만 추가적인 프로퍼티가 있는 경우 fail이 되지만 추가적인 프로퍼티가 undefined라면 테스트를 통과한다. test("라운드 첫 시작 시 거리 초기화 테스트", () => { const car = new CarRaceGame(); car.setCarNames(["Rulu", "24..
Scope 스코프란? 스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념 var , let, const 키워드로 선언한 변수의 스코프는 다르게 동작 스코프: 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 스코프는 식별자가 유효한 범위 식별자 결정: JS 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야할 것인지를 결정 스코프는 JS 엔진이 식별자를 검색할 때 사용하는 규칙 스코프를 통해 식별자인 변수이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 함 스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다. var 키워드로 선언된 변수는 같은 스코프 내에서 중복..
명령형, 선언형의 차이 명령형 프로그래밍 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것 ‘어떻게’ 계산 할지 보다는 ‘무엇’이 계산될 것인지 알고리즘을 명시하고 목표는 명시하지 않음 명령형 프로그래밍은 개념적으로 친밀하고 직접적으로 구체화되어 있어, 대부분의 프로그래밍 언어들은 명령형임. ex) c, java, kotlin .. function addOne (arr) { let results = []; for(let i=0; i
