WEB Dev/ToyProject(38)
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 13
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제 두 개 뿌심... 오늘의 todo ☑ 가입하기 컴포넌트 ☑ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 3. 메인 NavBar 컴포넌트 메인은 기본보다 조금 더 복잡한데 햄버거 버튼을 클릭하면 Drawer 컴포넌트가 나타나야 한다. 그리고 메인페이지에서는 메인 NavBar가 나타나고 나머지 페이지에서는 아까 만든 BasicNavBar 가 나타나야 한다. - Route 마다 NavBar 적용하기 삼항연산자를 쓸까 했는데, 그냥 R..
2021.12.19 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 12
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 그럼 계속 진행해보기! 오늘의 todo ☑ 가입하기 컴포넌트 □ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 2. 기본 NavBar 컴포넌트 NavBar를 만들기 위해 새로운 MUI 컴포넌트를 찾아본다! 기본 NavBar는 각 페이지의 제목이 표시되고, 뒤로가기가 있으면 되기 때문에 특별한 기능은 필요없지만 메인 NavBar의 경우 오른쪽에 팝업되는 메뉴가 등장해야 한다. MUI에서 Bottom Navigation이랑 App Bar가..
2021.12.19 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 11
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 사흘동안 리액트를 만지지 못했다. 회사 일이 많아서 집에 오면 지쳐 쓰러짐 😒 오늘 할 일은 최대한 많은 페이지 구현하기! 마크업과 CSS는 동시에 만지되, CSS는 아주 간단하게 구성만 잡는 것으로 하고 추후 SCSS 를 적용해볼까 한다. MUI가 기본적인 CSS는 잡아주기 때문에 레이아웃만 수정하면 될 것 같은데.. 오늘의 todo □ 가입하기 컴포넌트 □ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 1. 가입하기 컴포넌트 1) ..
2021.12.19 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 10
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 로그인 화면을 구현해본다. 어제 작업한 라우터를 통해 /signin 경로로 들어간다. 로그인 화면은 기본적으로 입력할 수 있는 input 태그와 입력한 값을 전송하는 button으로 이루어져 있고, 이들을 form 태그로 감싸야 한다. 1. input 태그 2개 넣기 MUI 컴포넌트에서 입력을 할 수 있는 input 태그와 같은 텍스트필드 컴포넌트를 화면에 넣어본다. 두 개의 input 태그 중 한 가지는 password이기 때문에 password와 관련된 컴포넌트를 찾아서 사용해본다. 위의 passw..
2021.12.15 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 09
🔷 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..
2021.12.14 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 08
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 아까까지 작성한 글을 전부 날리고 슬픔에 휩싸였다. 지금까지 한 것은 저번에 만든 회원가입, 로그인 버튼에 이동 하는 기능을 연결하는 것이다. 간단하게 라우터를 이용하면 쉽게 해결할 수 있을 줄 알았는데, button에 onClick으로 이벤트를 생성하려고 했더니 Link to 로는 안된다고 해서 useHistory를 이용하고 있었다. 우선 라우터를 사용해야 하는데 이 부분은 별도로 설명을 하지 않고 (썼는데 날라가서 의욕 잃음) 참고했던 블로그의 주소를 첨부한다. 가장 중요한건 useHistory를 사용하려..
2021.12.13