이전에 모놀리식 구조에서 모노레포 구조로 전환하기 위한 과정에 대한 고민들을 벨로그에 정리했었다. 오늘은 실제로 Turborepo를 사용해 모노레포를 구성한 과정을 정리해보고자 한다. 1. 왜 Turborepo인가? 우선 Turborepo를 선택하기 전에, 모노레포를

오늘은 회사 서비스 구조를 모놀리식에서 모노레포로 전환하는 과정에 있어 고민했던 과정들을 기록해보고자 한다. 현재 다니고 있는 회사에서는 다양한 서비스들이 운영되고 있다. 메인 서비스 5개, 세부 서비스 2개, 어드민 서비스 2개, 디자인 시스템 1개까지 합하면 총

1. CI/CD란❓ CI/CD는 Continuous Integration(지속적인 통합)과 Continuous Deployment/Delivery(지속적인 배포/제공)의 약자로, 소프트웨어 개발에서 코드 변경을 자동으로 빌드, 테스트, 배포하는 프로세스를 의미한다. 이

서론 Storybook은 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 강력한 도구다. 그런데 개발만큼 중요한 게 바로 공유와 협업이다. 개발한 컴포넌트를 디자인팀이나 PM이 바로 확인할 수 있어야 하고, 수정이 필요한 부분이 있으면 빠르게 피드백을 주고받을 수

서론 이번에 회사 서비스의 개발 일정이 어느 정도 마무리되어 시간이 남았다. 그동안 바쁘게 개발하느라 하지 못했던 코드 리팩토링을 진행하면서, 협업 시 불편했던 부분을 개선하기 위해 Storybook 도입을 추진하게 되었다. Storybook 도입 이유 회사에 St

서론 리액트라는 UI 라이브러리를 사용한 지 3년이 넘었지만, 그동안 ‘어떻게 해야 리액트를 잘 활용할 수 있을까?’ 혹은 ‘뭘 해야 잘하는 개발자가 될 수 있을까?’에 대해 깊이 고민해 본 적은 없었다. 그러던 중 우연히 유튜브에서 한 영상을 보게 되었고, 다시 한

🤔 웹폰트가 웹 성능에 어떤 영향을 끼칠까?? 웹폰트는 웹사이트의 디자인과 브랜드 정체성을 강화하는 데 중요한 역할을 하지만, 동시에 웹 성능에 영향을 미칠 수 있다. 웹폰트를 사용하는 경우, 사용자의 브라우저는 폰트를 서버에서 다운로드해야 하며, 이 과정이 페이지

🤔 이미지가 웹 성능에 어떤 영향을 끼칠까?? 이미지는 웹사이트의 시각적 매력을 높이는 중요한 요소지만, 동시에 웹 성능에 큰 영향을 미친다. 브라우저에서 이미지를 표시하려면 이미지를 다운로드해야 하는데, 이미지 파일의 크기가 클수록 다운로드 시간이 길어져 페이지 로

🤔 성능 최적화를 하려면 왜 브라우저 렌더링 원리를 알아야 할까? 성능 최적화와 브라우저 렌더링 원리는 밀접하게 연관되어 있다. DOM, CSSOM, 그리고 렌더 트리 생성 및 업데이트 과정에서 발생하는 비용을 줄이는 것이 성능 최적화의 핵심인데, 이 과정에서 브라

요새 성능 최적화를 공부하면서 성능 최적화를 왜 해야하는 지 이유부터 확실하게 짚고 넘어가면 좋을거 같아서 이렇게 포스팅을 하게 됐다. 🤔 성능 최적화는 왜 필요할까? 1. 더 나은 사용자 경험과 기업 수익 창출 성능 최적화는 사용자에게 더 나은 경험을 제공해준다

webpack-bundle-analyzer는 Webpack에서 생성된 번들의 크기를 시각적으로 분석할 수 있는 도구이다.Webpack 빌드 과정에서 생성된 번들을 트리 형태의 인터랙티브한 시각화로 보여준다.번들의 구조를 분석하여 어떤 모듈이 포함되어 있고, 각각의 모듈

이전 포스팅 개발자 도구 Lighthouse 살펴보기지금까지 성능 최적화를 위한 개발자도구로 Network, Performance, Lighthouse까지 알아봤다. 마지막으로 Coverage에 대해 알아보자!개발자도구의 Coverage탭은 웹 애플리케이션의 코드(HT

이전 포스팅 개발자 도구 Performance 살펴보기Lighthouse는 이전에 부트캠프에서 2차프로젝트 때 사용해본 경험이 있다. 그때는 벨로그에 올린거만 보고 무작정 해봤지만 이후에 잘 사용하지 않았다. 이번에 성능 최적화 공부하면서 Lighthouse도 정리해보

이전 포스팅 개발자 도구 Network 살펴보기 지금까지 개발을 하면서 기능 구현에만 집중하다 보니 성능 최적화에 신경 쓸 여유가 없었다. 그러다 보니 브라우저 개발자 도구의 Performance 탭에 대해 잘 알지 못했고, 실제로 활용해 본 적도 없었다. 하지만

🙄Network 탭이란? > 개발자도구의 네트워크 탭은 웹 브라우저와 서버 간의 네트워크 요청과 응답을 실시간으로 모니터링할 수 있는 탭이다. 웹 페이지가 로드되거나 사용자 상호작용으로 발생하는 모든 네트워크 활동(예: HTTP 요청, 파일 로드, 데이터 전송 등)을

요새 알고리즘 공부를 다시 하고 있는데 그 중에 결정알고리즘은 좀 헤매면서 풀어서 복기할 겸 포스팅을 하게 되었다. 결정알고리즘은 주어진 범위내에서 원하는 값 또는 원하는 조건에 가장 일치하는 값을 찾아내는 알고리즘이다. 결정알고리즘은 이진탐색을 활용해서 풀 수 있다.

어느덧 2024년 한 해가 지나간다.지금까지 회고록을 쓴 적이 없지만 올해는 많은 일이 있었기도 하고, 한 번쯤은 개발자로서 회고록을 작성해 보고 싶어 이렇게 작성하게 됐다.나는 개발 공부를 2022년에 본격적으로 시작했는데 이제는 만 3년이 되어간다.2022년에는 개

개인 프로젝트를 하면서 AWS 1년 무료 서버를 사용중인데 하면서 AWS 1년 무료 서버를 사용중인데 ec2 인스턴스 서버당 메모리 1GB, 총 디스크 사용량 30GB 밖에 안된다.용량이 적어서 클라이언트 코드를 인스턴스 서버에 빌드할 때마다 cpu 사용률이 100%에

CORS(Cross-Origin Resource Sharing)는 브라우저의 보안 정책 중 하나로, 서로 다른 출처(도메인, 프로토콜, 또는 포트)의 리소스에 접근할 때 발생하는 문제를 해결하기 위해 사용된다. 예를 들어, 클라이언트 애플리케이션이 http:/

기본적으로 Node.js는 앱을 개발하는 동안 코드를 수정할 때마다 직접 서버를 종료하고 다시 실행해야 하는 번거로움이 있는데, nodemon은 코드에 변경이 생기면 애플리케이션을 자동으로 다시 시작해주는 기능을 제공하여 번거로움을 덜어준다.3\.