2월 첫주차 기록

뒹굴뒹굴 명절

배워가기

이제 조금씩 회사 코드를 보고 있다. 오랜만에 보는 클래스 컴포넌트와 처음 써보는 mobx, 그리고 사용해보고 싶었던 graphQL까지 공부해야 할 것들이 아주 많다! 하나하나 차근차근 팀원 분들께 물어보면서 익혀나가고 있다. 이번주부터는 보안상 문제가 되지 않는 선에서(!) 새로 알게 되거나 고민해본, 개념적인 내용들 위주로 정리해보려고 한다.

Node의 child_process

노드에서 다른 프로그램을 실행하고 싶거나 명령어를 수행하고 싶을 때 사용하는 빌트인 모듈이다. 노드가 가동되는 프로세스 외에 별도의 프로세스를 가동하여 명령을 수행하고 결과값을 노드 프로세스에 돌려준다.

Ref https://nodejs.org/api/child_process.html https://darrengwon.tistory.com/1195

처음 보는 webpack plugin들

• BannerPlugin 번들링된 파일의 상단에 배너(텍스트)를 달아주는 플러그인이다. 결과물에 빌드 정보나 커밋 버전 내용 등을 추가할 수 있다.

• ProvidePlugin - 모듈을 import 또는 require 할 필요 없이 자동으로 로드한다. 자주 사용되는 모듈을 미리 등록하여 매번 작성하지 않게 해준다.

  Copy

  new webpack.ProvidePlugin({
    identifier: "module1",
    // ...
  });

  프로젝트에서는 Buffer 를 ProvidePlugin으로 사용하고 있는데, 왜 그런지 찾아봤다.

  webpack ver5 이후부터는 Node.js의 API를 자동으로 지원하지 않기 때문에 polyfill로 사용할 수 있도록 만들어주거나, 모듈을 전역 API로 사용할 수 있게끔 ProviderPlugin을 사용해야 한다.

Ref https://webpack.js.org/plugins/banner-plugin/ https://velog.io/@cckn/웹팩-플러그인-사용법-및-주요-플러그인 https://viglucci.io/how-to-polyfill-buffer-with-webpack-5

React가 제공하는 빌트인 함수/프로퍼티

• React.Children.toArray React.Children은 불투명(Opaque) 자료 구조인 this.props.children를 다루는 유틸리티 함수들을 제공한다.

  💡 불투명 자료구조 라이브러리나 API에서 제공하는 자료형들은 대부분 구조체가 아니라, 그냥 메모리 주소만 담고 있는 포인터들이다. 객체 내부의 데이터 구조를 감추고 대신 이러한 객체를 다룰 수 있는 API 함수를 통해서만 객체를 조작하도록 하기 위해 사용된다.

• React.isValidElement()

• React.cloneElement()

  Copy

  React.cloneElement(element, [config], [...children]);

  element를 기준으로 새로운 React 엘리먼트를 복사하고 반환한다 config는 key와 ref 그리고 모든 새로운 props를 포함한다. 새로운 엘리먼트에는 원본 엘리먼트가 가졌던 props가 새로운 props와 얕게 합쳐진 뒤 주어진다. 새로운 자식들은 기존의 자식들을 대체한다. config에 key와 ref가 없다면 원본 엘리먼트의 key와 ref는 그대로 유지된다. 부모 컴포넌트에서 받은 children prop을 추가하거나 수정하고 싶을 때 유용하게 사용할 수 있다. children prop을 여러번 반복해서 렌더링하거나 새로운 prop을 추가하고 싶을 때, 또는 Header와 같은 공용 컴포넌트에 서로 다른 children prop을 넘겨줄 때 사용한다. cloneElement()를 사용할 때 children을 새롭게 만드는 것은 아니라는 사실에 유의하자.

Ref https://ko.reactjs.org/docs/react-api.html https://soooprmx.com/cobjetive-c-불투명-타입/ https://blog.logrocket.com/using-react-cloneelement-function/

JSX IntrinsicElements

JSX의 global namespace에 원하는 요소를 넣어 해당 요소들을 JSX 렌더링 시 태그처럼 활용할 수 있다.

declare namespace JSX {
  interface IntrinsicElements {
    foo: any;
  }
}

<foo />; // 성공
<bar />; // 오류

Ref https://typescript-kr.github.io/pages/jsx.html

typescript abstract class

추상 메서드나 추상 필드는 아직 실행(implementation)이 제공되지 않은 프로퍼티로, 반드시 추상 클래스(abstract class) 안에 있어야 한다. 일반 클래스에서 사용 시 자동으로 초기화가 되지 못하기 때문이다.

abstract class Base {
  abstract getName(): string;

  printName() {
    console.log("Hello, " + this.getName());
  }
}

const b = new Base();
// 🚨 Cannot create an instance of an abstract class.

추상 클래스는 new 키워드로 인스턴스를 만들 수 없다. 클래스를 상속 받아 추상 멤버들을 구현해줘야 한다.

class Derived extends Base {
  getName() {
    return "world";
  }
}

const d = new Derived();
d.printName();

추상 클래스의 모든 추상 멤버들을 구현하지 않으면 에러가 발생한다.

class Derived extends Base {
  // ...
}

// 🚨 Non-abstract class 'Derived' does not implement inherited abstract member 'getName' from class 'Base'.

추상 클래스는 서브 클래스의 베이스 클래스로 쓰인다. 추상 멤버가 없는 클래스, 즉 일반적으로 사용하는 클래스는 굳이 칭하자면 구현 클래스(concrete class)라고 부른다.

Ref https://www.typescriptlang.org/docs/handbook/2/classes.html#abstract-classes-and-members

typescript의 isArrayLike()

인자가 null이 아니고 Symbol.iterator 를 함수 프로퍼티로 갖고 있는지 확인한다.

const isArrayLike = (obj) =>
  obj != null && typeof obj[Symbol.iterator] === "function";
isArrayLike([1, 2, 3]); // true
isArrayLike(document.querySelectorAll(".className")); // true
isArrayLike("abc"); // true
isArrayLike(null); // false

드로잉 클래스

진짜 그만 그려야지. 강의 두 개 다 들었다 ㅎㅎ

이런 대작도 그려서 아이패드 배경화면도 하고,

움직이는 애니메이션도 따라 그려봤다. 이제 스스로의 창의성을 발휘할 때다. 과연…

기타

슬기로운 개발생활

Ref https://github.com/dizy64/wise-developer-life

[6월 우아한테크세미나] 디자인시스템이 가져온 변화

Ref https://www.youtube.com/watch?v=aVHLcQzcRbA&t=4s

React에서 Mobx 경험기 (Redux와 비교기)

3년 전 글이라 지금은 사용되지 않는 기능들도 있지만, 확실히 Redux를 정말 싫어했던 나로써는 MobX도 시도해보고 싶은 방식이다. 글에서 기억에 남는 MobX의 특징들을 정리하자면 아래와 같다.

• 객체지향적이다. class를 제대로 사용할 수 있다.
• 렌더링할 state를 관찰대상으로 지정하고, state를 변경하면 리액트 컴포넌트가 리렌더링된다.
• state의 불변성을 유지하기 위한 노력이 불필요하다. state를 객체 리터럴로 사용하는 것이 아니라, class로 선언하기 때문에 프로퍼티를 동적으로 추가하기가 간편하다.
• 항상 같은 instance를 참조하기 위해서 store는 싱글톤으로 유지해야 한다.
• 모델 Layer를 분리하기 때문에(비즈니스 로직을 분리) 컴포넌트는 view의 렌더링에만 집중할 수 있다.
• 별도의 서드파티 라이브러리 없이 비동기 함수를 호출하는 도구를 제공한다.

Ref https://techblog.woowahan.com/2599/

마무리

일주일의 절반을 설 연휴로 날리고… 그저 뒹굴뒹굴 놀았다. 코로나 3만명 시대라니. 그동안 무념무상이었다가 다시 경각심이 생겨서 약속을 취소했다. 빨리 사무실 가보고 싶은데 😞 다시 코로나 걸리는 건 정말 싫다. 오미크론은 증상이 심하지 않다 해도, 격리생활 자체가 너무 싫다.

회사 코드를 보다보니 더 실감도 나고 빨리 티켓도 처리해보고 싶다. 또 하다보면 알 수 없는 에러들에 막혀 머리 아프고 삽질하는 시간들이 많겠지만, 그게 내가 선택한 길이니까 🤷‍♀️ 요즘 왜 기력이 남아도는지 모르겠다. 직장인 조와!

수술한 부위도, 무릎도 많이 괜찮아져서 드디어 필라테스도 등록했다. 거금을 들어 듀엣 필라테스로… 기력이 남아도는 걸 넘어서 짱 쎈 사람이 될거다.