한지 - 한조각 쓸모있는 지식 레터

In Typescript, the exclamtion is sometimes used in last of the characters.

For example,

const people = { name: 'kim' };

if (people.name!) {
  ...
}

what is meaning?

In TypeScript, the exclamation mark (!) is used to assert that a value is not null or undefined. It is called the non-null assertion operator. However, it is typically used when you are certain that the value will not be null or undefined, and it should be used with caution.

객체지향 공부에 이어

자료구조에 대해 간단히 짚어보았다.

공부했던 객체지향 개념을 적용해서

직접 스택을 구현해본 결과

interface Stack {
  readonly size: number;
  pop(): string;
  push(value: string): void;
}

  class StackTest1 implements Stack {
    private obj: any = {};
    private _size: number = 0;

    get size(): number {
      return this._size;
    }

    push = (value: string) => {
      this.obj[this.size.toString()] = value;
      this._size++;
    };

    pop = () => {
      this._size--;
      const value = this.obj[this._size.toString()];
      delete this.obj[this._size.toString()];
      return value;
    };
  }

  const stack = new StackTest1();
  stack.push("jk");
  stack.push("zl");
  stack.push("steve");
  while (stack.size !== 0) {
    console.log(stack.pop());
  }

type StackNode = {
    value: string;
    next?: StackNode;
  };

  class StackTest2 implements Stack {
    private _size: number = 0;
    private head?: StackNode;

    get size(): number {
      return this._size;
    }

    push = (value: string) => {
      const node = { value, next: this.head };
      this.head = node;
      this._size++;
    };

    pop = (): string => {
      if (this.head == null) {
        throw new Error("no more data");
      }

      const node = this.head;
      const value = this.head.value;
      this.head = node.next;
      this._size--;

      return value;
    };
  }

  const stack2 = new StackTest2();
  stack2.push("value1");
  stack2.push("value2");
  stack2.push("value3");
  while (stack2.size !== 0) {
    console.log(stack2.pop());
  }

위 두가지 방식으로 해보게됐다.

첫번쨰 방식은

올바른 방식이라기 보다는

이렇게도 할 수 있다 정도로만 봐야될것같다.

2번은 단일 연결 list라는 자료구조의 개념을 도입하여

스택을 구현한 예제이다.

회사생활을 하다보니

회사 상황에 따라 개발을 하게되곤 하는대요

최근에는 1-2년정도는

react + typescript 환경에서 웹개발을 했었습니다.

이번에 다시 react-native를 통해

개발을 할일이 생겨서

과거에 했던것들을 전부 까먹은

지금같은 상황은 반복하지 않기위해

가장 많이 쓰이는 환경 세팅 및 기능을

일목요연하게 정리해볼 예정입니다.

1. 프로젝트 생성하기

2. 개발환경 세팅하기

3. 개발을 위한 절대경로, 스타일 모듈 및 에디터 설정하기

4. firebase를 통해 push 알림 발송하기

5. Android 배포하기

6. IOS 배포하기

기획 및 자료조사

오늘 신규 서비스에 대한 아이디어가 나왔고

제품을 만들어 보기로했습니다.

서비스 컨셉과 간략한 기획을 기반으로

필요 기술과 적정 수준 (개발 노고에 대한)에

따라 아키텍쳐를 정의하였습니다.

정의

1. 주요 기능 정리

2. 아키텍쳐

3. 라이브러리 (예상)

위 3가지 큰 틀 안에서 서비스를

명세하였고, 관련해서 충분히 레퍼런스는 있는지

저작권이나 비용적으로 문제는 없는지를

파악하였습니다.

Next.js + Node.js + Mongo

결론은 크게 위 3가지로 방향을 잡았습니다.

어디로 튈지 모르는 스타트업 서비스의 특성상

mongo는 정말 찰떡이 아닌가 싶습니다.

이전과 다르게 이번 서비스는 SEO와

Scale-Up이 중요하다 판단되어

언제든 새 팀원이 추가되어도 쉽게 적용할수있게

골격이 어느정도 잡혀있다고 하는

Next.js를 채택하기로 하였습니다.

API서버로는 Node.js를 채택하였는데,

요구사항을 맞추는데 전혀 문제가 없고

개발 비용면에서도 익숙한 환경이라는 점에서

효율적이기 때문에 선택하게 되었습니다.

특히, Next.js도 처음 도입하는 마당에

서버까지 낯선 환경에 빠지게되면

큰 비용으로 기업이라는 배가 침몰하게되지는

않을까 하는 생각까지 들었습니다. (오바좀 보태서)

새로운 프로젝트를 만들어 나가며

어떤 문제 상황들을 맞딱드리는지

위 기술들이 어떤지에대해 주관적인 의견과

역경들을 남겨보도록 하겠습니다.

react-scripts > fsevents@2.0.6: Please update: there are crash fixes

create-react-app이 정상적으로 설치되어 있는 상황에서,

프로젝트 생성도중 위와 같은 에러가 뜬다면 패키지매니저들간의 충돌로 발생한 문제일수있다

다음과 같이 해결할 수 있다.

create-react-app myproject --use-npm

or

create-react-app myproject --typescript --use-npm

React의 Ref

Javascript의 사용자라면 this에 대해 많은 고민을 해봤을것이다.

this는 대체 지금 무엇을 가리키고 있는가는 초보개발자라면 한번쯤 고민해본 문제이며 이 때문에 시련을 겪어보았을것이다.

React에서의 Ref는 this의 연장선 상에 있다고 본다.

아주 쉽게 Ref에 대해 얘기한다면 자식 클래스의 변수, 메서드 등의 프로퍼티들을 현재의 클래스에 사용(호출)하기 위한 도구 수준으로 생각할 수도 있다.

예를들어, 이런것이다.

자식 클래스에 fetchUserInfo라는 메서드가 있다.

그런데, 현재 작업중인 부모클래스에서 어떠한 경우에 자식클래스의 fetchUserInfo를 호출하고 싶은 경우가 생길 수 있다.

생각보다 이런일은 자주 생긴다.

이럴때 간단히 자식클래스에 ref를 해주면 간편하게 호출할 수 있다.

자식클래스가 User와 관련되었다면, 부모클래스에서 호출한 자식클래스에 다음과 같이 작성해주면 그만이다.

<User ref={ (user) => { this.user = user;  }} />

그러고 나면 this.user.fetchUserInfo(); 와 같이 자식클래스의 메서드를 호출할 수 있게된다.

뿐만아니라 state, props등에도 접근할 수 있으니 아주 편리하다고 볼 수 밖에 없다.