ToDoIt 개인프로젝트 1회차

Iterms2 커스텀

이대로 따라함!!👇🏻
https://wonillism.tistory.com/185

vim 익스텐션 (vscode)

vi 에디터 처럼 키보드로 조작 가능하게해줌!
vi cheatsheet

주로 알아야 할 단축 키
- h : 왼쪽으로 한 칸 이동
- j : 아래로 한 칸 이동
- k : 위로 한 칸 이동
- l : 오른쪽으로 한 칸 이동
- w : 다음 단어 시작으로 점프
- gg : 문서 첫 줄 시작으로 점프
- 5gg or 5G : 5번째 행 시작으로 점프
- u : 실행취소
- yy : 한 행 복사하기
- dd : 한 행 잘라내기

새로운 프로젝트 시작

CI 도입

mkdir .github
mkdir workflows
touch build_verification.yml

workflows???

• 여러 Job으로 구성되고, Event에 의해 트리거될 수 있는 자동화된 프로세스
  최상위 개념
• Workflow 파일은 YAML으로 작성되고, Github Repository의 .github/workflows 폴더 아래에 저장됨

참고 자료

프로젝트 트리구조

src
 ┣ api
 ┃ ┣ axios
 ┃ ┃ ┗ AxiosTodoService.ts
 ┃ ┗ TodoService.ts
 ┣ components
 ┃ ┣ todoitemcontainer
 ┃ ┃ ┣ TodoItem.tsx
 ┃ ┃ ┗ TodoItemView.tsx
 ┃ ┣ todolistcontainer
 ┃ ┃ ┣ TodoList.tsx
 ┃ ┃ ┗ TodoListView.tsx
 ┃ ┗ viewcontainer
 ┃ ┃ ┣ Card.tsx
 ┃ ┃ ┣ CheckBtn.tsx
 ┃ ┃ ┣ IconBtn.tsx
 ┃ ┃ ┗ Text.tsx
 ┣ page
 ┃ ┗ Mainpage.tsx
 ┣ App.tsx
 ┗ index.tsx

UI 구성

아래와 같이 벨로퍼트 리액트 깃북의 투두리스트 UI로 진행해보려한다.
그렇다면, 필요한것은 ? 최대한 분리할 수 있는 컴포넌트는 다 분리해보기!

VAC 디자인패턴

또한 디자인 패턴에 대해서도 생각해보았다.
View Asset Component
VAC : state 없이 view 만 하는 역할을 함
View Component : 상태관리, 기능을 담당할 함수 모음이라고 생각 함.

 ┃ ┣ todoitemcontainer
 ┃ ┃ ┣ TodoItem.tsx
 ┃ ┃ ┗ TodoItemView.tsx

참고자료

json-server 연동 방법

dipendency inversion principle

지금은 json-server의 공부도 필요한 상황이라, 먼저 json-server로 연결해보고, 추후 indexedDb로 바꿀 예정이다.
따라서, DIP에 따라 api 폴더 구조를 구상하였다.

1. npm i json-server axios

2. package.json scripts 수정

"scripts": {
    "start": "react-scripts start & npm run server",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "json-server --watch ./database/database.json --port 8000"
  },

3. database.json 파일 생성

{
  "todos": [
    {
      "id": 1,
      "hi": "hihihi",
      "number": "9447"
    },
    {
      "id": 2,
      "hi": "Byebyebye",
      "number": "04077"
    }
  ]
}

4. src > TodoService.ts 파일 생성

interface 설정

export interface TodoService {
  getTodoItems(): Promise<Array<any>>;
  changeTodoItem(item: any): Promise<void>;
}

5. src > api > axios > AxiosTodoService.ts 파일 생성

import axios from "axios";

import { TodoService } from "../TodoService";

const todoAxios = axios.create({
  baseURL: "http://localhost:8000",
});

export class AxiosTodoService implements TodoService {
  async changeTodoItem(item: any): Promise<void> {
    const response = await todoAxios.put(`/todos/${item.id}`);
  }
  async getTodoItems(): Promise<Array<any>> {
    const response = await todoAxios.get("/todos");
    return response.data;
  }
}

6. 서버 연결 확인

url : http://localhost:8000/todos

7. Todolist.tsx 내 console 찍어보기

import React, { useEffect, useState } from "react";
import { AxiosTodoService } from "../../api/axios/AxiosTodoService";

type Props = {};

const TodoList = (props: Props) => {
  const [item, setItem] = useState([]);
  useEffect(() => {
    const todoService = new AxiosTodoService();
    todoService.getTodoItems().then((data: any) => {
      setItem(data);
    });
  }, []);
  useEffect(() => {
    console.log(item);
  }, [item]);
  return <div>TodoList</div>;
};

export default TodoList;