🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 퇴근 - 회의하고 - 메인페이지에서 사용할 커다란 컴포넌트 덩어리들 만들기 를 해본다. 1. 메인페이지로 사용할 Main.js 파일을 만든다. 이제는 export default를 뒤에 붙이지 않고 함수명 앞에 붙여서 한 덩어리로 보이게끔 하는 법을 배웠다. import React from 'react'; export default function Main () { return ( ); } 2. App.js에서 라우터 설정을 해준다. 3. MainNavBar 옮기기 path="/"에 있던 MainNavB..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제 두 개 뿌심... 오늘의 todo ☑ 가입하기 컴포넌트 ☑ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 3. 메인 NavBar 컴포넌트 메인은 기본보다 조금 더 복잡한데 햄버거 버튼을 클릭하면 Drawer 컴포넌트가 나타나야 한다. 그리고 메인페이지에서는 메인 NavBar가 나타나고 나머지 페이지에서는 아까 만든 BasicNavBar 가 나타나야 한다. - Route 마다 NavBar 적용하기 삼항연산자를 쓸까 했는데, 그냥 R..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 그럼 계속 진행해보기! 오늘의 todo ☑ 가입하기 컴포넌트 □ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 2. 기본 NavBar 컴포넌트 NavBar를 만들기 위해 새로운 MUI 컴포넌트를 찾아본다! 기본 NavBar는 각 페이지의 제목이 표시되고, 뒤로가기가 있으면 되기 때문에 특별한 기능은 필요없지만 메인 NavBar의 경우 오른쪽에 팝업되는 메뉴가 등장해야 한다. MUI에서 Bottom Navigation이랑 App Bar가..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 사흘동안 리액트를 만지지 못했다. 회사 일이 많아서 집에 오면 지쳐 쓰러짐 😒 오늘 할 일은 최대한 많은 페이지 구현하기! 마크업과 CSS는 동시에 만지되, CSS는 아주 간단하게 구성만 잡는 것으로 하고 추후 SCSS 를 적용해볼까 한다. MUI가 기본적인 CSS는 잡아주기 때문에 레이아웃만 수정하면 될 것 같은데.. 오늘의 todo □ 가입하기 컴포넌트 □ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 1. 가입하기 컴포넌트 1) ..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 로그인 화면을 구현해본다. 어제 작업한 라우터를 통해 /signin 경로로 들어간다. 로그인 화면은 기본적으로 입력할 수 있는 input 태그와 입력한 값을 전송하는 button으로 이루어져 있고, 이들을 form 태그로 감싸야 한다. 1. input 태그 2개 넣기 MUI 컴포넌트에서 입력을 할 수 있는 input 태그와 같은 텍스트필드 컴포넌트를 화면에 넣어본다. 두 개의 input 태그 중 한 가지는 password이기 때문에 password와 관련된 컴포넌트를 찾아서 사용해본다. 위의 passw..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제의 오류는 useHistory의 버전 문제라고 해서 npm uninstall --save 를 이용해 패키지를 삭제하고 다운그레이드를 하려고 한다. npm uninstall --save history@5 react-router-dom@6 위의 명령어로 설치한 것을 삭제하고, 다시 react-router-dom 을 설치한다. npm install react-router-dom@5 그리고 index.js 파일의 App 컴포넌트를 로 감싸준다. (✔ Strict모드 컴포넌트는 삭제했어요!) ReactDOM.ren..