frontend 3

[frontend] 모노레포와 프론트엔드의 마이크로 아키텍쳐

동아리 홈페이지 리팩토링을 진행하면서, 기존 코드를 통해 하나의 레포지토리에 홈페이지와 어드민 페이지를 모두 두고 관리하게 되었다.  그리고 이 과정에서 모노레포가 무엇인지 알게되었고, 이를 정리해보고자 한다. 모노레포란?위의 예시처럼 두개 이상의 프로젝트를 하나의 레포지토리에서 관리하는 소프트웨어 전략이라고 한다.  이는 기존 프론트엔드 전략에서 많이 쓰이던 '모놀리식 서비스 아키텍쳐'의 단점을 보완하기 위해 만들어졌다. '멀티레포'는 모노레포와 반대로 기존에 주로 쓰이던 전략이다. 여러 개의 레포를 사용하여 팀별, 혹은 프로젝트 별로 나누어 레포를 생성하고 개발한다. 보통 프로젝트 별로 완전히 분리되어 서로 영향을 주는 경우는 없지만, 실무에서는 영향을 주기도 한다고 한다.  이 이미지를 확인하면 명..

frontend 2024.10.14

[frontend] HMR란 무엇이고 프론트엔드 개발에서 왜 중요할까?

Swagger UI 를 수정하는 오픈 라이브러리 개발을 하면서 계속 콘솔에 HMR이라는 단어가 뜨는걸 발견했다. 그리고 vite로 react 프로젝트를 생성하니 또다시 ‘HMR’ 이라는 단어가 등장했다. 이를 보고 HMR이 정확히 무엇인지 궁금해졌다. HMR 이란?‘Hot Module Replacement’의 줄임말로 개발 환경에서 내가 수정한 코드의 결과를 브라우저로 바로 확인할 수 있도록 하는 기능이다. 그리고 브라우저 전체를 새로고침하지 않고도 변경된 모듈만 업데이트해준다. Hot Module Replacement | 웹팩웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다..

frontend 2024.10.06

[CSS] px, em, rem 차이와 rem이 유연한 페이지에 유리한 이유

절대 단위와 상대 단위처음 프론트엔드 개발을 시작하면 무조건 px이라는 단위를 사용하게 된다. 이는 원래 일상에서도 많이 쓰는 단위이기에 익숙하기도 하고, ‘절대 단위’이기 때문에 원하는 길이를 정확히 지정할 수 있기 때문이다. 여기서 ‘절대 단위’란 말 그대로 어떤 상황에서도 변하지 않는 상수같은 절대적인 길이를 유지하는 단위이다. 그렇다면 ‘상대 단위’란 무엇일까? 절대 단위와 다르게 항상 같은 길이를 유지하는게 아니라 상대적으로 변하는 단위이다. 이러한 ‘상대 단위’에 해당하는 것이 em, rem이다. 상대적으로 변하기 위해서는 그 기준이 필요할텐데, em과 rem의 기준은 무엇이며 둘의 차이점이 무엇인지 정리해보려한다.  em과 remem과 rem이 어떤 기준에 따라 상대적으로 결정된다면, 결국 ..

frontend 2024.09.30