LG CNS 부트캠프 학습일지 9일차

학습 내용

• Local Storage vs Session Storage
• 블로그 토이프로젝트

Local Storage vs Session Storage

Local Storage는 웹브라우저를 종료했다가 다시 실행해도 보존되는 데이터이다. 반면 Session Storage는 탭이나 창이 닫히면 소실되는 데이터이다. 강사님이 두 저장소의 차이점에 대해서 알아보라고 하셔서 찾아봤다. 하지만 웹 개발을 할 때 두 저장소가 언제 어떻게 사용되는지는 아직 잘 모르겠다. 강의를 들으면서 알아나가야겠다.

블로그 토이프로젝트

어제에 이어서 블로그 토이프로젝트를 만들었다.

1. 블로그 글 리스트를 만들어 보여주기
2. 새로운 블로그 글을 작성해서 서버에 업로드하기
3. 블로그 글을 열어서 본문과 댓글 보여주기

어떤 블로그 글에 달린 댓글들을 보여주는 것을 구현했던 것이 가장 기억에 남는다. 블로그 글은 JSON 형태로 json-server 에 저장되어 있다. 어떤 블로그 글에 달린 댓글을 어떻게 저장할지 고민했을 때 가장 처음에 생각한 것은 블로그 글에 해당하는 JSON 객체 안에 comments라는 새로운 리스트를 선언하고 그 리스트 안에 댓글 객체를 넣는 것이다.

이러한 데이터베이스 설계 방식에는 문제가 있다. 블로그 글과 댓글의 연관성을 가장 잘 표현할 수 있지만, 댓글이 여러 블로그 글에 분산되어 있기 때문에, 예를 들어 댓글을 탐색할 때 문제가 발생할 수 있다. 모든 공학적 문제가 그렇듯이 이런 방식이 항상 나쁜 것은 아니지만, 적어도 블로그 글과 댓글을 관리하는 데에는 더 나은 데이터베이스 설계방식이 있다고 말할 수 있겠다.

아무튼, 데이터베이스에 comments라는 테이블을 만들고 그곳에 댓글을 모두 모아놓는다면 해결해야하는 문제가 있다. 어떤 블로그 글과 댓글을 가져오기 위해서는 전체 댓글에서 그 블로그 글에 달린 것을 걸러내주어야 한다는 것이다. 구현하기 위해서는 filter 고차함수를 사용해야할 것 같았는데, 생각보다 간단했다. axios 라이브러리에서 URL을 전달할 때 _embed=comments라는 쿼리를 붙여주면 되었다.

axios.create().get(`http://localhost:3000/blogs/${params.id}?_embed=comments`)

이렇게 하면 블로그 글 객체 안에 댓글 리스트를 담아서 한 번에 가져올 수 있다. 여전히 의문인 것은 이 쿼리 구문이 어떤 블로그 글에 달린 댓글들을 어떻게 걸러내서 가져올 수 있느냐는 것이다.

"comments": [
	{
		"id": 1,
		"blogId": 1,
		"content": "Hello World",
		"email": foo@bar.com
	}
]

params.id의 값과 blogId의 값을 비교했을텐데 만약 blogId 말고 다른 문자열을 키(key)로 사용했다면 어떻게 되었을까.

json-server의 친절한 기능이었다

ChatGPT에 물어보고 얻은 답변이다. json-server 에서 자동으로 해석해주는 것이었다. http://localhost:3000/blogs/ 라는 URL에서 블로그(blog) 글 아이디를 전달하는 것으로 해석하고 camelCase를 사용해서 blogId 문자열을 만들고 해당 키(key)에 대응하는 값을 참조해서 걸러낸 것이라고 한다.

결론

블로그는 사용자 입장에서는 아무 생각없이 사용했는데, 직접 구현하려니 결코 쉽지 않은 작업이었다.

일부러 타입스크립트를 사용하고 있다. 변수의 자료형을 명시해야해서 번거로운 점이 있는데, 실무에서는 얼마나 사용되는지 궁금했다. 정적타입언어가 번거롭긴해도 디버깅 측면에서는 꽤 유용한데, 큰 프로젝트를 진행할 때는 빛을 발하지 않을까 싶다.