B41 TIL Blog

git 브랜치 관리할 때 merge와 rebase의 차이

들어가기 회사 프로젝트 진행 중 일부 프로젝트에서 협업할 때 merge를 쓰지 않고 rebase를 사용해서 브랜치를 관리하는 것을 봄. 기존 프로젝트를 할 때 merge만 사용했으므로 rebase를 사용하는 이유에 대해서 궁금해짐. merge와 rebase의 차이 merge는 새로운 커밋의 가지가 분기되어서 열심히 쌓이다가 나중에...

경로에 따라 움직이는 애니메이션 구현

들어가기 주로 백오피스 개발을 담당하다가 팀에서 개발한 다른 제품의 랜딩페이지를 제작하게 되었다. 디자이너님이 준비해 주신 예쁜 애니메이션들 중에 비행기가 날아가는 애니메이션이 있었다. 정해진 경로대로 날아가는 애니메이션을 구현하기 위해 SVG 벡터 경로를 활용하기로 한다. 선을 그려주는 SVG ARTISTA는 회사의 다른 동료 분께...

JSDoc

JSDoc 주석 및 타입을 적어두고 보여주는 기능을 함. 해당 주석이 달린 함수를 사용하는 부분에 IDE에서 마우스를 올리면 써 두었던 주석이 출력됨 /** 내용 */ @~~~로 속성을 알려줄 수 있음 @type {string} 타입 @todo 할 일 @deprecated 주석 달린 함수 취소줄 그어짐 Refere...

[JavaScript] Array 역순으로 출력하기 (Array.reverse)

Array.reverse 테이블 내용을 역순으로 출력하기 위해 검색 array 배열 .reverse() 를 사용해서 역순 출력 ``` const array = [1, 2, 3]; const reverse = array.reverse(); console.log(reverse, ‘reverse’); // output : [3, 2, 1], ...

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 편집기로 편집 ...