🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제는 기본적인 개발 환경을 셋팅하였다. 오늘은 컴포넌트들을 체계적으로 만들기 위해 간단한 폴더 트리를 그리고, 컴포넌트의 구조를 잡는 일을 하려고 한다. 폴더 트리를 그리는 이유는 상태관리에 대한 경험이 없기 때문에 컴포넌트를 중구난방으로 만들면 분명 난리가 날 것이 뻔하니 기본적인 틀을 가지고 있어야 나중에라도 구조를 한 눈에 파악하기 쉬울 것 같았다. 🔸 리액트 파일 구조 리액트 공식문서를 읽어보니 바닐라 자바스크립트로 웹페이지를 만들었을 때보다 더 간단하게 폴더 트리를 짜야 했다. 컴포넌트의 성격별로 ..

🔷 Todomate ☑ - Clone Project 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 코딩애플 리액트 강의를 드디어 끝내고😭 김다정님의 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101' 의 리액트 설치 및 개발환경 셋팅를 따라하려고 한다. 오늘은 개발환경 셋팅까지 진행하고, 레포지토리에 올려야지. 🔸 디렉토리 생성 / Create-reacta-app 설치하기 - VSCode를 설치한다. - node.js를 설치한다. (안정화 버전인 LTS를 설치하는 것을 추천!) - 원하는 로컬 폴더 위치에서 마우스 오른쪽 클릭 해 VSCode를 연다. - 새 터미널을 열고 npx create-react-app 원하는 폴더 이름 을 입력한다. (npx crea..

오늘 아침은 비가 와서 이제 출근했다..😣 function solution(answers) { var check = []; var check2 = []; var check3 = []; var student = { 1: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5], 2: [2, 1, 2, 3, 2, 4, 2, 5, 2, 1], 3: [3, 3, 1, 1, 2, 2, 4, 4, 5, 5], }; answers.map((a, i)=>{ check.push(a == Object.values(student)[0][i]); return check; }) answers.map((a, i)=>{ check2.push(a == Object.values(student)[1][i]); return check2; ..

출근하면서 이 문제를 잠깐 생각했는데, 배열의 인덱스마다 비교해야 하니까 인덱스별로 비교할 수 있는 배열 메소드를 찾아보기로 했다. 배열의 내장 메소드들 https://opentutorials.org/module/3989/26231 배열 객체 메소드 - JavaScript 배열 객체 메소드 2019-08-01 18:35:54 배열 객체 메소드 Array 객체가 갖고 있는 메소드들에 대해 알아봅니다. 함수들을 이용하여 배열을 효과적으로 사용할 수 있습니다. 함수의 종류가 많고, 활용 opentutorials.org 일단 인덱스를 사용해서 쓸 수 있는 여러가지 메소드 들 중에 forEach나 map을 쓰는게 가장 적절한 것 같았다. forEach보다 map을 더 많이 쓰고 권장하기때문에 map()함수로 만들..

🔷 Todomate ☑ - Clone Project 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 🔸 프론트엔드 개발 사항 ◾ 개발 언어 : 리액트ReactJS, 자바스크립트Javascript, 노드Node.js16.13.0 ◾ 호스팅 : 깃허브 ◾ 도메인 : ◾ 프론트엔드 협업툴 : 지라Jira ◾ 버전관리툴 : GitHub ◾ 개발 환경 : npm, CRA (Create-React-App) ◾ UI 라이브러리 : MUI ◾ 캘린더 라이브러리(택1) : ToastUI-Calendar ◾ 알람 라이브러리 : Firebase Cloud Messaging API ◾ 입력유효성관리 라이브러리 : React Hook Form ◾ 상태관리 라이브러리 : Recoil 🔸 이후 일정 ◾..

🔷 상태관리 라이브러리 Recoil A state management library for React 투두메이트 클론 프로젝트를 진행하면서 상태관리 라이브러리에 대해서도 공부하게 되었다. 리액트 개발자라면 누구나 필수로 사용해야 한다는 상태관리 라이브러리들 중에서 가장 유명한건 역시 Redux지만 Redux가 큰 규모의 애플리케이션에 적용하기 좋은 라이브러리이고 그렇기 때문에 무겁다는 평이 있어서 작은 프로젝트인 우리 프로젝트에서는 Recoil을 쓰는 것을 추천해주셨다. 리액트를 만든 페이스북팀이 만든 상태관리 라이브러리기 때문에 앞으로의 대세가 될 가능성이 있다. 아직 리코일에 대한 글이 많이 없어서 유튜브와 블로그를 참고해서 상태관리에 대한 정의와 Recoil 사용법을 간단하게 정리해보고자 한다. 상..