안녕하세요.이번 글에서는 지난 포스팅에서 구현한 실시간 코인 시세 사이트에 WebSocket을 활용한 실시간 데이터를 구현하고, 데이터를 가공하고 변화를 감지하여 UI에 반영하는 방법을 함께 살펴보겠습니다. 목차WebSocket을 활용한 실시간 데이터 구현데이터 가공과 UI 수정 1. WebSocket을 활용한 실시간 데이터 구현 실습을 진행하기 전, Vue의 Lifecycle Hooks에 대해 알아보도록 하겠습니다. | Lifecycle HooksVue에서는 컴포넌트가 생성되고 제거되는 일련의 흐름(생명주기)에 따라 특정 시점마다 작업을 수행할 수 있도록 라이프사이클 훅이라는 개념을 제공합니다.Composition API에서는 각 훅을 함수 형태로 가져와서 실행하며, 컴포넌트의 생성, 마운트, 업데이..

안녕하세요.이번 글에서는 앞선 포스팅에서 소개한 Vue 3와 UPbit API를 활용하여 간단한 예제를 직접 구현해보겠습니다.실습 과정에서 Vue의 컴포넌트 구조와 컴포넌트간의 상호작용 방식에 대해서도 함께 알아보겠습니다. 목차프로젝트 세팅과 UI 구성UPbit API 연동하여 종목명 표시하기 1-1. 프로젝트 생성 및 VSCode 확장 프로그램 소개이전 포스팅에서 Node.js 설치와 프로젝트 생성 방법을 다뤘습니다.이번에는 동일한 방식으로 Vue 프로젝트를 만들고, 로컬 환경에서 실행해보겠습니다. [Vue.js 3.0] (1) Vue 소개 및 프로젝트 생성안녕하세요. 이번 글에서는 웹 개발에서 중요한 역할을 하는 프론트엔드 프레임워크 Vue.js를 설명드리겠습니다. 우선 Vue.js에 대해 알아보고 ..

안녕하세요. 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..

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

저희 회사 제품인 CMS 솔루션 bizXpress는 Thymeleaf Template Engine 2.1.5 을 채택하여 사용하고 있습니다. 과거에는 JSP만 사용하다가 Thymeleaf 를 처음 접하면서 조금 생소하고 비교적 까다로운 사용법 때문에 적응하기 힘들었는데 지금은 모든 팀원들이 어려움 없이 잘 사용하고 있습니다. 저희들과 같이 Thymeleaf를 처음 접하는 분들에게 조금 이나마 도움이 될 수 있지 않을까 해서 자주 사용했던 기능들을 예제 위주로 정리 해보겠습니다. Thymeleaf는 Server-side Template Engine으로 순수 HTML문서에 HTML5문법으로 Server-side 로직을 수행하고 적용시킬 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14..

이번 주제는 웹 보안에 관련된 내용입니다. 홈페이지에 웹 취약성점검 툴을 돌려 테스트 해본 결과 나온 몇 가지 점들에 대해서 이야기 해볼까 합니다. 지금 여기서 이야기하지 않은 내용들도 많이 있겠지만 간단한 설정만으로 큰 효과를 볼 수 있는 사항에 대해서 진행해 보도록 하겠습니다. 1. 불필요한 Method 지원 첫 번째 목록은 불필요한 Method지원에 관한 내용입니다. HTTP method는 다음과 같은 Method를 지원하고 있습니다. GET 일반적인 요청으로 요청 URI에 모든 요청정보를 포함 하여 전송합니다. POST GET이 URI에모든 요청정보를 포함하였다면 POST는 BODY에 요청정보를 숨겨 전송합니다. PUT POST와 같은 방식으로 전달되지만 BODY의 내용이 실제 URI에 저장됩니다..