본문 바로가기

반응형

study/100 days (100일 챌린지)

(37)
[웹개발 100일] Day 4 - 게시글 리스트, 디테일 페이지 UI 개선 🚀 요약이제 다시 평일이라 하루 한 시간? 정도 낼 수 있지 않을까 싶다.수요일 저녁은 바쁜데다가 다음날 외근이라 작업 못 할 수도. 작업 시간: 2시간✅ 이벤트 리스트 UI 개선✅ 이벤트 디테일 UI 마무리   🚀 이벤트 리스트 UI 개선리스트가 보기에 별로인 거 같아서 카드형으로 다시 만들었다. 일단 내 생각엔 이게 나은 듯?sticky로 페이지마다 타이틀 고정하고 싶었는데 제대로 안 붙어서 고생 좀 했다 .. 리스트 페이지 코드 Events 이벤트 리스트 {/* */} {events.map((event, index) => ( ..
[웹개발 100일] Day 3 - 깃허브 커밋, 글 목록&상세 페이지 UI 구현 🚀 요약작업 시간: 5시간✅ Git 설치 및 프로젝트 초기 커밋✅ 회원가입 페이지 UI 구현✅ 이벤트 목록 페이지 UI 구현✅ 이벤트 상세 페이지 UI 구현   🚀 Git 설치 및 커밋별다른 위기도 없었고 git 관련 글은 인터넷에 아주아주 많으니 생략..내 깃허브 계정은 여기에 👇 jihyelisa - Overviewjihyelisa has 7 repositories available. Follow their code on GitHub.github.com   🚀 페이지 UI 구현로그인 회원가입 이벤트 리스트 이벤트 디테일  더미 데이터로 필요한 페이지들 UI를 만들어줬다 ,,오늘 작업 많이 함 😮‍💨
[웹개발 100일] Day 2 - 리액트 라우터, 로그인 페이지 만들기 🚀 요약작업 시간: 3시간반? 4시간?✅ 프로젝트 폴더 구조 정리✅ React Router로 페이지 이동 가능하게 만들기✅ 네비게이션 바(Navbar) 제작✅ 로그인 페이지 UI 구성   🚀 폴더 구조/src ├── /components # 재사용 가능한 UI 컴포넌트 │ ├── Navbar.tsx │ ├── Button.tsx │ ├── Card.tsx │ └── Footer.tsx ├── /pages # 페이지 단위 파일 │ ├── Home.tsx │ ├── Upload.tsx │ ├── PostList.tsx │ ├── Gallery.tsx │ └── Login.tsx ├── App.tsx ├── main.tsx ├── inde..
[웹개발 100일] Day 1 - Vite 환경에 Tailwindcss 설치 및 실행 (Tailwind 버전 오류 해결) 🚀 요약작업 시간: 2시간반✅ Vite + React + TypeScript 프로젝트 설정✅ ESLint & Prettier, Tailwind 설치 및 설정  🚀 React + Vite 환경에 Tailwind 설치하기와 첫날부터 진이 다 빠진다.머리에서 스팀 나오고 있지만 생각만 1년 넘게 했던 개인 프로젝트의 첫 발을 디딘 거 같아서 의미 있는 시간이었다 😇  다 새로 써보는 라이브러리들이라 일단 챗지피티가 시키는 순서대로 환경구축하고 있는데 Tailwind 설치 및 실행에만 2시간이 걸렸다;지피티가 계속 터미널에서 tailwindcss를 실행하게 했지만, 무슨 방법을 써도 제대로 라이브러리 설치도 안 되는 것 같고 당연히 실행도 되지 않았다 🫠  문제의 라인 🙃👊💥npm install -..
[웹개발 100일] Day 0 - 계획 100일 챌린지를 하기로 했다.목표는 처음 써보는 기술들로 CRUD + 로그인 기능을 갖춘 웹페이지 배포하기!일단 대략적인 계획을 세워놓고 진행하면서 유동적으로 수정해나갈 예정이다.   📌  100일 플랜주차별 주요 목표🛠️ 1~2주차: 프로젝트 환경 설정 및 기본 UI 구성 (Vite, React, TypeScript, Tailwind CSS)🖼️ 3~4주차: 사진과 글 업로드 기능 구현 (파일 업로드 UI & API 개발)📜 5~6주차: 데이터 조회 기능 추가 (게시물 목록 및 상세 페이지 구현)✏️ 7~8주차: 수정 & 삭제 기능 구현 (글 수정/삭제 API 및 UI 추가)🔑 9~10주차: 로그인 기능 개발 (JWT 인증 & Google OAuth 로그인)☁️ 11~12주차: AWS 배포 ..

반응형