안녕하세요. 2편에서는 1편에서 설명드렸던 CI/CD를 실제로 구축해보도록 하겠습니다. 1편을 확인하고 싶으신 분들은 아래 링크를 눌러주세요. AWS EC2 활용한 CI/CD 구축 (1) 1. 아키텍처 아키텍처는 아래 순서대로 진행합니다. 개발자 작업사항 커밋 → jenkins 빌드 실행 → GitHub 프로젝트 파일 빌드 → jenkins 빌드한 파일을 배포서버 ec2 인스턴스에 배포 → 배포 서버 ec2 톰캣 실행 → 스프링 부트 프로젝트 실행 완료 2. 구축순서 구축은 아래 순서대로 진행하도록 하겠습니다. 1. 개발 프로젝트 github 연동 2. AWS 계정 생성 → 2번 단계까지는 별도 설명없습니다. 3. IAM 사용자 추가 (그룹 생성, 권한 추가) 4. EC2 서비스 인스턴스 생성 5. EC..

안녕하세요. 이번 글에서는 CI/CD에 대한 개념과 CI/CD 이해에 도움이되는 AWS, 클라우드 컴퓨팅에 대해 설명드리겠습니다. 1. AWS와 클라우드 컴퓨팅 1-1. AWS(Amazon Web Services)란 Amazon Web Services는 아마존에서 제공하는 클라우드 서비스 플랫폼으로 네트워킹을 기반으로 가상 컴퓨터와 스토리지, 네트워크 인프라 등 다양한 서비스를 제공합니다. [서비스 종류] Amazon EC2 가상 서버를 제공하여 애플리케이션 실행에 필요한 컴퓨팅 리소스를 제공합니다. AWS CodePipeline 소프트웨어 전달 프로세스를 자동화하기 위한 서비스로 소스 코드 변경 사항을 가져와 빌드, 테스트, 배포 단계를 설정하고 연결하여 전달을 지원합니다. AWS CodeBuild 소..

안녕하세요. 이번 주제는 앞서 포스팅했던 Vue 소개 및 프로젝트 생성 편에 이어 실제 프로젝트에서 Vue를 사용하는데 많이 도움되었던 Navigation Guard, Pinia의 활용 경험과 장점을 공유해드리고자 합니다. 목차 네비게이션 가드 (Navigation Guard) 피니아 (Pinia) ※ 시작하기에 앞서 해당 글에서 제공하는 코드는 실제 코드가 아니며 예제를 위해 유사하게 만든 샘플 코드이니 참고바랍니다. 1. 네비게이션 가드 (Navigation Guard) (1) 네비게이션 가드란? 네비게이션 가드는 Vue Router 라이브러리에서 제공하는 라우터로 페이지를 이동하는 동안 특정 조건에 따라 화면 이동을 제어하거나 변경하는 기능입니다. 다시 말해 특정 URL로 접근할 때 조건에 따라 접..

D3.js란? 안녕하세요. 자바스크립트 라이브러리 중 하나인 D3.js에 대해서 소개해드리려고 합니다. D3.js란 자바스크립트 라이브러리를 처음 들어보신 분도 또는 자주 사용해보셨던 분들도 계시겠지만, 이번에는 처음 접해보시는 분들을 위해 조금 자세하고 쉽게 설명해드리도록 하겠습니다. (이미 자주 사용하시고 저보다 더 많은 지식을 알고 계시는 분들에게 미리 양해 말씀드립니다^^) 우선 D3는(D3.js를 줄여서 D3라고 함) 완전히 오픈소스이며, Data-Driven-Documents의 약자로 D가 연속으로 3번 들어가서 일명 D3라는 명칭으로 부르며, 웹브라우저상에서 동적이고 인터렉티브한 정보시각화를 구현하기 위한 자바스크립트 라이브러리입니다. D3의 장점은 새로운 언어 형태가 아니라 자바스크립트 문..

안녕하세요. 이번 글에서는 웹 개발에서 중요한 역할을 하는 프론트엔드 프레임워크 Vue.js를 설명드리겠습니다. 우선 Vue.js에 대해 알아보고 프로젝트를 생성하며 간단한 예제를 만들어보고, 다음 편에선 자사 수행 프로젝트(현대차증권 ‘모바일리빌딩’)에서 Vue를 활용하며 느꼈던 개발 경험을 공유드리도록 하겠습니다. 1. Vue란 먼저 Vue를 알아보기 전 프론트엔드 프레임워크를 사용하는 이유와 SPA(Single Page Application)가 등장한 배경에 대해 설명드리겠습니다. SPA 방식 등장 전 웹 애플리케이션은 사용자가 화면을 이동할 때 마다 새로운 HTML 페이지를 서버에 요청합니다. 반면, SPA는 한 페이지 안에서 모든 기능이 동작되도록 설계되어 HTML 페이지 전체를 불러오지 않고 ..

안녕하세요 데스크톱 애플리케이션을 개발하기 위해 공부한 일렉트론이라는 프레임 워크에 대해서 정리해 보겠습니다. Electron은 2013년 GitHub이 텍스트 편집기인 Atom을 만들기 위해 개발한 프레임 워크입니다. 2014년 Atom과 Electron이 오픈 소스로 공개가 되면서, 지금은 많은 개발자들과, 회사들에게 사랑 받는 인기 있는 도구가 되었습니다. 기본적인 웹 지식만 있다면 누구든 데스크톱 애플리케이션 개발자로 만들어주는 일렉트론에 대해서 지금부터 설명하겠습니다. 1. 일렉트론(Electron)이란? Electron은 Native애플리케이션이며 Chromium과 Node.js를 1개의 런타임으로 통합하여 JavaScript, HTML, CSS만 가지고도 데스크톱 애플리케이션을 만들 수 있도..