CLIEN

본문 바로가기 메뉴 바로가기 보기설정 테마설정
톺아보기 공감글
커뮤니티 커뮤니티전체 C 모두의광장 F 모두의공원 I 사진게시판 Q 아무거나질문 D 정보와자료 N 새로운소식 T 유용한사이트 P 자료실 E 강좌/사용기 L 팁과강좌 U 사용기 · 체험단사용기 W 사고팔고 J 알뜰구매 S 회원중고장터 B 직접홍보 · 보험상담실 H 클리앙홈
소모임 소모임전체 ·굴러간당 ·주식한당 ·아이포니앙 ·MaClien ·일본산당 ·방탄소년당 ·자전거당 ·개발한당 ·이륜차당 ·안드로메당 ·소시당 ·나스당 ·골프당 ·디아블로당 ·육아당 ·AI당 ·가상화폐당 ·영화본당 ·클다방 ·리눅서당 ·소셜게임한당 ·걸그룹당 ·젬워한당 ·노젓는당 ·사과시계당 ·야구당 ·패스오브엑자일당 ·IoT당 ·창업한당 ·캠핑간당 ·패셔니앙 ·라즈베리파이당 ·맛있겠당 ·물고기당 ·노키앙 ·바다건너당 ·여행을떠난당 ·3D메이킹 ·X세대당 ·ADHD당 ·AI그림당 ·날아간당 ·배드민턴당 ·농구당 ·블랙베리당 ·곰돌이당 ·비어있당 ·FM당구당 ·블록체인당 ·보드게임당 ·활자중독당 ·볼링친당 ·냐옹이당 ·문명하셨당 ·클래시앙 ·콘솔한당 ·요리한당 ·쿠키런당 ·대구당 ·DANGER당 ·뚝딱뚝당 ·개판이당 ·동숲한당 ·날아올랑 ·전기자전거당 ·e북본당 ·갖고다닌당 ·이브한당 ·도시어부당 ·FM한당 ·포뮬러당 ·안경쓴당 ·차턴당 ·총쏜당 ·땀흘린당 ·하스스톤한당 ·히어로즈한당 ·인스타한당 ·KARA당 ·키보드당 ·꼬들한당 ·덕질한당 ·어학당 ·가죽당 ·레고당 ·LOLien ·Mabinogien ·임시소모임 ·미드당 ·밀리터리당 ·땅판당 ·헌팅한당 ·오른당 ·MTG한당 ·소리당 ·적는당 ·방송한당 ·PC튜닝한당 ·찰칵찍당 ·그림그린당 ·소풍간당 ·심는당 ·품앱이당 ·리듬탄당 ·달린당 ·Sea마당 ·SimSim하당 ·심야식당 ·윈태블릿당 ·미끄러진당 ·축구당 ·나혼자산당 ·스타한당 ·스팀한당 ·파도탄당 ·퐁당퐁당 ·테니스친당 ·테스트당 ·빨콩이당 ·공대시계당 ·터치패드당 ·트윗당 ·VR당 ·시계찬당 ·WebOs당 ·위스키당 ·와인마신당 ·WOW당 ·윈폰이당
임시소모임
고객지원
  • 게시물 삭제 요청
  • 불법촬영물등 신고
  • 쪽지 신고
  • 닉네임 신고
  • 제보 및 기타 제안
© CLIEN.NET
공지[점검] 잠시후 서비스 점검을 위해 약 30분간 접속이 차단됩니다. (금일 18:15 ~ 18:45)

개발한당

질문 초보자가 api를 활용해서 웹사이트를 구축 하려면? 25

2023-11-15 16:25:20 수정일 : 2023-11-15 16:28:23 58.♡.0.209
carg

개발을 잘 모르지만 웹사이트를 여러개 구축해서 운용하고 있습니다.

그 동안 구글시트가 저의 백엔드이자, 웹서버였고


1. 노코드툴이나

2. 구글링 컨닝 + 챗지피티보조로 구축한 html과 css 조합, 그리고 약간의 스크립트 정도가 들어간 html 파일이

프론트 엔드였습니다. 


아래 장황한 배경설명이 있지만, 제가 한단계 더 나아가려면, 2가지 난관이 있습니다.  


문제 1. 구글시트를 버릴 순 없다 (내용을 조합하고 계산해서 표현하기에 넘어야 할 산이 너무 많다)

문제 2. 구글시트로 완성한 정보를 구글시트 api로 만들어도 웹에서 꾸미기가 어렵다 (api를 불러와서 어떻게 꾸밀것인가?)


2가지의 문제가 있지만 그나마 2번이 조금은 쉬워 보입니다.   


위 2가지를 해결하려면 어떤 부분을 배워야 할까요? 

문제1. 

구글시트 대신, 자바스크립트로 모두 해결 가능한지? 아니면 또 다른 언어를 통해 해결해야 할지?   

https://workers.cloudflare.com 가 좋은지? (서버리스 API 만들기쉽고 빠르다 해서...)


예) 구글시트에서 filter 함수를 사용해서

지역 버튼을 누르면 해당 지역의 소속된 기관명 리스트가 뿌려지고

그 기관명에 해당되는 정보가 시트2의 정보에서  filter 함수로 불러온 뒤, 

시트3의 내용을 vlookup 함수로 출력한 최종 결과물을 표로 꾸며지는 것


그 외에도 구글시트는 구글설문, tally, 웹 크로링된 실시간 정보 등 다양한 정보의 집합소이고

그 정보를 query함수, filter 함수 뿐 아니라. 여러가지 배열 함수를 썼기때문에 이정도 조합을 과연 초보가 웹상에서직접 구현하는게 가능할까? 의문이 들 정도로 고급 함수가 많이 있습니다.          

(일반 웹사이트 구축하시는 분들은 어떤식으로 구현하는지? ) 


아니면, 초보자에게는 이 영역은 포기하고 원래 하던대로 구글시트에서 수식으로 구현한 뒤 

구글시트 api로 내보내서 json으로 받은 뒤 꾸미는 것만 배우는게 맞는건지? 

(그렇다면 구글시트에서 기존의 크롤링 작업으로 하던 것을,  공공api 불러오기로 전환하기는 해야 함, 구글앱스 스크립트 공부 필요 )    


문제2

최종 표현하고자 하는 정보를 json 형태로 받았다면 그것을 디자인 하고 꾸미려면

무엇부터 해야 하는지? 

 

GraphQL 를 쓰면 REST API 못쓰게 된다는 강의를 보고 처음부터 GraphQL을 배워야 할지?
구글시트를GraphQL 로 바꿔주는 유료 툴이 있는 걸 봐서는 기본적으로 rest API만지원하는것이고, 

REST API로 하는게 맞는건지?     


조언을 부탁드립니다. 





    


- 배경 -
구글시트의 장점
 웹 게시 해서 iframe 주소로 삽입하면  함수 수식으로 다양한 계산과 결과물 컨트롤이 가능하고
디자인(조건부 서식, 이모지 표출 등)도 쉽게 컨트롤 할 수 있어 더할나위없이 좋았습니다. 

 단점은
1. 반응형 웹페이지 구축이 불가능하고   (직접 시트 사이즈를 지정해줘야 해서 단말기마다 짤리거나 여백 다름)  
2. 5분마다 게시되는 구글시트 웹게시 특성상  지연되고, 먹통되는 문제가 있습니다. (트리거로 꼼수해결)

5분 지연되는 문제를 개선하려면, 구글시트 api를 활용해 내보내야 할것 같은데 
그 api를 언제 배워서 활용할 것인가? 
그럴바엔, 구글시트 안쓰고 직접 api 받아서 쓰면 되지?    (구글시트가 왜 필요한가? )

구글시트를버리고, 외부 api 직접 인증키 넣어서 쓰려면
1. 별도 서버가 필요하고, 그 서버를 다룰 줄 알아야하고
2. 구글시트 내에서 계산하던것(쿼리 함수, 정규식, 조건부 서식, 그 외 구글앱스스크립트로 구현한 매크로 등)
단순 json 형태를 이쁘게 꾸미는 것으로는 안되고 다시 계산하고 가공하는 과정을 또 거쳐야 하는 
2가기 별도의 난이도 작업이 있습니다. 

공통 문제는
json 형태로 받은 것을 보기 좋게 꾸밀줄 알아야 한다는 문제가 있습니다. 




carg 님의 게시글 댓글
  • 주소복사
  • Facebook
  • X(Twitter)
댓글 • [25]
김짱3
IP 223.♡.244.56
11-15 2023-11-15 16:35:31
·
json 데이터를 받아올수 있다면 프론트엔드만 파시면 됩니다. 리액트나 vue 기타등등 많아요
carg
IP 58.♡.0.209
11-15 2023-11-15 17:00:37
·
@김짱3님 감사합니다.
리액트 vs vue 라고 검색해보니 대충 감이 잡혔습니다. vue가 초보에겐 쉽다니 그쪽을 봐야겠네요
carg
IP 58.♡.0.209
11-15 2023-11-15 18:10:35
·
@김짱3님

vue를 검색하다 보니 이런 글이 있네요
구글시트를 vue와 연계하면 큰 도움이 될 것 같습니다
이런 방향으로 가는게 맞을까요?

https://albertauyeung.github.io/2020/04/26/vuejs-google-sheets.html/
deej
IP 49.♡.253.141
11-15 2023-11-15 17:00:35 / 수정일: 2023-11-15 17:03:50
·
구글시트에서 벗어나야겠네요. 스스로 가상의 벽을 쳐두고, 그 안에서만 모든 것을 해결하려고 하다보면, 엄청 쉬운것도 돌아가게 되고, 결국 그 안에 머물게 되면서 발전을 할 수 없게 됩니다.

구글시트가 없다고 생각하고 새롭게 생각해 보세요. 물론 더 발전하길(스킬, 사이트) 원한다는 가정하에 하는 얘기입니다. 요즘 ChatGPT가 워낙 잘 돼 있어서 이해 안 가는 컨셉이 있으면 잘 설명해 줍니다
carg
IP 58.♡.0.209
11-15 2023-11-15 17:44:01
·
@deej님 정확한 지적이십니다. 가상의 벽을 이제는 치울때가 된 것 같은데 그 벽뒤의 세상이 가늠이 안되서요ㅜㅜ
네임스페이스
IP 112.♡.76.76
11-15 2023-11-15 17:05:14 / 수정일: 2023-11-15 17:20:19
·
일단 본문내용이... 하시려는 내용이 프로그래밍을 하지않기위해서 너무 돌아간다고 느낍니다. 노코드든 위지위그든 저거 다 뚫고 구현하기위해서는 테스트도해야하고 어차피 공부해야할 양은 많아보입니다(구글앱스크립트도 해얀다하니..). 아무도 가지 않은길 개척하기 쉽지않죠.

그냥 백엔드와 프론트엔드 (풀스택) 프로그래밍 공부하면 끝날 일이죠. 쉽다는 말은 아니지만 레퍼런스가 많습니다. 챗쥐한테 물어물어 공부, 구현해도 될 정도로 말이죠.

전에도 댓을 달았지만 꼭 구글시트여야하는가가 첫째 문제인데 전에도 언급했듯이 오픈소스 웹 스프레드시트는 많아요. 웹이니까 자바스크립트 라이브러리죠. 구글시트에있는 데이터가 필요한거면 처음엔 export 한 데이터를 끌어다해도 될 거같고요.

저는 node.js는 안하지만 (할줄 모르지만), 저도 간단한 첫 웹API 서버 구축을 이걸로 배우기도 했고, 웹개발은 자바스크립트 알면 좋으니 node.js 추천합니다.
원하시는건진 몰라도 npm (앱스토어같은것) 검색에 구글스프레드시트 api 라이브러리도 있네요.
https://www.npmjs.com/package/google-spreadsheet
npm에는 웹개발에 필요한거 왠만한 건 다 있다고 보시면될정도로 node.js 인기였고 강세였고 그렇습니다.
자바스크립트부터 천천히 하시면 될것같아요.

그리고 팁으로, 스프레드시트는 DB와 같은거라고 생각하시면 됩니다. 테이블 형태 데이터라서 둘이 같아요. 진짜.
carg
IP 58.♡.0.209
11-15 2023-11-15 17:48:42
·
@네임스페이스님
아직 파악하기 어려운 수준의 글이지만, 저의 문제를 해결하기위해 https://www.npmjs.com/package/google-spreadsheet

이 링크의 내용이 좋은 방향을 제시해주시는 것 같습니다.
네임스페이스
IP 112.♡.76.76
11-15 2023-11-15 17:06:55 / 수정일: 2023-11-15 17:17:30
·
그리고 본문에 Cloudflare Workers 는 이것도 node.js 인데 서버리스(서버없음)네요. 서버리스는 요청시에만 코드가 돌고 끝나는 형태라서 지속적인 서비스를 해야하는 웹앱(웹페이지) 구축엔 맞지 않아요. 보통은 중간에서 데이터처리용이죠.
네임스페이스
IP 112.♡.76.76
11-15 2023-11-15 17:13:48 / 수정일: 2023-11-15 17:19:32
·
구글시트에 집착?하시는 이유가 아마도 여러 데이터를 그걸로 취합하시느라 그렇다면 꼭 API써서 가져올 필요없다고봐요. 한번씩 전체데이터를 csv 파일로 자기서버로 옮겨오면 그걸 DB에 넣을수도 잇고, 혹은 그 파일 그대로 가공해서 웹페이지 보여줄수도 있고요.

구글시트의 그런함수가 전체 필요한것도 아니실테고 아마 VLookup처럼 필터해서 보기만하련 것일 뿐인 것같은데, 많은데이터가 아니면 csv파일 그 자체로도 배열같은 자료형으로 담으면 코드로 원하시는 정보만 뽑을 수 있어요.

이정도 코드는 챗쥐한테 물어보면 바로 나오죠. 예를들어 닷넷에는 csv파일을 List 타입 변수에 담아 LINQ라는걸로 DB다루듯이 정렬,필터링등 다룰 수 있습니다.
carg
IP 58.♡.0.209
11-15 2023-11-15 17:42:08 / 수정일: 2023-11-15 18:07:23
·
@네임스페이스님 좋은 글을 많이 써주셨는데 일단 구글시트에집착하는 이유만 말씀드리면

1. 구글설문: QR코드만 찍으면 구글설문 제출이되어 스프레드시트에 데이터가 쌓이는 구조(출석부 등) 등
tally로 설문지: 제작된 설문 문항이 노션과 유사한데, 웹사이트 유저폼 처럼 구현한 화면을 코드로 임베드해서
제가 구축한 웹사이트의 유저 폼 처럼 보이게 됨
=> 결과물은 구글시트에 취합되고 다시 그 구글시트 내용이별도로 추출되어 웹사이트에 표현되는 순환 구조

2. 동시 작업 (17개 지역, 70여명이 동시접속해서 업데이트 해줘야 할 내용이 있는데) 구글시트 만한게 없습니다.
엑셀도 동시접속 되지만, 버전이 다 다르고 호환이 잘 안되고무엇보다 ms 계정을 소유한 직원이 별로 없지만, 구글계정은 수년간 공유하면서 관리되고 있어 권한관리도 쉬운상태

3. 특정 구글 설문은 10만개가 넘어가는 응답 내용이 너무 버벅대서 각각 시트를 분리했다가
importrange 수식으로 외부 시트를 불러온 다음 query 함수나 filter 함수로 필요한 정보만 가져와서 통계를 낸 다음
그 통계 값만 웹사이트에 표출하는 중입니다

4. 위3번 데이터 분산과 합치기를 위해 연결해둔 수식이나 쿼리를 양식이 바뀔때마다 유지보수 하기 힘들어서 구글빅쿼리로 전환을 고민하고 있는데 아직 빅쿼리는 입문하기 전이라 정확히 그런 용도로 사용할 수있을지는 모릅니다.

5. 구글시트에 쌓인 데이터가 구글데이터스튜디오라는 예쁜 대시보드와 연동시켜 그 대시보드를 웹으로 구현하기용의합니다. (빅쿼리도 된다고해서 위 4번을 같이고려중입니다)

6. https://www.clien.net/service/board/kin/18179196?po=0&sk=id&sv=shout530&groupCd=&pt=0CLIEN

이 질문은 제가 올렸다가 답변받아 사용중인 함수인데 이런, 고급 함수로 뽑아낼 수 있는 결과물을
전문 개발자가 아닌, 저 같은 개발의 입문자가 백엔드와 프론트엔드 (풀스택) 프로그래밍 공부해서
오히려 그게 더 쉬운건지? 훨씬 어려운지? 전혀 가늠이 안되는 상황입니다.
네임스페이스
IP 112.♡.76.76
11-15 2023-11-15 18:21:41 / 수정일: 2023-11-15 19:13:13
·
@carg님

일단 쌩초보입장에 프로그래밍은 어려운건 맞습니다. 알아야할게 많죠. 프로그래밍 외적인 것들도 복잡합니다(개발환경 구축, 배포환경 마련등에 좌절할 때가 더 많습니다.)

그런데 연구수준이 아니고선 응용프로그래밍의 핵심은 '아느냐 모르느냐'의 차입니다. 알면 가능하고 모르면 아예 못하는게 프로그래밍인 것이죠.

특히 웹개발처럼 데이터흐름제어가 주분야인 곳은 더욱그래요. 수학적 문제나 알고리듬, 논리를 구현하기보단 알아내서 서버올리고 코드작성하하는게 대부분이예요.

하지만, 간단한 코드 몇줄, 함수하나를 알면 구현이 끝날일이지만 그렇게 그것을 알기위해서, 알아먹기위해서 사전지식을 1년, 3년 쌓은 사람들이 프로그래머이죠.

그래도 요즘은 AI때문에 알아내기가 참 쉬워졌습니다. 물론 많이알수록 명확히하고 추론에따른 질문을 잘하니 AI도 잘 다루죠.

그럼이번엔 본문에 쓰신 구현방법은 어떨까요? 노코드툴도 사용법을 알아야하고, html/css 조합도 뭐가 배경색을 바꾸고 뭐가 폰트사이즈를 바꾸는것인지 알아야 웹디자인을 하는 것이죠. 고민하는 남은 부분도 결국 어떻게 뭘해야 구현가능한지 알아낼수있느냐 못알아내느냐가 관건이죠.

즉 어느쪽이든 알아내야하는데 요지는 글쓴분이 하려는 저런 이것저것 툴?과 코딩사이 발담가가며 조합해서 하려는 경우를 시도하고 성공한 사람은 얼마 없을 거란거예요. 범용방식이 아니기때문에 물어볼 사람이 없어요. 책을 사서 읽어볼 책도 없죠.

반면 프로그래밍은 공부해야 (알아내야) 할게 많을지라도 물어볼수 있고 해결책이 인터넷 지천에 깔렸다는 겁니다.

결국 알아내지 못하고 끝낼 쪽과 더 오래걸려도 알아낼 수 있는 쪽의 문제가 아닌가 싶습니다.
네임스페이스
IP 112.♡.76.76
11-15 2023-11-15 18:36:19 / 수정일: 2023-11-15 18:39:37
·
@carg님
이렇게 얘기는하지만 공부할량은 너무 많은게 사실이긴해요. 프로그래밍 문외한에서 풀스택까지 아무나하는 건 아니니까요.

로컬 개발환경, 개발툴 사용법
언어( 자바스크립트)공부
백엔드(node.js )
데이터베이스
프런트엔드 (HTML/CSS/Javascript, 부트스트랩)
보안
서버구축에 필요한 리눅스 지식
배포
도메인연결 + HTTPS

개발 부터 배포 웹디자인, 서버구축및운영등 DevOps죠.

밑도끝도 없이 공부하겠다면 10년도 부족한데, 중요한 건 목적달성이니까 너무 파고들지 않아도 된다고 생각해요.

그냥 무작정 공부하기보단 일단 자바스크립트 기본기를 갖추세요. 물어서 나오는 node.js 코드들 대충 알아먹을 정도로 말이죠. node.js 프레임워크의 API함수는 눈에 익지 않겠지만 요샌 챗쥐한테 문법적으로 설명요청하면 다 알려줍니다.

그다음엔 로컬에서 node.js 개발환경을 꾸미는거고. 단계단계 밟는거죠.

초반에 HTML/CSS 공부는 추천하지 않아요. 위지위그툴도 있고 부트스트랩같은것도 있으니까요. 후순위죠.
carg
IP 58.♡.0.209
11-15 2023-11-15 18:56:38 / 수정일: 2023-11-15 18:58:40
·
@네임스페이스님

이런 조언을 무료로 들을 수 있다는 것에 정말 감동입니다.
안그래도 챗GPT 없었으면 상상도 못했을 일들을 하고있어서 쌩초보가 자꾸 개발쪽을 기웃거리고 있습니다.

그러나 node.js는백앤드쪽이고, 서버구축에는 리눅스지식이 필요하고 이런 짧은 한줄은 예상치 못한(서버와 백앤드 차이도 잘 모르는 입장에서 질문할 생각도 못해본) 정보라서 많이 돌아가다 시간낭비 하고 뒤늦게 이해하는 시행착오를 많이 줄여주는 소중한 글 같습니다.
네임스페이스
IP 112.♡.76.76
11-15 2023-11-15 19:21:41
·
@carg님

https://opentutorials.org/course/3332/21030
여기서 부터 시작하시면 어떨까 싶습니다. node.js환경에서 자바스크립트를 가르쳐주는 인강이예요. 데스크탑에서 편히 보실수 있을 거예요.
carg
IP 58.♡.0.209
11-15 2023-11-15 19:24:56
·
@네임스페이스님
생활코딩 이분 여러군데서 보이던데... 콕 찝어 주셔서 감사합니다.
carg
IP 58.♡.0.209
11-15 2023-11-15 19:40:27
·
@네임스페이스님

https://codingapple.com/course/next-js/

혹시 이건 어떤가요?
제일 윗분 댓글 보고 리액트 vs vue 라고 검색하다 vue가 초보에겐 쉽고리액트 보다 빠르다길래 vue를 파아겠다 생각했는데

이강의는 유료강의긴 하지만, Next.js로 풀스택이 된다는 말에 이건 또 뭔가? 싶네요 ㅎㅎ
네임스페이스
IP 112.♡.76.76
11-16 2023-11-16 02:55:21 / 수정일: 2023-11-16 20:21:19
·
@carg님
말했듯 저는 node.js도 할줄모르고 자바스크립트도 할줄 모릅니다. js 진영쪽으로 웹개발을 익히지 않았어요.

다만 한가지 말씀드릴 수 있는건 웹개발분야는 파편화가 매우심하고 기술변화가 심하다는 거예요. 이게좋더라 저게좋더라 뭐가 새로나왔다더라 일년에 적어도 두 세번은 듣는 것같아요. 대게 그런신기술은 이전기술에 이미 익숙한 사람들에게나 쓸만한 물건들이 많다는거예요. 신생은 신뢰부족과 자료부족은 말할것도 없고 인터넷에 이전 기술/기본을 이미 아는자들이나 이해할만한 자료들만 막 나옵니다. 결국 초보는 무슨얘긴지 못알아먹어요

초보에게 중요한건 접근이 쉬운 많은 자료가 중요하고 언어를 기본으로 라이브러리/프레임워크의 API를 익히는게 중요합니다. 이것만해도 공부량이 많고요. 타인이만든 라이브러리 가져다 쓰는거랑요(이것도 문서가 잘되어있든 남들도 많이쓰든해야 쓸만해요.).

넥스트.js는 방금 대충 조사해보니 PHP나 닷넷의 레이저 느낌이군요. 백엔드보다는 프런트엔드쪽으로 코딩 잇점이 많을 것같습니다. 서버사이드렌더링이란 본래 클라이언트(웹브라우저)측은 웹페이지를 HTML/CSS/JS로 꾸미는데 그것을 백엔드에서 생성해주는 겁니다.

웹페이지 렌더링 관점에서 전자는 정적페이지, 후자는 동적페이지로 분류할 수 있습니다.
이또한 기본은 HTML/CSS입니다. 동적렌더링의 장점은 그때그때 요청에따라 조건에따라 웹페이지 전체혹은 일부를 다르게 만들수 있다는 것과 반복되는 코드를 for문돌리듯 짧은코드로 반복시킬 수 있다는 것등등의 잇점이 있습니다. 하지만 결국 자신이 렌더링하려는 최종 웹페이지의 HTML 코드를 어떻게 만드는지 알아야하므로 기본은 필요합니다.
결국 기본에더해서 그런 꼼수를 더 익혀야하는거죠. 님께서 알아내고 싶어하는 것을 알아내는데는 전혀 유효하지 않을거라고 단언합니다.

님에게 중요한건 백엔드와 웹인프라(서버,db, 웹API)를 익히고 다루는 것이지 프런트엔드쪽은 그냥 공부하면서 필연적으로 익히것정도로만 지나쳐도 될 것같습니다. 저런 일종의 꼼수?를 보다보면 초보입장에 공부할것만 더 많아질뿐예요.

Vue.js도 그렇고 프런트엔드는 왠만하면 집중 안하는게 좋다고생각해요. 얼마나 복잡하고 이쁜 웹페이지를 '편하게' 만들겠다고 말이죠.
자기개발 수준에서 프런트엔드는 HTML,CSS 기본개념만 알면 부트스트랩같은 라이브러리에서 필요한 컴포넌트 조합해 쓰기만해도 모양새나는 모바일웹페이지 만들수 있어요. 저처럼 코딩이나 좋아하는 사람들은 CSS가 잘쓰기 정말 뭐같은데 할필요없게 만들어주죠.

당분간은 node.js와 DB중심으로 백엔드기술을 익히는데 집중하는걸 추천합니다.
IIIxe
IP 125.♡.213.35
11-15 2023-11-15 21:16:56
·
https://workers.cloudflare.com/ 로 서버를 구성하겠다는 것은 흥미로운 아이디어네요.
그런데 결국 하다보면
nodejs(express.js) + vue.js(quasar.dev)정도로 구성하는게 제일 나을 것 같습니다.
시간이 걸리지만, 그나마 빠르게 접근할 수 있는 조합입니다.
인프런이나, 유데미에서 싼 강의하나 택해서 들어보시면 어떠실까요?
아니면 유투브에서 좋은 강의가 많습니다.
더불어 챗지피티도 좋은 선생님이 됩니다. (유료모델 쓰시고,)
어쨌든 하시는 거에 돈+시간을 조금 투입을 하셔야 할 겁니다.

건투를 빕니다.
IIIxe
IP 125.♡.213.35
11-15 2023-11-15 21:56:14
·
https://workers.cloudflare.com/
이거 찾아보니 물건이네요. 좋은 걸 알려주셔서 감사드립니다.
vercel functions를 써볼까 고민했는데 이것도 좋은 선택지가 될 거 같네요.
carg
IP 211.♡.65.227
11-16 2023-11-16 13:08:59
·
@IIIxe님 앗 그렇군요 전 뭔지도 모르고 유튜브 보다가 쉽고 빠르다길래 좋은건가? 생각했습니다. ㅎㅎ
IIIxe
IP 125.♡.213.35
11-16 2023-11-16 17:54:34
·
@carg님 그런데 서버리스를 한다고 쉬워지는거는 아니고 기존의 알던 사람들이 선택지가 넓어지는 거라 보셔야. 결국 기본을 알아서 응용이 될 겁니다.
1830m
IP 1.♡.182.57
11-16 2023-11-16 16:59:53
·
db 의 개념을 먼저 이해하셔야 구글시트를 쓸지 안 쓸지를 정할 수 있겠네요. 자기 상황은 자신이 제일 잘 아는거라서 스스로 익히지 않는 한 언제까지나 겉에서 맴돌기만 할 겁니다 ..
네임스페이스
IP 112.♡.76.76
11-16 2023-11-16 21:19:53 / 수정일: 2023-11-16 21:20:38
·
저 위 댓글내용중에 놓친게 있는데

구글 데이터 스튜디오 (첨들음)의 경우 이런 대쉬보드는 데이터 시각화라 불리는데, 웹페이지에 표시하는 차트이니 웹브라우저(클라)에서 돌아가는 자바스크립트로 구현하게 됩니다. (프런트엔드)

프런트엔드라서 직접 자바스크립트 코드쳐서 만들려면 배워야할게 많고 어렵지민 이미 많은 데이터시각화 라이브러리가 많아요. 그냥 가져다 쓰면됩니다. 자신의 db데이터와 코딩으로 엮는 부분만 알아내심돼죠.

그중 하나가 chart.js 예요 (mit 라이선스)
https://www.chartjs.org/

npm 통해서 설치할수도 있네요.
https://www.npmjs.com/package/chart.js

문서 https://www.chartjs.org/docs/latest/

이런 라이브러리 이용해 대쉬보드를 만들수 있어요

이런 클라(웹브리우저,프런트엔드 자바스크립트)와 서버( 백엔드,node.js)간에

데이터를 요청하는 방식은 http 통신(리퀘스트/리스폰스)을 하게되는데 보통 GET, POST를 이용합니다.

HTTP 프로토콜에대한 기본개념은 .그림으로 배우는 http network basic 이라는 책 추천합니다. 책내용이 너무 무겁지도 않고 리퀘스트와 응답등 기본을 알기 괞찮은 책이예요
네임스페이스
IP 112.♡.76.76
11-16 2023-11-16 21:29:10 / 수정일: 2023-11-16 21:29:43
·
좀 헷갈리게 쓴거 아닌가힌데, 클라이언트와 서버라는개념은 근본적으로는
컴퓨터 또는 응용프로그램(앱) 들끼리의
상황과 입장차이라서 딱 어느건 서버고 어느건 클라 라고 정해진건 없습니다.

node.js가 동작하는 물리/클라우드 서버컴퓨터가
또 다른 서버에 접속해서 데이터를 받는다면
전자가 클라고 후자가 서버인 개념입니다.

그러니 같은 물리컴퓨터(내컴퓨터)에서도
node.js(프로그램1)이 돌고 웹브라우저(프로그램2)로 데이터를 받는다면
node.js 프로그램은 서버고 웹브라우저는 클라예요.
muhulda
IP 67.♡.141.61
11-20 2023-11-20 13:51:38
·
제대로 된 개발자가 아니라 익숙한 게 python 뿐이라 막무가내로 django로 시작해서 웹노트 같은 걸 만들어 혼자 놀고 있습니다. oracle 의 무료 인스턴스에 daphne로 django server를 돌리고 하루 한 번씩 관심있는 RSS feed 들을 스크랩해서 외신들을 요약 번역 편집합니다. 내부 데이터 처리나 요약,번역,LLM등은 주로 python 단에서 처리하고, 그 결과들을 html/js로 게시글로 포스팅하고, 이상형 월드컵 비슷하게 A/b test 통해서 주제들을 순위 정렬도 해 보면 가끔 재미있는 결과나 글타래도 나오는 듯 합니다. 자유도는 제법있어서 웹에 이런저런 tutorial들을 참고하면 생각하는 기능들을 구현하는데는 큰 문제가 없습니다만 개발 방법론적으로는 추천하기 힘든 코드들이 양산되서 마음이 슬픕니다. 뭐 업무가 아니니 무시하고 합니다.
새로운 댓글이 없습니다.
이미지 최대 업로드 용량 15 MB / 업로드 가능 확장자 jpg,gif,png,jpeg,webp
지나치게 큰 이미지의 크기는 조정될 수 있습니다.
목록으로
글쓰기
글쓰기
목록으로 댓글보기 이전글 다음글
아이디  ·  비밀번호 찾기 회원가입
이용규칙 운영알림판 운영소통 재검토요청 도움말 버그신고
개인정보처리방침 이용약관 책임의 한계와 법적고지 청소년 보호정책
©   •  CLIEN.NET
보안 강화를 위한 이메일 인증
안전한 서비스 이용을 위해 이메일 인증을 완료해 주세요. 현재 회원님은 이메일 인증이 완료되지 않은 상태입니다.
최근 급증하는 해킹 및 도용 시도로부터 계정을 보호하기 위해 인증 절차가 강화되었습니다.

  • 이메일 미인증 시 글쓰기, 댓글 작성 등 게시판 활동이 제한됩니다.
  • 이후 새로운 기기에서 로그인할 때마다 반드시 이메일 인증을 거쳐야 합니다.
  • 2단계 인증 사용 회원도 최초 1회는 반드시 인증하여야 합니다.
  • 개인정보에서도 이메일 인증을 할 수 있습니다.
지금 이메일 인증하기
등록된 이메일 주소를 확인하고 인증번호를 입력하여
인증을 완료해 주세요.