학습 내용/Project12 vite + yarn berry + react 프로젝트를 aws amplify로 배포하며.. vite + yarn berry + react 프로젝트를 aws amplify로 배포하는 과정에서 일어난 몇몇 슬플 뻔한 사건을 기록해보려고 한다. 몇 시간동안 고생했는데 미래의 나는 덜 고생하길 바라면서.. 아 그 전에 amplify 이용 후기부터 적어보자면, 이번에 처음 써봤는데 ec2에 비해서 훠어얼씬 간단하고 배포 자동화도 디폴트로 지원해줘서 너무 편리했다. 편리한만큼 ec2로 배포하는 것보다 자유도가 떨어진다고 하는데 지금 프로젝트에선 amplify에서 제공해주는 기능들로도 충분해서 딱히 답답하진 않았다. 배포할 때 참고했던 블로그: React AWS amplify에 배포 React AWS amplify에 배포 React로 만들어진 프로젝트를 AWS amplify를 통해서 배포해보겠습니다.이해를.. 2023. 2. 20. [이미지 갤러리 만들기] 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. [이미지 갤러리 만들기] 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. [이미지 갤러리 만들기] 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. [이미지 갤러리 만들기] 02. 이미지 최적화하기 원글: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Lee Robinson / 2022년 3월 28일) * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드립니다. 이미지 갤러리 스타일링 Tailwind가 구성되었으니 이제 이미지 갤러리를 스타일링할 컴포넌트를 생성할 수 있습니다. 우리 애플리케이션의 진입점인 pages/index.tsx 안에서, 이미지를 위한 컨테이너가 필요하니 CSS Grid를 사용합시다. (원래 작성되어있던 코드는 모두 지워주세요!) 뷰포트에 따라 조정되는 padding과 그리드 간격(grid spacing)도 추가합시다. // pages/index.tsx export default function G.. 2022. 4. 3. [이미지 갤러리 만들기] 01. 프로젝트 시작하기 최근 Tailwind CSS로 작업한 프로젝트를 보고 한번 사용해보고 싶다는 생각이 들었는데, 마침 Tailwind CSS로 간단하게 만들어 볼 수 있는 애플리케이션에 대한 따끈따근한(!!) 튜토리얼 포스팅이 올라왔습니다. 따라서 해보는 김에 새로 알게 된 내용 정리도 할 겸 번역해서 공유해보려고 합니다. 화자를 구분하기 위해서, 본문 내용과 관련하여 추가로 학습한 부분이나 기타 덧붙이는 말은 반말로 작성하고(죄송합니다ㅠ), 원글 내용은 존댓말로 작성하도록 하겠습니다. 원글: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Lee Robinson / 2022년 3월 28일) * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드.. 2022. 3. 30. 이전 1 2 다음
