B41 TIL Blog

[Node.js]Event emitter

Event emitter 어떤 동작이 실행되었을 때 이벤트를 인식하고 이벤트를 인식했을 때 다른 행위를 실행시키는 것 이벤트 리스너라고 생각하면 쉽다. 자세하게 다시 정리 JavaScript를 브라우저에서 사용할 때 DOM 이벤트를 받는 이벤트 리스너의 사용 방법은 다음과 같다. const button = document.que...

[React 18] useTransition

컨커런트 UI 패턴 화면에 나타나는 변화를 지연시키고 싶은 경우 사용 예를 들면 검색 창에서 실시간으로 검색 결과를 표시할 때 검색 결과 로직 처리보다 검색어 입력을 더 우선적으로 보여주게 하는 것. 디바운싱 기법을 사용해서 이전에 구현했었음. useTransition const [startTransition, isPending] ...

특정 커밋을 돌릴 때 reset을 쓸까? revert를 쓸까?

들어가기 어떤 작업을 하고 10개 정도의 커밋을 더 했는데 그 모든 작업을 취소하고 싶을 때 reset이 더 맞을까? revert가 더 맞을까? 라고 고민을 했는데, 그 부분에 대해서 포스트를 남긴다. 결론은 Revert 간단하게 이전 커밋을 취소하는 경우는 reset으로 남길 수도 있지만 이미 진행한 많은 작업들의 기록을 남기면서 ...

쿠키와 document.cookie

들어가기 임시 로그인 페이지를 만들면서 로그인 요청을 했는데, key가 쿠키에 저장되지 않고 JWT data로 반환됐다. 이 경우 JWT는 Local Storage에 넣어야 하는 것인가 Session Storage에 넣어야 하는 것인가 Cookie에 넣을 수 있는 것인가? 고민하다가 Cookie에 대한 글을 읽으면서 Cookie에 대해 알아...

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값들만 배열로 리턴. 사...