토이프로젝트
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 19WEB Dev/ToyProject 2021. 12. 28. 23:12
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘의 할 일은 Explore의 달력부분을 만드는 일이다. 달력의 경우 NHN TOAST에서 제공하는 Calendar UI 라이브러리를 사용하기로 하였다. 그래서 TOAST의 공식문서에서 적용방법을 따라해본다. 1. 설치 npm 이나 bower, CDN을 통해 라이브러리를 이용할 수 있다. 리액트 프로젝트이기 때문에 간편한 CDN 보다는 npm을 통해 패키지를 설치하자. npm install --save @toast-ui/react-calendar 2. Calendar 패키지와 CSS를 import 해온다. ..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 18WEB Dev/ToyProject 2021. 12. 28. 00:15
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 MainNavBar의 Drawer 메뉴를 만들었으니, 이제 Content 부분의 여러 기능들을 해결해봐야겠다. 이번주는 캘린더와..... ..... 투두.... Feed 부분을.... Explore → Feed 순으로 작업하려고 한다. MUI는 진심으로 미쳤다. 이 부분에 쓸 컴포넌트도 이미 만들어져 있다. 바로 Avatar다. 이 Avatar 컴포넌트에서 Letter Avatar 컴포넌트를 사용해본다. 캘린더 상단의 저 부분은 내가 팔로우한 사람의 닉네임의 앞글자가 표시되는 곳이다. Avatar 패키지를 i..
-
[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이라니 내가...개발자가 되고도 버전관리가 전혀 안되는 서비스에 있다 보니 깃헙을 더 연습할 길이 없었는데 사이드 프로젝트를 통해 감사하게도 깃헙도 연습할 기회가 생겼다. 이번주차의 목표는 - [프론트] 레포지토리 생성해서 공유하기 - [모두] 각자 개발할 기능 정해서 구현 후 풀리퀘 올리기 이렇게 두 가지였는데 프론트 레포지토리는 내거 생성한거로 우선 전달하면 될 것 같고, 어제 만든 화면을 풀리퀘..? 해보는 것을 오늘 해보려고 한다! 오메 떨려 내가 참고한 글은 아래 블로그인데 국비학원에서 ..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 06WEB Dev/ToyProject 2021. 12. 9. 00:54
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제는 MUI를 살짝 맛봤다! 오늘은 MUI를 이용해서 로그인 화면을 구현해보려고 한다. 로그인 컴포넌트등을 따로 제공하는것 같지만, 화면 만들기만 맛보기 위해 inputbox 두 개와 버튼으로 로그인 화면 비스무리하게 흉내내볼계획이다. 실제 todomate 화면은 이렇게 생겼다. 하단의 시작하기를 누르면 임의의 계정처럼 바로 투두메이트 서비스를 이용할 수 있고, 로그인을 누르면 가입하기를 눌러 진행한 정보로 로그인을 할 수 있는 화면이 뜬다. 우선 이 메인 화면을 만들어보려고 한다. App.js 컴포넌트 안..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 04WEB Dev/ToyProject 2021. 12. 6. 23:38
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제는 기본적인 개발 환경을 셋팅하였다. 오늘은 컴포넌트들을 체계적으로 만들기 위해 간단한 폴더 트리를 그리고, 컴포넌트의 구조를 잡는 일을 하려고 한다. 폴더 트리를 그리는 이유는 상태관리에 대한 경험이 없기 때문에 컴포넌트를 중구난방으로 만들면 분명 난리가 날 것이 뻔하니 기본적인 틀을 가지고 있어야 나중에라도 구조를 한 눈에 파악하기 쉬울 것 같았다. 🔸 리액트 파일 구조 리액트 공식문서를 읽어보니 바닐라 자바스크립트로 웹페이지를 만들었을 때보다 더 간단하게 폴더 트리를 짜야 했다. 컴포넌트의 성격별로 ..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 03WEB Dev/ToyProject 2021. 12. 6. 00:44
🔷 Todomate ☑ - Clone Project 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 코딩애플 리액트 강의를 드디어 끝내고😭 김다정님의 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101' 의 리액트 설치 및 개발환경 셋팅를 따라하려고 한다. 오늘은 개발환경 셋팅까지 진행하고, 레포지토리에 올려야지. 🔸 디렉토리 생성 / Create-reacta-app 설치하기 - VSCode를 설치한다. - node.js를 설치한다. (안정화 버전인 LTS를 설치하는 것을 추천!) - 원하는 로컬 폴더 위치에서 마우스 오른쪽 클릭 해 VSCode를 연다. - 새 터미널을 열고 npx create-react-app 원하는 폴더 이름 을 입력한다. (npx crea..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 02WEB Dev/ToyProject 2021. 11. 25. 14:00
🔷 Todomate ☑ - Clone Project 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 🔸 프론트엔드 개발 사항 - 회의하기 전에 알아본 것들 확정하기 ◾ 개발 언어 :리액트React, 자바스크립트Javascript (HTML, CSS(SCSS), REACT, JAVASCRIPT 등) ◾ 호스팅 : 깃허브 (AWS 써봐도 될거같은데.. 리눅스 이용해서 노드로 서버열고 호스팅하는거같은데 깃헙은 그냥 버튼만 누르면 끝나요) ◾ 도메인 : 가비아에서 하나 살까요? - 이건 나중에 백엔드분들이랑 정해요. ◾ 협업툴(택1) : 지라Jira,노션Notion, 트렐로Trello 혹은 깃헙 무엇을 써보고 싶으셔도 좋아요. ◾ 버전관리툴 : GitHub (레포지토리 만들어서 백엔..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 01WEB Dev/ToyProject 2021. 11. 21. 22:35
🔷 Todomate ☑ - Clone Project 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 🔸 프로젝트명 ▪ 🔸 프로젝트 인원 구성 ▪ 백엔드 개발자 Back-end Developer 2인 ▪ 프론트엔드 개발자 Front-end Developer 2인 🔸 프로젝트 개발 언어 ▪ 백엔드 : Spring, JPA ▪ 프론트엔드 : REACT, Recoil ▪ 데이터베이스 : mariaDB, postgresql ▪ 협업 : Git, Github ▪ 빌드 및 배포 : AWS 🔸 프로젝트 제반사항 ▪ 매주 월요일 9시 정기 회의 ▪ 백엔드 / 프론드엔드 개별적으로 개발 후 데이터베이스 연결부터 협업 ▪ 투두메이트 내의 기능은 불필요해 보이는 부분을 정리하여 기능정의