Posts

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 컬럼을 추가해본적이 없어서 시행착오를 겪긴했다. 그 내용을 남겨보도록 한다.

Thymeleaf 에 대한 설명은 이전에 포스팅을 한 적이 있다. spring 공식홈페이지에서 설명하고 있는 템플릿엔진이라 관심이 가게 되었고, 홈페이지 하나를 Thymeleaf 로 만들어 보았는데 확실히 장점이 많다. 좀 찾아보고 공부했었던, 텍스트 조립하는 방법과 조건문을 정리해본다.

페이징 처리는 웹서비스를 만들다보면 직면하는 가장 흔한 개발요건이다. 웹화면에서는 한 페이지에 보여줄 데이터는 한정적이고, 페이지를 나누어 효율적인 방법으로 최적의 조회성능을 내줘야 한다. 오늘 볼 예제는 대량의 데이터는 아니며, 간단히 10건 미만의 데이터를 기준으로 limit 를 이용한 페이징처리 쿼리정도만 정리해본다.

SQL 실행툴로서 DBeaver를 무료로 아주 잘 사용하고 있다. 무료버전은 데이터 내보내기나 가져오기를 할 때, csv 파일만 가능하다보니, 엑셀파일 확장자를 가지고 바로 데이터 적재할 수 없는 아쉬움은 있다. 그래도 웹서비스에 필요한 간단한 데이터베이스관리나 sql 실행 정도라면 이만한 무료 sql 툴이 있을까 싶다.