Daisy의 우당탕탕 신입일기 🌱

이번주에는 무엇을 학습했나?프론트엔드 개발 환경을 세팅하고 그 과정을 나만의 문서로 정리했다.이번주 데브노트 작성은 어땠나?주어진 학습 키워드들을 중심으로 데브노트를 작성했다. 우선은 공식문서 등을 참고하여 노트를 작성했는데 내용이 어려운 경우가 많았다. 그래서 공식문서는 아니지만 이해하기 쉬운 설명을 찾아 읽어본 후 해당 내용도 데브노트에 함께 작성했다. 조금 쉬운 설명을 보니 훨씬 이해가 잘 되었고 그 후 다시 공식문서를 보니 처음 볼 때보다는 이해가 잘 됐던 것 같다. 이렇게 데브노트를 정리하고 보니 양이 생각보다 많아져서 각각의 키워드에 대한 정확한 정의가 한눈에 들어오지는 않았다. 그래서 학습 키워드의 정확한 정의만 다루는 문서를 따로 작성한 뒤 마무리했다.이번주에 진행한 데브노트 작성 흐름이 ..

🌱 회고 2025. 1. 12. 13:53

1. Auto-Open Markdown Preview Visual Studio Code에서 마크다운 파일을 미리 보기 위해 설치하는 extension이다. Auto-Open Markdown Preview Extension을 설치하면 md파일 우측에 미리 보기가 제공되는 것을 확인할 수 있다. 미리 보기 창이 보이지 않을 때는 우측 상단에서 아래와 같은 아이콘을 찾아 누르면 미리 보기 창이 열린다.2. markdownlint Visual Studio Code에서 코드에 대한 마크다운 linting 및 style checking을 도와주는 Extension이다.문법에 어긋나는 부분이 있다면 노란 밑줄로 알려주고 규칙 코드도 함께 제공해 주어서 마크다운 문법을 교정할 때 유용하다.

📝 Code Editor 2025. 1. 12. 13:46

프로젝트 6주 차를 끝으로 [메가테라 웹 개발자 과정 4기] 코스를 수료하게 됐다.이번주에는 남은 CSS 작업을 마무리하고 전체적으로 인수테스트를 돌린 뒤 배포까지 마무리했다. 인수테스트를 돌리면서 서비스 이용에 문제 되는 오류들이 추가로 발견되어서 고치고 수정하는 데에 시간이 꽤 걸렸다.배포하는 과정에서도 크고 작은 오류들이 정말 많이 터졌는데 여기저기서 도움을 주셔서 결국 배포에 성공했다. 배포 과정에서 만난 오류들은 TIL로 모두 정리해 두었다.2025.01.08 - [📢 배포] - [배포] 프론트 - Vercel 배포하기2025.01.08 - [📢 배포] - [배포] Vercel 배포 에러 - Failed to resolve2025.01.08 - [📢 배포] - [배포] Vercel 배포 에..

🌱 회고 2025. 1. 9. 21:52

지난 포스트에서 Fly.io 배포와 PostgreSQL 설정까지 마쳤다. 👉🏻 2025.01.08 - [📢 배포] - [배포] 백엔드 1탄 - Fly.io 배포 + PostgreSQL 설정 [배포] 백엔드 1탄 - Fly.io 배포 + PostgreSQL 설정배포 전 준비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 터미널을 켜서 내 백u-ryu-logs.tistory.com 이번 포스트에서..

🎁 배포 2025. 1. 9. 21:34

배포 전 준비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