rexondex's blog

rakaso598.github.io Timeline rakaso598.github.io 깃허브에는 `유저명.github.io` 리포지토리를 통해 정적 웹페이지를 배포하는 기능이 있습니다. 이번에 유저명 저장소를 업데이트 한 겸, 후기를 작성합니다.  HTML로 전체적인 구조를 정의하고 `/` 루트 위치에 배치했습니다.`/images` 에는 이미지가 들어가도록,그리고 `/items`에는 게시물을 담당하는 데이터를 넣었습니다. `/items/items.json` 파일은 게시물의 데이터를 표현합니다.  이렇게요! JSON은 문자열 데이터 포맷으로, 문자열을 구조화하여 저장합니다.가장 큰 틀을 대괄호로 감싸고 중괄호로 게시물을 구분하게 했습니다. 중괄호 `{}`안에는 키와 값으로 구분되도록 데이터를 정리하면 됩..

시맨틱 태그는 콘텐츠의 형식 뿐만 아니라 콘텐츠의 의미와 구조를 설명합니다.시맨틱 태그를 사용하면 접근성과, SEO, 가독성 측면에서 다양한 이점을 얻을 수 있습니다. 인용 출처 - 시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점 - TBWA 데이터랩  시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그를 말합니다. 이번 글을 통해 시맨틱 태그 요소의 종류와 이점까지 확인해보세요.seo.tbwakorea.com ■ 시맨틱 (Semantic) 단어 자체의 뜻은? `의미의, 의미론적인` 라는 뜻이 담겨있습니다. 이로 유추해보면, 시맨틱 태그는 태그 내용에 의미를 부여하는 ..

종속형 스타일 시트(Cascading Style Sheets, CSS)는 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어입니다.브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 적절히 표현합니다. 하나의 스타일 선언은 웹 페이지의 모양을 결정하는 속성과 그 값으로 이루어져 있습니다. 인용 출처 : CSS - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN 그러면 Cascading이란 무엇일까요?MDN Docs에서 찾아봤습니다. MDN Docs에 따르면,Cascade는 사용자 에이전트가 서로 다른 소스에서 생성된 속성 값을 결합하는 방법을 정의하는 알고리즘입니다. 이렇게 들어서는 이해가 잘 안돼서, 한국어로 정리된 자료를 찾아봤습니다. 캐스케이드는 CSS에서 한 요소에 여러 개의..

저는 이전에 카페24 워드프레스 호스팅을 구매했었습니다. 워드프레스를 도메인에 연결하고 세팅한지는 좀 되었지만 .. 늦게서나마 검색엔진최적화를 진행한 후기를 올립니다. 제가 진행한 검색엔진 최적화는 총 5가지입니다. 워드프레스 Yoast SEO 활성화구글 서치콘솔 (Google Search Console) 등록빙 웹마스터툴 (Bing Webmaster Tools) 등록네이버 서치어드바이저 등록다음 웹마스터도구 등록 간단하게 사진과 함께 설명드리겠습니다.  [First-time configuratin]을 클릭해 첫 세팅을 완료했습니다.  두번째는, 구글 서치 콘솔입니다. RSS는 주소에 /feed 를 붙이면 됩니다.(예를 들어, https://rexondex.tistory.com/feed 형식으로) Sit..

:: PaaS 서비스란? :: 클라우드 컴퓨팅 서비스는 크게 IaaS, PaaS, SaaS로 구분할 수 있어요. IaaS는 Infrastructure as a Service, 인프라 서비스로, 가상화된 컴퓨터 자원을 이용할 수 있는 서비스에요.PaaS는 Platform as a Service. 플랫폼 서비스로, 개발자들이 어플리케이션을 개발하고 실행할 수 있는 환경을 제공해요.SaaS는 소프트웨어 서비스로, 사용자가 인터넷을 통해 애플리케이션을 직접 이용할 수 있게 제공하는 소프트웨어 서비스에요. Saas의 예시로는 Google Workspace, Microsoft 365, Dropbox, Adobe Creative Cloud, Zoom 등이 있어요, 이 소프트웨어들의 공통점은 클라우드를 사용하여 사용자..

자바 스프링부트와 AWS 클라우드 배포를 생각하던 중 도커와 쿠버네티스의 역할이 궁금해졌습니다. 그래서 이번엔 도커에 대한 궁금증을 풀기 위해 스프링부트 jar 파일을 도커 컨테이너화하고, 컨테이너를 실행하여 동작까지 확인하는 것이 목표입니다.  우선, Docker를 설치해야 합니다. [ https://www.docker.com/products/docker-desktop/ ]도커 공식사이트에서 다운로드 받을 수 있습니다. 도커 설치 후, 아래 가이드로 진행합니다. 0. application.properties에 코드를 추가합니다.# H2 memoryspring.datasource.url=jdbc:h2:mem:testdb;DB_CLOSE_DELAY=-1;DB_CLOSE_ON_EXIT=FALSEspring...

AWS EC2 인스턴스에서 Docker 컨테이너를 실행하고 웹 애플리케이션을 배포하는 방법에 대해 설명합니다. 이 과정에서는 EC2 인스턴스를 생성하고, Docker를 설치하며, Docker Hub에서 컨테이너를 다운로드하고 실행하는 방법을 다룹니다. nginx를 EC2에 배포하는 기본적인 가이드와, EC2에 도커 컨테이너를 실행한 후기로 구성했습니다.1. AWS EC2 인스턴스 생성- 1. AWS Management Console에 로그인 후 EC2 서비스로 이동합니다.- 2. "인스턴스 생성" 버튼을 클릭하여 새로운 EC2 인스턴스를 생성합니다.t2.micro 인스턴스를 선택하여 무료 사용 범위 내에서 진행합니다.키 페어를 생성하거나 기존 키를 선택하여 SSH 접속에 사용할 수 있도록 합니다.보안 그..

Docker Compose를 사용하여 Spring Boot 컨테이너와 Node.js 컨테이너를 동시에 실행하고, API 통신을 완성하는 것이 목표입니다.- Node.js 컨테이너는 미들웨어 역할을 하며, API Gateway 또는 Web Gateway로 동작합니다. 이 컨테이너는 Spring Boot의 H2 메모리 데이터베이스에 접근하여 데이터를 읽고 쓸 수 있고, HTML을 통해 조작 가능한 인터페이스도 제공합니다. - Spring Boot 컨테이너는 백엔드 서버 역할로, 데이터베이스와 REST API를 제공합니다. Spring Boot의 RestController를 통해 Node.js에서 URI 요청을 받아 REST 통신을 수행합니다. 이 구조를 통해 Node.js는 프론트엔드 요청을 처리하고, Sp..

NestJS를 사용해 수입/지출 관리를 위한 기본 REST API를 구축하고 실행한 것입니다.주요 작업 내용과 코드를 기록한 문서입니다. 1. NestJS 프로젝트 생성NestJS는 백엔드 애플리케이션 프레임워크로, 모듈 기반 구조와 데코레이터를 활용한 선언적 코딩 스타일을 제공합니다.초기 프로젝트 설정과 IncomeExpenseModule 생성은 애플리케이션의 구조를 정리하는 작업입니다. 2. Mongoose 및 MongoDB 연결Mongoose를 통해 MongoDB와 통신할 수 있도록 설정했습니다.MongoDB는 NoSQL 데이터베이스로, 수입/지출 데이터를 저장할 데이터베이스로 사용되었습니다.MongooseModule.forFeature를 사용해 IncomeExpense라는 Mongoose 모델을 ..

https://rakaso598.github.io/xlsx-generator/  자바스크립트 탐색 중 CSV라는 데이터 포맷에 대해 알게 되었고, 이를 활용하여 파일을 제작하고 다운로드하는 기능을 만들 수 있을 것이라는 아이디어를 떠올렸습니다. CSV 포맷은 데이터를 콤마(,)로 구분하는 간단하고 직관적인 방식으로, 이를 자바스크립트에서 처리하는 것은 비교적 용이한 작업이라고 예상했습니다. 자바스크립트는 이미 JSON 파싱 및 직렬화 기능을 갖추고 있어, 문자열을 다루는 함수 구현에 있어 충분한 기반을 제공하고 있었기 때문입니다. 이러한 배경을 바탕으로, 사용자로부터 입력 받은 데이터를 CSV 파일로 변환하는 프로토타입을 제작한 뒤, 이를 발전시켜 브라우저에서 다운로드할 수 있는 .xlsx 엑셀 파일로 ..