Bugtype

회사에서 React native 사용시, 특정 렌더러에서 이미지가 흐릿한 현상이 발생하였다. 픽셀아트를 사용해야하는데, 해당 canvas에서 pixelated를 제공안한다고 한다. 그래서, 이미지 사이즈를 늘려서 해결하려고 한다고 하였다. 하지만 2가지 문제가 발생한다. - 사이즈가 그만큼 늘어나서 느려진다. - 디자이너가 다시 작업해야한다. 이 문제에 대해서 고민하다가 2가지 방법을 생각해냈다. 1. 해당부분만 webview를 띄운다. 2. image pixelated를 구현한다. - image pixlated는 k nearest neighbor 알고리즘을 이용하므로, k nearest neighbor를 구현하면 해결이 될 것이다.

서론 현재 회사에서는 픽셀아트를 이용해서 메타버스를 개발을 하고 있다. 픽셀 이미지를 확대하거나 축소하면 흐릿해지는 문제가 발생하였다. 문제 내부적은 이미지 사이즈를 조절하면 브라우저 내에 특정 알고리즘으로 인해 loss가 발생해서 생기는 현상이다. 이것은 당연한 증상이다. 현실은 픽셀아트처럼 사각형 형태의 이미지가 아니며, 곡선처럼 다듬어져야 하기에 그런 내부적으로 알고리즘이 있는 것이다. 해결방법 css에서 image-rendering 옵션을 주면 된다. 픽셀아트는 아래옵션을 기본적으로 해줘야 원하는 이미지를 볼 수 있을 것이다. https://developer.mozilla.org/ko/docs/Web/CSS/image-rendering image-rendering: pixelated;

현재 팀에서는 typescript를 사용하지 않아 매우 불편하다. typescript 도입하고 싶다고 하였지만, 여러번 반려당했다. 이유를 들어보면 어느정도 이해는 되긴한다. 그래서 나는 처음으로 typescript 없이 오직 javacsript 만으로 코딩을 하기 시작하였다. 여러 불편함을 너무 발견하였고, tight하게 타입을 정의하기보다는 loose하게 작업하자고 생각하였다. 그래서 혼자서 작업을 하고 있다. 현재 내가하는 목표는 prmitive type을 넣기보다는 property(object key etc.)를 추론할 수 있도록 타입을 넣고 있다. redux를 사용하게 되면 아래처럼 RootState를 import해서 많이 사용할 것이다. 이 코드의 문제점은 useSelector를 사용하는 곳은..

4.5 Beta type GetChars = S extends `${infer Char}${infer Rest}` ? Char | GetChars : never; 참고 https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/

v8.0.0-alpha.0 React18에 맞게 코드 베이스 재작성. connectAdvanced 제거 Typescript로 마이그레이션 v7.2.5 Subscription, useSelector의 사이즈 크기를 줄임. v7.2.4 bindActionCreators 종속성 제거.

React-redux를 사용하면서, useSelector를 사용할 것이다. Redux Store에서 일부분을 가져오면 이전상태가 같은지 알 수 없다. 아래와 같이 이용하면, Redux의 리렌더링 현상을 막아준다. import { useSelector, shallowEqual } from 'react-redux'; export function useShallowEqualSelector(selctor) { return useSelector(selector, shallowEqual); }

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))); requestAnima..

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({})); r..

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)

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