vite + yarn berry + react 프로젝트를 aws amplify로 배포하며..
2023. 2. 20. 02:36
dev-log/Project
vite + yarn berry + react 프로젝트를 aws amplify로 배포하는 과정에서 일어난 몇몇 슬플 뻔한 사건을 기록해보려고 한다. 몇 시간동안 고생했는데 미래의 나는 덜 고생하길 바라면서.. 아 그 전에 amplify 이용 후기부터 적어보자면, 이번에 처음 써봤는데 ec2에 비해서 훠어얼씬 간단하고 배포 자동화도 디폴트로 지원해줘서 너무 편리했다. 편리한만큼 ec2로 배포하는 것보다 자유도가 떨어진다고 하는데 지금 프로젝트에선 amplify에서 제공해주는 기능들로도 충분해서 딱히 답답하진 않았다. 배포할 때 참고했던 블로그: React AWS amplify에 배포 React AWS amplify에 배포 React로 만들어진 프로젝트를 AWS amplify를 통해서 배포해보겠습니다.이해를..
[이미지 갤러리 만들기] 05. Vercel로 배포하기
2022. 6. 9. 02:48
dev-log/Project
원글: 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..
[이미지 갤러리 만들기] 04. Supabase에 데이터 추가하기
2022. 5. 29. 18:39
dev-log/Project
원글: 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는 데이터를 서버에서 가져올 수 ..
[이미지 갤러리 만들기] 03. Supabase 세팅하기
2022. 5. 29. 15:05
dev-log/Project
원글: 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" 클릭 이렇게 프로젝..
[이미지 갤러리 만들기] 02. 이미지 최적화하기
2022. 4. 3. 00:13
dev-log/Project
원글: 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..
[이미지 갤러리 만들기] 01. 프로젝트 시작하기
2022. 3. 30. 23:30
dev-log/Project
최근 Tailwind CSS로 작업한 프로젝트를 보고 한번 사용해보고 싶다는 생각이 들었는데, 마침 Tailwind CSS로 간단하게 만들어 볼 수 있는 애플리케이션에 대한 따끈따근한(!!) 튜토리얼 포스팅이 올라왔습니다. 따라서 해보는 김에 새로 알게 된 내용 정리도 할 겸 번역해서 공유해보려고 합니다. 화자를 구분하기 위해서, 본문 내용과 관련하여 추가로 학습한 부분이나 기타 덧붙이는 말은 반말로 작성하고(죄송합니다ㅠ), 원글 내용은 존댓말로 작성하도록 하겠습니다. 원글: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Lee Robinson / 2022년 3월 28일) * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드..
해커톤 프로젝트를 수정하며...
2021. 10. 2. 20:13
dev-log/Project
반년 전, 해커톤 프로젝트에서 CRA로 만들고 firebase로 배포한 UNINSTAGRAM이라는 작은 익명 게시판 애플리케이션을 만들게 되었다. 그 당시에도 이미지 관련 CORS 이슈가 있어 크롬에서는 이미지가 제대로 나오지 않고 콘솔창이 더러워지는(...) 문제가 있었지만, 일단 다른 브라우저에서는 해당 이슈가 발생하지 않아 그냥 냅두고 있었던 문제인데... 계속 마음의 짐으로 남아있었다. 😓 그렇게 반년이 흘러 오늘이 되었고... 오늘 마침 딱히 할 일이 없어서... 수정하게 되었다. 이렇게 오늘 UNINSTAGRAM을 수정하는 과정에서 발생한 문제점과 그 해결 과정에 대해 기록해보려고 한다... ERR_SSL_PROTOCOL_ERROR 발생 증상 타 사이트로부터 가져오는 아바타 이미지가 나타나지 ..
[Discord.js로 디스코드 봇 만들기] 04. 팀짜기 명령어 작성하기
2021. 5. 21. 05:29
dev-log/Project
오늘은 랜덤 팀짜기 명령어를 작성해보도록 하겠습니다! 사실 매화봇이라는 유명하고 아주 유용한 봇도 이러한 팀짜기 기능을 제공하고 있으며 저도 매화봇을 사용해왔지만, 팀짜기 기능은 한번 직접 구현해보고 싶어서 봇을 만들게 되었습니다. ㅎㅎ 준비 bot.js와 명령어 코드들을 작성하기 전 랜덤 팀짜기 로직을 먼저 구현해놨었는데요, 팀짜기 명령어에 이 로직을 적용하는 것이 오늘의 목표입니다! 자바스크립트로 작성한 랜덤 팀짜기 로직은 아래와 같습니다. // utils/teamMaker.js /** * @param {array} members 전체 명단을 배열로 전달 * @param {number} number 한 팀당 팀원 수를 숫자(정수)로 전달 * @returns 팀 구성 결과를 배열로 반환 */ modul..