(장준영)Vanilla JavaScript로 SPA 구현하기 [1일차] - 식당/카페 여석 확인 어플리케이션

목적

바닐라 자바스크립트로 CSR SPA를 만들어 보면서, CSR과 SPA구현에 대한 이해도를 높이는것이 목적이다

그래서 뭐 만들거임??

식당/카페 여석 확인 어플리케이션을 만들거다

왜 ????? 왜 그거 만드는데??

지금 학교에서 이거 만들어보라고 했는데, 그냥 SSR로 만들기엔 이게 무슨 의미가 있는가 싶었다

사용 기술  스택

HTML 

CSS

Javascript

Node.js -  아직은 Javascript로 밖에 서버를 만들줄 몰라서 선택함

Express - 위와 같은 이유로

MongoDB - 아직은 쓸줄 아는 DB가 이거밖에 없어서 선택함

실험 ( for : 클라이언트쪽에 제이슨 데이터를 전송하는 api를 어떻게 만들지? )

실험해봐야할게 있다

나는 node.js로 SSR 만드는 방식만 보고 배웠지 CSR 만드는 방식은 처음임 CSR 이론만 알고 만들어본적 없음

SSR은 

서버에서 요청 들어오고 > 디비 들렸다가 > 데이터 이러캐 저러캐 하주고 > html 렌더링 시켜주고 > 클라이언트한테 보냄

근데 

CSR은 

서버에서 요청 들어오고 > 디비에서 필요한거 다 꺼내서 오브젝트에 넣어주고 > 제이슨으로 클라이언트한테 보냄

실험1 : 어떻게 제이슨 데이터 클라이언트로 보낼거임??

참고 영상 : https://learn.microsoft.com/ko-kr/shows/beginners-series-to-nodejs/how-to-create-an-api-that-receive-json-with-nodejs-and-express-20-of-26

 

영상을 보면. 요청.json() 에다가 오브젝트 데이터를 넣어주면

사용자가 get 요청을 보냈을때 제이슨 데이터를 얻어올 수 있는거 같음

서버단 코드, json데이터 보내주는 api 하나 만들어주고

클라이언트 단 코드에서 데이터바인딩으로 CSR 해주고

결과

CSR 결과

프로젝트 기획

나는 재밌게 만드는걸 좋아한다 일단 어플리케이션의 이름부터 정해본다

영감을 받기위해 여러 자료를 찾아보았다

https://m.humoruniv.com/board/read.html?&table=pds&number=1026653

여자한테 하면 100% 먹히는 계획.Manhwa

https://bbs.ruliweb.com/community/board/300744/read/39979287

PC방에서 던파를 하면 일어나는 일 JPG | (백업)유머 게시판(2017-2018) | 루리웹

프로젝트의 이름은 

"거기. 내 자리" 로 정했다 

 

학교에서 내어준 과제는 " 식당/카페 여석 확인 어플리케이션" 이지만 그걸 어떻게 구현할지는 내가 하고싶은데로 한다

학교에서 참고하라고 유사한 어플리케이션을 보여주었다 

http://dgiant.co.kr/bbs/board.php?bo_table=portpolio&wr_id=369

실시간 카페 예약 어플리케이션 > 포트폴리오 | 디자이언트-홈페이지 어플리케이션 사이트 제작

기능설명이 정말 잘 되어있는 것 같다 위 기능설명을 참고해볼까 싶다 

 

....

...

...

...

..

아무래도 잘 생각이 안 난다, 이럴땐 일단 무작정 첫 화면부터 만들고 생각하면 또 재밌다

일단 첫 화면부터 무작정 마음대로 만들어봐야겠다

일단 무작정 만들어봤는데도 잘 생각이 안 난다.. 

음... 그냥 여석들 보여주고 여석을 선착순으로 차지할 수 있는데 그 차지한걸 pk 신청을 통해 빼앗을 수도 있다 

pk 신청을 통해

pk를 건 사람은 이기면 자리를 가지고 지면 원하는 음료를 다 사줘야한다

pk를 수락한 사람은 이기면 원하는 음료와 디저트를 요구할 수 있고 지면 자리를 넘겨줘야한다 

 

우선 기능을 나눠서 생각하자

1. 여석을 보여주고 여석을 예약할 수 있는 기능

1.1 동시에 예약 요청이 들어온 경우 > 다른 요청 못 들어오게 막고, 둘이 pk 뜨게 만든다 > 승리자와 패배자에게 법에따른 결과가 처리된다 

1.2 혼자 예약 요청이 들어온 경우 > 그냥 예약 시켜준다

1.3 이미 예약이 찬곳에 요청이 들어온 경우 > 다른 요청 못 들어오게 막고, 둘이 pk 뜨게 만든다 > 승리자와 패배자에게 법에따른 결과가 처리된다

 

음...... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 앞길이 막막하긴 한데 또 재밌다, 왜 pk 를 도입시켰냐면, 자리예약이라는게 딱히 인터렉티브 하지않다고 생각이 들었고 좀더 인터렉티브하게 여러 기능을 추가시킨 결과가 pk기능이다

 

CSR이니 어쩃든 json 데이터를 보낼떄 어떤식으로 json 데이터를 구성시키느냐가 관건인 것 같다

한번에 모든 데이터를 json에 담아서 보내주면? 되는걸까? 

 

나는 프론트엔드 자체가 결국은 서버와 디비의 비용을 최소화시키는것에 목적이 있다고 생각하기 떄문에 

어떤 방식으로 json 데이터를 구성하는것이, 다시말해 어떻게 json api 를 만들어야

그리고 클라이언트에서 어떻게 데이터를 처리해주는것이 서버와 디비의 비용을 최소화 할 수 있을까?

 

라는 질문을 항상 머리에 넣어두고 이 프로젝트를 진행할거다 

 

결국 CSR로 SPA 만드는 이유가 SSR에서 서버, 디비 비용을 줄이는것이 1순위고

나머지 UX 문제 해결 및 개선등은 덤으로 오는거라고 생각한다

 

목적에 맞추려면 일단 최대한 json 에 데이터 이것저것 다 박아넣어버리면 장땡 아닌가??

근데 과연 그게 맞을까??

 

상황에 따라 다를거같다

 

프론트엔드 개발자 인건비 VS 서버, 디비 비용 ( = 이용자의 인터렉션 양)

의 싸움을 항상 하게될건데

 

기본서버비용 + 프론트엔드 개발자 인건비 < 기본서버비용 + 인터렉션 서버비용

일 기점부터 SSR 보다 CSR 을 도입하는게 이득이고 그 이전까지는

SSR이 이득이다 

 

규모있는 회사? 가 아니면 처음 도입하는 프로젝트도 그냥 SSR이 비용적으로 좋은 선택이라고 보인다

물론 대기업인 경우 이용자가 많은 경우 처음 도입부터 CSR이 더 좋은 선택이라고 보인다 

 

>> 일단 이 프로젝트가 대기업 프로젝트로 이용자 1억명 에서 인터렉션이 일어난다고 상황을 정하자

에초에 그런거 아니면 CSR 자체가 필요가 없다고 생각든다, 프론트엔드 개발자 인건비가 더 드는데 굳이??? 

 

암튼 정해진 상황 ( 이용자가 많은 대기업에서 도입하는 신규 프로젝트 )속에서 어떻게 json 을 구성해야? 디자인해야?

CSR의 목적인 서버와 디비 비용을 최소화 할 수 있을까?? 

 

어째 질문이 제자리 걸음이다...

다양한 대안을 만들어봐야할거같다 좀 생각을 해보자

 

다른 SPA 프로젝트에서 백엔드 api 코드들을 보면서 영감을 얻어 봐야겠다

그전에 뤼튼한테 먼저 물어보자..

장인의마음으로

HTML CSS Javascript Node.js Express MongoDB 를 이용해서 SPA를 만들고있는데 서버에서 어떤 방식으로 json 데이터를 디자인해야 CSR의 목적인 서버와 DB 비용 절감에 적합하게 api를 만들 수 있을까?

뤼튼

AI 검색

 

답변 진행 과정

 

요청을 확인하고 있어요

 

검색을 시작했어요

 

8개의 자료를 찾았어요. 자료를 살펴볼게요

 

가져온 자료를 바탕으로 답변을 준비하고 있어요

 

SPA를 위한 서버 및 DB 비용 절감을 위한 JSON 데이터 디자인 방법

SPA(Single Page Application) 개발에 있어서 클라이언트 사이드 렌더링(CSR)의 목적은 서버와 데이터베이스(DB) 비용을 절감하면서 사용자에게 빠른 반응 속도를 제공하는 것입니다. 이를 위해 서버에서 JSON 데이터를 효율적으로 디자인하는 것이 중요합니다. 아래는 서버에서 JSON 데이터를 디자인할 때 고려해야 할 몇 가지 방법입니다. 🙂

---

RESTful API와 JSON 데이터 구조

• RESTful API 디자인: RESTful API는 웹 표준을 따르며, 자원(Resource)의 상태 정보를 JSON 형태로 전달합니다. 이를 통해 클라이언트와 서버 간의 통신을 효율적으로 할 수 있습니다. 1
• JSON 데이터 최적화: 필요한 정보만을 최소한으로 포함하여 JSON 데이터의 크기를 줄이는 것이 중요합니다. 이는 네트워크 대역폭 사용을 줄이고, 클라이언트의 처리 속도를 높이는 데 도움이 됩니다.

데이터 캐싱과 비동기 처리

• 데이터 캐싱: 자주 사용되는 데이터는 클라이언트 측에서 캐싱하여 서버 요청을 줄일 수 있습니다. 이는 서버 부하를 줄이고, 사용자 경험을 향상시킵니다.
• 비동기 처리: 클라이언트에서 서버로의 요청은 비동기적으로 처리하여, 사용자의 인터랙션에 대한 응답성을 높이는 것이 좋습니다. 이를 위해 JavaScript의 fetch API나 XMLHttpRequest를 사용할 수 있습니다.

데이터 페이징과 지연 로딩

• 데이터 페이징: 대량의 데이터를 한 번에 로드하는 대신, 필요할 때마다 작은 단위로 데이터를 요청하는 페이징 처리를 고려해야 합니다. 이는 초기 로딩 시간을 단축시키고, 서버 부하를 분산시킵니다.
• 지연 로딩(Lazy Loading): 화면에 바로 보이지 않는 콘텐츠는 지연 로딩을 적용하여, 필요할 때만 데이터를 로드하도록 합니다. 이는 리소스 사용을 최적화하고, 사용자 경험을 개선합니다.

---

위의 방법들을 통해 서버와 DB 비용을 절감하면서도, 사용자에게 빠르고 부드러운 웹 애플리케이션 경험을 제공할 수 있습니다. SPA 개발에 있어서 이러한 접근 방법들은 매우 중요하니, 참고하시어 효율적인 애플리케이션을 만드시길 바랍니다! 🚀

[이 내용은 다양한 자료를 바탕으로 제공되었습니다. 정보의 정확성을 위해 노력하였으나, 결과에 오류가 있을 수 있음을 알려드립니다.]

 

뭔가 오늘따라 믿음직스러운 뤼튼..

뤼튼이 하라는데로 해보려고한다

우선 

RESTful API 디자인

JSON 데이터 최적화

데이터 캐싱

비동기 처리

데이터 페이징

지연 로딩(Lazy Loading)

들에 대해서 좀 자세히 알아봐야겠다, 많이 들어본것들도 있지만 뭐 이번기회에 확실하게 알아두는것도 좋겠다 싶다