여기 저번에 왔던 것 같은데?

구글 클라우드 플랫폼(Google Cloud Platform) 무료 서버 생성하는 방법에 대해서 알아보겠습니다. 구글링을 통해 GCP 무료 서버 구축 방법을 찾아보면 포스팅이 작성된 기간에 따라 서버 구축에 관련된 내용이 달라 헷갈릴 수 있는데요. 해당 포스팅은 '2022년 6월 기준' 구글 가이드 무료 사양에 맞는 서버 생성 방법을 작성한 글입니다. 아래 링크는 위 이미지의 출처인 구글 가이드를 첨부해두었으니 참고 부탁드리겠습니다. https://cloud.google.com/free/docs/gcp-free-tier/?hl=ko#compute (구글 가이드 링크) 위 무료 사항에서 주목해야 할 부분은 리전, 인스턴스 머신, 디스크 및 용량인데요. 리전은 오리건(us-west1), 아이오와(us-cen..

구글 클라우드 플랫폼(Google Cloud Platform)에서 사용중인 프로젝트를 삭제하는 방법입니다. 기존에는 프로젝트를 생성하여 API만 사용하다가 GCP 무료 서버를 만들기 위해서 들어왔는데, 기존에 만들어놓은 사용하지 않는 프로젝트들을 제거하려는 과정에서 생각보다 삭제 방법이 바로 보이지 않아서 혹시 찾으실 분들을 위해 방법 남겨놓습니다. 먼저 GCP 메인 화면에서 삭제하고자하는 프로젝트를 선택하여 들어갑니다. 프로젝트 삭제는 프로젝트 설정 부분에서 이뤄지는데요. 우측 상단의 버튼을 통해 프로젝트 설정으로 들어가거나, 좌측 IAM 및 관리자의 카테고리 중 설정 버튼을 통해 프로젝트 설정으로 이동합니다. 설정 우측 부분에 종료 버튼을 통해 프로젝트를 종료할 수 있는데요. 프로젝트는 즉시 종료되는..

포토샵에서 이미지를 만들다 보면 단순한 png 파일의 색상 변경이 필요할 때가 있습니다. 이럴 때는 Color Overlay 속성을 통해 정말 간단하게 png 파일의 색상을 변경할 수 있는데요. 아래 내용을 통해 살펴보겠습니다. 번외로, 페인트 툴을 사용하여 png 파일에 색상을 입히는 것은 좋지 않은 방법입니다. 색을 위에 덮은 것이기 때문에 이미지가 확대되었을 때 테두리 부분이 지저분하게 보일 수 있습니다. Color Overlay 기능은 Layers에서 해당 png layer가 선택된 상태에서 아래에 'fx'(함수) 버튼을 통해 사용할 수 있습니다. Color Overlay에서 색상을 변경할 수 있고, Opacity(투명도)도 조절할 수 있습니다. Make Default를 통해 해당 오버레이를 기본..

먼저 클립보드(Clipboad)란, '복사'하거나 '잘라내기'한 텍스트 또는 파일 등을 '붙여넣기' 하기 전까지 임시로 저장해두는 공간입니다. 자바스크립트 클립보드 복사하는 방법에는 document.exeCommand() 함수를 사용하는 방법과 Clipboard API를 사용하는 방법, clipboad.js 라이브러리를 사용하는 방법이 있는데요. document.execCommand() 함수의 경우 (2022년 6월) 현재 정상적으로 동작은 하지만 웹 표준에서 Deprecated 되었기 때문에 공식문서에서도 사용되지 않으며, 대체 방법으로 Clipboad API 사용이 권장되고 있습니다. 하지만 Clipboad API의 경우 Safari 13.1 버전부터 https 환경에서만 지원한다는 아쉬운 점이 있는..

계층 구조를 가지는 데이터는 개발에서 너무나 자주 접하게 되며, 또 잘 설계되어야 효율적으로 사용할 수 있는 구조인데요. 때문에 한번 잘 정리해놓으면 좋겠다 싶어서 공부한 내용입니다. 해당 포스팅은 트리 구조의 데이터베이스를 설계하는 방식 중 '클로저 테이블(Closure Table)' 방식에 대해서 살펴보고, 직접 구현해본 내용입니다. Closure Table 'SQL Anti Patterns' 도서에 수록된 클로저 테이블은 '계층 구조를 저장하는 단순하고 우아한 방법'으로 정의되어 있습니다. 아래에서 자세하게 살펴보겠지만 클로저 테이블은 조상-자손 관계에 대한 경로뿐만 아니라 트리의 모든 경로를 저장하는데요. obj_table과 clo_table을 통해 자세한 내용 살펴보겠습니다. (기본적인 클로저 ..

시작에 앞서 Vue.js란, 2014년 첫 출시된 Vue.js는 애플리케이션 로직과 UI의 분리가 필요한 프로젝트에서 UI를 빠르게 개발하기 위해 만들어진 자바스크립트 기반 프레임워크입니다. MVVM(Model-View-ViewModel) 패턴을 따르며, Angular.js와 React.js가 대부분을 차지하던 JavaScript Framework 시장에서 꾸준하게 점유율을 높여 현재는 비슷한 위치에 있다고 합니다. Vue.js는 Angular.js와 React.js에 비하여 유연하고 가볍다는 장점이 있으며, HTML 마크업 기반의 템플릿을 활용하여 CSS를 작성하는 기존의 문법 스타일을 사용하기 때문에 Vue.js를 처음 접하는 사용자들이 배우기 쉽다는 점도 장점으로 꼽히고 있습니다. Vue.js 프로..

HttpRequestHeader로부터 사용자 요청 IP(Internet protocol) 가져오는 방법 프로젝트를 하게 되면 IP Whitelist 등의 목적으로 인해 사용자의 요청 IP를 가져와야 하는 경우가 있습니다. IP란 무엇인지 간단하게 살펴보고, HttpServletRequest로부터 사용자의 요청 IP를 가져오는 코드를 함께 살펴보겠습니다. (IP 가져오는 부분의 코드만 살펴보실 분은 내용을 아래로 조금만 스킵해주시길 바랍니다.) IP(Internet protocol)란, IP 통신에 필요한 고유 주소를 말하며, 인터넷에 연결된 통신 기능이 제공되는 모든 장치들(컴퓨터, 스마트폰 등)이 서로 통신을 하기 위해 필요한 식별이 가능한 고유 번호입니다. 스마트폰으로 예를 들면 스마트폰끼리 통화를 ..

Java 8, LocalDateTime Jackson Serializer Error 해결 방법 @AllArgsConstructor @Setter @Getter public class Example { private LocalDateTime localDatetime; } Example example = new Example(LocalDateTime.now()); ObjectMapper objectMapper = new ObjectMapper(); try { String jsonStr = objectMapper.writeValueAsString(example); } catch (JsonProcessingException e) { e.printStackTrace(); } (오류 예시 코드) LocalDateT..

쿠키(Cookie) 개념, 본격적으로 코드를 보기 전에 쿠키(Cookie)의 개념부터 간단하게 살펴보면, HTTP 쿠키는 웹 브라우저(web browser)에 저장되는 4KB 크기를 가진 문자열입니다. 기본적으로 HTTP 프로토콜은 각각의 요청을 독립적인 트랜잭션으로 취급하는 통신 프로토콜로 '무상태(Stateless) 프로토콜' 이라고도 불리는데요. 이때 쿠키는 제한적이긴 하지만 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공하는데, 이것이 HTTP 프로토콜에서 상태 관리의 개념으로 볼 수 있습니다. 하나의 예로, 쿠키는 서버에서 받은 로그인 토큰 정보를 웹 브라우저에 저장하고, 다시 서버에 요청을 할 때, 그 정보를 서버에 보냄으로써 사용자를 식별할 수 있게 하는 역할을 합니다. 쿠키를..

해당 포스팅은 Java에서 QR Code를 생성하여 화면으로 출력하는 방법과 이미지 형식으로 저장하는 방법에 대해서 정리한 내용입니다. QR코드는 'Quick Response(빠른 응답)을 뜻하며 흑백의 격자무늬 패턴 방식으로 정보를 나타내는 매트릭스 형식의 2차원 바코드인데요. 기존의 상품 바코드보다 큰 용량으로 많은 양의 정보를 담을 수 있다는 장점이 있습니다. (QR코드는 숫자 최대 7089자, 문자(ASCll) 최대 4296자를 담을 수 있습니다.) com.google.zxing javase 3.4.0 (의존성 추가 / maven) * 현재 3.4.0 버전에서 심각한 취약점 이슈가 발생되어 다른 버전을 사용하시길 바랍니다. QR Code 생성을 위해서는 'com.google.zxing' 라이브러리..