Gatsby 설치 및 사용 방법에 대해 알아보겠습니다. Gatsby(개츠비) 란 개츠비는 리액트 기반의 프레임워크입니다. 리액트를 이용하면서도 리액트에 새로운 규칙 몇 가지를 추가해 주면서 아주 약간의 복잡함을 더해주고 있습니다. 주로 서버사이드 렌더링을 위해 사용하는 Next.js 와는 달리 개츠비는 서버 없이, 오로지 정적 웹사이트 생성을 위해 사용하는 오픈소스 프레임워크입니다. 정적 웹 페이지, 플랫 페이지는 저장된 그대로 사용자에게 전달되는 웹 페이지로서, 이는 웹 애플리케이션에 의해 생성되는 동적 웹 페이지와 반대되는 용어이다. 즉, 정적 웹 페이지는 모든 상황에서 모든 사용자에게 동일한 정보를 표시하며, 콘텐츠 타입이나 문서 언어의 협상(negotiate)을 위해 웹 서버의 현대적 기능에 종속..

Spring Boot에서 MultipartFile와 Bootstrap의 Modal을 사용하여 이미지 파일을 업로드하는 방법에 대해 알아보겠습니다. Spring Boot 2.6.11 버전과 Bootstrap 5를 사용하였습니다. MultipartFile MultipartFile이란 스프링에서 업로드한 파일을 표현할 때 사용되는 인터페이스입니다. 파일 내용은 메모리에 저장되거나 임시로 디스크에 저장됩니다. 요청 처리가 끝나면 임시 저장소는 지워집니다. 설정 Spring Boot application.properties 설정 파일에 파일 업로드 경로와 파일 사이즈를 설정합니다. 윈도우 기준으로 d:/upload/ 경로로 파일을 업로드합니다. # 지도 파일 업로드 경로 spring.servlet.multipar..

mount 명령어는 디스크 드라이브와 같은 블록 디바이스(Block Device)만 마운트가 가능합니다. --bind 옵션을 추가하면 특정 디렉터리를 다른 디렉터리에 마운트(mount)해서 양쪽 디렉터리가 같은 곳으로 연결되도록 할 수 있습니다. $ mount --bind [원본 디렉토리] [붙일 디렉토리] 사용 예시 먼저 두 개의 디렉토리를 생성합니다. $ mkdir src $ mkdir dest --bind 또는 -B 옵션을 사용해서 src 디렉토리를 dest 디렉토리에 연결합니다. $ mount --bind src dest dest 디렉토리 하위에 파일을 생성을 하면 src 디렉토리에도 반영이 됩니다. $ touch dest/test 변경된 내용을 양쪽 모두 확인이 가능합니다. $ ls dest t..

리눅스 환경에서 ifconfig를 이용하여 네트워크 설정하는 방법을 알아보겠습니다. ifconfig 란 TCP/IP를 사용하여 네트워크의 네트워크 인터페이스 매개변수를 구성 또는 표시합니다. ifconfig 명령을 사용하여 네트워크 인터페이스에 주소를 지정하고 현재 네트워크 인터페이스 구성 정보를 구성 또는 표시할 수 있습니다. IP 주소 확인 옵션 없이 ifconfig 명령어만 실행하면 서버에 할당된 IP 주소를 확인합니다. $ ifconfig enp5s0: flags=4163 mtu 1500 inet 192.168.0.19 netmask 255.255.255.0 broadcast 192.168.0.255 inet6 fe80::d487:3f17:d845:654b prefixlen 64 scopeid 0..

리눅스 환경에서 netstat 명령어를 사용하여 네트워크 정보를 확인하는 방법에 대해 알아보겠습니다. netstat 란 netstat는 전송 제어 프로토콜, 라우팅 테이블, 수많은 네트워크 인터페이스, 네트워크 프로토콜 통계를 위한 네트워크 연결을 보여주는 명령 줄 도구이다. 위키백과 netstat는 네트워크 관련한 정보를 보는 유틸리티로 오래전부터 Unix 계열의 운영체제에서 사용되어 왔으며 현재 LISTEN 중인 포트, 모든 내외부/연결 정보 등을 확인할 수 있습니다. 자주 사용하는 netstat 옵션 -a : 모든 소켓보기, 이 옵션이 없으면 상태가 ESTABLISHED 인 것만 나옵니다. --all 옵션과 동일합니다. -n : 도메인 주소를 읽어들이지 않고 숫자로 출력합니다. -p : PID(프로..

WebSocket 이란 웹소켓(WebSocket)은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다. 웹소켓 프로토콜은 2011년 IETF에 의해 RFC 6455로 표준화되었으며 웹 IDL의 웹소켓 API는 W3C에 의해 표준화되고 있다. 위키백과 HTTP 프로토콜과 호환되며, 실시간 양방향 통신을 제공하기 위한 프로토콜이며 Spring 4.0에서 등장한 네트워크 서비스입니다. (접속까지는 HTTP 프로토콜을 사용하지만 이후 WebSocket 프로토콜로 변경) Spring Boot로 구현하기 Spring Boot에서 WebSocket과 자바스크립트에서 STOMP을 사용하여 메시지를 주고받는 예제를 구현해 보려고 합니다. 의존성 추가 pom.xml에 spring-boot-star..

리눅스 환경에서 PM2 서비스 등록하는 방법에 대해 알아보겠습니다. PM2에서는 시스템이 부팅되고 나서 자동으로 실행되도록 하는 서비스를 등록해 주는 startup 명령어가 있습니다. pm2 등록 $ pm2 start [파일명] --name test $ pm2 list 서비스 등록 pm2 startup 명령어를 사용하여 PM2 서비스를 등록합니다. $ pm2 startup [PM2] Init System found: systemd Platform systemd Template [Unit] Description=PM2 process manager Documentation=https://pm2.keymetrics.io/ After=network.target [Service] Type=forking User=..

메타마스크 설치 및 사용 방법에 대해 알아보겠습니다. 메타마스크(MetaMask) 란 Ethereum 블록체인과 상호 작용하는 데 사용되는 소프트웨어 암호 화폐 지갑입니다. 이를 통해 사용자는 브라우저 확장 프로그램이나 모바일 앱을 통해 이더리움 지갑에 액세스 할 수 있으며, 이를 통해 분산 애플리케이션과 상호 작용할 수 있습니다. 위키백과 이더리움 지갑 중 메타마스크는 커뮤니티에서 사용죄는 가장 인기 있는 지갑 중 하나입니다. 설치 및 사용 방법 설치 메타마스크 웹사이트에서 크롬 플러그인으로 설치 할 수 있습니다. 사이트로 접속하여 Download 버튼을 클릭합니다. 크롬 웹 스토어 창이 열리게 되고 "Chrome에 추가" 버튼을 클릭합니다. 크롬 확장프로그램에 MetaMask가 추가됩니다. Mnemo..

이전 글에서 추가된 Icon Feature를 Drag and Drop 하는 예제입니다. [OpenLayers] Custom Icon Feature 추가 이전 글 [OpenLayers] Static Image 에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추 hgko-dev.tistory.com Script ol.interaction.Modify 을 이용해서 Drag and Drop 기능을 구현합니다. modifystart, modifyend 이벤트를 등록하여 Icon을 선택하거나 이동 시 커서가 변경되도록 하였습니다. const styles..

이전 글에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. [OpenLayers] Static Image OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지 hgko-dev.tistory.com OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추가되었습니다. 먼저 ol.style.Icon 을 이용해서 아이콘 경로를 설정합니다. const styles = { icon:..