WEB Dev
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 15WEB Dev/ToyProject 2021. 12. 22. 23:51
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 레이아웃 배치까지는 해야겠지... 싶다. sx props를 사용하기 위해서 (스타일을 적용하려고) 를 로 바꿔준다. import Box from '@mui/material/Box'; 상단에는 Box 패키지를 적용해줘야 한다. 우선 Main은 import React from 'react'; import Content from './Content'; import Box from '@mui/material/Box'; export default function Main() { return ( {/* main ..
-
[Javascript] 간단한 링크 주소 복사 버튼 만들기WEB Dev/Javascript | REACT | Node.js 2021. 12. 22. 13:04
이벤트 등을 할 때 링크 주소 공유 기능을 만들어야 하는 경우가 있는데 스크립트를 길게 쓰지 못하는 경우에 사용하려고 저장한 방법이다. 만약 이미지를 클릭했을 때, 지금 현재 url이 복사되도록 하고 싶다면 아래 함수를 사이에 넣고 을 써주면 해결된다. 만약 특정 url을 복사하게 하려면 아래 함수의 url = "window.location.href" 에 원하는 url을 넣으면 된다. function clip(){ var url = ''; var textarea = document.createElement("textarea"); document.body.appendChild(textarea); url = 'window.location.href'; textarea.value = url; textarea.s..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 14WEB Dev/ToyProject 2021. 12. 21. 23:50
🔷 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..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 13WEB Dev/ToyProject 2021. 12. 19. 22:10
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제 두 개 뿌심... 오늘의 todo ☑ 가입하기 컴포넌트 ☑ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 3. 메인 NavBar 컴포넌트 메인은 기본보다 조금 더 복잡한데 햄버거 버튼을 클릭하면 Drawer 컴포넌트가 나타나야 한다. 그리고 메인페이지에서는 메인 NavBar가 나타나고 나머지 페이지에서는 아까 만든 BasicNavBar 가 나타나야 한다. - Route 마다 NavBar 적용하기 삼항연산자를 쓸까 했는데, 그냥 R..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 12WEB Dev/ToyProject 2021. 12. 19. 19:49
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 그럼 계속 진행해보기! 오늘의 todo ☑ 가입하기 컴포넌트 □ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 2. 기본 NavBar 컴포넌트 NavBar를 만들기 위해 새로운 MUI 컴포넌트를 찾아본다! 기본 NavBar는 각 페이지의 제목이 표시되고, 뒤로가기가 있으면 되기 때문에 특별한 기능은 필요없지만 메인 NavBar의 경우 오른쪽에 팝업되는 메뉴가 등장해야 한다. MUI에서 Bottom Navigation이랑 App Bar가..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 11WEB Dev/ToyProject 2021. 12. 19. 15:06
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 사흘동안 리액트를 만지지 못했다. 회사 일이 많아서 집에 오면 지쳐 쓰러짐 😒 오늘 할 일은 최대한 많은 페이지 구현하기! 마크업과 CSS는 동시에 만지되, CSS는 아주 간단하게 구성만 잡는 것으로 하고 추후 SCSS 를 적용해볼까 한다. MUI가 기본적인 CSS는 잡아주기 때문에 레이아웃만 수정하면 될 것 같은데.. 오늘의 todo □ 가입하기 컴포넌트 □ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 1. 가입하기 컴포넌트 1) ..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 10WEB Dev/ToyProject 2021. 12. 15. 00:41
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 로그인 화면을 구현해본다. 어제 작업한 라우터를 통해 /signin 경로로 들어간다. 로그인 화면은 기본적으로 입력할 수 있는 input 태그와 입력한 값을 전송하는 button으로 이루어져 있고, 이들을 form 태그로 감싸야 한다. 1. input 태그 2개 넣기 MUI 컴포넌트에서 입력을 할 수 있는 input 태그와 같은 텍스트필드 컴포넌트를 화면에 넣어본다. 두 개의 input 태그 중 한 가지는 password이기 때문에 password와 관련된 컴포넌트를 찾아서 사용해본다. 위의 passw..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 09WEB Dev/ToyProject 2021. 12. 14. 00:13
🔷 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..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 08WEB Dev/ToyProject 2021. 12. 13. 01:24
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 아까까지 작성한 글을 전부 날리고 슬픔에 휩싸였다. 지금까지 한 것은 저번에 만든 회원가입, 로그인 버튼에 이동 하는 기능을 연결하는 것이다. 간단하게 라우터를 이용하면 쉽게 해결할 수 있을 줄 알았는데, button에 onClick으로 이벤트를 생성하려고 했더니 Link to 로는 안된다고 해서 useHistory를 이용하고 있었다. 우선 라우터를 사용해야 하는데 이 부분은 별도로 설명을 하지 않고 (썼는데 날라가서 의욕 잃음) 참고했던 블로그의 주소를 첨부한다. 가장 중요한건 useHistory를 사용하려..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 07WEB Dev/ToyProject 2021. 12. 10. 00:24
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 와 .. PR이라니 내가...개발자가 되고도 버전관리가 전혀 안되는 서비스에 있다 보니 깃헙을 더 연습할 길이 없었는데 사이드 프로젝트를 통해 감사하게도 깃헙도 연습할 기회가 생겼다. 이번주차의 목표는 - [프론트] 레포지토리 생성해서 공유하기 - [모두] 각자 개발할 기능 정해서 구현 후 풀리퀘 올리기 이렇게 두 가지였는데 프론트 레포지토리는 내거 생성한거로 우선 전달하면 될 것 같고, 어제 만든 화면을 풀리퀘..? 해보는 것을 오늘 해보려고 한다! 오메 떨려 내가 참고한 글은 아래 블로그인데 국비학원에서 ..