Bugtype

React native - canvas 이미지 흐릿한 현상 해결하기

bugtype — Sat, 7 May 2022 11:23:22 +0900

회사에서 React native 사용시, 특정 렌더러에서 이미지가 흐릿한 현상이 발생하였다.

픽셀아트를 사용해야하는데, 해당 canvas에서 pixelated를 제공안한다고 한다.

그래서, 이미지 사이즈를 늘려서 해결하려고 한다고 하였다. 하지만 2가지 문제가 발생한다.

- 사이즈가 그만큼 늘어나서 느려진다.

- 디자이너가 다시 작업해야한다.

이 문제에 대해서 고민하다가 2가지 방법을 생각해냈다.

1. 해당부분만 webview를 띄운다.

2. image pixelated를 구현한다.

- image pixlated는 k nearest neighbor 알고리즘을 이용하므로, k nearest neighbor를 구현하면 해결이 될 것이다.

이미지 흐릿한 현상 해결하기 (픽셀아트)

bugtype — Sat, 7 May 2022 10:11:19 +0900

https://bugtype.github.io/post/css/image-render/

서론

현재 회사에서는 픽셀아트를 이용해서 메타버스를 개발을 하고 있다. 픽셀 이미지를 확대하거나 축소하면 흐릿해지는 문제가 발생하였다.

문제

내부적은 이미지 사이즈를 조절하면 브라우저 내에 특정 알고리즘으로 인해 loss가 발생해서 생기는 현상이다. 이것은 당연한 증상이다. 현실은 픽셀아트처럼 사각형 형태의 이미지가 아니며, 곡선처럼 다듬어져야 하기에 그런 내부적으로 알고리즘이 있는 것이다.

해결방법

css에서 image-rendering 옵션을 주면 된다. 픽셀아트는 아래옵션을 기본적으로 해줘야 원하는 이미지를 볼 수 있을 것이다.

https://developer.mozilla.org/ko/docs/Web/CSS/image-rendering

image-rendering: pixelated;

Redux useSelector 사용시, 귀찮은 RootState(AppState)을 없애기

bugtype — Wed, 2 Feb 2022 13:53:51 +0900

현재 팀에서는 typescript를 사용하지 않아 매우 불편하다.

typescript 도입하고 싶다고 하였지만, 여러번 반려당했다. 이유를 들어보면 어느정도 이해는 되긴한다.

그래서 나는 처음으로 typescript 없이 오직 javacsript 만으로 코딩을 하기 시작하였다.

여러 불편함을 너무 발견하였고, tight하게 타입을 정의하기보다는 loose하게 작업하자고 생각하였다. 그래서 혼자서 작업을 하고 있다.

현재 내가하는 목표는 prmitive type을 넣기보다는 property(object key etc.)를 추론할 수 있도록 타입을 넣고 있다.

redux를 사용하게 되면 아래처럼 RootState를 import해서 많이 사용할 것이다.

예시) 동영상 일부장면 ( https://www.youtube.com/watch?v=FM5yyBaqqcg )

이 코드의 문제점은 useSelector를 사용하는 곳은 무조건 RootState type을 넣는다는 것이다.

export const reducers = combineReducers({
  auth: authReducer,
  form: formReducer,
  nav: navReducer,
})

export type AppState = StateType<typeof reducers>

주로 위처럼 작성해서 type을 import해서 사용할 것이다. 하지만 type을 직접 import 하기보다는 declare 파일을 정의해서 사용하면 불편함이 감소할 것이다.

// @types/index.d.ts
import 'react-redux';

import { AppState } from '../reducers';

declare module 'react-redux' {
  interface DefaultRootState extends AppState { };
}

typescript는 interface merge를 지원한다. 그러므로 위처럼 작성하면 redux에 있는 DefaultRootState와 내가 작성한 DefaultRootState를 merge하게 된다.

[Typescript] 릴리즈 노트

bugtype — Mon, 11 Oct 2021 12:13:54 +0900

4.5 Beta

type GetChars<S> =
    S extends `${infer Char}${infer Rest}` ? Char | GetChars<Rest> : never;

참고

https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/

[React-redux] 릴리즈 노트

bugtype — Mon, 11 Oct 2021 12:04:29 +0900

v8.0.0-alpha.0

React18에 맞게 코드 베이스 재작성.
connectAdvanced 제거
Typescript로 마이그레이션

v7.2.5

Subscription, useSelector의 사이즈 크기를 줄임.

v7.2.4

bindActionCreators 종속성 제거.

[React-Redux] useShallowEqualSelector()

bugtype — Mon, 11 Oct 2021 11:15:50 +0900

React-redux를 사용하면서, useSelector를 사용할 것이다. Redux Store에서 일부분을 가져오면 이전상태가 같은지 알 수 없다.

아래와 같이 이용하면, Redux의 리렌더링 현상을 막아준다.

import { useSelector, shallowEqual } from 'react-redux';

export function useShallowEqualSelector(selctor) {
  return useSelector(selector, shallowEqual);
}

[Three js] - 공 바운스

bugtype — Sun, 28 Mar 2021 12:07:59 +0900

three js를 이용해서 위에 애니메이션 효과를 구현해볼 예정이다.

일단 우리 수학에서 sin, cos에 대해서 알아야 한다.

타원에서 sin, cos은 위와 같이 움직인다.

x축은 cos을 나타내고, y축은 sin을 나타낸다.

그러면 공 바운스 효과는 위의 운동에서 반만 움직이면 된다.

        function renderScene() {
            cube.rotation.x += 0.02;
            cube.rotation.y += 0.02;
            cube.rotation.z += 0.02;

            step += 0.04;
            sphere.position.x = 20 + ( 10 * (Math.cos(step)));
            sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

            requestAnimationFrame(renderScene);
            renderer.render(scene, camera);
        }

y축 코드를 보면 math.abs(절대값)를 사용하고 있다. 그러므로 y축은 0미만이 될수가 없다.

[Typescript] storybook에서 절대 경로 설정하기

bugtype — Wed, 24 Mar 2021 22:07:30 +0900

1. 먼저 tsconfig에 path 셋팅을 한다.

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
    }
  }
}

2. storybook 셋팅에서 TsconfigPathsPlugin를 추가해준다.

// .storybook/main.js
const TsconfigPathsPlugin  = require('tsconfig-paths-webpack-plugin')
module.exports = {
  webpackFinal: async (config) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
    return config;
  },
};

tsconfig-paths-webpack-plugin 는 설치해줘야 한다.!

yarn add -D tsconfig-paths-webpack-plugin
//
npm install -D tsconfig-paths-webpack-plugin

Github Jenkins 연동 / 주의해야할 점

bugtype — Thu, 30 Apr 2020 19:07:38 +0900

https://kutar37.tistory.com/entry/Jenkins-Github-%EC%97%B0%EB%8F%99-%EC%9E%90%EB%8F%99%EB%B0%B0%ED%8F%AC-3

위에 방식대로 하면 되지만, 주의를 해야할 점이 있다.

1. github 주소를 입력할때, https://github.com... 이 아니라, git@github.com:아이디/레파지토리.git으로 해야한다.

2. 파이프라인으로 docker로 구성할 때 권한 문제도 주의해야한다.

usermod -a -G docker jenkins
chmod 664 /var/run/docker.sock
service jenkins restart (or systemctl restart jenkins.service)

Typescript Optional Chaining Prettier 에러 해결 방법

bugtype — Tue, 28 Apr 2020 17:22:31 +0900

Optional chaining 은 prettier 1.19.0 이상부터 지원하므로 prettier 버전을 확인하도록 하자.