콘요맘떼 개발일지

프로세스 (Process) 운영체제로부터 자원을 할당받은 작업의 단위이다. 프로그램이 실행되면 해당 프로그램 파일이 컴퓨터 메모리로 올라가게 되는데 이 동적인 상태의 프로그램을 프로세스라고 부른다. 스레드 (Thread) 프로세스 내에서 실행되는 흐름의 단위이자 프로세스를 구성하는 더 작은 실행 단위의 개념이다. 프로세스는 실행될 때 운영체제로부터 할당받은 독자적인 메모리 공간을 사용하지만 스레드는 같은 프로세스 내 다른 스레드와 메모리 공간을 공유한다. (Code, Data, Heap 등. 대신 Stack은 각 스레드 별로 따로 할당받는다.) 싱글 스레드 한 프로세스에서 하나의 스레드를 실행하는 것을 말한다. 장점 - 스레드가 하나밖에 존재하지 않기 때문에 공유 자원 접근에 대해 신경쓰지 않아도 된다...

웹 페이지의 컨텐츠와 스타일링을 분리하기 위해 등장한 CSS는 여러 가지 문제점을 가지고 있었다. 그 중 대표적인 문제점들은 다음과 같았다. (1) Global namespace : 모든 스타일이 Global로 처리되기 때문에 중복되지 않는 클래스명을 사용해야 함 (2) Dependencies : CSS 파일 사이의 의존 관계를 관리하기 힘듦 (3) Dead code elimination : 기능을 추가, 삭제, 변경할 때 관련된 CSS 코드를 처리하는 것이 번거롭다. (4) Sharing constants : CSS와 JS간 값을 공유할 수 없는 문제 (data 속성을 활용하는 방법이 있기는 하지만 현실적인 사용을 위해서는 제약이 많다.) (5) Non-deterministic Resolution : ..

캐노니컬 태그 (Canonical Tag) 캐노니컬 태그는 한 페이지를 가리키는 여러 주소가 존재할 때 그 중 어떤 주소가 메인(원본)인지 알려주는 태그이다. 구글 문서에도 볼 수 있듯이 한 페이지가 여러 URL을 통해 접근되거나 유사한 컨텐츠가 서로 다른 페이지에 존재하는 경우(ex. 특정 컨텐츠의 모바일 전용 페이지, 데스크탑 전용 페이지) 검색 엔진은 표준 URL 하나를 기준으로 크롤링을 수행하고 나머지는 크롤링 빈도를 고의적으로 낮춘다. 만약 캐노니컬 태그를 사용하지 않는다면 검색 엔진은 임의로 표준 URL을 판단할 것이다. 그것은 우리가 원하는 표준 URL과 일치하지 않을 수도 있고 검색엔진마다 다른 표준 URL이 지정되는 결과로도 이어질 수 있다. 캐노니컬 태그를 사용하여 분명하게 표준 URL..

z-index는 매우 간단하게 활용할 수 있는 CSS 속성이다. 어떠한 element에 position과 z-index를 지정해주면 z-index값이 높은 element는 위로, z-index값이 낮은 element는 아래로 내려가게 된다. 매우 간단하면서도 이 정도만 알아도 꽤 많은 프로젝트들을 진행하는 데에는 문제가 없었을 것이다. 그런데 opacity를 적용해서 z-index가 제대로 적용되지 않는 순간부터 문제가 발생한다. opacity는 투명도를 처리하고 z-index는 element의 layer를 다루는데 왜 서로 영향이 있는 것일까? 그에 대해 이해하기 위해서는 Stacking Context, Stacking Order 두 가지 개념에 대한 이해가 필요하다. Stacking Order (쌓임..

테스트 과정에서 리액트 훅을 테스트할 수 있게 해주는 @testing-library/react-hooks의 renderHook 메소드를 실행할 때 발생할 수 있는 에러이다. 해당 에러와 관련돼서 우선적으로 살펴볼 것은 @testing-library/react-hooks 모듈의 peer dependency이다. 공식 홈페이지에서 제시한 바에 따르면 해당 모듈은 react-test-rerenderer, react-dom 두 종류의 rerenderer에 의존성을 가지며 둘 중 하나라도 설치되어있으면 사용이 가능하다. (따라서 둘 중 하나가 설치되었는지 확인하는 것이 우선 필요하다. 참고로 renderer dependency는 --save -dev 옵션으로 설치해주면 된다.) 만약 둘 중 하나의 renderer..

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 파일에 미리 정의해놓은 가짜 카테고리 목록을 가져와서 보여주기로 했다. 그러나 그냥 ..