📌 오늘의 작업 핵심 요약Backend 연결지역 선택 기능 구현 (사용자 지역 선택 값에 따라 지지율에서 해당 데이터를 필터링됨 - 아마도?)후보자 정보 파일을 candidate.js 추가해 코드 가독성 향상후보 카드 레이아웃을 Figma 기준에 맞게 조정 + 반응형도 조정텍스트 스타일 및 줄 바꿈 개선 (모바일에서 폰트 크기 및 간격 축소, 데스크탑에서 넉넉하게 확장)📁 주요 기능 설명🧾VoteApi.js유저가 특정 지역과 후보를 선택한 뒤 투표를 전송하거나 취소할 수 있는 Api 요청 로직을 구현했다. axios를 사용해 비동기 요청을 처리하고, 에러 상황에 대비한 예외 처리도 함께 작성했다. 🔸 Api URL 설정const API_URL = import.meta.env.VITE_API_U..

📌 오늘의 작업 핵심 요약👀 구현 배경 & 목적왜 지역 선택과 후보 선택이 필요했는지대선의 꽃은 바로 투표 아니겠는가?이번 프로젝트에 재미 요소를 더하기 위해 모의 투표 기능을 제안했고, 직접 만들어보았다. (그래서 이 기능은 내가 꼭 구현해보고 싶었다!) 해당 컴포넌트(디자인 포함)를 구성하면서는 선거법에 저촉되지 않도록 문구 하나하나 신중하게 작성했다. 또 너무 긴 문장은 디자인 측면에서 가독성이 떨어지기 때문에, 핵심만 명확하게 전달하는 데 집중했다. 특히 실제 선거와 무관하다는 안내를 시각적으로도 눈에 띄게 배치하며 사용자 오해가 없도록 구성했다. 이 기능을 맡고 싶었던 또 하나의 이유는, React의 상태 관리와 백엔드와의 연결 흐름을 직접 구현하며 더 깊이 배우고 싶었기 때문이다.UX 측면..

🎵 픽미 픽미 픽미업 🎵🔍 오늘 논의한 핵심 내용디자인 구체화어제는 큰 틀로 디자인을 짰다면 다시 세분화해서 디자인을 했다. 문구들 역시 변경했다. 이미지에 박스 투표함은 움직인다 ㅎㅎ 저걸 찾고 팀원들에게 물어봤을때 반응이 좋아 기부니가 좋았다. + 0512: 디자인 다시 변경해서 다시 올림, 세부 일정도 변경로고 디자인Pick Me Up의 로고 디자인 개발기를 쪼금 작성해보겠다.팀원의 아이디어로 디자인 시안들이 나왔다. 다른 팀원이 i를 새롭게 해보고 싶다고 했다. 💡“i를 투표 도장으로 표현하고, 그 아래에 기표 모양을 넣으면 어떨까?”라는 아이디어가 문득 스쳤다.그 아이디어를 바탕으로 도장 아래에 기표 모양을 추가해봤지만, 1% 부족한 느낌..그 뒤, 팀원이 도장과 기표 모양의 간격을 더 ..

🔍 오늘 논의한 핵심 내용페이지 구조 및 디자인 큰 틀 설계기존 벤처마킹 사이트를 참고하면서 “2025 조기 대선” 페이지의 전체 레이아웃을 먼저 설계전체적인 UI 흐름을 시각적으로 먼저 잡았다. 디테일하게 들어가는건 코드짜면서 할거같다. 사용자 흐름(User Flow) 작성사용자가 웹사이트에 진입해서 투표를 완료하기까지의 행동 흐름을 시각화WSB가 뭔지 아시나요? 이번 프로젝트를 통해서 WSB도 사용했다. WSB란? Writing structured Backend 구조화된 형태로 기획하고 설계해서 작성한 코드 혹은 프로젝트를 의미한다. 팀원과 함께 각 페이지별로 필요한 기능을 하나하나 고민하며, 이를 프론트엔드, 백엔드 구조에 맞춰 설계하고 구현해보는 과정을 경험했다 👍🏻아쉽지만 다음 기회에 ..

🔍 오늘 논의한 핵심 내용1. 프로젝트 개요서비스명: 픽미업 (Pick me up!)목적선거 공약 정리 21대 대통령 후보 모의 투표 및 지지율 확인핵심 가치: 정확하고 직관적인 정보 제공을 통해 유권자가 후보자에 대해 이해하고 투표에 참여할 수 있도록 지원2. 시장 분석타겟 사용자1) 20~30대 청년 유권자 (모바일 중심, 요약된 정보를 필요로 함)2) 정치 정보에 소외된 시민: 누구나 쉽게 접근할 수 있는 사용자 친화적인 인터페이스 제공 경쟁사 및 유사 서비스중앙선거관리위원회: 공식 투표소 정보 제공, 후보자 등록 정보 제공네이버/다음 포털: 뉴스 기반의 여론조사 결과 제공, 후보자 관련 기사 및 정보 제공여론조사 기관: 정기적인 여론조사 결과 발표, 다양한 조사 방식 및 결과 해석 제공뉴스 플랫..

✍️ 5월 7일부터 20일까지는 프로젝트 진행 과정을 기록하기 위해 매일 프로젝트 회고를 작성할 예정이다.날짜블로그 주소날짜 카운트2025년 5월 7일https://recordoftheday.tistory.com/entry/URECA-4Day 682025년 5월 8일https://recordoftheday.tistory.com/entry/URECA-5?category=1291546Day 692025년 5월 9일https://recordoftheday.tistory.com/entry/URECA-%ED%94%BD%EB%AF%B8%EC%97%85-3?category=1291546Day702025년 5월 12일https://recordoftheday.tistory.com/entry/URECA-%ED%94%BD%..

📃index.js.env 환경변수 적용import dotenv from 'dotenv';dotenv.config(); 어제는 PORT, JWT_SECRET, MONGODB_URI, FRONTEND_URL 등이 코드에 하드코딩되어 있었는데, 오늘은 .env 파일에서 값을 불러오도록 개선했다. 그 이유는 보안과 유지보수 측면에서 중요한 개선때문이다. .env에 들어간 내용# 서버 설정PORT=3000NODE_ENV=development# 프론트엔드 도메인FRONTEND_URL=http://localhost:5173# MongoDB 설정MONGODB_URI=mongodb+srv://주소MONGODB_DB_NAME=blog# 인증 관련 설정JWT_SECRET=test1234JWT_EXPIRATION=1hBCR..

📍Frontend🖋️ReactQuill이란https://quilljs.com/ Quill - Your powerful rich text editorBuilt for Developers Granular access to the editor's content, changes and events through a simple API. Works consistently and deterministically with JSON as both input and output.quilljs.comReact에서 사용하는 글쓰기 에디터 컴포넌트이다. 사용자는 블로그 글을 작성하듯이 텍스트를 입력하거나 이미지를 첨부할 수 있다. QuillEditor.jsx는 Quill이라는 오픈소스 리치 텍스트 에디터를 기반으로 구현된..

MongoDB란?MongoDB는 문서 기반(Document-based) NoSQL 데이터베이스이다. 관계형 데이터베이스(RDBMS)와 달리 테이블과 행 대신 컬렉션과 문서 형태로 데이터를 저장한다.MongoDB의 주요 특징문서 지향적: JSON과 유사한 BSON(Binary JSON) 형식으로 데이터 저장스키마 자유: 미리 정의된 스키마 없이 문서마다 다른 구조 가능분산 확장성: 수평적 확장(Sharding)을 통해 대용량 데이터 처리유연한 쿼리: 강력한 쿼리 기능과 인덱싱 지원높은 가용성: 복제(Replication)을 통한 데이터 백업 및 고가용성몽구스를 이용해 개발을 해보겠다.https://mongoosejs.com/docs/guide.html Mongoose v8.13.3: SchemasIf yo..