프론트엔드의 성능 최적화 사용자가 필요한 UI를 지연과 불편함 없이 제공할 수 있는가가 프론트엔드의 성능을 점검하는 주요 목적이다. 기술적 영역에서의 프론트엔드 성능 최적화는 두 가지 영역으로 나눠 볼 수 있다. 로딩 성능 파일크기를 최소화 혹은 최적화 해야 함, (특히 이미지와 글꼴!) 컴포넌트, 이미지 등의 지연로딩과 사전로딩을 적절히 활용해야 함 minifi를 통해 번들크기 최소화. (대부분의 번들러가 production 상태에서 제공함) 캐시를 활용해야 함, 서버에서 설정함. e.g cache-control header 활성화 서버에서 텍스트 압축을 활성화 해야 함. e.g. gzip 활성화 렌더링 성능 최근의 보편적인 화면주사율(화면갱신의 단위, 모니터에 따라 다름)인 60FPS 안에 화면 처리..

Jenkins(이하 젠킨스) 는 CI/CD 환경을 구축하기 위한 오픈소스 도구이다. 워낙 유명한 도구이니 자세한 설명은 생략하겠다. 요즘은 AWS, GCP, Azure에서 강력한 managed(지들이 운영하는) CI/CD 서비스를 내고 있고 Circle CI 등 유료 툴들이 나오면서 그 위상이 많이 떨어진게 사실이다. 하지만 특정 환경에 종속되는 CI/CD 환경 구축을 원하지 않거나, 비용적인 측면을 고려했을 때 무료 오픈소스라는 점에서 여전히 많이 선택되는 툴임은 분명하다. 젠킨스를 이용하는 방법과 방식에는 여러가지가 있겠지만 Pipeline을 사용하는 것이 대다수이다. 이번 포스팅에서는 젠킨스의 Pipeline 소스코드들을 모듈화해서 관리할 수 있는 Jenkins Library에 대해 다루겠다. 1...

빠른 서비스 제공과 트렌드 반영을 위해 대두되고 있는 DevOps 개념 때문에 CI/CD는 이제 필수가 되었다. CI/CD는 애플리케이션의 통합 및 테스트 단계에서부터 제공 및 배포에 이르는 애플리케이션의 라이프사이클 전체에 걸쳐 지속적인 자동화와 지속적인 모니터링을 제공하는 것을 의미한다. 이러한 구축 사례를 일반적으로 "CI/CD 파이프라인"이라 부른다. MSA가 도입되면서 어플리케이션은 많아지고 CI/CD 파이프라인도 증가했다. 또한 Docker, kubernetes 등 컨테이너 기반 배포가 도입되면서 CI/CD 파이프라인은 더욱 복잡해졌고 이것들 역시 관리 포인트가 되었다. DevOps 개발자라는 직군이 나온 이유가 여기에 있는 듯 하다. 코드양이 많아지면 리팩토링을 통해 공통 모듈들을 도출하고 ..

지난 포스팅에서 도커의 기반이 되는 컨테이너 기술과 기본적인 도커의 개념들을 살펴봤다. 쿠버네틱스로 가는 발판① - Docker(도커) 기본 개념 회사에서 새로운 프로젝트를 들어가면서 쿠버네틱스를 사용할 일이 생겼다. 지금까지 프론트엔드를 기반으로 개발 커리어를 쌓아왔는데 백엔드를 깊게 파볼 기회가 생겼다. 본 프로젝트에 들 bgradecoding.tistory.com 이번 포스팅에서는 직접 GCP(Google Cloud Platform)에 도커를 설치해보고 도커의 라이프싸이클을 직접 명령어로 실행해 볼 것이다. 일단 GCP에 VM 인스턴스를 하나 생성하자. 앞 포스팅에서도 언급했듯이 도커는 컨테이너 기술을 활용한 소프트웨어로 리눅스 커널 기능을 활용하기 때문에 다른 OS보다는 리눅스 계열에서 사용하는 ..

회사에서 새로운 프로젝트를 들어가면서 쿠버네틱스를 사용할 일이 생겼다. 지금까지 프론트엔드를 기반으로 개발 커리어를 쌓아왔는데 백엔드를 깊게 파볼 기회가 생겼다. 본 프로젝트에 들어가기 전에 쿠버네틱스에 대한 전반적인 내용을 정리하며 공부해 볼 계획이다. 찾아보니 쿠버네틱스 자격증도 존재하는 것을 알게 되었다. 이 자격증 취득을 목표로 일단은 달려볼 생각이다. 1. 컨테이너(Container) 기술 도커는 컨테이너 기술을 지원하는 여러 프로젝트들 중 하나이며 가장 인기 있는 녀석이다. - 컨테이너 기술의 역사 2000년대 중반 리눅스에 내장된 LXC(LinuX Container)를 시작으로 계속 존재해 왔음 도커와 클라우드 기반 컴퓨팅 시대가 도래하면서 각광받기 시작한 기술 도커는 이러한 컨테이너 기술의..

프로그래밍 개발에는 여러가지 디자인 패턴이 존재한다. 특정 프레임워크를 사용하면 코드의 가독성 및 유지보수성, 개발용이성 등을 고려해 특정 디자인 패턴을 사용자에게 강제화 하기도 한다. 대표적으로 Java 진영의 Spring Framework가 있다. 이는 MVC 디자인 패턴을 어느정도 강요하여 개발을 유도한다. 프론트 엔드 개발이 복잡해지면서 백엔드 쪽에서만 논의되어 오던 디자인 패턴을 자연스럽게 프론트에서도 고민하게 되었다. 현시점 가장 인기있는 프론트엔드 개발도구인 React는 Flux 패턴이란 것을 지향하고 있다. Facebook: MVC Does Not Scale, Use Flux Instead [Updated] This article has been updated based on communi..