Website

pre 태그는 HTML에서 사용되는 태그 중 하나로, “preformatted text"의 약자이다. 이 태그는 텍스트를 미리 서식이 지정된 상태로 표시하도록 지정하는 데 사용되고, pre 태그 안에 있는 텍스트는 웹 브라우저에 정확히 그대로 표시되며, 여백과 줄 바꿈, 공백 등이 그대로 유지된다.

Svelte를 공부하면서, 하나씩 공부한 것들을 구현해보는 간단한 프로젝트를 하나 만들었다. 로컬PC에서만 서버를 구동해서 결과만 확인하다가, 무료 웹호스팅을 이용하여 언제든 외부에서 접근할 수 있게 하고 싶었다. Vercel 을 한번 사용해서 무료로 클라우드 서비스를 이용해보자.

나만의 블로그를 만들고 싶어서 여러가지 서비스를 알아보다, Netlify에 정착한지 꽤나 오랜시간이 흘렀다. Netlify 에서 준 https://xxxxx.netlify.app/ 과 같은 이름보다는 오랫동안 내가 사용할 이름을 하나 도메인을 구매하는 것도 좋겠다 싶어 후이즈에서 도메인 구매도 진행하였다. 수익도 안나는 블로그에 돈을 태울일인가 싶긴한데, 그래도 하나쯤은 괜찮겠다 싶어 사긴했다.

웹사이트를 만들면서 반응형 웹사이트(responsive site)는 꼭 고려해야할 사항이다. 웹사이트는 브라우저만 있으면 접속할 수 있는 서비스이기 때문에, 폰, 태블릿, pc 등 다양한 기기의 각기다른 해상도에서 유동적으로 레이아웃이 변동되면서 가독성 있는 레이아웃으로 표현되어야 한다. 이런 반응형 웹을 만들기위해 부트스트랩(bootstrap) 프레임워크를 사용하고 있다. 아주 간단한 예시로 정리해볼까 한다. 아래 예제들은 여기 사이트 에서 직접 확인 가능하다.

스프링부트(spring boot)와 데이터베이스를 연결하는 방법은 정말 여러가지인데, sql 자체를 그대로 활용해서 사용하고자 한다면 mybatis 만한 ORM 프레임워크가 없다고 생각한다. spring boot 프로젝트 생성시에 디펜던시는 아래 2개를 추가해주는데, 이 포스팅에서는 PostgreSQL 을 사용했지만, 본인이 사용하는 DB의 Driver 로 변경해서 받으면 된다.

website 를 운영하다보면, 내 컨텐츠를 검색할 검색창을 추가하고 싶을 것이다. 포스팅은 점점 쌓여만 가고 처음에는 쉽게 찾았던 컨텐츠를 오랜시간 넘기면서 보고 있다면, 검색창을 추가할 때가 된 것이다. hugo 에서 제안하는 검색기능은 여러가지가 있긴한데, 대부분 낯선 라이브러리들이어서 좀 읽어보다 포기했다.

파비콘(favicon)은 웹사이트를 대표하는 아이콘을 말하며, 보통 인터넷 웹 브라우저의 주소창 혹은 즐겨찾기 이미지로 사용된다. 사파리 브라우저의 경우 파비콘이 있으면 그 이미지로 표시가 되지만, 파비콘이 없으면 웹사이트 정보를 활용하여 텍스트가 나오곤 한다. 파비콘이 있어줘야 웹사이트 다운 모습이 갖춰지는 듯 하다.

ggplot2 로 만든 이미지를 트위터에서 업로드 하면, 이미지 색상이 약간 변경되는 것을 경험했다. 아래 그림에서 보듯이 왼쪽이 업로드전의 이미지이고, 오른쪽이 업로드 이후 이미지이다. 약간 채도가 올라간거 같기도 하고, 색상이 더 진해졌다. 뭐 이미지가 깨진것도 아니 별 상관은 없어보이지만, 색상을 신경써서 만든 이미지라면 이런 미묘한 변화를 원하지 않을 것이다.

블로그를 만드는 가장 쉬운 방법은 네이버(naver)나 티스토리(tistory)의 블로그 서비스를 이용하는 방법이다. 이와 같은 서비스들은 사용자가 별도서버를 구성할 필요도없고, 블로그 작성에만 신경쓸 수 있도록 블로그 기능을 토탈로 제공하고 있는 블로그 서비스이다. 무료이기 때문에 당연히 사이트 주소가 https://blog.naver.com/xxxx 혹은 https://xxxx.tistory.com/ 와 같이 호스트 서비스명이 붙어있다. 블로그를 좀 오래하다보니, 나만의 웹사이트 주소를 가지고 싶다는 생각이 들었다.