분류 전체보기

갤러리 기능을 구현하여 이미지를 masonry 레이아웃으로 화면에 나타내고 이미지를 클릭했을 때 미리 보기 기능을 구현해 보려고 한다. 이러한 기능을 구현하기에 괜찮은 라이브러리를 찾게 되었는데 React Photo Album,Yet Another React Lightbox 두 가지 라이브러리를 사용하면 내가 원하는 기능을 구현할 수 있다. 다양한 레이아웃으로 표현할 수 있고, 이미지 미리보기 기능까지 사용할 수 있는 라이브러리다. 해당 라이브러리는 타입 스크립트를 사용하며 공식 문서는 아래 페이지를 참고하면 된다.  React Photo Album   Yet Another React Lightbox  오늘 할 작업은 먼저 이미지를 내가 원하는 형태로 띄워보는 작업을 진행하고 다음으로 미리 보기 기능을 ..

이전 포스팅에 이어 Jenkins를 설치하고 설정을 마무리 지어 보도록 하겠다. 아직 jenkins를 설치하지 않았다면 이전 포스팅을 참고하면 된다. 2024.08.06 - [DevOps/CI·CD] - [Jenkins] Windows에 Jenkins 설치하기 [1] [Jenkins] Windows에 Jenkins 설치하기 [1]회사에서 프로그램을 수정하고 빌드 배포를 하면서 여기는 수동으로 빌드해서 파일을 실서버에 접속해서 빌드한 파일을 복사 붙여 넣기 하는 방법으로 운영해 왔다.(정말 구식인거 같다...) 그goddmk.tistory.com1. Jenkins 설정 마무리 하기1-1. 초기 비밀번호 입력jenkins를 정상적으로 설치했다면 웹브라우저를 열어 localhost:8080 (8080포트는 이..

회사에서 프로그램을 수정하고 빌드 배포를 하면서 여기는 수동으로 빌드해서 파일을 실서버에 접속해서 빌드한 파일을 복사 붙여 넣기 하는 방법으로 운영해 왔다.(정말 구식인거 같다...) 그리고 번외이지만 심지어 버전관리는 svn을 사용하고 있었다... 요즘 대세는 거의 git을 쓰고 있고 Jenkins로 자동화를 하려면 git이 더 편해서 이관해버렸다... 이관하는 방법이랑 git 설치과정 등은 추후에 작성해 보겠다.CI / CD그래서 내가 직접 빌드하고 옮기고 하는 과정들이 정말 귀찮고 힘들어서 자동화를 해보려고 생각해 낸 것이 바로 CI/CD다. CI/CD 란 간단히 말해서 빌드 테스트 배포를 통합적으로 자동화하는 프로세스이다. JenkinsCI / CD를 위한 가장 유명한 도구가 바로 이 Jenkin..

Jenkins로 CI/CD를 구축하여 윈도우 서버에 자동으로 배포를 할 수 있도록 조치가 필요하였다. 그래서 자동으로 배포하기 위해서는 ssh를 사용할 필요가 있었다.SSH란?ssh는 원격지에 연결하여 명령을 실행하고 파일을 주고받을 수 있도록 해 주는 프로토콜이다. 보통 원격을 위해 텔넷을 사용하는데 이는 암호화가 이루어지지 않아 보안에 취약하다. 그래서 ssh를 주로 사용하여 파일을 주고받는다. 그럼 본격적으로 ssh를 사용할 수 있도록 해보겠다.현재 서비스를 운영하고 있는 서버의 OS는 윈도우 서버 2016이다. 빌드가 완료된 파일을 해당 서버에 ssh를 통해서 전달하기 위해서는 Open ssh라는 녀석을 설치해줘야 한다. 윈도우10 이상 (윈도우 서버 2019 이상) 에서는 open ssh 구성 ..

리액트 프로젝트를 시작하기 앞서 디자인을 편하게 하기 위해 CSS 프레임워크를 사용하기로 했다. 그래서 가장 많이 사용하는 tailwind를 선택해서 개발해 보기로 했다.1. Tailwindtailwind는 아래처럼 classname(react의 경우 class가 아닌 className으로 해줘야 한다.)에 스타일을 입력하면 바로 css가 적용되는 녀석이다. 처음에는 tailwind만 적용해서 코드를 짜보려고 했는데 하다보니 classname 길이가 엄청 길어져서 가독성이 많이 떨어졌다. 그래서 찾아보니 리액트는 보통 styled-componets를 이용해서 주로 css를 짠다고 하는데... 지금이라도 바꿔야 하나 생각했지만, 조금 더 찾아보니 twin macro를 사용하면 Tailwind와 styled..

프론트엔드 개발 공부를 위해서 토이 프로젝트를 하나 시작해보려고 한다. 시작하기 전 프레임워크를 선택하려고 하는데 아무래도 가장 대중적인 리액트를 다루어 보려고 한다. 예전에 한번 리액트를 다루어 본 적이 있는데 조금 검색해 보니 요즘은 vite라는 빌드 툴도 함께 쓴다고 해서 이것을 가지고 진행해 보겠다. 그리고 vscode를 통해 윈도우 환경에서 개발을 진행한다.1. Vite 란?먼저 Vite는 Rollup 기반 번들링과 Go로 작성된 Esbuild 를 조합해서 엄청나게 빠른 속도를 자랑하는 빌드 도구이다. 그래서 실제로 vite로 dev-server를 구동시켜 보면 내가 코드를 짜고 저장하면 웹 브라우저에서 새로고침을 안 해도 거의 실시간으로 화면에 내가 수정한 것으로 바뀌게 된다. 그렇게 된다면 ..

서버를 모니터링하기 위해서는 zabbix agent라는 녀석을 설치해서 자빅스와 연동할 수 있도록 해줘야 한다.사용하는 서버의 OS가 윈도우라 윈도우 서버에 맞는 자빅스 에이전트를 설치하여 서버를 모니터링해 보도록 하겠다. 추후 윈도우 서버뿐만 아니라 리눅스계열에 한번 에이전트를 설치해서 테스트해 보는 것도 적어보겠다.1. Zabbix Agent 설치먼저 자빅스 사이트에 들어가서 에이전트 설치를 진행해 보자내가 설치한 자빅스 버전은 7.0 버전이기에 해당 버전에 맞는 윈도우 에이전트를 설치해 주면 된다.https://www.zabbix.com/download_agents?version=7.0+LTS&release=7.0.0&os=Windows&os_version=Any&hardware=amd64&encr..

Zabbix를 구축하고 제일 먼저 해볼 것은 시스코 스위치 모니터링이다. 모니터링을 위해 간단하게 SNMP라는 프로토콜의 개념에 대해 알아보자. SNMP란? 간이 망 관리 프로토콜(Simple Network Management Protocol, SNMP)은 IP 네트워크상의 장치로부터 정보를 수집 및 관리하며, 또한 정보를 수정하여 장치의 동작을 변경하는 데에 사용되는 인터넷 표준 프로토콜이다. SNMP를 지원하는 대표적인 장치에는 라우터, 스위치, 서버, 워크스테이션, 프린터, 모뎀 랙 등이 포함된다. 위키백과에 따르면 이렇게 정의되어있다. 자세한 내용은 아래 사이트를 참고하길 바라며... 출처 https://ko.wikipedia.org/wiki/%EA%B0%84%EC%9D%B4_%EB%A7%9D_%..

저번시간에 이어 자빅스를 구축하고 웹에서 마무리 설정을 해보려고 한다. zabbix 구축과 관련해서는 이전 포스팅을 참고하면 된다. Ubuntu에 MariaDB 설치하기 [Zabbix 구축기 - 1] Ubuntu에 MariaDB 설치하기 [Zabbix 구축기 - 1]네트워크, 서버, 홈페이지 등등... 여러 개를 한꺼번에 모니터링할 일이 생겼다. 그런데 그런 것을 이용하는 툴들은 거의 다 상용이라 돈이 든다... 그래서 좀 더 검색해 보니 Zabbix라는 모니터링goddmk.tistory.com Ubuntu에 Zabbix 설치하기 [Zabbix 구축기 - 2] Ubuntu에 Zabbix 설치하기 [Zabbix 구축기 - 2]지난번에는 우분투에 MariaDB를 설치하고 데이터베이스 환경을 구축해 보았다. ..

지난번에는 우분투에 MariaDB를 설치하고 데이터베이스 환경을 구축해 보았다. 이제 본격적으로 Zabbix를 구축하는 과정에 대해 작성해 보겠다. 먼저 Zabbix를 설치하기 위해 공식 홈페이지의 다운로드 사이트에 들어가 보았다.공식 홈페이지에 들어가 보니 Zabbix 버전과 그에 맞는 OS, DB 등 선택하면 어떻게 설치하는지 자세하게 나와 있다. 그걸 기반으로 구축해 보겠다. 진행하기 앞서 DB를 아직 설정하지 않았다면 이전 포스팅을 참고하자Ubuntu에 MariaDB 설치하기 [Zabbix 구축기 - 1] Ubuntu에 MariaDB 설치하기 [Zabbix 구축기 - 1]네트워크, 서버, 홈페이지 등등... 여러 개를 한꺼번에 모니터링할 일이 생겼다. 그런데 그런 것을 이용하는 툴들은 거의 다 상..