학습 내용74 [이미지 갤러리 만들기] 05. Vercel로 배포하기 원글: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Lee Robinson / 2022년 3월 28일) * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드립니다. Vercel로 배포하기 이미지 갤러리는 Supabase로부터 가져온 이미지 목록을 Tailwind CSS를 사용하여 잘 보여주고 있습니다. 이제 우리의 Next.js 애플리케이션을 Vercel로 배포해볼까요? 배포하는 방법은 다음과 같습니다. : 1. 작성한 코드를 GitHub, GitLab, BitBucket 등의 깃 저장소에 push 해주세요. 2. 이 페이지에서 우리의 프로젝트를 Vercel로 불러와주세요. 3. 환경 변수를 추가해주세요. 4. Deploy.. 2022. 6. 9. 랜덤 팀짜기 로직 기본 아이디어 인수: 인원 목록, 팀 당 인원수(or 팀 개수) 인원 각각에 난수로 생성한 id 부여하기 id 기준으로 정렬하기 팀 당 인원수(or 팀 개수)에 맞게 쪼개기 코드 참고 (자바스크립트) https://github.com/ahnanne/picnic/blob/main/utils/getRandomTeam.ts GitHub - ahnanne/picnic: 봄소풍 >__ 2022. 6. 8. [Next.js] Next.js의 프리 렌더링(pre-rendering) 옵션 3가지 / SSG, SSR, ISR Next.js의 프리 렌더링 옵션으로는 잘 알려진 SSG와 SSR 두 가지 외에도 ISR라고 불리는 한 가지 방식이 더 존재한다. 이 세 가지 프리 렌더링 방식의 특징과 차이점에 대해 알아보자. 참고로 하나의 애플리케이션에서 하나의 방식만 사용해야 하는 것은 아니며, 필요에 따라 어떤 페이지에선 SSG 방식을 사용하고 나머지 페이지에선 SSR 방식을 사용하는 것도 가능하다. 또한 이 방식들과 클라이언트 사이드 렌더링 방식을 혼합하여 사용하는 것도 가능하다. (즉 어떤 페이지의 특정 부분은 전적으로 클라이언트 사이드에서 렌더링 되도록 하는 방식) ❓Pre-rendering이란? Next.js에선 기본적으로 모든 페이지를 프리 렌더링한다. 즉 HTML이 클라이언트 사이드에서 자바스크립트를 통해 생성이 되는 .. 2022. 6. 1. [이미지 갤러리 만들기] 04. Supabase에 데이터 추가하기 원글: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Lee Robinson / 2022년 3월 28일) * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드립니다. Supabase에 데이터 추가하기 Supabase 클라이언트는 이미 준비해뒀으니, images 테이블에 있는 모든 이미지를 select 할 수 있습니다. const IMAGE_TABLE = 'images'; const { data } = await supabaseAdmin.from( IMAGE_TABLE ).select( '*' ); 우리는 getStaticProps 내부에서 데이터를 가져오려고 합니다. getStaticProps는 데이터를 서버에서 가져올 수 .. 2022. 5. 29. [일반 프로그래밍 개념] 데이터 타입 - 2. 컴파운드 타입 컴파운드 타입(compound type)은 여러 개의 값을 하나의 타입으로 그룹화한 타입 러스트에선 두 가지의 컴파운드 타입을 지원 튜플(tuples) 배열(arrays) 변수의 타입 확인하기 컴파운드 타입에 대해 알아보기 전에, 컴파운드 타입이 어떻게 이루어졌는지 잘 살펴보기 위해 변수의 타입을 출력하는 함수를 만들어 놓자. (학습용 및 디버깅 목적) // main.rs /** 변수의 타입을 출력하는 함수 */ fn print_type_of(_: &T) { println!("{}", std::any::type_name::()); } *참고: https://stackoverflow.com/questions/21747136/how-do-i-print-the-type-of-a-variable 튜플 타입 고정.. 2022. 5. 29. [이미지 갤러리 만들기] 03. Supabase 세팅하기 원글: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Lee Robinson / 2022년 3월 28일) * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드립니다. Supabase 세팅하기 Supabase를 이용하면 클릭 몇 번만으로 PostgreSQL 데이터베이스를 이용할 수 있어 백엔드를 정말 쉽게 구현할 수 있습니다. Supabase 대시보드(회원가입 해야 됨!)에서 다음과 같이 새로운 프로젝트를 구성해주세요. : "New project" 클릭 Organization 선택 (없으면 + New Organization 클릭해서 생성) 이름, DB 비밀번호를 고른 뒤 "Create new project" 클릭 이렇게 프로젝.. 2022. 5. 29. 이전 1 2 3 4 5 6 7 8 ··· 13 다음
