콘요맘떼 개발일지

React의 className 리액트는 JSX문법에 따라 class가 아닌 className을 통해 element의 클래스를 지정해준다. 그런데 클래스명을 지정해주다 보면 불필요하게 코드가 길어지거나 일관성이 떨어지는 등의 문제가 발생하기도 한다. 첫 번째 예시를 보자. 여러 클래스명이 존재할 때 클래스명은 서로 공백을 통해 구분된다. 만약 경우에 따라 클래스명이 추가될 수도 추가되지 않을 수도 있을 때 이것은 매우 귀찮은 문제를 만든다. 클래스명이 추가될지 여부도 모르는 채 공백을 추가해줘야 하며 어떠한 방식으로 표현해도 관련 코드가 보기 안 좋아진다. (공백 처리 관련하여 join을 활용한 classNameGenerator 함수를 만들어줘도 되지만 그 역시 효율적이라고 볼 수는 없다.) 두 번째 예시..

react-query는 onError 옵션을 통해 에러 처리 메소드를 지정할 수 있도록 해준다. 그런데 매 쿼리마다 onError 메소드를 지정해주는 것은 비효율적이다. 예를 들어서 서버 점검으로 인해 503번 HTTP 상태 코드가 반환되었을 때 우리는 공통적으로 서버 점검 관련 안내 메시지 혹은 화면을 보여줄 것이다. 그런데 매 쿼리가 생성될 때마다 503번 코드를 받았을 때 해당 작업을 수행하는 메소드를 지정해주는 것은 비효율적이다. 다행히 react-query는 QueryClient를 생성할 때 default option들을 지정하게 해 준다. 그 중 onError 옵션에 에러 처리 함수를 지정해주면 해당 QueryClient 내부에서 사용하는 모든 useQuery와 useMutation hook에..

React Hook Form 리액트에서 폼을 관리하는 것은 생각보다 귀찮은 작업이다. Input Validation, Form Submit 등의 작업을 수행하다보면 별 거 아닌 기능에도 코드가 매우 길어지는 것을 볼 수 있을 것이다. 다행히 React-Hook-Form이라는 라이브러리를 사용하면 ReactJS와 React Native 애플리케이션을 구현할 때 매우 적은 양의 코드로도 손쉽게 폼을 관리할 수 있다. 장점 (사실 React Hook Form은 공식 사이트에서 워낙 장점을 잘 표현해놔서 직접 확인하는 것을 추천한다. 공식 사이트 링크는 위에 있다.) (1) 코드를 적게 작성해도 된다. (2) 렌더링 관점에서 효율적이다. (폼 내에서 리렌더링이 발생할 때 최소한의 리렌더링만을 수행한다. 예를 들..

pkg 기본적으로 Node.js 애플리케이션을 실행하기 위해서는 적절한 버전의 Node.js가 설치되어 있고 필요한 npm 모듈들이 설치되어 있어야 하며 적절한 스크립트를 통해 애플리케이션을 실행해줘야 한다. Node.js 개발을 해 본 사람이라면 무슨 이야기인지 바로 이해가 되겠지만 아쉽게도 세상 모든 사람들이 Node.js 개발을 해 본 것은 아니다. 다행히 pkg라는 라이브러리를 사용하면 Node.js 애플리케이션을 컴파일할 수 있다. pkg는 컴파일 과정에서 Node.js와 필요 모듈들을 모두 포함해서 하나의 바이너리 실행 파일을 생성해준다. Node.js가 포함되기 때문에 실행 파일의 용량이 적지 않다는 것이 단점일 수 있지만 서버에서 구동되는 것이 아니라 사용자에게 배포함으로써 사용자가 직접 ..

꼭 animate가 아니더라도 Dom element가 가지는 메소드를 사용할 때 기능은 멀쩡히 동작하는데 테스트 코드에서는 해당 메소드가 undefined로 나오는 오류가 발생할 수 있다. 이는 @testing-library/jest-dom에 해당 메소드가 구현되지 않았기 때문이다. 따라서 해당 메소드를 다음과 같이 명시적으로 추가해줘야 한다. (관련 링크)

ES5에서 등장한 strict mode는 기존 Javascript가 기본으로 채택하던 sloopy mode(느슨한 모드, 공식 용어는 아님)을 해제하고 보다 엄격한 스타일로 코드를 작성하도록 사용하는 모드를 말한다. strict 모드를 사용하면 sloopy 모드에서는 넘어갈 수 있던 오류들이 에러로 변환되면서 보다 안전한 프로그램을 작성할 수 있다. 또한 자바스크립트 엔진의 최적화 작업을 방해하는 코드들을 지양하기 때문에 엄격 모드를 통해 코드를 작성하면 속도 면에서 비엄격 모드보다 우수한 모습을 보이기도 한다. (물론 엄격 모드를 쓴다고 무조건 느슨한 모드보다 빠르다는 아님) strict mode를 사용하는 방법은 간단하다. 함수 혹은 script 최상단에 'use strict'; 문장을 작성하면 해당..

데이터의 타입을 변경하는 것을 타입 변환(Type Conversion)이라고 부른다. 타입 변환에는 개발자의 의도와 무관하게 자바스크립트 엔진이 표현식을 해석하면서 자동적으로 타입을 변경하는 암묵적 타입 변환(Implicit Type Conversion)과 타입 캐스트 연산자 혹은 메소드 등을 활용하여 개발자가 의도적으로 타입을 변경하는 명시적 타입 변환(Explicit Type Conversion)이 있다. 대표적인 명시적 타입 변환 방법은 다음과 같다. 1. 문자열 타입으로 변환하기 (1) new 연산자 없이 String 생성자 호출 (2) Object.prototype.toString 메소드 활용 (3) 문자열 연결 연산자 사용 (+) (4) template literal 사용 (`${val}`) ..

웹 페이지의 컨텐츠와 스타일링을 분리하기 위해 등장한 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 (쌓임..