🤔 만들게 된 이유읽잇(Readit) 프로젝트를 진행하다 보니, 반응형 UI가 꼭 필요하다는 생각이 들었습니다. 특히 기존 NavBar가 모바일 화면에서는 자리를 많이 차지해서 이용하기가 불편했죠. 그래서 TailwindCSS를 활용해 반응형 레이아웃을 만들었고, 모바일에서는 햄버거 메뉴를 적용해 더 편리하게 사용할 수 있도록 했습니다.🍔 햄버거 메뉴 구현 해보기1. 가장 중요한 부분 (상태 정리하기)가장 중요한 부분은 상태를 사용해 햄버거 창이 열렸는지 안열렸지는 알려주는 useState 아닐까? 라는 생각에 가장 중요한 부분으로 뽑아봤습니다!전제닫힘: 메뉴가 숨겨져 있을 때 (false)열림: 메뉴가 화면에 보일 때 (true)const [isOpen, setIsOpen] = useState(fa..

💻 프로젝트 링크: https://readit-38t1.onrender.com/프로젝트 개요 🤔시작 이유 리액트를 공부하다 보니 튜토리얼 지옥에 빠져 있다는 걸 깨달았습니다.그래서 "기획 + 개발"을 동시에 진행하는 실전형 프로젝트를 시작했습니다.군대에서 책을 읽다 문득,"노션이 아니라, 내가 만든 웹사이트에서 간편하게 독서 기록을 남기면 어떨까?"라는 아이디어가 떠올랐고, 바로 실행에 옮겼습니다. 🎯 프로젝트 목표📖 책 검색 & 감상문 기록이 가능한 개인 독서 기록 웹서비스 제작🎨 React 기반 감성 UI 구현💼 취업 포트폴리오 활용⏳ 1달 내 MVP 완성 + 단계별 확장성 확보🛠역할 및 기여 범위📌 기획처음 하는 기획이라 GPT를 활용해 아이디어를 구조화MVP → 구현 단계를 조정하며..

📌[프로젝트 개요]📖왜 만들었을까?이 프로젝트는 군 복무 중 짬을 내어, 리액트의 상태 관리(useState)와 컴포넌트 구조 분리를 연습하기 위해서 만들었습니다. (입원 연기로 읽잇보다 리액트 연습을 더 먼저하려고...) 기존 리액트 실력은 너무 강의만 따라쳐서 그런가 'props를 어떻게 넘기고 상태를 어디서 관리해야하는지' 모르는 경우가 너무 많았습니다 그래서 이를 보안하기 위해 강의를 다시 보며 강의 예제 없는 저만의 프로젝트로 만들어보고 싶었습니다 🔧 구현 목표 각 부위(머리, 몸통, 다리)의 아머 색상을 클릭해서 개별적으로 변경할 수 있도록 구현 전체 색상 변경과 초기화 기능 추가반복되는 코드를 줄이기 위한 고차 함수 및 공통 props 처리상태는 최상위(`Steve`)에서 관리하며 ..

🧠 프로젝트 개요군 복무 중 처음으로 다량의 책을 읽게 되었고,그 감정을 기록하고 싶다는 생각이 들었습니다. 마침 React를 공부하던 시기여서,감성 독서 기록 웹서비스 '읽잇(ReadIt)' 을 직접 만들게 됐습니다서비스명 : 읽잇 (ReadIt)이유: 단순한 기록이 아닌, 다시 읽게 만드는 감정 저장소를 만들고 싶어서개발 기간: 약 2주 (MVP 기준)사용 기술: React, CSS, Frmaer배포: Netlify💻 GitHub: https://github.com/guswnsj0112/readIt👉 서비스 바로가기 ✍️ 기획 과정"프론트? 백엔드? PM? 아예 그만둘까?"고민만 쌓이던 시기, GPT에게 고민을 털어놓으면서 프로젝트가 시작됐습니다.GPT와 대화하며 기획 방향 설정Notion으로..

https://github.com/guswnsj0112/coinTracker시작하며 - 왜 React를 공부하게 되었는가처음에는 아무 생각없이 모두가 리액트를 공부하니까 그게 당연한거니까 라고 생각해서 시작하게 되었습니다. 그런데 유튜브로 관련 쇼츠를 볼 때마다 신기했습니다 리액트는 현실DOM 과 가상DOM을 비교하며 꼭 필요한 것만 비교하고 웹앱도 만들 수 있다는게 저한테는 너무 신기하게 다가와서 공부를 시작했습니다 React 입문기 자바스크립트에서 HTML을 사용하는 JSX문법에 상당히 놀랐습니다 많이 신기하기도 하고 {} 하나면 다 해결되는 편리성에 특히 놀랐습니다. 제가 React를 공부하면서 가장 신기했던 부분은 useState와 useEffect의 상태처리 방식입니다. 상태가 바뀔 때마다 렌더..