[3주차 이론 study] CI/CD 풀제인 & Lazy Loading & Suspense

[xeunnie]

CI/CD 풀체인 & Lazy Loading & Suspense

[CI/CD 풀체인]

키워드

1. GitHub Actions
2. CircleCI
3. Sentry
4. CI/CD Pipeline
5. Continuous Integration
6. Continuous Deployment
7. Performance Monitoring

[Lazy Loading & Suspense]

키워드

1. Lazy Loading
2. Suspense
3. 코드 스플리팅

[xeunnie]

1. CI/CD

Q1. GitHub Actions, CircleCI, Sentry를 포함한 CI/CD 풀체인을 구축할 때, 각 도구가 담당하는 역할과 통합 전략은 무엇인가요?

Q2. GitHub Actions와 CircleCI의 워크플로우를 비교하여, 병렬 처리 및 캐싱 메커니즘을 통해 빌드 시간을 최적화하는 방법은 무엇인가요?

Q3. CI/CD 환경에서 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)의 배포 방식 차이를 설명하세요.

Q4. 프론트엔드 애플리케이션에서 코드 스플리팅, lazy loading, 그리고 React의 Suspense와 같은 성능 최적화 기법을 CI/CD 파이프라인에 통합하는 방법은 무엇인가요?

Q5. CI/CD에서 캐싱을 최적화하는 전략(예: node_modules 캐싱, 빌드 아티팩트 캐싱)은 무엇인가요?

Q6. CI/CD의 목표 중 하나는 “Fail Fast” 입니다. 이를 프론트엔드 CI/CD에서 구현하는 방법을 설명하세요.

Q7. GitHub Actions, CircleCI, Travis CI를 비교했을 때, 규모가 커지는 프로젝트에서는 어떤 선택이 더 적절할까요?

[xeunnie]

Lasy Loading

Q1. Lazy Loading을 적용하면 성능이 향상되지만, 잘못 사용하면 오히려 성능이 저하될 수도 있습니다. 어떤 경우에 Lazy Loading이 성능을 악화시킬 수 있나요?

Q2. 코드 스플리팅이 어떻게 동작하는지 내부적으로 설명해주세요.

Q3. Lazy Loading을 도입하면 코드 스플리팅이 자동으로 이루어지나요, 아니면 추가적인 설정이 필요할까요?

Q4. 코드 스플리팅을 적용한 후, 특정 환경(예: 모바일 저사양 기기)에서 로드 시간이 예상보다 길어진다면 어떻게 최적화할 수 있을까요?

Q5. Lazy Loading을 이미지뿐만 아니라 폰트, 비디오, JSON 데이터 등 다양한 리소스에 적용할 수 있습니다. 각각의 경우 적용 방식이 어떻게 다를까요?

Q5. Lazy Loading이 검색 엔진 최적화(SEO)에 미치는 영향을 설명하고, 이를 해결하기 위한 방법은 무엇인가요?

Q6. Next.js에서 페이지 단위의 Lazy Loading을 수행할 때 next/dynamic을 활용하는 방식과 getServerSideProps를 사용하는 방식의 차이를 설명해주세요.

Q7. Suspense는 기본적으로 컴포넌트 레벨에서 작동하지만, 데이터 페칭을 위한 Suspense for Data Fetching이 등장했습니다. 이를 활용할 경우, 기존의 상태 관리 라이브러리(예: Redux, React Query)와의 관계는 어떻게 변할까요?

[Oh-hong]

A1:
첫 화면에 바로 보이는 컨텐츠에 LazyLoading을 적용시켰을 때..? 사용자 경험을 악화시킬 수 있습니다.
너무 잦은 LazyLoading으로 인한 http요청 과부화도 성능 악화의 요인이 될 수 있겠네요.

A2:
코드 스플리팅이란, 한 개의 파일에서 처음부터 모든 걸 불러오는 게 아니라, 적재적소에 맞게 필요할 때 효율적으로 가져오는 것입니다.
빌드 시점에 웹팩이 동적 import구문을 만나면, 이를 청크파일로 분리합니다.
이 때 각 청크는 고유 ID를 부여받고, 어떤 모듈이 어느 청크에 포함되어 있는지 알 수 있는 매니페스트 파일도 생성됩니다.
런타임 시점에 사용자가 특정 기능을 사용할 때 해당 코드가 포함된 청크를 요청하게 되고, 이 요청은 매니페스트 파일을 참조하여 필요한 청크를 찾아 로드, 그러고 나서 코드가 실행되고, 이렇게 로드된 모듈은 재사용을 위해 모듈 캐시에 저장됩니다.

A3:
글쎄요.. 웹팩에서 추가 설정을 이용해 세밀하게 설정이 가능하다는 거는 알고 있는데.. 추가로 공부를 해봐야겠습니다.

A4:

A5:
font같은 경우에는 초기에 시스템 폰트를 로드하도록 하면 되지 않을까 싶습니다. 비디오같은 경우에는 intersection Observer를 이용해 특정 영역에 도달했을 때 로드(video 태그에 preload="none"이라는 속성이 있답니다!!)하도록 하면 될 거 같기도 합니다.

A6:
쉽게 생각하면 CSR과 SSR의 차이점이랑 비슷하다고 생각합니다.
next/dynamic → CSR 방식으로 클라이언트에서 동적으로 필요한 컴포넌트를 로드
getServerSideProps → SSR 방식으로 서버에서 데이터를 가져와 페이지를 완성한 후 클라이언트로 전달

A7: 데이터 로딩 관련은 react에서 직접적으로 처리가 가능하고, 기존 상태 관리 라이브러리는 기존에 맡았던 전역 상태관리에 더 집중할 수 있을 것입니다.

[xeunnie]

Suspense

Q1. Suspense를 사용한 비동기 컴포넌트 렌더링 과정과 기존의 componentDidMount 혹은 useEffect로 데이터를 불러오는 방식의 차이는 무엇인가요?

Q2. Suspense의 핵심 동작 원리는 무엇이며, 내부적으로 어떻게 컴포넌트를 “대기(suspend)” 상태로 만드는지 설명해주세요.

Q3. Suspense 없이 Lazy Loading을 적용하면 어떤 문제가 발생할 수 있나요?

Q4. Suspense 기반 데이터 패칭을 사용할 때, 서버 사이드 렌더링(SSR) 환경에서는 어떤 문제가 발생할 수 있으며 이를 해결하는 방법은 무엇인가요?

Q5. Suspense에서 데이터가 항상 새로운 요청을 보내지 않도록 캐싱을 적용하는 방법은 무엇인가요?

Q6. Suspense를 이용해 비동기 상태를 관리할 때, “fetch waterfall” 문제가 발생할 수 있는데 이를 해결하는 방법은 무엇인가요?

Q7. Next.js에서 Suspense를 사용할 때 next/dynamic과의 차이점은 무엇인가요?