회고하는 개발자, 나만의 이야기 🌱

배포 전 준비1. application.propertiesspring.config.activate.on-profile=productionspring.datasource.url=jdbc:${DATABASE_URL} 2. fly 설치brew install flyflyfly appsfly apps list 3. Docker 설치brew install --cask docker 터미널을 켜서 내 백엔드 프로젝트가 있는 위치로 이동해 준다. 4. PostgreSQL 세팅fly postgres createChoose an app name: f4t2-spring-databaseSelect region: Tokyo, Japan (nrt)Select configuration: Development - Single node..

🎁 배포 2025. 1. 8. 21:57

Vercel 로 배포한 프로젝트에 환경 변수 (.env) 설정하는 법1. Vercel 페이지의 내 프로젝트 페이지에 가서 Settings 탭을 클릭 2. Project Settings 메뉴들 중 Environment Variables 메뉴를 클릭3. Key - Value 값에 로컬 프로젝트 .env 파일에 있던 내용들을 각각 입력해 주고 save 버튼을 누르면 끝!환경 변수가 세팅된 것을 확인할 수 있다. ✨

🎁 배포 2025. 1. 8. 21:33

배포 후 정상적으로 작동하지만 URL을 직접 입력해서 페이지를 이동하거나 페이지에 접속한 후 새로고침을 하면 404 NOT FOUND 에러가 발생했다.✅ 왜 이런 에러가 발생할까? 로컬 개발 서버에서는 새로고침하거나 URL을 직접 입력해도 페이지가 제대로 로드되었다. 개발 서버가 SPA의 라우팅을 위해 모든 요청을 index.html로 redirection 해주어서 문제가 없었던 것이다. 하지만 Vercel에 배포한 환경에서는 서버가 정적 파일(HTML, CSS, JS 등)을 제공하는 정적 파일 제공 서버로 동작한다. 따라서 /about 과 같은 페이지 경로를 요청하면 서버가 해당하는 파일을 찾을 수 없어서 404 에러가 발생한다. 배포 환경에서 서버는 React 애플리케이션의 클라이언트 측 라우팅을 ..

🎁 배포 2025. 1. 8. 21:23

Vercel로 배포를 하다 사진과 같은 에러가 발생했다.✅ 왜 이런 에러가 발생할까?작업 중 cartPage였던 파일명을 CartPage로 변경했던 적이 있다. 하지만 Git은 대소문자만 변경된 경우 차이를 인식하지 못한다고 한다. 그래서 이전 파일명이 그대로 남아있게 된 상황에서 배포를 시도해서 발생한 에러였다. ✅ 어떻게 해결할까?원인을 찾았으니 해결해 주면 된다. Git이 대소문자를 무시하지 않도록 설정해 주자. git config core.ignorecase false 원하는 파일명으로 수정 후 변경사항 push 이제 Vercel로 돌아가서 마저 deploy 해주자. Vercel 페이지의 내 Project 페이지에 접속해서 Active Branch를 클릭해서 들어가면 된다. Redeploy 버튼을..

🎁 배포 2025. 1. 8. 20:25

https://vercel.com/new 배포하기 전에 프론트엔드 프로젝트 package.json > scripts > build 명령어 확인해준다!"build": "parcel build index.html", 그리고 혹시 package.json 파일에서 "main": "index.js", 이 코드를 지우지 않았다면 지워준다. package.json 파일을 모두 수정한 후 npm run build 명령어를 실행해주면 프로젝트가 build 되는 것을 확인할 수 있다. 작성이 끝난 코드를 git repository에 push하고 merge한 후 배포를 시작한다. 1. 배포할 Git Repository의 import 버튼 클릭2. 본인의 프로젝트에 맞게 Configure Project 폼 작성 후 Depl..

🎁 배포 2025. 1. 8. 10:11

프로젝트 5주 차 끝! 저번주에는 카카오페이 결제, 주소 API 등을 구현했다. 디자인을 제외하고 계획했던 기능들을 모두 구현해 냈다. 그리고 외부 API 사용에 있어서 조금은 자신감이 생겼다. 카카오 로그인을 구현할 때까지는 새로운 API를 학습해서 구현한다는 게 부담스러웠는데 카카오 페이 구현부터는 훨씬 편안하게 개발했다. 금요일부터는 본격적으로 디자인 작업을 시작했다. 내가 원하는 대로 자유롭게 디자인을 꾸밀 수 있어서 재밌다. 지난번 총정리 주간이나 테스트 주간에 만들었던 서비스에서는 정말 최소한의 CSS 작업만 했었고 엉성한 부분이 많았는데 이번 프로젝트 때는 제대로 CSS를 입혀보려 한다. 화면 크기를 줄이고 늘려보면서 어긋나는 부분은 없는지 꼼꼼하게 확인하고 grid와 flex를 적극적으로 ..

🌱 회고 2025. 1. 7. 21:28

프로젝트 4주 차 끝! 이번주에는 리뷰 작성 기능과 이미지 업로드 기능을 구현했다. 이미지 업로드 기능을 어떻게 구현했는지 그 과정을 잠깐 정리해보려 한다. 이미지 업로드 기능을 구현하기 전에는 상품의 사진을 url 주소로 등록해야 했다.지금은 이렇게 파일을 선택해서 내가 원하는 이미지를 상품 이미지로 등록할 수 있다. 이미지 업로드 기능을 구현하기 위해서 열심히 구글링을 하다 BLOB이라는 것을 알게 되었다. JavaScript에서 BLOB(Binary Large Object)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있다.URL.createObjectURL()로 BLOB 객체를 가리키는 URL을 만들 수 있었다. 이것을 사용해서 내가 업로드한 파일의 URL을 생성해 주..

🌱 회고 2025. 1. 7. 21:18

프로젝트 3주 차 끝! 이번주의 가장 큰 목표는 카카오 로그인이었다..! 월요일부터 카카오 로그인 학습을 시작했고 화, 수, 목, 금 내내 카카오 로그인 구현에만 집중했다. 월(7/3) - 카카오 개발자 센터 문서 학습화(7/4) - 카카오 개발자 센터 문서 학습 + OAuth 학습 수(7/5) - 카카오 로그인 프론트엔드 파트 완료! 목(7/6) - 카카오 로그인 백엔드 파트 금(7/7) - 카카오 로그인 백엔드 파트 (완성하지 못함.) 월요일부터 카카오 로그인 구현을 시작했는데 금요일이 되도록 완성해내지 못했다. 😂😅왜 그랬을까?!초반에 충분한 학습이 되지 않은 상황에서 바로 개발을 시작해서 구현에 어려움을 겪었다.어떻게 구현할지 작업 단위를 나누지 않고 '카카오록 로그인 구현하기'라는 추상적인 ..

🌱 회고 2025. 1. 7. 21:09