목적
express 라이브러리를 사용하지 않은 순수 node.js로 서버를 만들어 보고 싶었다.
node.js에 대한 좀더 깊은 이해를 할 수 있을것이라 생각했다.
또한 이번에 배운 Web Storage 기술 중 하나인 Indexed DB를 이 프로젝트에 적용해보고 싶었다.
사용한 기술
- CSS BEM
- Node.js 18
- Boxicons
- Indexed DB
- LocalStorage
프로젝트 설명
프로젝트의 기본 골자는 다음과 같다.
- 서버에 url을 요청한다.
- 서버는 url에 따라 다른 정적파일들을 브라우저에게 전달한다.
- 서버로부터 받은 정적파일중 js파일은 로드가 완료되면 실행된다.
- 실행된 js파일은 IndexedDB와 자동 연결되어 페이지에 데이터를 매핑한다.
- 매핑되어 재랜더링된 페이지가 브라우저에 나타난다.
사용자 데이터는 브라우저에 저장되기 때문에 서버로부터는 템플릿을 받아온다.
마치 서버 사이드 랜더링과 클라이언트 사이드 랜더링을 같이 사용한 것 같은 느낌이다.
메인 페이지
메인 페이지에서는 저장된 노트들을 한 번에 전부 보여준다.
페이지 로드시 자동으로 Indexed DB와 연결하여 모든 노트들을 로드해온다.
어플을 모방한 프로젝트이기 때문에 스크롤바를 브라우저가 아닌 어플내에 만들었다.
노트들의 내용이 썸네일로 보여지며, 내용이 많아서 썸네일 박스를 초과할땐 그라데이션 효과를 적용하여 내용이 서서히 투명해지게 만들었다.
정렬 방법을 설정할 수도 있다.
다음을 기준으로 정렬할 수 있다.
- 제목
- 만든 날짜 순
- 수정 날짜 순
이런 설정들 또한 브라우저에 저장되며 이땐 Indexed DB가 아닌 LocalStorage에 저장했다.
즉, 노트 데이터와 같이 용량이 클 것이라 생각되는 데이터는 Indexed DB에 저장하고
설정 데이터와 같이 용량이 적은 데이터는 LocalStorage에 저장했다.
정렬은 Indexed DB내부에서 이루어 지는것이 아니라 브라우저에서 메모리 상에서 이루어지며 정렬설정이 적용되면 페이지 로드시 자동으로 그 설정대로 정렬이 실행된 후 페이지에 랜더링 된다.
우측 하단의 버튼을 클릭하면 생성 페이지로 전환된다.
그 외 자잘한 기능들은 다음과 같다.
- 메뉴 아이콘이 있는 nav 부분이 sticky로 설정되어서 스크롤바를 내려도 항상 위에 고정된다.
- 우측 하단의 버튼은 스크롤 위치와 무관하게 항상 해당 위치에 고정된다.
뷰 페이지
뷰 페이지에서는 제목과 내용이 표시된다.
수정할 수 없도록 html 엘리먼트에 readonly 어트리뷰트를 설정했다.
해당 노트를 수정하려면 우측 상단의 편집 아이콘을 누르면 해당 노트의 편집페이지로 전환된다.
편집 페이지
편집 페이지에서는 커서가 깜빡이는 것을 볼 수 있다.
생성 페이지
새로 배운 부분
서버에서 파일을 읽을 땐 동기함수를 사용하자.
서버에서 파일을 읽어들일 때 동기보단 비동기가 성능면에서 더 좋다고 생각했었다.
그래서 비동기 함수인 fs.readFile() 을 사용했었다.
이러면 버그가 발생한다.
새로고침을 연속으로 4~5 번만 해봐도 어떨 땐 페이지가 로드되지만 어떨땐 로드가 되지않고 설정한 라우터부분을 건너뛰어서 "Not Found"가 표시된다.
여러 요청이 들어올 때 비동기 함수가 끝나기도 전에 요청이 실행되면서 앞의 요청에 영향을 주기 때문이다.
따라서 비동기 함수 대신 fs.readFileSync() 를 써야한다.
여러 요청이 들어올 때 앞의 요청이 완료되어야 뒤의 요청이 실행된다.
물론 약간의 blocking이 있을 수 있지만 그 정도는 감수해야 한다고 본다.
가장자리로 갈 수록 투명하게 설정하는 CSS방법
해당 방법은 CSS 시리즈에 따로 정리해 두었다.
새로나온 Array 메소드들
여러 시니어 개발자들이 새로 나온 Array 메소드들을 소개하고 있다.
공통점은 원본 배열을 건드리지 않고 새 배열을 반환하는 메소드들이다.
js에서는 inplace 함수들과 outplace 메소드들을 이름만으로 구별하기 어려웠는데 outplace 메소드들은 to 라는 prefix를 붙여서 사용하도록 표준화가 되어서 좋다.
- Array.prototype.toReversed()
- Array.prototype.toSorted()
- Array.prototype.toSpliced()
- Array.prototype.with()
느낀점
Node.js를 더욱 심도있게 이해하기 위해 이 프로젝트를 시작했었다.
그 목적을 달성한 느낌이다.
Node.js를 처음 배울 때 대부분의 개발자들은 Node.js를 살짝 맛만 보고 바로 Express로 넘어간다.
나는 잘못되었다고 생각한다.
결국 express도 Node.js 위에 만들어진 라이브러리이다.
express로 만들면 쉽기야 하지만 순수 Node.js로도 만들 수 있다.
순수 Node.js로 만들어 봐야 express의 장점을 충분히 공감해가며 이해할 수 있다고 생각한다.
단순히 express의 하위 모듈인 express-session, body-parser 등을 사용하면 복잡한 작업들이 추상화되어서 쉽게 진행이 팍팍 된다.
하지만 이런 장점은 단점으로도 다가온다.
내부적으로 어떤 동작들이 진행되는지 전부는 아니더라도 기본 골격 동작은 이해하고 있어야 한다.
순수 Node.js 만으로 GET, POST 데이터요청을 처리하는 방식, Email를 보내는 방식등... 이 프로젝트에서는 사용하지 않았지만 Node.js 공식 문서를 탐구해보면서 배웠다.
결과물
깃헙 저장소 : 깃헙↗️
라이브 사이트 : 호스팅↗️
