SOURCE BOX

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

Bootstrap 을 이용해서 웹사이트를 만드는 편인데, 거기서 제공하는 validation 기능을 사용하고 있다. 그대로 Svelte 에서 사용할 수 있으면 좋겠지만, 그게 그렇게 되질 않았다. SvelteKit 을 사용하여 각페이지들을 Route 하기위해 페이지를 컴포넌트처럼 나누어 개발하고 합치기 때문인데, 알아보는 시간은 꽤나 오래걸렸지만 그래도 비슷하게 구현을 했다.

웹페이지를 만들다보면 자주 사용하는 레이아웃 부분은 별도로 모듈화 하여 재사용하고 싶어진다. svelte 에도 독립적인 기능을 하는 컴포넌트를 쉽게 만들 수 있으며, 그 컴포넌트를 사용하여 앱의 구조를 조직화하고 코드를 재사용할 수 있게 된다. svelte document 에서 Nested Components 라는 주제로 설명되어 있으니 참고하자.

Svelte 에서 데이터를 입력하는 Form 을 하나 만들어본다. 이름과 성별정도 입력할 수 있도록 하고, 그 결과를 실시간으로 Object 로 반영하도록 bind 처리까지 간단히 해보자. 대략 아래의 레이아웃으로 만들 예정이다. 여기서 설명하는 건 Svelte 공식홈페이지 Tutorial 에도 있으니 참고한다.

Svelte 에서 MongoDB 연결하는 예시가 어디 딱 나와있지 않다. 그래서 여러 삽질을 통해 연결이 되었고 그 부분을 대략 정리해본다. 사실 javascript 에서 module 을 import 하고 export 하는 방법이 가장 난항이었다. 그 부분을 중점적으로 정리해본다.

Mongo 내에 데이터 베이스를 만들기 위한 방법은 단순히 use 데이터베이스이름으로 간단히 만들 수 있다. 자세한건 여기를 눌러 참고한다. 데이터베이스 생성을 위해서는 mongo CLI에 접속해야 하는데, mongosh 명령어로 간단히 접속할 수 있다.

웹사이트 개발을 위해서 Svelte 라는 프론트엔드 웹프레임워크를 배워보려 한다. React 나 Vue.js 와 같이 널리 알려진 프레임워크들은 가상 DOM 을 사용하는 반면에, Svelte는 실제 DOM을 반영하는 방식이다. 빌드시점에 Vanilla JS 로 컴파일하여 속도가 빠르고 간편하다는 장점이 있다.

PostgreSQL을 이용해서 웹페이지를 만들고 있는데, 계속 소스 볼륨이 커지다보니 git branch 를 추가하면서 개발을 하고 있다. git 브랜치 생성 및 병합방법 관련 포스팅은 여기를 클릭하여 참고한다. 소스는 잘 나누어 개발하고 있는데, DB는 실제 운영중인 DB에다 계속 테스트거래를 해볼 수는 없어서, 하나의 테스트DB 환경을 하나 더 만들어 보고자 했다.

git push를 하다가 아래와 같은 인증오류를 보았다면, github 비밀번호를 갱신할 때가 된것이다. github 사이트 로그인할 때 사용하는 계정의 비밀번호는 아니고, 특정권한을 가진 토큰정보를 갱신하다고 보면된다.

DB 에서 거래를 등록/변경할때, 어느 시점에 등록했는지를 기록하기 위해서 보통 timestamp 를 사용한다. postgresql 에서 timestamp 컬럼을 추가해본적이 없어서 시행착오를 겪긴했다. 그 내용을 남겨보도록 한다.