배포 자동화 한번의 클릭 혹은 명령어 입력을 통해 전체 배포 과정을 자동으로 진행하는 것 시간 절약 및 휴먼 에러(실수) 방지 가능 Source - 원격 저장소의 소스 코드에 변경 사항이 일어날 경우, 감지하고 다음 단계로 전달 Build - Source에서 전달받은 코드를 컴파일, 빌드, 테스트하여 가공 Deploy - Build에서 받은 것을 실제 서비스에 반영 지속적 통합 (CI : continuous integration) 팀 구성원이 각자의 작업을 자주 통합하는 소프트웨어 개발 방식 Code - 개발자가 코드 저장소에 Push Build - 코드 저장소에서 가져와 테스트 후 빌드한다. Test - 빌드 결과물이 다른 컴포넌트와 잘 통합되는지 확인 모든 코드 변화를 하나의 레포지토리에서 관리함. ..

▶ 최적화 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정 컴퓨터 공학에서의 최적화는 가능한 적은 리소스를 소모하면서 가능한 빠르게 원하는 결과를 얻을 수 있도록 하는 것 웹 개발에서의 최적화는 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것이다. ▶ 최적화의 필요성 및 효과 1. 이탈률 감소 화면을 불러오는 시간이 길어지면 사용자가 페이지를 이탈할 확률이 높아진다. 페이지 로드가 3초 이상 걸리면 53%의 사용자가 사이트를 이탈한다고 하는데, 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면 사용자의 이탈률을 효과적으로 줄일 수 있다. 2. 전환율 증가 이탈률이 줄어들면 전환율이 높아질 확률이 커지는데, 전환율은 웹사이트를 방문한 사용자 중 회원가입, ..

GraphQL 페이스북에서 만든 쿼리 언어 만족도 및 인지도 굉장히 높음 Graph + Query Language의 줄임말 GraphQL은 그래프로 생각하기에서부터 출발한다. 마인드맵과 유사한 데이터 구조 그래프는 여러 개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조 하나의 점인 Node 또는 정점과 하나의 선인 간선으로 이루어져 있고, 각 노드간의 간선을 통해 특정한 순서에 따라 그래프를 재귀적으로 탐색 할 수 있다. GraphQL에서는 모든 데이터가 그래프 형태로 연결되어 있다고 전제한다. 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답으로 전송할 수 있다. { 책 : { 책 이름 : "GraphQL은 어렵지 않다", 저자 : [ { 이름 : "김코딩"}, { 이름..

번들링 잡지를 사면 게임 CD를 주는 것과 같은 원리 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 프론트엔드에서는 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 사용자는 브라우저를 열고 주소를 입력하면, 프론트엔드 개발자가 번들링한 여러 파일을 받는다. 용량을 크게 줄여줘 로딩 속도 시간을 줄여주고 높은 성능을 얻을 수 있다. WebPack webpack은 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러다. 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러이며, HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 조합해 하나의 묶음으로 번들링하는 도구이다. 주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링이 가능함 np..