정적 웹 속 동적 웹

동적웹과 정적웹 접붙이기

아직 SSR과 CSR에 대해서 완벽히는 모르겠다. 하지만 대부분의 웹에서 둘의 장점이 모두 필요하고, 그래서 적절하게 섞어 써야 한다는 건 알겠다.

정적웹의 엄청남에도 불구하고 동적인 것이 필요했다. 후술할, 카드 컴포넌트를 동적 생성하고 태그로 필터링하는 기능은 디지털 가든에 없었다. 그건 클라이언트의 입력에 따라 그때그때 자바스크립트를 실행해야 하는 기능들이었다.

저번학기에 React와 mySQL, express.js를 맛봤기 때문에 내가 구상한 간단한 동적 기능을 어떻게 구현할지는 대충 감이 잡혔다. 문제는 동적웹과 정적웹을 접붙이는 건 한번도 안해봤다는 거다.

그것도 선대가 오랜 기간 삽질하면서 만들어놓은 수많은 기술과 패턴이 있겠지만… 모든 방법을 다 공부하고 나서 시작하기에는 오래 걸릴 것 같았고 딱 떠오른건 만만한 iframe이었다. 옵시디언에 iframe을 삽입할 수 있으니까, 동적 프로그램은 따로 만들어서 따로 배포한 다음에 디지털가든의 ‘홈’에 해당하는 노트에 iframe으로 심는 거다.

동적웹이 필요한 부분 - 필터링 기능

오래전부터 갖고싶었던 나만의 인터넷 공간인만큼 이런저런 기능을 넣는 상상을 많이 했지만 처음이니까 정말 필요한거 한개만 남기고 다 지웠다. 필터링.

이 웹사이트에 처음 발을 디딘 사람이 보고싶어하는 정보가 무엇일까? 이 웹사이트가 뭔 웹사이트인지, 그리고 만든사람이 뭐하는 사람인지겠지. 그래서 이 웹사이트가 다루는 것들 키워드를 맨위에 놓는다. 그리고 여기 온 사람이 관심있는 단어를 클릭하면, 거기에 해당하는 문서로 향할 수 있는 ‘문’을 제공한다.

그 문이 하나의 컴포넌트다. 앞으로 ‘카드’라고 부를 것이다. 카드에는 두가지 종류가 있다. 포트폴리오인 문서의 카드와 포트폴리오가 아닌 문서의 카드. 전자의 카드 구성내용은 썸네일, 제목, 태그다. 후자의 카드 구성내용은 제목, 내부 항목들, 태그다.

그 구성내용을 저장할 DBMS를 선정해야 한다.