지난 포스팅에 이은, 바이브코딩을 통한 웹사이트 만들기에 대한 포스팅을 진행하겠다.
서버는 처음부터 '무료로 운영될 수 있는' 서버로 진행해달라고 요청했었고 로컬에 저장할 수 있도록 해달라고 요청했었다.
1. localStorage로 저장
"로컬에 저장해달라"는 말로 인해 localStorage에 저장하는 기능으로 구현이 되었다.
하지만 이는 치명적인 단점이 너무 많았다.
- 보안 취약성
- XSS 공격에 취약- 암호화 없음 : 브라우저 개발자 도구만 열면 누구나 내용 확인 가능
- 데이터 동기화 불가 (기기 간 단절)
- 해당 기기의 해당 브라우저에 만 저장 - 용량 제한
- 5MB ~ 10MB 정도의 텍스트만 저장 가능- 많은 양의 프로젝트/할일 핸들링 불가
- 성능 저하 (동기식 처리)
- localStorage의 작동 방식 : 동기(Synchronous) 방식- 데이터를 읽고 쓰는 동안 메인 스레드가 멈춤
- 저장된 데이터 양이 많아질수록 버벅거림, Freezing 현상이 발생 가능성이 높음
- 데이터 타입의 제약
- localStorage는 오직 String(문자열) 형태만 저장할 수 있다.- 객체(Object)나 배열(Array)를 저장하려면 json으로 변환해야하는 번거로움
로컬이라는 단어 때문인지 뭔진 몰라도 제미나이는 처음에 localStorage 저장 방식을 택했다..
이건 너무 아쉬운 선택이었다.
다시 파일로 저장하고 불러올 수 있는, 배포해도 괜찮은 방법을 알려달라고 했고 그 결과 json 파일에 저장하는 것으로 변경하였다.
2. json 파일로 데이터 저장하기, 불러오기 (projects.json, todos.json)
localStorage를 쓰지 않고 저장하는 방법으로 적용해달라고 하니, JSON 파일로 저장하는 방법으로 적용해주었다.
json 파일로 DB를 운영하는 것은 아래와 같은 장단점이 있다.
장점
- 별도 DB 설치 필요 없음
- 파일만으로 정리 가능 - 높은 가독성
- 직접 파일을 수정하거나 확인 가능 - 편리한 이동성
- 파일을 옮기고자 할 때, 복사/붙여넣기만 하면 됨
단점
- 동시성 문제
- 여러 사람이 동시에 작업 불가 - 데이터 읽기 성능 저하
- 데이터를 수정하려면 파일 전체를 읽어야 하기 때문에 데이터가 커지면 속도가 매우 느려짐 - 검색 기능 부재
- 검색 기능을 넣기 위해서는 모든 데이터에 filter 반복문으로 적용해야 함
지금은 단점이 부각되지 않아 JSON 파일로 진행하지만, 1. 추가되는 프로젝트가 많아지거나 2. 파일이 깨지는 현상 을 대비하기 위해서라도 SQLite로 데이터베이스를 변경하는 게 좋을 것 같다.
SQLite에 대해 간략하게 알아보자면,
SQLite란?
- 서버리스(Server less) 데이터베이스
- 파일 하나에 모든 데이터가 저장되지만, SQL 문법을 쓸 수 있는 데이터베이스
작동 방식
데이터베이스 엔진이 관리
데이터 수정
데이터 전체 저장이 아닌 데이터 1개만 수정(속도 빠름)
데이터 검색
SQL 쿼리를 통한 검색 가능
안정성
트랜잭션(Transaction) 지원으로 데이터가 절대 깨지지 않음
파일 형태
data.db 또는.splite
후기
백엔드(서버+DB) 관련된 내용을 공부해야 겠다는 생각이 들었는데, 직접 체험해볼 수 있는 경험이 되었다. 서버와 DB의 차이점도 명확하게 알 수 있었다. DB = AWS 라는 생각을 했었는데, 크게 배포할 게 아니라면 그것도 필요 없다는 게 신기했고 SQLite를 쓰면서 SQL도 공부해봐야겠다는 생각이 들었다!
바이브코딩 진짜 재밌는 것 같다.. 나에게 코딩의 재미를 다시 줬다(아님.. 이건 코딩이 아님..)
서버와 관련된 이야기는 여기까지이다. 다음에 SQLite를 적용하게 된다면 다시 가져오도록 하겠다.
자동으로 클라이언트와 서버를 구동하기 위해 배치파일 & 빌드파일을 만들어봤는데, 이와 관련된 얘기는 3편에서 다루도록 하겠다 (빡침주의*)
