etc.....3 프론트엔드에서 안정적인 서비스 운영하기 1 (feat. CI with Github Actions) 해당 글은 React, Vite, pnpm으로 된 환경에서의 CI 자동화를 다루고 있습니다! 안정적인 서비스 운영을 위해서는 여러 요소가 필요하다. 테스트 코드 작성, 서버 상태 모니터링, 유지보수가 용이한 코드 작성 등이 안정적인 서비스 운영에 필요한 핵심 역량으로 평가된다. 오늘은 이 중에서 코드가 서비스에 오류를 일으키는지 미리 파악하기 위한 CI 자동화 구축에 대해 다루려고 한다.CI는 Continuous Integration의 약자로, '지속적 통합'을 의미한다. 이는 애플리케이션 코드의 변경사항을 지속적으로 빌드, 테스트, 통합하는 과정을 말한다. 일반적으로 개발자가 PR(Pull Request)을 올리면 CI 과정에서 빌드와 테스트를 수동으로 진행한다. 하지만 매일 10개의 PR이 올라온다고.. 2024. 10. 16. 배포 돌려놓고 한숨자기... 매번 생기는 문제 5분이라면 길지는 않지만 나중에 프로젝트가 더 커지게 된다면 분명 더 오랜시간 동안 배포를 해야하고 개발서버와 운영서버 두번을 배포해야하기에 총 10분정도 걸리게 되는 문제점이 존재했습니다. 어떻게 해야 배포 속도를 줄일 수 있을까? 우선 왜 느려지는지를 먼저 알아봐야할거 같습니다. 그래서 SMP(Speed Measure Plugin)을 통해 어떤 과정에서 오래걸리는지를 측정해 보았습니다. (Babel-loader는 webpack과 babel을 연결해주는 모듈입니다.) 측정결과 Babel-loader 즉 es6+ 문법을 es6에 맞게 transpiling 해주는 과정에서 오랜시간이 소요가 되는것을 확인할 수 있었습니다. 그래서 방법은 총 2가지가 있습니다. 1. Webpack, Babe.. 2024. 1. 8. 브라우저는 어떻게 돌아갈까 브라우저의 동작 원리에 대해 ARABOZA 일단 동작 원리에 대해 알기전에 브라우저에 대해 알아볼려고 한다 브라우저란 브라우저는 동기(synchronous)적으로 (HTML + CSS) javascript 언어를 해석하여 보여주는 응용 소프트웨어 입니다. 이런 브라우저의 종류는 크롬, 파이어 폭스, 사파리 등이 대표적인 예입니다. 브라우저의 구조 브라우저는 다음과 같은 구조를 가지고 있습니다. 사용자 인터페이스 사용자가 접근할 수 있는 영역으로 보통 브라우저 상단에 있는 bar들을 제외한 나머지 부분이 사용자 인터페이스라고 합니다. 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하고 Data Storage를 참조해 로컬에 데이터를 읽고 쓰며 다양한 작업을 수행한다. 렌더링 엔진 웹 서버.. 2022. 6. 13. 이전 1 다음
