(김유선) 개인프로젝트 SSR로 처음부터 끝까지 진행하기 - 데이터 가공

2024. 5. 8. 11:28프로젝트 일지

개인프로젝트로 먼저 프론트엔드로 진행중인 팀프로젝트를 풀스택으로 개인적으로 진행하기로 했다.

그래서 첫번째 프로젝트는 싼집털이다.

 

싼집털이에 대한 기획은 시퀀스다이어그램까지 끝났으니 이제 백엔드를 해보겠다.

node.js와 몽고디비를 사용하겠다.

 

우선 엑셀파일로 되어있는 착한 가격 업소 데이터를 제이슨 형식으로 변형시켜 데이터베이스 안에 넣어야 한다.

 

구글창에 '엑셀을 json으로'라고 검색하면

https://shancarter.github.io/mr-data-converter/

 

Mr. Data Converter

 

shancarter.github.io

이 사이트가 뜨는데,

변환할 엑셀 파일에서 컨르롤+a를 눌러 전체 선택한 후 복사하고

윗 부분에 붙여넣기를 하면 알아서 변환된다.

이제 아래에 있는 것들을 복붙해서 쓰면 됨.

 

근데 데이터가 너무 많아서 대구광역시만 사용했음.

 

이렇게 작성을 한 다음에 /join으로 접속하게 되면

요 데이터들이 쏙 들어가게 된다.

 

ssr은 이 코드를 많이 쓸 것 같아서 첨부

<div class="search-button" onclick="location.href='/search'"></div>

 

아무래도 직전에 csr을 많이 했더니 이게 너무 낯설다ㅠㅠ

 

그렇게 해서 검색결과에 모든 데이터를 넣어봤는데

 

스크롤바가 없으니까 도저히 얼마나 남았는지 알 수가 없어서 그냥 스크롤바 디자인을 수정할 것이다.

 

::-webkit-scrollbar{ // 스크롤바 전체 디자인
    width: 10px;
}
::-webkit-scrollbar-thumb{ // 스크롤바 바 디자인
    border-radius: 10px;
    background-color: gray;
}
::-webkit-scrollbar-track{ // 스크롤바 배경 디자인
    display: none;
}

이렇게 작성해서 디자인해줬다.

이뻐졌다 굿