- 웹 애플리케이션이 클라우드 스토리지에 데이터를 업로드하는 방법을 설명하십시오.
- 클라우드 파일 저장소와 클라우드 데이터베이스 저장소를 구분하십시오
- Supabase가 무엇인지 이해하고, 나만의 클라우드 스토리지를 설정하는 방법을 알아보세요.
- 관계자 피드백을 저장하기 위한 데이터베이스가 포함된 Supabase 프로젝트
- 업데이트된 창립자 도구 키트 이해관계자 피드백이 Supabase 데이터베이스에 저장되며, 레코드 추가/수정/삭제 기능이 포함됩니다
- 학생들은 파운더스 툴킷 작업을 통해 이전 기술 단원을 완료했습니다.
로컬 스토리지에서 클라우드 스토리지로
창업자 도구 키트는 매 단원마다 성장해 왔습니다. 피드백 수집, 이해관계자 추적, AI 기반 분석을 위한 모듈을 구축하셨습니다. 이러한 도구들은 사업 아이디어를 발전시키는 동시에 아이디어에 어떻게 적응해야 하는지 이해하는 데 도움을 주고 있습니다.
현재 모든 데이터는 로컬 스토리지에 저장되어 있습니다.
그러나 다른 사람과 협업하거나 현재 GitHub 코드스페이스 외부에서 앱을 사용하려고 하면 문제가 되는 한계가 있습니다.
실제 사용자에게 서비스를 제공하는 성공적인 앱에는 다음과 같은 데이터가 필요합니다:
데이터는 지속됩니다
사용자들은 자신의 정보를 당신에게 맡길 수 있습니다
다양한 기기에서 작동합니다
사람들은 브라우저, 컴퓨터, 휴대폰 등을 오가며 사용합니다.
협업을 가능하게 합니다
귀사와 같은 비즈니스 및 개발 팀은 정보를 공유해야 합니다
성장하고 확장할 수 있다
한 명의 사용자에게 효과가 있는 것은 천 명의 사용자에게도 효과가 있어야 한다
이 단원은 클라우드 스토리지로의 첫걸음입니다. Founder’s Toolkit을 업데이트하여 localStorage에 저장된 데이터가 이제 클라우드에 안전하게 저장되고 어디서나 접근 가능하도록 할 것입니다. 더 중요한 것은, 클라우드에 데이터를 저장하는 데 적용 가능한 패턴을 다른 상황에도 활용하는 방법을 배우게 될 것입니다.
클라우드 스토리지
클라우드 스토리지는 크게 두 가지 방식으로 고려할 수 있으며, 그 차이를 이해하면 다양한 유형의 데이터에 맞는 올바른 선택을 하는 데 도움이 됩니다.
- 파일 저장소는 사용자가 업로드하거나 다운로드하는 파일에 매우 유용합니다. 모든 프로젝트 워크시트가 완벽한 예시인데, 이는 저장하고 검색하여 어디서나 다른 사람과 협업할 수 있도록 보관해야 하는 문서이기 때문입니다. 현재 여러분은 파일 저장 방법으로 Google 드라이브를 사용하고 있을 것입니다.
- 데이터베이스 스토리지는 이름, 유형, 피드백 필드와 같은 구조화된 정보(예: 이해관계자 기록)를 보유할 때 사용됩니다.
현재로서는 데이터베이스 저장소에 집중하겠습니다.
클라우드 스토리지 서비스 선택하기
다양한 클라우드 스토리지 옵션이 존재합니다. MVP 구축을 시작하는 분들을 위해 가장 인기 있는 서비스들을 비교해 보겠습니다.
서비스
설정 복잡성
무료 이용권
무료 이용 후 요금제
최적의
수파베이스
단순한
- 500MB 데이터베이스 저장 공간
- 1GB 파일 저장 공간
- 넉넉한 API 사용량 제한
- 무제한 API 요청*
월 25달러
- 최소 기능 제품(MVP)을 구축하는 스타트업
- SQL 배우기
- 인증이 필요한 앱 + 데이터베이스
파이어베이스
단순한
- 1GB 파일 저장 공간
- 1GB 데이터베이스 저장 공간
- 넉넉한 API 사용량 제한
- 실시간 동기화 포함
사용량 기반 요금제 ($0.18/GB 저장 공간, $0.06/GB 다운로드)
- 구글 생태계
- 실시간 애플리케이션
- 모바일 앱
- 초보자용 (SQL보다 간단함)
몽고DB 아틀라스
중간
- 512MB 데이터베이스 저장 공간
- 공유 클러스터
- 제한된 연결
월 9달러 (전용 클러스터)
- NoSQL 데이터베이스
- 유연한 데이터 스키마
- 문서 기반 저장소
- 대규모 데이터 세트 확장
아마존 웹 서비스/구글 클라우드 플랫폼
복합체
- 제한됨 (서비스에 따라 다름)
- 12개월 체험판 이용 가능
- 종종 신용카드가 필요합니다
변수 (사용법에 따라 크게 달라짐)
- 기업용 애플리케이션
- 완전한 인프라 제어 필요
- 고급 확장 요구사항
- DevOps 전문성을 갖춘 팀
이번 강의에서는 Supabase 스토리지를 사용합니다 .
왜 Supabase인가요?
- 복잡한 설정이나 신용카드가 필요하지 않습니다
- 실제 MVP에게도 유용한 넉넉한 무료 티어. 일부 '무료 요금제'는 너무 제한적이어서 사실상 체험판에 불과합니다. 2026년 1월 22일 기준, Supabase는 매월 1GB의 저장 공간과 무제한 API 요청을 무료로 제공합니다. 이는 예상치 못한 요금 걱정 없이 MVP를 구축하고 테스트하며 소프트 론칭하기에 충분한 규모입니다. 스타트업이 성장함에 따라 Supabase는 귀사의 요구에 맞춰 확장 가능한 옵션을 제공합니다.
- 전체 백엔드 스토리지를 위한 단일 플랫폼
- Supabase는 MVP만을 위한 것이 아닙니다. 현재 수백만 명의 사용자를 보유한 기업들도 Supabase를 기반으로 운영되고 있으므로, 여기서 습득한 기술은 다른 분야로도 직접 활용할 수 있습니다.
Supabase 계정과 프로젝트를 생성하고 API 키를 발급받아야 합니다. Google AI Studio나 Hugging Face와 유사한 방식입니다. 개념은 동일합니다: 앱이 통신할 외부 서비스에 대한 접근 권한을 설정하는 것입니다.
차이점은 Supabase가 인프라의 핵심적인 부분이 된다는 점입니다. Gemini가 AI 분석이라는 특정 작업을 처리하는 반면, Supabase는 스토리지, 데이터베이스, 그리고 잠재적으로 사용자 인증까지 처리할 수 있습니다. 이는 기본적으로 앱의 전체적인 기반을 구축하는 것입니다.
보안
클라우드 스토리지를 생성하고 사용할 때는 보안을 고려하는 것이 중요합니다 . Supabase를 사용하면 앱 내 다양한 역할에 대한 보안 수준을 설정할 수 있습니다. 기본적으로 RLS(행 수준 보안) 을 활성화하는 것은 현관문을 잠그는 것과 같습니다. 이를 설정하지 않으면 데이터베이스는 아무에게나 열려 있는 책과 같습니다. 잠금 후에는 각 그룹별로 특정 '디지털 키'를 생성해야 합니다. Founder’s Toolkit의 경우, 이해관계자들이 직접 피드백을 입력할 수 있도록 허용하고자 합니다. 하지만 그들에게(그리고 앱을 실행하는 누구에게도) 데이터베이스 내 레코드를 조회, 수정 또는 삭제할 수 있는 권한을 부여하고 싶지는 않습니다. 반면 팀원들에게는 완전한 접근 권한이 필요합니다. 따라서 데이터베이스에 2단계 권한을 설정할 것입니다.
우리는 두 가지 별개의 역할을 구현하고 있습니다:
- 이해관계자(익명): 일반인의 접근 기록에 대한 기록. 기여는 가능하지만, 기록을 변경할 수는 없습니다.
- 팀 (인증됨): 이메일과 비밀번호를 통한 안전한 접근. 이 '관리자' 권한은 생성, 읽기, 업데이트, 삭제(CRUD) 기능을 통해 도구 키트를 체계적으로 관리할 수 있습니다.
활동 1
Supabase 계정 및 프로젝트 생성하기
예상 소요 시간: 15분
Supabase 계정과 프로젝트를 생성하고, Stakeholders 테이블을 설정하며, 앱에서 해당 테이블에 접근하기 위한 API 키를 획득하게 됩니다.
1. Supabase 계정 생성하기
- 다음으로 이동 supabase.com 계정을 생성하려면
- 가입하려면 클릭하세요. 체계적인 관리를 위해 GitHub 계정으로 가입하는 것을 권장합니다.
2. 새 프로젝트 만들기
- 가입 후 새 프로젝트를 생성하려면 클릭하세요.
- 프로젝트 이름을 입력하세요.
- 강력한 비밀번호를 생성하거나 "비밀번호 생성"을 클릭하여 자동으로 생성하십시오.
- 이 비밀번호를 안전한 곳에 보관하십시오. 직접 데이터베이스에 접근할 때 필요할 것입니다.
- 조직을 선택하세요(무료 버전은 하나의 조직만 허용할 수 있으며 기본 조직이 표시됩니다).
- 사용자와 가장 가까운 지역을 선택하세요. 데이터가 사용자에게 가까울수록 더 빠르게 로드되므로 성능에 영향을 미칩니다.
- 보안 옵션 아래:
- 기본값인 "데이터 API + 연결 문자열"을 유지하세요. 이는 해당 API를 사용하거나 데이터베이스에 직접 연결할 때 더 많은 유연성과 간편함을 제공합니다.
- 기본값인 "데이터 API에 공용 스키마 사용"을 유지하세요 . 이는 대부분의 앱에서 작동하는 표준 설정입니다. "전용 API 스키마" 옵션은 현재 필요하지 않은 고급 보안 요구사항을 위한 것입니다.
- 새 프로젝트를 생성하려면 클릭하고 완료될 때까지 기다리세요 (1~2분 소요)
3. 데이터베이스 테이블 생성
데이터베이스에 이해관계자 피드백을 위한 테이블을 생성할 예정입니다.
- 데이터베이스 구축 아래에서 테이블 편집기 버튼을 클릭하세요.
- 테이블 생성을 클릭하세요.
- 테이블 이름을 '이해관계자'로 지정하고 설명을 추가하십시오.
- Supabase는 테이블을 생성할 때 id와 created_at이라는 타임스탬프를 포함합니다. 이 열들은 테이블의 각 행에 고유한 식별자를 부여하는 데 유용하며, 행이 언제 추가되었는지 파악하는 데 도움이 될 수 있으므로 그대로 유지하는 것이 좋습니다.
- 추가로 무엇을 더 추가해야 할까요? 창업자 도구 키트 내 '관계자 추적기' 탭을 다시 확인해 보세요. 해당 양식에는 이름, 유형, 주요 피드백이 포함됩니다. 이 세 가지 열을 추가하고, 유형은 텍스트로 설정하세요.
- 테이블을 저장하려면 클릭하세요.
4. 데이터베이스 접근을 위한 보안 정책 설정
- 테이블 편집기에서 이해관계자 테이블 옆에 있는 3개의 점을 클릭한 후 정책 보기를 클릭하세요.
- RLS (행 수준 보안)를 활성화해야 합니다. 활성화되지 않은 경우 RLS를 활성화하십시오. 이를 통해 데이터베이스 및 애플리케이션 내 테이블에 대한 접근 권한을 정확히 설정할 수 있습니다.
- 정책 생성을 클릭하여 팀에 대한 RLS 정책을 구성하십시오.
- 다음 창에서,
- 정책 이름에 대한 유형 팀 액세스.
- 정책 명령에 대해 모두 선택하십시오.
- 대상 역할 의 드롭다운에서 인증됨을 선택하십시오.
- 사용 후 true를 입력하세요 .
- 확인 후 true를 입력하세요.
- 정책 저장을 클릭하십시오.
이를 통해 인증된 사용자(팀)는 테이블에 대한 전체 읽기/쓰기/삭제 권한을 부여받습니다.
- 이해관계자를 위한 또 다른 정책을 추가합니다(‘정책 생성’을 다시선택 ).
이를 통해 이해관계자들은 앱을 통해 직접 피드백을 남길 수 있게 됩니다. 이번에는 다음과 같이 진행합니다: - 정책 이름에 대한 이해관계자 액세스 권한을 입력하십시오.
- 정책 명령에 대해 삽입을 선택하십시오.
- 대상 역할의 드롭다운에서 '익명'을 선택하십시오.
- 사용 후 true를 입력하세요
- 확인 후 true를 입력하세요.
- 정책 저장을 클릭하세요.
5. 사용자 추가
이제 데이터베이스에 인증된 사용자를 추가해야 합니다. 전체 팀원을 추가할 수도 있지만, 당분간은 앱을 실행하고 테스트할 수 있도록 본인만 사용자로 추가하세요.
- 화면 왼쪽의 '인증' 아래에서 '사용자'를 클릭하십시오.
- 사용자 추가를 클릭하세요.
- 이메일 주소를 입력하고, 기억할 수 있는 비밀번호(또는 어디선가 저장할 수 있는)를 입력한 후, 자동 확인을 선택한 상태로 두고 '사용자 생성'을 클릭하세요.
현재 창립자 툴킷은 모든 데이터를 로컬 스토리지에 저장합니다. Supabase 데이터베이스로 새롭게 시작할 수도 있지만, 툴킷의 이전 실행 과정에서 이미 상당한 이해관계자 피드백을 확보했으므로 기존 데이터를 Supabase의 이해관계자 테이블로 이전합시다. 수동으로 복사하여 붙여넣기하거나, 심지어 LLM(대규모 언어 모델)에게 작업을 맡길 수도 있습니다.
그러나 데이터가 JSON 형식이므로, Supabase의 SQL 편집기를 사용하여 SQL로 레코드를 테이블에 삽입할 수 있습니다. SQL, 즉 구조적 쿼리 언어(Structured Query Language)는 데이터 관리, 특히 관계형 데이터베이스 관리 시스템에서 사용되는 도메인 특정 언어입니다.
활동 2
로컬 스토리지(LocalStorage)를 클라우드 스토리지(Cloud Storage)로 이동
예상 소요 시간: 15분
브라우저의 로컬 스토리지에서 이해관계자 정보를 추출한 후, 이를 Supabase 테이블로 가져옵니다.
1. 로컬 스토리지에서 JSON 추출
- 코드스페이스로 돌아가서 파운더 툴킷을 실행하세요.
- 브라우저에서 개발자 도구를 열고, 개발자 도구 창에서 애플리케이션을 클릭하여 localStorage를 확인하세요.
- 로컬 스토리지에서 이해관계자 피드백 정보를 찾은 후 첫 번째 JSON 줄을 마우스 오른쪽 버튼으로 클릭하세요. 팝업 메뉴가 표시되며 여기서 '값 복사'를 선택할 수 있습니다.
- 텍스트 편집기(TextEdit 또는 Notepad)를 열고 JSON을 빈 문서에 붙여넣으세요.
- 파일을 확인하고 각 키의 이름을 JSON에서 확인하십시오. 이는 Supabase 테이블의 열과 약간 다를 수 있습니다.
아래는 우리의 샘플 JSON입니다
[
{
"name": "Jill Stein",
"type": "interview",
"feedback": "She is a teacher and knows many students this is a problem for. She thinks bringing in the parents and family to give them some education on the issue is helpful. Also bringing in the school admin to see how they can support. Also, many students do not have good internet access, especially in rural areas.",
"timestamp": "2026-01-14T03:47:10.531Z"
},
{
"name": "Phil Green",
"type": "email",
"feedback": "He is a student and has this issue. He does not have good internet access and he does not have transportation to get to a library either. He would need a way to get access during the school day or a means to access it otherwise. ",
"timestamp": "2026-01-14T03:48:13.193Z"
},
{
"name": "Billy Bob",
"type": "interview",
"feedback": "I absolutely love this idea. We need it!",
"timestamp": "2026-01-16T01:43:12.027Z"
},
{
"name": "Anna Banana",
"type": "email",
"feedback": "This is really a bad idea. I don't like it.",
"timestamp": "2026-01-16T01:46:33.361Z"
},
{
"name": "Millicent Penny",
"type": "interview",
"feedback": "I Love it! Best idea ever.",
"timestamp": "2026-01-16T01:50:46.785Z"
},
{
"name": "Fred Flintston",
"type": "interview",
"feedback": "This is probably the worst idea I have ever heard. Do not like it.",
"timestamp": "2026-01-16T01:52:06.319Z"
},
{
"name": "Betty White",
"type": "email",
"feedback": "Do not do it. It is a bad idea.",
"timestamp": "2026-01-16T01:53:19.377Z"
},
{
"name": "Mary Contrary",
"type": "email",
"feedback": "This is absolutely the most amazing idea I have ever heard. I absolutely love it.",
"sentiment": "positive",
"timestamp": "2026-01-16T02:05:42.541Z"
}
]
2. 데이터를 Supabase로 전송
- Supabase 프로젝트를 열고, 왼쪽 아이콘 메뉴에서 SQL 편집기를 클릭하세요.
- 다음 코드를 SQL 편집기에 붙여넣으세요.
INSERT INTO "Stakeholders" (name, type, feedback, created_at)
SELECT
value->>'name',
value->>'type',
value->>'feedback',
(value->>'timestamp')::timestamp
FROM json_array_elements('YOUR JSON HERE'::json) AS value;
- 코드를 살펴보고 작동 방식을 이해하세요.
첫 번째 INSERT INTO 문은 Stakeholders 테이블에 데이터를 삽입할 것임을 명시하며, 특히 다음 4개의 열에 삽입합니다.
이 라인을 수정하여 Supabase 테이블의 테이블 및 열 이름과 정확히 일치시키세요. 정확히. - SELECT 라인은 JSON에서 추출하려는 필드/키를 지정합니다.
나열된 필드를 원하는 대로 변경하려면 편집하세요. 정확히 JSON의 키와 정확히 일치하도록 편집하십시오.- value->>'name' "JSON에서 'name' 필드를 가져온다"를 의미합니다.
- ::timestamp 문자열을 타임스탬프 형식으로 변환함을 의미합니다.
- FROM 행은 JSON 배열이 반복 처리할 행 집합임을 명시합니다. 각 레코드 또는 행은 값라고 합니다. JSON을 FROM 행의 따옴표 ‘ ‘ 사이에 붙여넣으세요.
- 실행 버튼을 클릭하여 SQL 명령어를 실행하십시오.
- 오류가 발생하면 문제를 디버깅해 보거나 LLM의 도움을 받으세요. 그렇지 않으면 성공 메시지가 표시됩니다.
- 테이블 편집기로 돌아가세요. 테이블에 추가된 레코드를 확인할 수 있을 것입니다.
활동 3
창립자 도구 모음을 클라우드에 저장하도록 업데이트
예상 소요 시간: 15분
이제 이해관계자가 직접 피드백을 추가할 수 있는 기능을 추가하고, 팀원에게 이해관계자 데이터베이스에 대한 읽기/쓰기/삭제 권한을 부여할 것입니다.
1. GitHub 저장소와 코드스페이스를 엽니다
코드를 많이 수정할 예정이므로, 이전 단원에서 다룬 전체 Git 워크플로를 따를 것을 권장합니다.
- GitHub로 이동하여 Founder’s Toolkit 저장소를 엽니다.
- 메인 브랜치에서 새 브랜치를 생성하고 이름을 supabase-cloud-storage
- 기존 코드스페이스를 열고 새 브랜치를 체크아웃하세요.
- 환경이 로드될 때까지 기다리십시오.
2. ".env" 파일에 인증 정보를 추가하세요
Supabase 프로젝트 URL과 게시 가능 키가 필요합니다. 이는 기본적으로 데이터베이스에 대한 API 역할을 합니다.
- Supabase에서 왼쪽의 홈 기어 아이콘을 클릭하여 프로젝트 설정에 접근하세요.
- 데이터 API 를 클릭하여 프로젝트 URL을 찾으세요.
- 왼쪽의 'API 키 '를 클릭하면 게시용 키를 확인할 수 있습니다.
- Codespaces에서 ".env" 파일을 열고 다음 두 줄을 추가하세요:
SUPABASE_URL=YOUR_SUPABASE_PROJECT_URL
SUPABASE_ANON_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
- 위의 텍스트를 복사/붙여넣기 한 후, Supabase에서 제공받은 프로젝트 URL과 공개 키로 대체하세요.
3. Copilot에게 Supabase 저장소 기능 추가하도록 지시하기
여기에는 많은 작업이 포함되어 있으므로, 디버깅과 발생하는 문제 해결을 위해 단계별로 진행하겠습니다.
다음과 같은 프롬프트로 시작하세요:
다음 작업을 수행하려면 이해관계자 추적기 탭을 업데이트하십시오.
- 이해관계자 표 표시를 제거하고 양식만 남겨주세요.
- 정보를 로컬 스토리지에 저장하는 대신, 이제 Supabase에 저장됩니다. 테이블 이름은 Stakeholders입니다. 익명 역할을 사용하십시오.
- .env 파일에는 이미 SUPABASE_URL 및 SUPABASE_ANON_KEY가 포함되어 있습니다.
- 콘텐츠 보안 정책(CSP)을 업데이트하여 Supabase 엔드포인트를 허용하도록 설정하십시오.
- 익명 사용자를 위한 삽입물은 삽입 후 데이터를 다시 읽으려고 시도해서는 안 됩니다. 삽입 후 데이터를 다시 읽으려 해서는 안 됩니다. 이는 INSERT 권한만 있기 때문에 실패할 것입니다.
- Supabase에 레코드가 추가되었을 때 성공 메시지를 제공합니다.
4. 앱 실행 및 테스트
패키지를 설치하려면 Copilot이 제공하는 설치 지침을 따르십시오.
- 앱을 실행하고 피드백과 함께 새로운 이해관계자를 추가해 보세요. 성공했다는 확인 메시지를 받아야 합니다.
- Supabase의 테이블 편집기로 이동하여 새 레코드가 테이블에 업데이트되었는지 확인하세요. 새 레코드를 보려면 브라우저를 새로 고쳐야 할 수 있습니다.
- LLM의 도움을 받아 앱이 올바르게 작동하는지 확인하기 위한 문제 해결을 수행합니다.
5. 관리자 로그인 추가
- Copilot에 관리자 권한으로 로그인할 수 있는 기능을 추가해 달라고 요청하여, 모든 이해관계자 기록을 확인할 수 있도록 해 주세요.
이것은 샘플 프롬프트입니다:
- "관리자 로그인" 버튼을 이해관계자 추적기 화면에 추가하십시오.
- 이메일/비밀번호 입력 양식 표시.
- Supabase의 auth.signIn()을 사용하여 사용자를 인증하십시오.
- 로그인 상태일 경우, 양식 아래 화면에 이해관계자 테이블을 표시합니다.
- 로그인한 사용자에게 로그아웃 버튼도 표시합니다.
- 로그인하지 않은 경우, 테이블이 아닌 양식만 표시하십시오.
- 앱을 다시 실행하고 Supabase에서 설정한 이메일/비밀번호로 관리자로 로그인하세요. 로그인 후 '관계자 추적기' 탭에서 '관계자' 테이블을 확인할 수 있습니다.
- 로그아웃. 테이블이 표시되어서는 안 됩니다.
- LLM의 도움을 받아 앱이 올바르게 작동하는지 확인하기 위한 문제 해결을 수행합니다.
6. 편집 및 삭제 기능 추가
- 관리자 권한으로 로그인한 사용자에게 편집 및 삭제 기능을 추가하도록 Copilot에 요청하세요.
이것은 샘플 프롬프트입니다:
관리자 전용으로, 이해관계자 테이블의 각 행에 대해 수정 및 삭제 버튼을 추가하십시오.
해당 버튼들은 Supabase 테이블 내 해당 행을 편집 및 삭제하는 기능을 수행해야 합니다.
- 앱을 다시 실행하세요. 레코드를 추가, 수정, 삭제해 보고 Supabase의 테이블이 올바르게 업데이트되는지 확인하세요.
- 로그아웃한 후 레코드 추가만 가능하고 다른 작업은 불가능한지 확인하십시오.
- LLM의 도움을 받아 앱이 올바르게 작동하는지 확인하기 위한 문제 해결을 수행합니다.
7. 여러 기기에서 테스트
이해관계자 데이터가 안전하게 보호될 뿐만 아니라, 클라우드에 데이터를 저장하면 앱 사용자가 어디에 있든 데이터에 접근할 수 있습니다. 이를 통해 이해관계자가 직접 피드백을 추가하거나 여러 팀원이 휴대폰으로 데이터에 접근하는 등 다양한 가능성이 열립니다.
이것이 클라우드 스토리지의 진정한 힘입니다. 앱이 Codespaces에서 개발 중인 동안 이를 테스트하려면 다음을 수행할 수 있습니다.
- Codespaces에서 앱을 시작하려면 npm start를 입력하세요.
- 터미널 옆에 있는 하단 패널에서 '포트' 탭을 찾으세요.
- 실행 중인 포트(예: 3000)를 확인해야 합니다.
- 포트를 마우스 오른쪽 버튼으로 클릭하고, '포트 가시성'으로 이동한 후 '공개'를 선택하세요. 창에서 가시성이 '공개'로 변경됩니다.
- 포트를 다시 마우스 오른쪽 버튼으로 클릭한 다음 '로컬 주소 복사'를 클릭하세요. 이것이 앱 URL입니다.
- URL을 휴대폰에서 접근할 수 있는 곳에 붙여넣으세요. 해당 위치에서 앱이 실행되는 것을 확인할 수 있습니다. 새로운 이해관계자 추가, 관리자 로그인 등을 테스트해 보세요.
- 테스트를 완료한 후에는 반드시 포트 가시성을 '비공개'로 되돌리거나 앱을 중지하십시오. 그렇지 않으면 앱이 완전히 노출되어 보안이 취약한 상태가 됩니다.
8. ENV 파일이 무시되고 있는지 확인하십시오
스태이크홀더 트래커가 Supabase에서 레코드를 저장, 업데이트, 삭제하는 기능이 정상적으로 작동하고, 여러 기기에서 작동한다는 점을 확인했다면, 이제 커밋하고 푸시할 차례입니다.
하지만 먼저, .gitignore 파일을 열고 .env 파일이 포함되어 있는지 확인하세요. 이전에 배운 대로, 이렇게 하면 Supabase 자격 증명이 GitHub에 커밋되는 것을 방지하여 안전하게 보호할 수 있습니다.
9. 변경 사항 커밋 및 GitHub에 푸시하기
- 모든 작업이 정상적으로 작동하는지 확인하고 만족하셨다면, 변경 사항을 커밋하고 GitHub에 푸시하세요. Codespaces의 소스 제어 기능을 사용하거나 터미널 창에서 git 명령어를 입력하여 수행할 수 있습니다.
- GitHub로 이동하여 풀 리퀘스트를 병합하고, 브랜치를 삭제하세요.
반사
로컬에 저장된 이해관계자 피드백을 클라우드로 이동시켰으며, 이제 앱 사용자들이 이를 이용할 수 있습니다. 클라우드 스토리지는 대부분의 앱에서 흔히 볼 수 있는 기능이며, 이를 구현하는 방법을 아는 것이 중요합니다.
핵심 용어
- 클라우드 파일 저장소: 인터넷을 통해 모든 기기에서 접근 가능한 원격 서버에 파일(PDF, 이미지, 문서 등)을 저장하는 서비스.
- 클라우드 데이터베이스: 원격 서버에 구조화된 데이터(행과 열) 저장
- Supabase: 스타트업과 MVP를 위해 설계된, 풍부한 무료 이용권을 제공하는 스토리지, 데이터베이스 및 인증 서비스를 제공하는 플랫폼입니다.
- 지속성:브라우저를 닫거나 기기를 재시작하거나 기기를 변경한 후에도 저장된 상태로 유지되는 데이터
CRUD 작업:데이터 저장소의 네 가지 기본 기능:
- 생성 – 새 레코드 추가 (INSERT)
- 읽기 – 데이터 검색 및 표시 (SELECT)
- 업데이트 – 기존 레코드 수정 (UPDATE)
- 삭제 – 레코드 제거 (DELETE)
- SQL(구조적 쿼리 언어):관계형 데이터베이스를 관리하고 쿼리하는 데 사용되는 프로그래밍 언어
- 행 수준 보안(RLS) – 데이터베이스 테이블의 특정 행에 대한 사용자 접근 권한을 제어하는 보안 기능
추가 리소스
- Supabase 자바스크립트 문서 – 자바스크립트를 사용한 Supabase 통합 공식 가이드
- W3Schools SQL 튜토리얼
