ziglog

    Search by
    • Home
    • 6월 2주차 기록

    6월 2주차 기록

    June 11, 2022 • ☕️☕️ 9 min read

    뭐가 그리 문제야

    배워가기

    컴포넌트 인터페이스 설계

    컴포넌트 인터페이스를 설계할 때, “타입 강제” vs “어느정도 사용자에게 책임을 위임” 사이에서 적절히 줄다리기를 해야한다.

    한 컴포넌트에서 많은 케이스들에 대응하기 위해, 상황별 타입을 강제하려다보면 인터페이스의 복잡성과 개발 리소스가 많이 들어가게 된다.

    하나의 컴포넌트에서 케이스가 많을 때는 컴포넌트를 사용하는 사용자에게 어느정도 책임을 넘겨줌으로써, 적당한 타협점을 찾아야 효율적으로 개발이 가능할 수 있다.

    Node 타입 알아보기

    Node.nodeType을 이용하여 Node의 타입을 체크할 수 있다. elements, text, comments와 같은 노드 각각의 타입을 구분해준다. 구체적인 예시는 아래와 같다.

    • Node.ELEMENT_NODE (1) - <p>나 <div>와 같은 Element node
    • Node.ATTRIBUTE_NODE (2) - Element의 속성
    • Node.TEXT_NODE (3) - Element나 Attr 안에 있는 실제 Text 노드
    • …
    • Node.DOCUMENT_NODE (9) - Document 노드

    참고로, Document.documentElement는 문서의 루트 요소를 나타내는 Element를 반환한다. 예를 들면, <html> 요소가 있다.

    Copy 
    document === document.documentElement; // false
document.documentElement === document.querySelector("html"); // true
document.nodeType === 9; // true
document.documentElement.nodeType === 1; // true

    이벤트 리스너의 event.target은 기본적으로 EventTarget으로 추론되는데, nodeName과 nodeType으로 Element인지 여부를 판별할 때 위같은 방식을 활용할 수 있을 것이다.

    Ref https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType https://developer.mozilla.org/ko/docs/Web/API/Document/documentElement

    react-query의 옵션들

    enabled 옵션은 query에서 사용할 값이 유효할 때만 useQuery가 동작하도록 하는 옵션이다. 주로 다른 useQuery의 결과값을 사용해야 하는 useQuery의 경우, 먼저 실행되는 useQuery가 Hydration이 되어있지 않다면 첫 data가 undefined라서 무의미해져버리는 문제를 해결하기 위해 사용한다.

    refetchInterval은 주기적으로 refetch(polling)해주는 옵션이다. default 값이 있어서 주기적으로 refetch를 하는데,number를 넣어 주기를 조절할 수 있다. function을 넣으면 주기적으로 refetch한 결과값을 해당 function에 전달해서 호출한다.

    react-router-dom v6

    5버전 이하에서는 Link에서 다음 페이지에 값을 넘길 때 넘길 때 사용하는 state가 to prop 안에 있었지만, 6버전부터는 to와 같은 레벨로 위치가 변경되었다.

    Copy 
    // before
<Link to={{ pathname: ‘’, state: { } }} />

// after
<Link to={{ pathname: ‘’ }} state={{ }}/>

    타입스크립트의 d.ts 파일과 모노레포

    모노레포 공통 모듈의 extension.d.ts 파일은 어디까지나 공통 모듈만 사용할 수 있다. 프로젝트는 빌드될 때 각 프로젝트 환경 내에 있는 tsconfig 영역에 있는 declaration 파일만 사용하기 때문에, 프로젝트 외부에 있는 extension.d.ts 파일에서 declare한 타입을 사용하는 공통모듈을 사용할 경우, 프로젝트 extension.d.ts 파일에 동일한 타입을 declare해야한다. 그렇게 하지 않으면 개발 중에는 타입체킹에 문제가 없지만, 빌드할 때 해당 타입을 찾을 수 없다는 에러가 발생한다.

    메시지를 수신한다는 것

    어떤 메시지를 수신한다는 것은, listener라는 객체가 listener.listen('message')와 같은 방식으로 수신하고 있는 것이다.

    아래 예시 코드에서, Sender가 전송자가 된다.

    Copy 
    class Sender {
  send(listener) {
    listener.listen;
  }
}

    useRef vs createRef

    createRef는 함수로, 리렌더할 때마다 인스턴스를 만든다. 따라서 리렌더 간 값이 보장되지 않는다. 하지만! 이는 함수 컴포넌트에서 사용했을 경우다. 함수 컴포넌트는 인스턴스를 생성하지 않으며, 리렌더링할 때마다 매번 새롭게 함수를 생성한다. 함수 컴포넌트의 createRef는 리렌더링할 때마다 새로운 인스턴스를 만들기 때문에, 렌더링 전후 값을 보장해주지 않는다! 따라서 함수 컴포넌트에서 사용할 수는 있지만, 권장하지는 않는다.

    그러나 클래스 컴포넌트는 리렌더링할 때마다 인스턴스를 새로 만드는 것이 아니기 때문에, 클래스 컴포넌트의 createRef는 리렌더링 전후에 값을 보장해준다.

    클래스 컴포넌트는 unmount되지 않는 이상 계속 같은 인스턴스를 사용한다. 클래스 컴포넌트의 constructor에 console.log를 찍어서 확인할 수 있다!

    useRef는 이름에서도 알 수 있듯이 hook이며, 컴포넌트 생애주기 동안 유지된다. 리렌더링 시에도 값이 바뀌지 않는다. 매번 새로운 인스턴스를 생성하지 않기 때문이다. hook이기 때문에 함수 컴포넌트에서만 사용 가능하다. 기존의 createRef에, useMemo를 더한 느낌이다.

    Ref https://www.geeksforgeeks.org/difference-between-useref-and-createref-in-reactjs/ https://tecoble.techcourse.co.kr/post/2021-05-15-react-ref/

    normalize

    normalize() 메서드는 주어진 문자열을 유니코드 정규화 방식(Unicode Normalization Form)에 따라 정규화된 형태로 반환한다. 만약 주어진 값이 문자열이 아닐 경우에는 우선 문자열로 변환 후 정규화한다.

    Copy 
    const name1 = "\u0041\u006d\u00e9\u006c\u0069\u0065";
const name2 = "\u0041\u006d\u0065\u0301\u006c\u0069\u0065";

console.log(`${name1}, ${name2}`);
// expected output: "Amélie, Amélie"
console.log(name1 === name2);
// expected output: false
console.log(name1.length === name2.length);
// expected output: false

const name1NFC = name1.normalize("NFC");
const name2NFC = name2.normalize("NFC");

console.log(`${name1NFC}, ${name2NFC}`);
// expected output: "Amélie, Amélie"
console.log(name1NFC === name2NFC);
// expected output: true
console.log(name1NFC.length === name2NFC.length);
// expected output: true

    유니코드 등가성이란? 유니코드 등가성(Unicode equivalence)은 특정한 일련의 코드포인트들이 반드시 동일 문자를 대표해야 하는 유니코드 문자 인코딩 표준의 사양이다.

    Ref String.prototype.normalize() - JavaScript | MDN 유니코드 등가성 - 위키백과, 우리 모두의 백과사전

    WAF (웹 방화벽)

    WAF는 Web Application Firewall, 즉 웹 방화벽을 의미한다. 일반적인 네트워크 방화벽 (Firewall)과는 달리 웹 애플리케이션 보안에 특화되어 개발된 솔루션이다.

    웹방화벽의 기본 역할은 SQL Injection, Cross-Site Scripting(XSS)등과 같은 웹 공격을 탐지하고 차단하는 것이다. 웹방화벽은 직접적인 웹 공격 대응 이 외에도, 정보유출방지솔루션, 부정로그인방지솔루션, 웹사이트위변조방지솔루션 등으로 활용이 가능하다.

    웹방화벽은 사용자의 요구에 따라 1세대부터 3세대까지 점점 진화해왔다. 3세대 웹방화벽인 ‘지능형 웹방화벽’은 웹 공격 유형 별로 블랙리스트 탐지, 화이트리스트 탐지 및 웹 트래픽 컨텐츠 분석 등의 기법들을 결합하여 공격을 탐지하는 방식을 사용한다.

    01

    Ref https://www.pentasecurity.co.kr/web-application-firewall/

    이것저것

    • 타입스크립트에서 Partial 유틸 타입을 거치면 1-depth의 모든 필드가 optional이 된다.

    • Date 타입의 인스턴스를 ‘yyyy-mm-dd’ 형태의 스트링으로 바꾸고자한다면 date.toLocaleDateString(‘en-CA’)로 바꿀 수 있다.

    • React.cloneElement() - 지정한 Element를 복사해 반환한다. 추가적으로 children과 props를 같이 넘겨줄 수 있어서 필요 시에 부모에서의 자식으로 props를 전달해야 하는 경우 사용할 수 있다.

    • ignore file에서 *.js 와 같이 모든 js 파일을 무시하고자 선언했을 때, 특정 파일은 무시하고 싶지 않을 때는 ![파일명]으로 선언하여 사용하면 된다. (ex !.eslintrc.js)

    • ARIA: section role은 추상적인 role로 사용하지 않는걸 권장한다.

    • react-scripts(CRA) 로 test 실행 시, env 에 아래 값들이 기본으로 들어간다.

      Copy 
      process.env.BABEL_ENV = "test";
process.env.NODE_ENV = "test";
process.env.PUBLIC_URL = "";

    • react-hook-form - shouldUnregister 옵션을 사용하면, register로 관리하던 name을 가진 DOM이 unmount되었을 때 react-hook-form에서 관리하던 값도 제거한다. (default는 false다.)

    • 화살표 함수에서도 제네릭을 사용할 수는 있다. JSX를 사용하는 .tsx 파일에서만 안되는 것이었다. JSX 구문에서는 파싱할 때 헷갈려서 <T, >와 같은 방식으로 쓰면 사용할 수 있다고는 한다.

    기타

    Lighthouse를 CI에 적용하기

    크롬에서 기본적으로 Lighthouse CI를 제공하고 있었다. 성능 측정 및 최적화를 위한 lighthouse를 주기적으로 활용하는 데 큰 도움이 될 것 같다! 설정도 간단한 편이고, 보고서도 잘 만들어준다.

    Lighthouse CI를 github actions와 연동하여 코드를 푸쉬할 때마다 CI를 돌릴 수 있다. Lighthouse CI에서 설정한 스코어에 도달하지 못하면 CI를 실패하도록 구성할 수 있다. Lighthouse 실행 점수도 바로 보여준다.

    Ref https://fe-developers.kakaoent.com/2022/220602-lighthouse-with-github-actions/

    React-Query ver.4

    React-Query의 ver.4(베타) 문서가 등장했다. 레포 이름을 react-query에서 query로 바꾼 것으로 보아 React를 넘어 쭉쭉 뻗어나가려보다.

    Ref https://github.com/TanStack/query/releases/tag/v4.0.0-beta.1 https://github.com/TanStack/query https://react-query-beta.tanstack.com/

    CSS 뷰포트 크기의 상대 단위

    CSS 뷰포트 크기의 상대 단위였던 vw, vh, 등등에서 나아가 svw, lvw, dvw, vw와 같은 세부적인 종류들이 추가되기 시작했다..! 지금 있는 것도 잘 모르는데. 머리가 터진다. 🤯 브라우저는 얘를 어떻게 아는 걸까. 불편한 대로 사는 나같은 사람은 자꾸 뭐가 이렇게 사용자 요구에 따라 세밀해지고 다양해지는 것에 거부감이 든다. 그치만 개발자란… 무슨 소릴 하는 건지 모르겠다. 나도 브라우저에 뒤쳐지지 않도록 공부해야겠다.

    Ref https://sorto.me/docs/Web/CSS/length/#뷰포트-상대-길이-단위

    마무리

    월요일 현충일을 쉬고 오니 조금 나은 것 같다. 주4일제 조아…

    주1회 출근 괜찮은 것 같다. 몸이 찌뿌둥해질 때쯤 이유를 가지고 밖에 나갈 수 있다! 모두가 만류하던 롯데타워 31층 밥은 맛있었다. 같이 간 팀원 두 분도 만족스러운 평을 남기셨다. 다음에 셋이 같이 또 가야겠다.

    내가 커리어적으로 성공하고 싶은 건지, 아니면 그냥 내 삶의 반경에 있는 사람들과 평화롭고 즐겁게 살아가고 싶은 건지 모르겠다. 완전히 후자라고 생각했는데, 후자가 어느 정도 갖춰져서 그런 건지 자꾸 욕심이 생기는 것 같다. 아무튼 여전히 꿈은 없다. 그냥 하루하루 의미있고 재밌게 살면 된다! 언제 죽을지도 모르는데…

    이럴 때는 김용명 아저씨의 ‘아무노래’를 떠올려본다. 왜들 그리 다운돼있어~ 뭐가 그리 문제야~.

    Relative Posts:

    6월 3주차 기록

    June 18, 2022

    6월 1주차 기록

    June 4, 2022
    zigsong

    지그의 개발 블로그

    RotateLinkImg-iconRotateLinkImg-iconRotateLinkImg-icon