📌 오늘의 작업 핵심 요약PPT 마지막 총 수정리드미 작성https://github.com/ureca-team1/PickMeUp-Frontend GitHub - ureca-team1/PickMeUp-Frontend: [유레카] 미니 프로젝트2 프론트엔드 저장소[유레카] 미니 프로젝트2 프론트엔드 저장소. Contribute to ureca-team1/PickMeUp-Frontend development by creating an account on GitHub.github.com 🎠 회고더보기점점 끝이 보여간다!

📌 오늘의 작업 핵심 요약마우스 커서 모양 변경투표 취소 시 selectedRegionId값을 null로 초기화RegionSelect컴포넌트에서 value 속성을 통해 외부 상태 반영토스트바에서 라이트/다크 모드에 따라 배경 및 텍스트 색상 변경, 반응형 크기 조정공약 총정리 - 토글 애니메이션 적용 및 상태 전환 개선🐀 마우스 커서 모양 변경 하는 방법전역 css로 들어가서 cursor: url('주소')를 입력하면 된다./*커서 변경*/body { cursor: url('/src/assets/cursor.svg'), auto;}/*마우스 포인터 유지하고 싶으면 밑에 코드 지우면 됩니다*/button,a,[class*='cursor-pointer'] { cursor: url('/src/asset..

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

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

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

컴포넌트를 선언하는 방식1. 함수 컴포넌트import React from 'react';const TTest = () => { return ( );};export default TTest; 2. 클래스형 컴포넌트import React, { Component } from 'react';class TTest extends Component { render() { return ( ); }}export default TTest; render 함수가 꼭 있어야한다. → 그 안에 보여줘야할 JSX를 반환한다.  함수 컴포넌트와 클래스형 컴포넌트의 차..

자바스크립트초기에는 단순한 연산과 시각적인 효과를 주는 스크립트 언어현재는 웹 어플리케이션에 가장 핵심적인 역할슬랙, 아톰, VScode등을 일렉트론으로 개발(자스로 데스크톱 어플리케이션을 만들 수 있는 프레임워크)페이스북, 디스코드, 페이팔 등등하지만 순수 자바스크립트 만으로는 관리하기 어려움순수자바스크립트 문제 해결위해 프레임워크들 등장프레임워크는 항상 발전하고 새롭게 등장 다양한 프레임워크 리액트 점유율 킹왕짱! 다른 프레임워크의 경우 MVC 아키텍쳐를 사용하고 있음.다른 아키텍쳐와 공통점은 모델과 뷰가 있다는 것.모델은 애플리케이션이 사용하는 데이터를 관리뷰는 사용자에게 보여짐애플리케이션 규모가 크면 복잡해지고 관리를 제대로 하지않으면 성능이저하됨   ⭐ ReactMVC, MVW 등과 다르게 오직..

[URECA] 독서 목표 설정 및 챌린지 달성 지원 웹사이트 구현을 통한 웹 아키텍처 이해 #8 — console.log("Hello, Bug!"); [URECA] 독서 목표 설정 및 챌린지 달성 지원 웹사이트 구현을 통한 웹 아키텍처 이해 #8프로젝트 발표일까지 남은 시간은 단 하루삭제버튼도 만들어야하고독서 진행바도 만들어야했다.하지만 시간이 부족해 로그인과 회원가입 기능을 완료한팀원이 도와줬다.팀원은 독서 진행바를recordoftheday.tistory.com

[URECA] 독서 목표 설정 및 챌린지 달성 지원 웹사이트 구현을 통한 웹 아키텍처 이해 #7 — console.log("Hello, Bug!"); [URECA] 독서 목표 설정 및 챌린지 달성 지원 웹사이트 구현을 통한 웹 아키텍처 이해 #7오늘 하루종일네모 상자처럼 관련 페이지 독서 진행바를 만드려고 노력했으나 실패.. progress 브랜치까지 다 생성되고 코드도 구현잘되고 자바 큰솔에도 오류도 없었으나..진행바가 나타나지 않recordoftheday.tistory.com