B41 TIL Blog

ROI(Return On Investment), git flow가 안 좋다는 글을 읽고...

ROI(Return On Investment) 투자 이익률을 이야기 한다. IT업계보다는 투자 관련해서 많이 쓰는 용어 투자한 것에 비해 얼마나 이익이 올랐는지를 나타내는 지표 FE Unit Test는 투자 대비 경제성이 안 좋을 가능성이 클 것 같다는 고민 중에 다른 분에게 들은 용어 git flow가 안 좋다는 글을 읽고 생각...

[JavaScript] array.splice(), RTK Query 자동 리패칭

Array.prototype.splice() array.splice(*start*[, *deleteCount*[, *item1*[, *item2*[, *...*]]]]) 위 처럼 사용 deleteCount를 입력하지 않거나 전체 배열의 길이보다 더 크면 배열 안의 모든 데이터 삭제 const months = ['Jan', 'March...

[RTK Query] Mutation과 캐싱(Caching)

Mutations 서버에서 데이터 업데이트, 추가를 요청하고 변경사항을 캐시에 적용할 때 사용한다. 캐시된 데이터를 무효화하고 강제로 다시 가져올 수도 있다.(리패칭) createApi의 endpoints에 아래와 같이 추가해서 세팅. updatePost: build.mutation<responseType, re...

[TypeScript] React SetState Prop으로 넘길 때 Type 정의하기

들어가기 처음으로 React에서 TypeScript를 사용할 때 많이 당황했었다. 그 이유는 부모 컴포넌트에서 자식 컴포넌트로 prop을 넘겨주는 일 때문이었다. JavaScript에서는 함수, 변수 상관없이 그냥 넘겨주면 됐었다. 하지만 TypeScript는 모든 타입을 다 넘겨 주어야 했다. 그 중에서 가장 난감했던 것이 us...

로띠(Lotte) - 코드로 삽입하는 애니메이션

들어가기 동아리 활동 중 로띠를 활용하면 애니메이션이 즐거울 것 같다는 이야기를 들었다. 로띠가 뭔지 바로 검색 찾아보니 구글홈을 설정할 때 봤던 애니메이션이 로띠였다. 로띠 (Lottie)는? 위키백과에서는 백터 애니메이션을 위한 파일 형식이라고 소개하고 있다. 로띠에서는 JSON 파일을 사용한다. 따라서 파일 내부...

Node 버전 관리하기 (NVM)

NVM(Node Version Manager) Node를 이전 버전으로 돌리거나 올리는 것을 쉽게 하게 도와주는 역할을 함. 설치 Brew가 설치되어 있다면 brew install nvm 환경변수 설정 터미널에서 .nvm 디렉토리 만들기 mkdir ~/.nvm vi 편집기로 편집 ...

Windows에서 리눅스 - WSL, 도메인 주도 설계 - DDD

WSL (Windows Subsystem for Linux) 윈도우 10, 11에서 네이티브로 리눅스 실행 파일을 작동시키기 위해서 사용. WSL에 도커, code-server를 이용해서 개발하는 경우도 있음. 가상머신을 사용해서 리눅스를 돌리면 무겁다는 단점이 있음. 하지만 WSL을 이용하면 리눅스 프로그램을 가볍게 이용할 수 있음...

[JavaScript] 소문자로 변환 - String.prototype.toLowerCase()

toLowerCase() 문자열의 대문자를 소문자로 변환 검색 처리 시 검색 값과 데이터 모두 toLowerCase를 적용시키고 필터링하면 이용자가 더 많은 검색결과를 얻을 수 있음 const sentence = 'The quick brown fox jumps over the lazy dog.'; console.log(sentence....

Object.keys() - 객체 key를 배열로

Object.keys() 객체의 key를 배열로 반환 const object = {a: 1, b: 2, c: 3} console.log(Object.key(object)); // 결과: ["a", "b", "c"] Reference https://developer.mozilla.org/ko/docs/Web/JavaScript/...

다이나믹 서브셋

배운 것 다이나믹 서브셋 서브셋 폰트 일반적으로 사용하는 문자만 남겨 용량을 줄인 폰트 다이나믹 서브셋 CSS의 unicode-range 속성을 이용해서 해당 문자가 사용될 때 브라우저가 폰트 파일을 다운로드 하는 방식 자세한 사용방식은 링크의 블로그 참조 ...