프로그래밍 도전기 108일차

오늘은

 

팀 프로젝트 준비로 엎친데 덮친 격으로 굉장히 바빠졌습니다

회의도 틈틈이 진행하고 있습니다

그래도 정말 정말 다행인 점은

이번 팀원들은 연락이 잘 된다는 점입니다

참여도 적극적으로 해주고 있어서 얼마나 고마운지

저도 의욕이 샘솟아 열심히 참여중입니다

 

 

 

 

 

React 공부

 

<<페이지 구현하기 : 홈>>

<header>

1. 현재 시점

* Home.js

import { useState } from "react";

import MyHeader from "./../components/MyHeader";

const Home = () => {
  // header에 저장할 날짜 status 필요
  const [curDate, setCurDate] = useState(new Date());
  console.log(curDate);

  const headText = `${curDate.getFullYear()}년, ${curDate.getMonth() + 1}월`;

  return (
    <div>
      <MyHeader headText={headText} />
    </div>
  );
};

export default Home;

2. 왼쪽 버튼

* Home.js

import { useState } from "react";

import MyHeader from "./../components/MyHeader";
import MyButton from "./../components/MyButton";

const Home = () => {
  // header에 저장할 날짜 status 필요
  const [curDate, setCurDate] = useState(new Date());
  const headText = `${curDate.getFullYear()}년, ${curDate.getMonth() + 1}월`;

  const decreaseMonth = () => {
    setCurDate(
      new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate())
    );
  };

  return (
    <div>
      <MyHeader
        headText={headText}
        leftChild={<MyButton text={"<"} onClick={decreaseMonth} />}
      />
    </div>
  );
};

export default Home;

3. 오른쪽 버튼

import { useState } from "react";

import MyHeader from "./../components/MyHeader";
import MyButton from "./../components/MyButton";

const Home = () => {
  // header에 저장할 날짜 status 필요
  const [curDate, setCurDate] = useState(new Date());
  const headText = `${curDate.getFullYear()}년, ${curDate.getMonth() + 1}월`;

  const increaseMonth = () => {
    setCurDate(
      new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate())
    );
  };

  return (
    <div>
      <MyHeader
        headText={headText}
        rightChild={<MyButton text={">"} onClick={increaseMonth} />}
      />
    </div>
  );
};

export default Home;

 

 

 

<diaryList>

1. Home component에 일기 데이터 공급
* Home.js

import { DiaryStateContext } from "../App";

const Home = () => {
  // diaryList라는 이름으로 useContext()를 활용해서
  // DiaryStateContext를 통해서 공급을 받음
  const diaryList = useContext(DiaryStateContext);
};

2. diaryList를 curDate state의 날짜에 따라 가공
* Home.js

import { useContext, useEffect, useState } from "react";
import { DiaryStateContext } from "../App";

import MyHeader from "./../components/MyHeader";
import MyButton from "./../components/MyButton";

const Home = () => {
  // Home component에서는
  // diaryList라는 이름으로 useContext()를 활용해서
  // DiaryStateContext를 통해서 일기 데이터를 공급 받음
  const diaryList = useContext(DiaryStateContext);

  // => diaryList를 curDate state의 날짜에 따라 가공
  // 가공된 data를 state로 관리 => state 생성
  const [data, setData] = useState([]);

  // header에 저장할 날짜 status 필요
  const [curDate, setCurDate] = useState(new Date());
  const headText = `${curDate.getFullYear()}년, ${curDate.getMonth() + 1}월`;

  // Home component에서 curDate날짜가 이동하게 되면
  // 그때 diaryList에서 지금 현재 연도와 월에 해당하는 일기들만 출력
  // useEffect()를 활용하여 curDate가 변화하는 순간에만
  // diaryList에서 그 날짜에 해당하는 일기 data만 뽑아오도록 함
  useEffect(() => {
    if (diaryList.length >= 1) {
      const firstDay = new Date(
        curDate.getFullYear(),
        curDate.getMonth(),
        1 // = 이번연도 이번월의 1일 = firstDay 생성
      ).getTime();

      const lastDay = new Date(
        curDate.getFullYear(),
        curDate.getMonth() + 1,
        0 // = 이번연도 다음월의 0일 = lastDay 생성
      ).getTime();

      // 첫일과 말일 사이에 작성된 일기 데이터만 filtering 한다
      setData(
        diaryList.filter((it) => firstDay <= it.date && it.date <= lastDay)
      );
      // deps에 diaryList를 전달해주지 않게 되면
      // useEffect가 diaryList가 바꼈을 때(추가, 수정, 삭제) 동작을 하지 않는다
    }
  }, [diaryList, curDate]);
  return (
  );
};

* DiaryList.js

// DiaryList 생성
const DiaryList = ({ diaryList }) => {
  // prop으로 전달받은 diaryList를 map()으로 list rendering
  return (
    <div>
      {diaryList.map((it) => (
        <div key={it.id}>{it.content}</div>
      ))}
    </div>
  );
};

export default DiaryList;

=> DiaryList component를 Home.js에 import
* Home.js

import DiaryList from "./../components/DiaryList";
const Home = () => {
  return (
    <div>
      <DiaryList diaryList={data} />
    </div>
  );
}

<filter>
* 리스트의 정렬을 할 수 있는 기능
=> 정렬 기능을 하는 component들을 분할해서 만들어 줌


1. 다이어리 정렬 옵션 셋팅

* DiaryList.js

import { useState } from "react";

// <select>태그 안에 들어갈 option 생성 => prop으로 전달
const sortOptionList = [
  { value: "latest", name: "최신 순" },
  { value: "oldest", name: "오래된 순" },
];

// <select>태그를 이용하여 controll 메뉴를 만들어줌
// value, onChange, optionList 를 prop으로 내려줌
const ControlMenu = ({ value, onChange, optionList }) => {
  // value = select menu가 어떤걸 선택하고 있는지의 역할
  // onChange = select가 선택하는 것이 변화했을 때 바꿀 함수 기능
  // optionList = <select>안에 들어갈 옵션
  return (
    // select의 value = 전달 받은 value
    // onChange가 발생하면 event객체를 받아서 onChange event handler에
    // e.target.value를 전달해주면 된다
    <select value={value} onChange={(e) => onChange(e.target.value)}>
      {/* option 구현 */}
      {optionList.map((it, idx) => (
        // it.name = sortOptionList의 각 객체의 name을 가리킨다
        // 그 name에 해당하는 value를 it.value로 넣어준다
        // 마지막으로 각 항목을 식별하는 값인 key를 전달해줌
        <option key={idx} value={it.value}>
          {it.name}
        </option>
      ))}
    </select>
  );
};

// DiaryList 생성
const DiaryList = ({ diaryList }) => {
  // 정렬 기능
  // 정렬 기준을 저장할 state 생성
  const [sortType, setSortType] = useState("lastest");

  // prop으로 전달받은 diaryList를 map()으로 list rendering
  return (
    <div>
      {/* ControlMenu 추가 */}
      <ControlMenu
        value={sortType}
        onChange={setSortType}
        optionList={sortOptionList}
      />
    </div>
  );
};

export default DiaryList;

2. 다이어리 정렬 기능 구현

const DiaryList = ({ diaryList }) => {
  // 정렬 기능
  // 정렬 기준을 저장할 state 생성
  const [sortType, setSortType] = useState("lastest");

  // 정렬 기능 구현
  const getProcessedDiaryList = () => {
    // 배열을 정렬하기 위해서 비교 함수를 만들어 준다
    const compare = (a, b) => {
      if (sortType === "latest") {
        return parseInt(b.date) - parseInt(a.date);
      } else {
        return parseInt(a.date) - parseInt(b.date);
      }
    };

    // diaryList.sort() => 원본 배열 자체를 재정렬 = 사용X
    // JSON.stringify(diaryList) = diaryList를 JSON화 시킴
    // JSON.parse() = 다시 배열로 복화시켜줌
    // = 배열에서 문자열로 바뀌었다가 다시 배열로 바뀌면서
    // copyList에 값만 들어가게 된다
    // => 원본 배열을 건드리지 않으면서 배열을 정렬 가능하게 해줌
    const copyList = JSON.parse(JSON.stringify(diaryList));

    // 비교함수를 이용해 dairyList 정렬 = compare함수 전달
    const sortedList = copyList.sort(compare);
    // 정렬된 함수 반환
    return sortedList;
  };

  return (
    <div>
      {/* 정렬함수 이후로는 diaryList로 rendering을 하는것이 아니라
           getProcessedDiaryList()함수를 실행한 결과값을 render하도록 해준다  */}
      {/* {diaryList.map((it) => ( */}
      {getProcessedDiaryList().map((it) => (
        <div key={it.id}>{it.content}</div>
      ))}
    </div>
  );
};

 

 

 

Github 공부 

 

세미 프로젝트 때 아쉬웠던 부분 중 하나로 gihub활용이 있습니다

그래서 이후로 제대로 공부를 해보고 브런치 사용법과 팀원들과의 협업을 위해 준비를 하였습니다

 

C드라이브나 원하는 폴더로 이동
파일탐색기 주소 창에 cmd 입력

** 깃 처음 셋팅 + pull request 하는 방법 **

1. git clone 원격저장소 주소
   => a. 깃 허브에 올려져 있는 파일 폴더 등 가져오기
        b. C드라이브나 원하는 폴더에 final-project 폴더가 생성됨

2. git checkout -b test
   => a.자신이 맡은 기능 작업을 브런치 명으로 함
   ex) git checkout -b feat_member

3. cmd를 그대로 두고 final-project 폴더를 열어서,
   text.txt 를 열고 내용을 아무렇게나 수정한 후에 다시 cmd로 돌아옴

4. git add .

5. git commit -m "test"
   ex) git commit -m "test: update txt"

6. git push origin test
   ex) git push origin feat_member

7. 깃허브로 이동(cmd는 꺼도 됨)

8. final-project 레퍼지터리로 이동

9. 상단 메뉴 중에 Pull requests 로 이동

10. 우측 New pull request 버튼 클릭

11. Compare changes 아래쪽 부분의
    왼쪽 base 클릭해서 dev로 바꿔줌 (ex. base: dev)
    바로 옆 compare 클릭해서 test로 바꿔줌 (ex. compare: feat_member)
    바꾸고 난 후 오른쪽 Create pull request 버튼 클릭

12. Add a title에 제목 작성 (ex. 기능명)
     Add a description 에 내용 작성 (ex. 회원 가입 기능 개발 완료했습니다)
     작성 완료 후 Create pull request 버튼 클릭



** 이후 작업 할 때 **

* final-project 폴더에서 탐색기 주소창에 cmd 입력

1. git checkout main

2. git pull

3. 프로그래밍 개발 작업

4. 작업 완료 후 깃에 올리기

5-1. 브런치 새로 생성 시 : git checkout -b 브런치명
5-2. 브런치 기존 그대로 사용 : git checkout 기존브런치명

6. git add .

7. git commit -m "코멘트"

8. git push origin 브런치명

9. 깃허브로 이동(cmd는 꺼도 됨)

10. final-project 레퍼지터리로 이동

11. 상단 메뉴 중에 Pull requests 로 이동

12. 우측 New pull request 버튼 클릭

13. Compare changes 아래쪽 부분의
    왼쪽 base 클릭해서 dev로 바꿔줌
    바로 옆 compare 클릭해서 생성한 브런치명으로 바꿔줌
    바꾸고 난 후 오른쪽 Create pull request 버튼 클릭

14. Add a title에 제목 작성 (ex. 기능명)
     Add a description 에 내용 작성 (ex. 회원 가입 기능 개발 완료했습니다)
     작성 완료 후 Create pull request 버튼 클릭

 

 

 

 

 

 

 

2024. 01. 28 (일)