<div id="readability-page-1" class="page"><div><div><h2 id="4eb4" data-testid="storyTitle">우당탕탕 설문기능 만들기</h2><div><a rel="noopener follow" href="/@totuworld?source=post_page-----f25d1aa68b20--------------------------------"><div aria-hidden="false"><p><img alt="송요창" src="https://miro.medium.com/v2/resize:fill:88:88/1*nAMOvHeZTqTZjdz33jQ2Ag.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"></p></div></a></div></div><p id="c926">최근에 간단한 설문 기능을 개발했다. 오래도록 쓸 기능이 아니라 한 번 이벤트로 사용할 기능이었다. React.js로 만든 고객 웹 사이트가 있어서 여기다가 기능을 추가할까 하다가 HTML, CSS만 가지고 처리하기로 했다. DB도 구글 스프레드시트를 사용했다.</p><h2 id="5d03">사건의 발단</h2><p id="bd2a">회사 동료를 대상으로 간단한 설문을 수집해야할 일이 생겼다. 팀에서는 최대한 적은 시간과 인력을 투입해서 빠르게 테스트해보고 싶어했다.</p><p id="7bc7">간단한 웹 페이지를 만들어서 이를 처리해보기로 결정했다. DB도 이미 사용중인 관계형 데이터베이스를 쓰려면 테이블을 추가했다가 지우는 작업이 들어가고, 이를 지원해줄 백엔드 프로그래머가 필요하니까 제외했다.</p><p id="51e4">HTML, CSS, 구글 스프레드시트만 가지고 처리하는 방향으로 가닥을 잡았다.</p><h2 id="5913">10분 완성 HTML</h2><p id="cbe5">HTML은 정말 금방 뽑아냈다. ChatGPT에게 질문 3개 정도 던져서 HTML을 얻었다. 그리고 이를 다시 디버깅해서 동작하게 만드는데 10분정도 소요했다.</p><p id="f816">오히려 시간을 더 많이 보낸건 데이터를 넣는 일이었다. 최초에는 구글 앱스 스크립트를 활용해서 서빙하려고 했지만 회원 정보 등을 앱에서 수신해야해서 구글 앱스 스크립트만 가지고는 처리가 불가능했다. 하여 기존에 웹 사이트를 서빙하는 AWS Cloudfront의 behavior를 하나 추가하여 HTML만 하나 끼워넣도록 수정했다.</p><p id="5f35">이렇게 변경하니 구글 스프레드시트에 데이터를 넣는 AWS Lambda가 하나 필요해졌다. 전에 사용하던 코드 하나 열고 GitHub Copilot 도움으로 코드 만들고 디버깅했다.</p><figure></figure><h2 id="39cf">정적 HTML의 장점</h2><p id="294e">이렇게 구성하고 개발해보니 번들링이 필요없고 전달해야할 파일 용량이 작아서 편했다. CSS의 경우는 Tailwind CSS를 활용했더니 명령줄도구(CLI, Command Line Interface)로 사용된 스타일만 뽑아서 한 파일로 정리해줬다. 배포도 파일 2개 업로드하니 그만이라서 금방 처리할 수 있었다.</p><p id="b9d6">React.js에 푸욱 절여진 몸이 되어버려서 뭐만하면 다 React.js로 처리하려고했던게 어리석었다. 어쩌면 지금까지 만든 기능 중에 HTML, CSS, JavaScript 조합으로만 충분한 기능까지 모두 React.js 쓰려고 아둥바둥하고 있었던게 아닐까?</p><h2 id="9027">새로운 요구사항의 등장</h2><p id="00db">그런데 복병은 새로운 요구사항이었다. 설문으로 입력받은 내용에 댓글을 입력하고 좋아요를 사용자가 누를 수 있어야했다. 심지어 댓글도 좋아요를 눌러야했다. 데이터만 불러서 화면에 뿌리는건 어찌어찌 하겠는데, 각 요소별로 댓글을 목록으로 표시하고 좋아요 여부를 빼고 넣는게 퍽이나 귀찮았다. 조작해야하는 DOM 숫자가 늘어나니까 정신없어지기 시작했다.</p><p id="91b5">특히나 어떻게든 HTML 파일 하나에 모든걸 쑤셔 넣다보니 나중에 그게 어디있는지 정신이 없었다. 결국 두 손 들고 React.js로 페이지를 만들기로 했다. 다행히 사내에서 사용하는 디자인 시스템 도움을 받고, 기존에 토이 프로젝트 진행했던 코드가 있어서 컴포넌트 생산에 속도를 낼 수 있었다.</p><p id="2c21">사람이 간사하다. 한참 HTML 쓸때는 React.js 꼭 써야했나 이래놓고 금방 돌아와서 편안해하고 있다. 상태변경 만으로 뷰가 갱신되는게 참 좋더라.</p><p id="718d">오히려 많은 시간을 뺏은건 데이터베이스였다. 구글 스프레드시트만으로 댓글과 좋아요를 처리하려고 했더니 시트가 늘어나고 쿼리가 필요하게 되었다. 이럴바에는 그냥 Firebase Firestore에 넣어버리는게 편하겠다는 생각이 들었다. 그래서 댓글과 좋아요는 Firestore로 변경했는데, 이를 Lambda 하나에 모두 우겨넣어야 했다. 기존 코드를 수정해서 샘플 하나 만들고 GitHub Copilot이 안내하는대로 코드 적은 뒤에 디버깅하면서 작업해버렸다.</p><h2 id="e660">맺음말</h2><p id="08ef">이 설문 기능을 사용한 뒤 폐기하려면 다음의 일을 처리해야한다.</p><ul><li id="f3d4">S3에서 HTML, CSS 파일을 삭제</li><li id="797e">CloudFront의 behavior 삭제</li><li id="bd90">Lambda 삭제</li><li id="1f25">구글 스프레드시트 삭제</li><li id="4bb7">React.js 코드 삭제</li></ul><p id="dc8e">HTML, CSS, JavaScript만 가지고 끝내려고했는데 결과만 놓고보면 실패했다. 다행히 인원을 더 투입하진 않았지만 초기에 예상한 시간보다는 더 많은 시간이 들어가긴 했다.</p><p id="77b8">그래도 PM 한 명, FE 한 명으로 일을 막아냈다. 이렇게 확보한 시간으로 우리 동료들은 다른 기능을 만들고 있다.</p></div></div>

Stories by 송요창 on Medium

totuworld

최근에 간단한 설문 기능을 개발했다. 오래도록 쓸 기능이 아니라 한 번 이벤트로 사용할 기능이었다. React.js로 만든 고객 웹 사이트가 있어서 여기다가 기능을 추가할까 하다가 HTML, CSS만 가지고 처리하기로 했다. DB도 구글 스프레드시트를 사용했다.
사건의 발단
회사 동료를 대상으로 간단한 설문을 수집해야할 일이 생겼다. 팀에서는 최대한 적은 시간과 인력을 투입해서 빠르게 테스트해보고 싶어했다.
간단한 웹 페이지를 만들어서 이를 처리해보기로 결정했다. DB도 이미 사용중인 관계형 데이터베이스를 쓰려면 테이블을 추가했다가 지우는 작업이 들어가고, 이를 지원해줄 백엔드 프로그래머가 필요하니까 제외했다.
HTML, CSS, 구글 스프레드시트만 가지고 처리하는 방향으로 가닥을 잡았다.
10분 완성 HTML
HTML은 정말 금방 뽑아냈다. ChatGPT에게 질문 3개 정도 던져서 HTML을 얻었다. 그리고 이를 다시 디버깅해서 동작하게 만드는데 10분정도 소요했다.
오히려 시간을 더 많이 보낸건 데이터를 넣는 일이었다. 최초에는 구글 앱스 스크립트를 활용해서 서빙하려고 했지만 회원 정보 등을 앱에서 수신해야해서 구글 앱스 스크립트만 가지고는 처리가 불가능했다. 하여 기존에 웹 사이트를 서빙하는 AWS Cloudfront의 behavior를 하나 추가하여 HTML만 하나 끼워넣도록 수정했다.
이렇게 변경하니 구글 스프레드시트에 데이터를 넣는 AWS Lambda가 하나 필요해졌다. 전에 사용하던 코드 하나 열고 GitHub Copilot 도움으로 코드 만들고 디버깅했다.
정적 HTML의 장점
이렇게 구성하고 개발해보니 번들링이 필요없고 전달해야할 파일 용량이 작아서 편했다. CSS의 경우는 Tailwind CSS를 활용했더니 명령줄도구(CLI, Command Line Interface)로 사용된 스타일만 뽑아서 한 파일로 정리해줬다. 배포도 파일 2개 업로드하니 그만이라서 금방 처리할 수 있었다.
React.js에 푸욱 절여진 몸이 되어버려서 뭐만하면 다 React.js로 처리하려고했던게 어리석었다. 어쩌면 지금까지 만든 기능 중에 HTML, CSS, JavaScript 조합으로만 충분한 기능까지 모두 React.js 쓰려고 아둥바둥하고 있었던게 아닐까?
새로운 요구사항의 등장
그런데 복병은 새로운 요구사항이었다. 설문으로 입력받은 내용에 댓글을 입력하고 좋아요를 사용자가 누를 수 있어야했다. 심지어 댓글도 좋아요를 눌러야했다. 데이터만 불러서 화면에 뿌리는건 어찌어찌 하겠는데, 각 요소별로 댓글을 목록으로 표시하고 좋아요 여부를 빼고 넣는게 퍽이나 귀찮았다. 조작해야하는 DOM 숫자가 늘어나니까 정신없어지기 시작했다.
특히나 어떻게든 HTML 파일 하나에 모든걸 쑤셔 넣다보니 나중에 그게 어디있는지 정신이 없었다. 결국 두 손 들고 React.js로 페이지를 만들기로 했다. 다행히 사내에서 사용하는 디자인 시스템 도움을 받고, 기존에 토이 프로젝트 진행했던 코드가 있어서 컴포넌트 생산에 속도를 낼 수 있었다.
사람이 간사하다. 한참 HTML 쓸때는 React.js 꼭 써야했나 이래놓고 금방 돌아와서 편안해하고 있다. 상태변경 만으로 뷰가 갱신되는게 참 좋더라.
오히려 많은 시간을 뺏은건 데이터베이스였다. 구글 스프레드시트만으로 댓글과 좋아요를 처리하려고 했더니 시트가 늘어나고 쿼리가 필요하게 되었다. 이럴바에는 그냥 Firebase Firestore에 넣어버리는게 편하겠다는 생각이 들었다. 그래서 댓글과 좋아요는 Firestore로 변경했는데, 이를 Lambda 하나에 모두 우겨넣어야 했다. 기존 코드를 수정해서 샘플 하나 만들고 GitHub Copilot이 안내하는대로 코드 적은 뒤에 디버깅하면서 작업해버렸다.
맺음말
이 설문 기능을 사용한 뒤 폐기하려면 다음의 일을 처리해야한다.
S3에서 HTML, CSS 파일을 삭제
CloudFront의 behavior 삭제
Lambda 삭제
구글 스프레드시트 삭제
React.js 코드 삭제
HTML, CSS, JavaScript만 가지고 끝내려고했는데 결과만 놓고보면 실패했다. 다행히 인원을 더 투입하진 않았지만 초기에 예상한 시간보다는 더 많은 시간이 들어가긴 했다.
그래도 PM 한 명, FE 한 명으로 일을 막아냈다. 이렇게 확보한 시간으로 우리 동료들은 다른 기능을 만들고 있다.
(글쓴이가 직접 작성한 광고)
글쓴이가 직접 만든 강의!
리뷰 1
리뷰 2
스스로 탐색해가면서 학습하고 피드백을 통해 점검하고 싶다면 제 강의가 좋은 선택이 될거라고 생각합니다.
할인된 금액으로 시작해보세요(강의 작성 후기)
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript) - 인프런 | 강의
99,000원 -> 39,000원(60,000원 할인) 쿠폰코드
12750-dcb57bddbd0a
2023년 9월 말까지 유효하며, 선착순 100명에게만 유효합니다.
(글쓴이가 직접 작성한 광고22)
찐 문과생 2명과 피드백만 2개월 이상하며 만들어낸 정말 쉬운 업무 자동화 강의!
코드 편집기 필요없습니다.
그저 웹 브라우저와 구글 계정만 있다면 누구나 시작할 수 있습니다!
22,000원 -> 12,000원(10,000원 할인) 쿠폰코드
12751-1be79e3d48e8
2023년 9월 말까지 유효하며, 선착순 100명에게만 유효합니다.
Google Apps Script로 시작하는 업무 자동화 - 인프런 | 강의