profile
프론트엔드 개발자

지속적 배포(continuous delivery, continuous deployment)

지속적 배포지속적 배포는 지속적 통합 과정이 원활하게 끝나면 바로 고객에게 배포하는 것지속적 배포의 3과정 1) Release: 릴리즈 단계에서는 빌드까지 모두 준비가 되었고, 어떤 기능이 개발되었는지 비즈니스 관계자들과 이야기를 나누는 단계입니다. 어떤 기능을 넣을

4일 전
·
0개의 댓글
·

지속적 통합 (CI; continuous integration)

CI는 지속적 통합(continuous integration)의 약자로, 팀 구성원이 각자의 작업을 자주 통합하는 소프트웨어 개발 방식CI의 3단계1) Code: 개발자가 코드를 코드 저장소에 Push한다.2) Build: 코드 저장소로부터 코드를 가져와서 (유닛 테스

4일 전
·
0개의 댓글
·

파이프라인(Pipeline)

배포에서 파이프라인(Pipeline)이란 용어는 소스 코드의 관리부터 실제 서비스로의 배포 과정을 연결하는 구조를 의미 파이프라인은 전체 배포 과정을 여러 단계(Stages)로 분리한다. 각 단계는 파이프라인 안에서 순차적으로 실행되며, 각 단계마다 주어진 작업(Act

4일 전
·
0개의 댓글
·

배포 자동화

배포 자동화란 한번의 클릭 혹은 명령어 입력을 통해 전체 배포 과정을 자동으로 진행하는 것배포 자동화가 필요한 이유1) 먼저 수동적이고 반복적인 배포 과정을 자동화함으로써 시간이 절약됨2) 배포 자동화를 통해 전체 배포 과정을 매번 일관되게 진행하는 구조를 설계하여 휴

4일 전
·
0개의 댓글
·
post-thumbnail

Lighthouse 분석 결과 항목

PerformancePerformance 항목에서는 웹 성능을 측정한다. 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인한다.AccessibilityAccessibili

2022년 8월 4일
·
0개의 댓글
·

Lighthouse를 이용하는 방법

1) Chrome 개발자 도구에서 실행하기크롬에서 검사하고 싶은 페이지의 url을 입력한다.개발자 도구를 연다.lighthouse 탭을 클릭한다.Generate report를 클릭한다. Categories에서 특정한 지표만 선택하여 검사할 수도 있다.대략 30-60초간

2022년 8월 4일
·
0개의 댓글
·

Lighthouse

Lighthouse구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있다.Lighthouse는 Chrome DevTool

2022년 8월 4일
·
0개의 댓글
·

JavaScript 트리쉐이킹

필요한 모듈만 import 하기import 구문을 사용해서 라이브러리를 불러와서 사용할 때, 라이브러리 전체를 불러오는 것이 아니라 필요한 모듈만 불러오면 번들링 과정에서 사용하는 부분의 코드만 포함시키기 때문에 트리쉐이킹이 가능해진다.import React from

2022년 8월 4일
·
0개의 댓글
·

트리쉐이킹(Tree Shaking)

말 그대로 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미웹 개발을 할 때, 애플리케이션의 규모가 커지면서 코드의 양이 방대해지고, 다양한 라이브러리를 가져다 사용하게 되면 불필요한 코드를 그대로 가져가는 경우가 생각보다 많이 생기는데 이런 불필요한

2022년 8월 4일
·
0개의 댓글
·

CDN(Content Delivery Network) 사용하기

CDN은 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었다. 네트워크 지연(latency)은 유저와 호스팅 서버간의 물리적 거리의 한계가 존재하기 때문에 발생할 수 밖에 없다. 유저와 서버의 거리가 멀다면 지연(latency) 또한 늘어난다. CDN은 이를 해

2022년 8월 4일
·
0개의 댓글
·

캐시 사용하기

캐시는 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻하며, 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 캐시를 사용하면 리소스를 매번 다운로드받을 필요 없이 캐시에서 꺼내와 재사용하면 되기 때

2022년 8월 4일
·
0개의 댓글
·
post-thumbnail

브라우저 이미지 최적화하기

이미지 스프라이트클라이언트에서 서버 요청이 증가할수록 로딩 시간은 점점 늘어난다. 따라서 웹 페이지를 로드하는 데 필요한 서버 요청 수를 줄이기 위해 이미지 스프라이트 기법을 사용할 수 있다.e.g. 네이버의 메인 화면에 있는 박스에 표시한 아이콘 이미지의 경우 각각의

2022년 8월 4일
·
0개의 댓글
·

리소스 로딩 최적화하기

HTML 파일에서 JavaScript 파일을 불러올 땐 script 요소를, CSS 파일을 불러올 땐 link 요소를 사용한다. 이때 파일을 불러오는 위치가 어디인가에 따라서 렌더링 완료 시점이 달라진다.CSS 파일 불러오기화면을 렌더링할 때는 DOM 트리와 CSSOM

2022년 8월 4일
·
0개의 댓글
·

CSS 최적화 방법

사용하지 않는 CSS 제거하기CSS 파일의 모든 코드의 분석이 끝난 후에 CSSOM 트리가 생성된다. 그만큼 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어진다. 따라서 사용하지 않는 CSS 코드가 있다면 제거하는 것이 좋다. 보통 해당 CSS 코드를 사용

2022년 8월 4일
·
0개의 댓글
·

HTML 최적화 방법

DOM 트리 가볍게 만들기 DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커지고, 복잡도가 클 수록 DOM 트리가 변경되었을 때 계산해야 하는 것도 많아진다.따라서 HTML 요소들의 관계를 잘 살펴보고, 불필요하게 깊이를 증가시키는 요소가 있다면

2022년 8월 4일
·
0개의 댓글
·

최적화 (Optimization)

최적화란?최적화는 보통 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것컴퓨터 공학에서의 최적화는 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미최적화의 필요성1) 이탈률 감소화면을 불러오는 시간이 길어지면 사용자가 페

2022년 8월 4일
·
0개의 댓글
·

TDD

TDD(Test-driven Development) 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론개발자 자신이 바람직하다고 생각하는 코드의 결과를 미리 정의하고, 이것을 바탕으로 코드를 작성하는 법이다. TDD를 통해 소프트웨어를 개발한다는 것은 작은 단위

2022년 8월 3일
·
0개의 댓글
·

GraphQL 사용 방법

서버로부터 데이터를 조회(Read)하는 경우, REST API에선 GET 요청이 있었다면 GraphQL에서는 Query를 이용해 원하는 데이터를 요청할 수 있다. Create, Delete와 같이 저장된 데이터를 수정하는 경우에는 Mutation을 이용해 이를 수행할

2022년 8월 2일
·
0개의 댓글
·

GraphQL의 단점

1) REST API에 친숙한 개발자의 경우 GraphQL를 학습하는 데 시간이 필요하다.2) 캐싱이 REST보다 훨씬 복잡하다.HTTP에선 각 메소드에 따라 캐싱이 구현되어 있다. 하지만 GraphQL에선 POST 메소드만을 이용해 요청을 보내기 떄문에 각 메소드에

2022년 8월 2일
·
0개의 댓글
·

GraphQL의 장점

1) 하나의 endpoint 요청/graphql이라는 하나의 endpoint 로 요청을 받고 그 요청에 따라 query , mutation을 resolver 함수로 전달해서 요청에 응답합니다. 모든 클라이언트 요청은 POST 메소드를 사용합니다.2) No! under

2022년 8월 2일
·
0개의 댓글
·