B41 TIL Blog

Github Actions - 자동 배포~!

들어가기 회사에서 일을 하다보니까 Github Actions을 사용해서 자동 배포를 해주도록 세팅되어 있었다. 지금까지 자동 배포는 ‘netlify’, ‘heroku’ 등의 서비스를 사용했는데 ‘Github Action’은 조금 다르다. 배포 뿐만 아니라 여러가지 workflow를 자동화 시켜주는 도구이기 때문이다. Github Ac...

CI/CD - 자동 배포

CI (Continuous Integration) 지속적인 통합. 주로 Git이라는 형상관리 툴을 이용하는데 2명 이상의 개발자가 작업하는 코드가 긴 시간 동안 merge되지 않으면 통합되기 어려울 정도로 달라질 수 있다. 따라서 가능한 작은 단위로 주기적으로 통합하여 나가는 것이 중요한데 이것을 CI이라고 한다. CD(Continu...

모노레포 - 한 저장소에서 여러 작업들을 패키지로 관리하기

모노레포란? 한 저장소(Repository)에서 여러 작업들을 패키지로 함께 관리하는 것. (비슷한 개념으로는 ‘멀티레포’가 있음. 하지만 멀티레포는 여러 저장소로 나눠서 프로젝트를 관리하는 것) 장점 공통으로 사용하는 라이브러리, 환경 등을 설정하기 좋음. (린트, 테스트 코드 등) 기능의 모듈화를 했을 때 같은 저장소 안에...

No Install로 Node 사용 - Yarn Berry

들어가기 모노레포에 대해서 살펴보면서 인스톨을 하지 않아도 설치 라이브러리들을 관리할 수 있는 방법이 있다고 하여 테스트 저장소를 만들어서 사용해 봄. 사용법 프로젝트 세팅 이후 yarn set version berry 라고 치면 됨 node_modules와 package.lock.json은 더 이상 사용하지 않게 됨 따라서 삭제...

Strapi 설치 및 Heroku 배포

들어가기 지난 주에 CTO님께서 Strapi라는 걸로 백엔드 개발 없이 API를 사용할 수 있다고 말씀하셨다. 다른 부분에 대해서 열심히 진행하다가 API를 슬슬 가져다가 붙여야 하는데 난감했다. 일단 백엔드 구현되기 전까지 프론트만으로도 개발을 진행해야 되서 Strapi를 사용하기로 했다. 설치에서 실행까지 strapi 공식...

Nano ID, Object.values()

Nano ID Github 링크 랜덤으로 키값을 생성해주는 라이브러리 코드 정말 간단. 아래가 끝 import { nanoid } from 'nanoid' model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT" Object.values() 객체에서 values값들만 배열로 리턴. 사...

라이센스 선택하기, 아스키 코드로 영문자 쓰기, 옵셔널 체이닝이 뭐였지?, immer, a11y lint, Faker

Github 라이센스 선택하기 들어가기 회사에서 프로젝트를 진행하면서 라이브러리를 많이 사용하게 되었다. 별 생각 없이 라이브러리르 사용했었는데 회사에서는 그러면 안 됐다. 라이센스라는게 있기 때문이다. 전에는 자세히 알지 못하고 막 썼는데, 이제 라이센스에 대해서 신경 써야 겠다. 이런 라이센스들이 있다. BSD : 소스코드 공개 X, ...

Github 개인 저장소를 팀 저장소로 옮기기, Docker로 github repository 관리

Github 개인 저장소를 팀 저장소로 옮기기 들어가기 처음 프로젝트를 시작할 때 샘플이라고 생각해서 개인 레파지토리에 올려놓고 작업을 했는데 정식 프로젝트가 되면서 조직(팀) 저장소로 옮기게 되었다. 그런데 해본 적이 없어서 인터넷에서 찾아보며 팀 저장소로 이동 시켰다. 옮기는 방법 개인 레파지토리 페이지로 들어간다. Settings...

use-Gesture, react-spring

use-Gesture 페이지에서 일부 컨테이너의 터치, 클릭 드래그로 슬라이드를 할 수 있는 기능을 넣으려고 했는데, 직접 구현하면 코드가 길어지고 구현하는 시간이 비효율적이라고 생각해서 검색해서 가장 많이 나오는 것으로 활용. 해당 라이브러리 예제에서도 그렇지만 TypeScript에서 사용할 때 타입 에러가 발생 use...

react bootstrap table2 - 테이블 라이브러리

react bootstrap table2 마지막 업데이트가 2018년 테이블을 쉽게 만들 수 있는 라이브러리 정렬, 필터 기능 등이 탑재되어 있음. 다른 친구네 회사에서 사용했다고 해서 검색해 봄. Ant Design에서 제공하는 Table이나 MUI의 Data Grid도 너무 훌륭해서 업데이트 되고 있지 않는 라이...