[모의 면접] 성능최적화, CI/CD, 자바스크립트, 타입스크립트

• 프로젝트 성능 최적화 방법
• CI / CD
• 클라우드 서비스
• 자바스크립트 특징
• 타입스크립트 특징

---

프로젝트 성능 최적화 방법

• next.js의 렌더링 방식을 활용하여 초기 로딩 속도 개선
• next.js Image 컴포넌트를 사용해 이미지 크기를 최적화하고, 필요한 크기의 이미지를 동적으로 로드
• 레이지 로딩을 사용해 용량이 큰 데이터의 로딩 속도 개선 
• 리액트 쿼리를 이용해 데이터를 캐싱하여 로딩 속도 개선
• 공통으로 사용되는 코드나 기능을 별도의 모듈로 분리하여 중복을 줄임

---

버셀( Vercel )

• 정적 웹사이트 호스팅 및 서버리스 함수 호스팅을 주로 지원하는 플랫폼
• React, Vue, Angular 등의 프론트엔드 프레임워크 및 정적 사이트를 배포하고 호스팅 하는 데에 사용된다
• 서버리스 함수를 통해 백엔드 기능을 구현할 수 있다.(로그인, 회원가입, 인증/인가 등)
• Next.js와 통합이 좋고, CI/CD(지속적 통합 및 지속적 배포) 기능을 제공해 코드 변경 시 자동으로 배포된다
• 프로젝트를 GitHub과 연동해 쉽게 배포할 수 있다.

 

---

CI  /CD 

CI, 지속적 통합 (Continuous Integration)

개발자가 작성한 코드가 메인 코드베이스(메인 브랜치)에 지속적으로 통합되는 과정
CI 시스템은 코드 변경 사항을 자동으로 감지하고, 빌드 및 테스트를 실행하여 코드의 품질을 검증함으로 안정적인 소프트웨어 개발과 배포를 지원받게 된다
 

CD, 지속적 배포 (Continuous Deployment)

개발된 소프트웨어가 자동화된 테스트와 검증 과정을 거쳐 자동으로 사용자에게 배포되는 것
CI를 거친 코드가 통과되면 CD 시스템은 자동으로 이를 프로덕션 환경에 배포한다
메인 브랜치에 코드를 푸시하고 CI가 통과되면 Vercel과 같은 플랫폼에서는 수정된 코드를 자동으로 추적하고 빌드하여 재배포함으로 빠르고 신뢰성 있는 소프트웨어 배포를 할 수 있다
 

정리

 
CI는 개발자가 작성, 수정한 코드를 메인 코드베이스에 푸시하면 CI시스템이 자동 통합 테스트를 통해 코드 품질을 검증한다
CD는 메인 코드베이스에 푸시해 CI검증이 끝나면 버셀이 수정 코드를 자동으로 추적, 검증해 재배포함으로 사용자에게 제공될 수 있게 한다 

---

클라우드 서비스

인터넷을 통해 사용자에게 IT 리소스를 제공하는 서비스로 가상공간을 이용해 사용자에 따라 유연한 확장성을 지원한다
 

클라우드 서비스 종류
 

1. 인프라스트럭처 서비스 (Infrastructure as a Service, IaaS)
가상화된 컴퓨팅 리소스(가상 머신, 스토리지, 네트워크 등)를 제공해 사용자 필요에 따라 유연하게 확장, 축소 가능하다
(AWS Amazon Web Services 클라우드 인프라 서비스, 다양한 운영 체제와 애플리케이션 환경 제공)
 
2. 플랫폼 서비스 (Platform as a Service, PaaS)
응용 프로그램 개발, 실행, 관리하기 위한 플랫폼 환경을 제공한다
사용자는 애플리케이션 개발에 집중할 수 있고, 인프라 관리는 클라우드 제공업체에서 처리한다
(Docker 컨테이너화된 애플리케이션을 손쉽게 개발, 배포, 실행할 수 있는 환경 제공)
 
3. 소프트웨어 서비스 (Software as a Service, SaaS)
클라우드 기반으로 제공되는 소프트웨어 응용 프로그램
사용자는 소프트웨어에 대한 라이선스를 구매하거나 구독해 웹 브라우저를 통해 접근하고 사용할 수 있다.
(네이버 My Box)
 

클라우드 서비스의 주요 장점

• 확장성: 필요에 따라 리소스를 신속하게 확장하거나 축소할 수 있다.
• 유연성: 사용자는 인터넷을 통해 언제 어디서나 접근할 수 있다.
• 비용 절감: 자체적 서버운영 비용을 줄일 수 있다
• 보안 및 안정성: 보안 및 백업 메커니즘을 제공하여 데이터의 안전을 보장한다

---

자바스크립트 특징

• 등적 타입 언어로 변수의 타입을 런타임 시점에 정의하기 때문에 변수 선언 시 명시적으로 타입을 설정하지 않아도 된다
• 인터프리터 언어로 컴파일 과정 없이 한 줄씩 코드를 읽고 실행할 수 있다
• 콜백함수나 Promise, async/await 등을 이용해 비동기 처리가 가능하며 동시적으로 여러 작업이 가능하다
• 확정성과 유연성이 뛰어나다

 

---

타입스크립트 특징

• 명시적인 타입 선언으로 타입오류를 미리 방지할 수 있고, 코드 가독성과 유지보수에 용이하다
• 자바스크립트 코드를 컴파일 변환을 통해 런타임 전 오류를 미리 확인할 수 있다
• 제네릭 타입을 사용해 유틸리티 타입을 정의할 수 있다 코드를 간결하게 하며 자주 사용되는 타입 변환을 간결하게 해 준다

 
 

TypeScript 기본 개념

• 개념 정의 : TypeScript는 JavaScript에 정적 타입 시스템을 추가하여 코드의 안정성과 가독성을 높이며, 개발 생산성을 향상시키는 프로그래밍 언어이다
•  타입 선언 방법 : 기본적으로 원시타입으로 타입을 선언하고 인터페이스나 타입별칭을 통해 객체구조로 여러 타입을 묶어 선언할수있다.
• 제네릭 타입 : 코드 재사용성을 높이기 위해 사용되는 방법으로 동적으로 타입 매개변수화를 통해 이미 선언된 인터페이스나 타입을 통해 유연한 확장이 가능하다
• 유틸리티 타입 : Omit, Pick 등 미리 정의된 타입을 통해 코드 가독성과 타입 작성을 단순화한다
• 타입스크립트에서의 오류 처리: 정적타입검사(컴파일)를 통해 코드 실행 전 오류를 미리 확인할 수 있다

JavaScript와 TypeScript 차이

명시적인 타입 선언
TypeScript는 변수의 명시적 타입 선언을 통해 코드 가독성을 높이고 타입오류를 방지한다
JavaScript는 변수의 타입을 런타임 시 결정하기 때문에 명시적인 타입 선언이 필요하지 않다

컴파일을 통한 런타임 오류 체크
TypeScript는 코드 실행 전 컴파일을 통해 오류를 타입 오류를 확인할 수 있기 때문에 코드의 안정성을 높일 수 있다 JavaScript는 인터프리터언어로 컴파일 과정이 없기 때문에 타입오류를 방지가 어렵다