콘요맘떼 개발일지

css를 활용해서 특정 element가 텍스트를 n줄까지만 보여주고 그 이상은 ellipsis(...) 처리하고 싶다면 아래와 같이 코드를 작성해주면 된다. 예시에서는 2줄을 기준으로 설정하였으며 빨간색으로 밑줄 친 부분에 n줄에 해당하는 값을 넣어주면 된다. 참고로 line-height를 지정해준 것은 텍스트가 2줄 이상인 경우 잘림 현상이 발생하는 것을 방지하기 위함이다. line-height를 지정해주지 않으면 g와 같은 일부 글자가 잘림 현상이 발생하기 때문에 루트 단에서 기본적으로 line-height를 normal로 지정하는 방법이 개인적으로 좋은 것 같다. 'n줄까지만 보여준다'는 단순한 기능인데 코드가 생각보다 길다. 만약 scss를 활용한다면 mixin을 만들어서 해당 기능을 보다 편리하..

이따금씩 자바스크립트 단에서 특정 element가 오버플로우 중인지 여부를 파악해야 할 때가 있다. 아래와 같은 경우를 예로 들어보자. 유튜브에서는 영상 설명이 일정 길이 이상의 텍스트일 때는 더보기 버튼을 토글함으로써 전체 내용 확인, 간략히 확인 기능을 제공하고 있다. 그렇다고 텍스트가 매우 짧을 때에도 더보기 기능을 제공할 필요는 없다. (Lofi 코딩은 그냥 코딩할 때 자주 들어서 골랐다) 이럴 때 아래와 같이 코드를 작성하면 특정 element가 오버플로우중인지 여부를 실시간으로 감지할 수 있다. defineIsOverflowing 함수는 x축 기준, y축 기준으로 element가 오버플로우중인지 여부를 검사한다. 물론 두 축 중 하나만 검사하고 싶은 경우 검사할 축을 인자로 전달받는 식으로 조..

코드를 테스트하다보면 비동기 코드 역시 테스트의 범위에 포함되는 순간이 온다. 그런데 일반적인 자바스크립트 코드가 실행될 때와 마찬가지로 Jest로 작성한 테스트 코드 역시 비동기 코드를 처리하기 위해서는 추가적인 작업이 필요하다. 다음과 같은 간단한 예시를 생각해보자. 1) A라는 버튼 컴포넌트를 테스트한다. 2) A버튼을 누르면 비동기로 어떠한 작업이 처리된다. 3-1) 해당 작업이 성공하면 성공했을 때의 콜백을 실행한다. 4-1) 해당 작업이 실패하면 실패했을 때의 콜백을 실행한다. 테스트도 그렇게 어려워보이지는 않는다. mocking을 통해 비동기 작업의 결과를 지정한 다음 각각의 경우에 callback 함수가 실행되는지 여부를 검사하면 될 것이다. 그런데 막상 각 콜백 함수를 toBeCalled..

jest.spyOn(object, method) jest.spyOn은 특정 객체안에 담긴 메소드를 가짜로 대체하지 않고 그 호출 여부, 호출 방식 등의 정보를 활용하기 위해 사용한다. 첫 번째 인자로 객체를, 두 번째 인자로 메소드 명을 전달해주면 해당 메소드의 Jest 가짜 함수(mock function)가 반환된다. 그렇기 때문에 반환된 함수는 expect와 함께 toBeCalled와 같이 호출 관련 정보를 테스트하거나 혹은 더 나아가서 mockReturnValue, mockmockImplementation 등의 mock function 메소드를 통해 그 내부를 바꿔칠 수 있다. 바로 이 점에서 jest.spyOn이 빛을 발한다. 그냥 jest.fn( )을 활용하여 가짜 함수를 생성한 후 직접 객체의..

에러 메시지에서 볼 수 있다시피 jest.mock에서는 범위 바깥의 변수를 함부로 참조할 수 없다. 이러한 에러가 발생하는 이유는 jest의 모킹이 모듈 최상단으로 호이스팅되기 때문이다. 그렇기 때문에 jest.mock( )시점에서 봤을 때 해당 변수는 존재하지 않기 때문에 Reference Error이 발생하는 것이다. 해결 방법은 에러 메시지의 마지막 부분에서 찾을 수 있다. 간단하게 참조할 변수의 이름 앞에 mock를 붙여주면 된다. 다음 예시는 카테고리의 목록을 fetch한 후 그 목록을 보여주는 Categories 컴포넌트의 테스트 코드이다. 실제로 fetch 작업을 수행할 필요는 없기 때문에 testUtils 파일에 미리 정의해놓은 가짜 카테고리 목록을 가져와서 보여주기로 했다. 그러나 그냥 ..

현재 반응형 웹을 구현하는 가장 핵심 방법은 미디어쿼리를 사용하는 것이다. 그러나 미디어 쿼리는 한 요소에 대해 여러 화면에 대한 CSS 코드를 작성하기 때문에 전체적인 코드량이 매우 증가한다는 단점을 가진다. 만약 최소 크기, 최대 크기를 지정하는 정도의 간단한 반응형 스타일링이라면 css의 clamp 함수를 활용하는 것도 하나의 방법이다. clamp(min, preferred, max) clamp는 세 개의 값을 인자로 받는다. 첫 번째는 최소값, 두 번째는 일반적으로 적용되는 값, 마지막은 최대값이다. 즉 두 번째 값을 적용하되 그것이 최소값과 최대값의 범위를 벗어나지는 않는다. 일반적으로 두 번째 인자인 선호값(preferred value)에는 vw, vh 등 viewport를 기준으로 한 값이 ..

모킹 (Mocking) 모킹은 유닛 테스트 코드를 작성할 때 테스트하는 코드가 의존하는 일부분을 가짜로 대체하는 기법을 의미한다. 모킹의 대상은 테스트 목적과 거리가 있거나 테스트 코드 구현 혹은 실제 테스트 과정에서 지나치게 리소스를 차지하는 코드이다. 혹은 DB에 접근하는 것과 같이 side effect를 유발시키거나 결과의 일관성을 방해하는 코드들도 모킹을 적용하는 것이 좋다. 모킹 기법을 활용하면 특정 일부분만을 테스트하는 유닛 테스트의 목적에 부합하면서 빠르고 가벼우면서도 매번 동일한 결과를 반환하는 테스트를 수행할 수 있다. 자바스크립트의 테스팅 라이브러리인 Jest는 여러 가지 모킹 기능을 지원한다. 오늘은 그 중에서도 jest.fn( ) 메소드를 다뤄볼 것이다. jest.fn( ) jest..

useLayoutEffect와 useEffect는 모두 의존값의 변화에 따라 side effect 함수를 실행시킨다는 점에서 유사한 성질을 가진다. 그러나 실제 그것이 동작하는 방식에 있어서 실제로 그것을 활용하는 방향성에 있어서 차이점을 지닌다. useEffect useLayoutEffect 실행 순서 컴포넌트 렌더링 → 화면 갱신 → side effect 컴포넌트 렌더링 → side effect → 화면 갱신 side effect 함수 실행 방식 비동기 동기 useEffect문을 사용해서 DOM element의 style을 지정하는 등 mutation을 일으키는 경우 이미 화면이 갱신된 이후에 또 다시 화면이 갱신되면서 '깜빡거림'(flickering)이 발생한다. 이는 SPA의 장점을 망치는 현상 ..

웹 클라이언트를 개발하다 보면 콘텐츠의 양에 따라 스크롤바의 유무가 변경되는 경우가 존재한다. 이렇게 되는 경우 스크롤바의 유무에 따라 내부 content 사이즈가 변경되기 때문에 UI적으로 변화가 발생한다. 이는 사용자 입장에서 매우 보기가 안 좋다. 스크롤바가 존재하던 존재하지 않던 동일한 레이아웃을 보여줄 수 있다면 편리하지 않을까? 이 때 사용할 수 있는 CSS 속성이 바로 scrollbar-gutter이다. scrollbar-gutter은 스크롤바가 할당될 위치를 미리 점지해줄 수 있다. scrollbar-gutter에 일반적으로 지정해줄 수 있는 값은 세 가지가 있다. (1) auto 기본값이다. overflow가 scroll이거나 auto이면서 해당 element가 overflow중이라면, ..

attr( )을 활용하면 다른 attritube와 마찬가지로 data-attribute에 담긴 값을 가져올 수 있다. 그러나 이전에 data-attribute를 소개하는 포스트(링크)에서 해당 방법은 content를 제외한 경우에는 사용을 지양해야 한다고 언급했다. 분명 값은 가져올 수 있는데 왜 사용하면 안 된다고 하는 것일까? 문제의 원인은 attr( )가 가져오는 값은 string이라는 점이다. 따라서 content를 제외한 경우에는 값을 가져와도 쓸모가 없다. 예를 들어서 color을 지정해주기 위해서 "#FFFFFF"라는 값을 data-attribute로 전달해줘도 이것은 헥스 코드가 아닌 문자열로 인식되기 때문에 색상이 적용되지 못한다. 마찬가지로 10, 5px, 3rem, 100vw와 같은 ..