Frontend

모노레포 구축계기 뱅킹, PG, sdk를 모두 만들어보기한 프로젝트를 시작하게 되어서, 모노레포에 대한 이야기가 나오게 되었었어요. 아무래도 3개의 서비스를 각각 다른 레포에서 운영하는 것보다는, 하나의 레포에서 구성하여 운영하는 것이 더 좋지 않을까란 생각을 하게 되었습니다. 아무래도 3개의 서비스가 컨셉이 완전히 다른게 아니라 비슷하기때문에 공통컴포넌트도 비슷하게 나올수 있을거란 생각을 하게되었고, 공통컴포넌트 뿐만 아니라 로직이나 커스텀 훅, 함수가 공유될 수 있다고 생각해서 모노레포를 구축하게 되었습니다. CI/CD 설정도 한번만 하면된다..! 라는 장점도 있기도 했습니다. 물론 도입하게된 이유는 배움이 가장 큰 계기가 아니었을까... 생각합니다. 🥹 yarn berry workspace 를 선택..

프로젝트에서 모노레포를 구현해보면서 yarn berry workspace를 사용해 구현해야했는데요, 저는 Npm이라는 패키지 매니저만 사용해봤기 때문에, yarn은 아주잠깐써보고 yarn berry는 써본적이 없었어서 각 어떤 차이가 있고 어떤 장단점이 있는지 정리해볼까합니다. 모노레포를 구축하면서 마주했던 에러들은 따로 모아 기술할 예정입니다. Npm 일관적이지 않은 패키지 버전 프론트엔드 개발자가 가장 먼저 접할 수 있는 패키지매니저는 npm일 것 같다는 생각이 들어요. 저도 가장 많이 접하고, 자주 사용했던게 npm이었습니다. 노드 모듈은 기본적으로 시멘틱 버저닝이라는 기법을 사용해서 사용하는 모듈들의 버전을 기입할 것을 권장하고 있다고 합니다. 시멘틱 버저닝이란 간단하게 말해서 `1.2.3` 처..

● REST API가 생기게 된 배경 REST API는 왜 생기게 되었을까요? 우리가 흔히 아는 API에 URI를 적어 데이터를 요청하고 받아올 수 있었습니다. 예전에는 URI에서 동사를 사용하는 것이 일반적이었습니다. GET getUserId/1234 GET readMovie_avatar POST plzpostmypretty_blog/user/12346 위는 나쁜 예시로, 이전에는 동사와 명사를 섞어 URI를 만들었기 때문에 URI가 지저분하고 알아보기가 쉽지 않았습니다. (심각했음) 이를 보다 못한 '로이 필딩'이 REST API라는 논문을 써 발표했고, 세상에 주목받기 시작했습니다. 그렇다면 REST API란 무엇일까요? REST API에서 REST는 (Representational State Tr..

● CSS 애니메이션 VS JS 애니메이션 - 웹사이트에 애니메이션 효과를 부여할 때 CSS의 transition / animation 속성을 사용할 수 있고 JS의 setInterval() / requestAnimationFrame() 을 사용할 수 있다. 하지만 각각을 사용할 때의 특징이 다르고 장단점이 있기 때문에 어떤 차이가 있는지 알아두는 것이 좋다. 기술면접에도 나온적이 있다. ● CSS 애니메이션 - 일반적으로, 마우스를 올렸을 때 혹은 메뉴 버튼의 전환과 같은 간단하게 처리하는 애니메이션의 경우 CSS로 처리한다. 예를 들어, 200 크기의 정사각형을 왼쪽 위에서 오른쪽 아래로 350px 움직이게 하는 애니메이션을 구현한다고 하면, transform 의 translate 를 사용해서 구현할..

● CI (continuous Integration, 지속적통합) - CI는 빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스를 뜻한다. git과 같은 버전관리 시스템을 사용할 때 여러명의 개발자가 하나의 공유 저장소를 사용하는 경우가 많다. 이렇게 되면 새로운 코드의 변경 사항이 저장소에 통합되지 않을 경우 서로 충돌할 수 있다. 따라서 빌드/테스트 자동화부터 코드의 일관성(Consistency)을 제공하기 때문에 지속적으로 통합한다는 용어를 사용하는 것이다. ● CD (continuous Delivery/Deploy , 지속적 전달/배포) - CD는 CI의 빌드/테스트를 통해서 정상적으로 수행됨을 확인하면 이는 배포를 수동으로 하느냐 자동으로 하느냐에 따라 2가지로 나뉜다. 지속적 전달 :..

● 모듈 번들러 - 현대의 프론트엔드 개발은 모듈단위로 파일을 엮어서 개발하는 방식이다. 즉, 모듈은 서로 의존성을 띄고 있는데 이런 점에서 다음과 같은 문제들이 생긴다. 수많은 모듈들의 순서를 어떻게 처리할 것인가? (의존성 처리) 모듈이 많아질수록 HTTP 요청이 많아질텐데 이로 인한 오버헤드는 어떻게 해결할 것인가? ES6+ 스펙의 코드를 어떻게 처리할 것인가? 위 문제들을 해결하기 위해 등장한 것이 모듈 번들러(Module Bundler)로 각각의 모듈 의존성을 해결하여 하나의 자바스크립트 파일로 만드는 도구 이다. 이미지 압축, 최소화(Minification) 등의 여러가지 기능들도 제공하며 유명한 번들러로는 Webpack, Parcel, Rollup 등이 있다. ● 트랜스 파일러 - 트랜스파일..