Bugtype

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

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

export \* from './BoardRow'; 이런식으로 전체를 export하면 에러를 발생시키는 경우가 있다. Parsing error: Cannot read property 'name' of undefined 에러 해결 방법 1번 ts 버젼이 3.7이면 eslint 2.23으로 다운그레이드 한다. "@typescript-eslint/eslint-plugin": "^2.23.0", "@typescript-eslint/parser": "^2.23.0", 2번 ts를 3.8로 업데이트 한다. 참고 https://github.com/typescript-eslint/typescript-eslint/issues/1746

위 그림 처럼 A라는 컴포넌트에 monet르 d에게 전달하기 위해서는 A -> B - C -> D로 전달해야한다. children의 children의 children... 에게 계속 전달해주게 되면 props drilling 현상이 된다. react 16.3부터는 context api를 제공하는데 이것을 해결할 수 있다. ## 정리 - 어떤 특정값만 보내는게 아니라, 특정 컴포넌트 메소드도 넘길수 있으므로 활용하면 좋다. - 예) React native에서 portal을 구현할 때, 위에 방식처럼 구현하면 편하다. https://www.toptal.com/react/react-context-api Working with the React Context API The React Context API was..

Docker [TOC] 1. images ### docker images 2. Container 1. Docker Contatiner list docker container ls docker ps 3. Dockerfile FROM - 어떤 이미지 RUN - 어떤 명령어를 실행할 것인지 WORKDIR - 작업 디렉토리 이동 EXPOSE - 컨테이너 실행시 노출시킬 포트 ENV - 환경변수 지정 CMD - 이미지의 기본 명령어 지정 references https://docs.docker.com/engine/reference/commandline/container_ls/

hello world 1 2 3 overflow:hidden overflow를 이용하면 빈 공간에 값을 넣을 수 있다. https://jsfiddle.net/bugtype/8nputwgj/7/

hello world 1 2 3 helloworld123 첫번째 div에서 BFC(block format context)이 생성 되어집니다. block은 자동으로 height값이 자기 부모 영역만큼 커집니다. ( hello )float: left 옵션을 주면 block 영역이 현재 div 내에 있는 텍스트만큼만 영역이 잡힙니다. https://jsfiddle.net/bugtype/4ockhzp1/5/

React JSX에 대해서 알아봅시다.요약JSX안에 함수식으로 사용 가능합니다.camelCase로 써야합니다. ( JSX는 html보다 Javascript에 가깝다. )Injection Attack을 막아줍니다. ( XSS )JSX안에 함수식으로 사용가능. Hello, {formatName(user)}!부분을 보시면 formatName 함수를 호출하여 구현이 가능합니다.function formatName(user) { return user.firstName + ' ' + user.lastName; } ​ const user = { firstName: 'Harper', lastName: 'Perez' }; ​ const element = ( Hello, {formatName(user)}! ); ​ Reac..

설치법brew 설치brew install goaccess 사용법access.log 파일을 열면 된다.goaccess access.log 위 사진처럼 parsing에 맞는 것을 선택하면 된다. html 파일로 내보내기goaccess access.log -a -o report.html parsing 코드를 직접 작성해서 html으로 내보내기goaccess -f access.log --log-format='%^ %v %^[%d:%t %^] "%m %U %H" %R %^ %s %b "%u" "%h"' --date-format=%d/%b/%Y --time-format=%T -o report.html %v - 주의access.log는 parsing code 와 일치해야 한다.%h, %d %r 는 필수로 포함해야 한..