react3 프론트엔드에서 안정적인 서비스 운영하기 1 (feat. CI with Github Actions) 해당 글은 React, Vite, pnpm으로 된 환경에서의 CI 자동화를 다루고 있습니다! 안정적인 서비스 운영을 위해서는 여러 요소가 필요하다. 테스트 코드 작성, 서버 상태 모니터링, 유지보수가 용이한 코드 작성 등이 안정적인 서비스 운영에 필요한 핵심 역량으로 평가된다. 오늘은 이 중에서 코드가 서비스에 오류를 일으키는지 미리 파악하기 위한 CI 자동화 구축에 대해 다루려고 한다.CI는 Continuous Integration의 약자로, '지속적 통합'을 의미한다. 이는 애플리케이션 코드의 변경사항을 지속적으로 빌드, 테스트, 통합하는 과정을 말한다. 일반적으로 개발자가 PR(Pull Request)을 올리면 CI 과정에서 빌드와 테스트를 수동으로 진행한다. 하지만 매일 10개의 PR이 올라온다고.. 2024. 10. 16. [Next] Next.js란 무엇인가? Next란? Vercel에서 만든 React Framework로 SSR, SEO를 지원하는 엄청난 프레임 워크이다. Next를 쓰는 이유는? 그럼 Next를 쓰는 이유는 뭘까? 바로 SSR과 SEO때문이다. 여기서 SSR이란.. SPA 일반적인 Page의 LifeCycle은 다음과 같습니다. Client에서 Server로 최초의 요청을 보냅니다. Server는 응답을 보내고 Client에서 화면이 보입니다. Client에서 상호작용을 하기위한 요청을 Server에 보냅니다. Server는 이에 응답합니다. 페이지가 Reload 됩니다. 위와 같은 방법은 페이지가 요청을 보내고 받을때 마다 Reload가 되기 때문에 효율적이지 못하게 page가 관리 되고 있습니다. 따라서 위와 같은 방법을 해결할 수 있는.. 2022. 3. 28. [React] React란 무엇인가? 리액트는 누가 만들었는가? 🧐 처음은 리액트의 기원부터 돌아가볼려고 한다. 리액트는 Facebook에서 2011년에 만든 라이브러리이다. 그전에는 jquery 또는 backbone, angular를 가장 많이 사용했으나 react의 등장으로 새로운 시대를 불러오게 되었다. 왜 만들어졌는가? 🧐 그전에 사용되었던 프레임워크는 MVC패턴 혹은 MVVM패턴을 이용한다. 이런 식으로 model에서 처리한 데이터를 view에서 실제 DOM에 계속 처리하는 방식은 웹의 규모가 크면 클수록 성능 저하의 원인이 될 수 있기에 React에서는 Virtual DOM이라는 가상의 돔에 새롭게 렌더링하여 현재의 DOM과 비교하여 기존의 view에 수정하는 방식으로 성능저하를 해결하기 위해 만들게 되었다. 리액트의 특징 👍 리.. 2022. 3. 28. 이전 1 다음
