웹개발 프로젝트: 학술사이트 구현하기_로컬 파일에서 데이터 읽어와 채우기 (feat. nodejs)

16 Aug 2022

​

지난번 포스팅과 겉으로 보기에는 똑같아 보이는 결과물을 만들었다.
근데 이제 내부적으로 좀 많이 뜯어고친..

​

지난번까지 react를 가지고 웹페이지를 만들고 있었는데, 하면 할수록 대체 이걸 왜 리액트를 써 가며 하고 있지? 싶은 생각이 들었다.

사용자와 브라우저가 실시간으로 상호작용해야 하는 것도 아니고, 글 수정/삭제를 할 수 있게 해줄 것도 아니고,

그냥 데이터를 읽어 글을 보여주는 사이트일 뿐인데.. 굳이 리액트를 쓸 필요가 있나?

그래서 node.js로 넘어왔다.

원래 쓰던 디렉토리를 아예 내버려 두고, react를 쓰지 않고 node.js로만 개발을 하고자 디렉토리와 github repository를 새로 만들었다.

​

리액트 개발할 때 썼던 css 파일이나 html 태그들은 모두 재활용했다.

발전사항은, html(로 렌더링될 리액트) 코드에서 직접 글과 이미지 소스를 입력해 줬던 지난번과 달리 로컬 파일로부터 데이터를 읽어와 내용을 채웠다는 점이다.

​

디렉토리 구조는 다음과 같다.

C:\USERS\USER\DESKTOP\YRS-NODEJS
│  main.js
│  package.json
│
├─data
├─img
│      water.png
│
└─lib
        App.css
        pagelist.json
        template.js

lib/template.js는 main.js에서 사용하는 파일로, response로 브라우저에게 보내줄 html 템플릿이 들어 있다.

lib/App.css는 template.js에 들어 있는 html 템플릿이 참조하는 css stylesheet이다.

lib/pagelist.json은 html 템플릿으로부터 html 파일을 만들 때 필요한 정보로, 메인페이지를 구성하는 텍스트와 이미지 정보를 담고 있다.

// lib/pagelist.json
{
    "main":{
        "title": "This is main title",
        "description": "This is main description",
        "author": "Main Author",
        "date": "16 Aug 2022",
        "text": "asdf",
        "img_src": "water.png"
    },
    "list1":{
        "title": "This is list1 title",
        "description": "This is list1 description",
        "author": "List1 Author",
        "date": "16 Aug 2022",
        "text": "asdf",
        "img_src": "water.png"
    },
    "list2":{
        "title": "This is list2 title",
        "description": "This is list2 description",
        "author": "List2 Author",
        "date": "16 Aug 2022",
        "text": "asdf",
        "img_src": "water.png"
    },
    "list3":{
        "title": "This is list3 title",
        "description": "This is list3 description",
        "author": "List3 Author",
        "date": "16 Aug 2022",
        "text": "asdf",
        "img_src": "water.png"
    },
    "list4":{
        "title": "This is list4 title",
        "description": "This is list4 description",
        "author": "List4 Author",
        "date": "16 Aug 2022",
        "text": "asdf",
        "img_src": "water.png"
    },
    "list5":{
        "title": "This is list5 title",
        "description": "This is list5 description",
        "author": "List5 Author",
        "date": "16 Aug 2022",
        "text": "asdf",
        "img_src": "water.png"
    }
}

위 json 파일에서 "text"와 "img_src"는 각각 본문과 이미지가 담긴 파일의 이름을 값으로 가진다.

본문은 data 폴더에, 이미지는 img 폴더에 저장된다.

​

메인페이지가 슬슬 마무리되고 있다.

다음 포스팅에서는 navigator의 "Explore content"를 클릭했을 때 들어가는 페이지 디자인과, 글을 클릭했을 때 들어가는 페이지 디자인을 스케치해야겠다.