CoxeMonkey

전 포스팅에 이어서 계속해서 만들어 보겠습니다.

2. 차트 막대 만들기

2-5. 세로축 정렬 반대로 하기

현재 이렇게 되어있는데 원래 [프로젝트 준비 ~ 스토리 보드 작성] 순서로 되어있었습니다.

다음과 같이 세로축 클릭 - 축 서식 - 축 옵션에서 항목을 거꾸로 누르면 됩니다.

잘 정렬이 된것을 확인할수있습니다.

2-6. 날짜 축 서식 최소값, 최대값 정하기

칸이 너무 좁은것 같아서 가로 축으로 크기를 키워보겠습니다.

이제 위에 있는 날짜들을 처리해보겠습니다.

위에 있는 날짜를 클릭후 우클릭하고 축 서식 - 경계 - 최솟값을 프로젝트 시작 첫날인 4월 1일 최대값을 실제 종료일 + 2일인 4월 15일로 만들었습니다.

이렇게 만들어 졌다면 잘 따라오신겁니다.

2-7. YYYY-MM-DD 형식 MM-DD로 바꾸기

년월일로 되어있어서 읽기 힘든 부분이 있습니다 이걸 해결하기 위해 축 서식에 들어가서 처리해보겠습니다.

날짜 클릭 - 축 서식 - 표시 형식 - 범주 - 사용자 지정 - 형식 - mm"월"dd"일" 눌러주면 됩니다.

2022-04-01 에서 04월 01일 로 바뀐걸 볼 수 있습니다.

더 깔끔하게 만들수도 있습니다.

서식 코드에서 mm-dd를 하게 되면

04-01 이런식으로 바뀌게 됩니다.

그리고 2일 간격으로 되어있기 때문에 3일 간격으로 바꾸고 보조선을 넣어보겠습니다.

상단 날짜를 클릭하고 우 클릭하여 축 서식을 눌러준뒤 단위 부분에서 기본 - 3.0 (3일) 보조 - 1.0 (1일 기준) 으로 만들어 줍니다.

그리고 보조축을 만들어 실선을 나오게 만들수도 있습니다.

날짜를 클릭하고 보조 눈금선 서식을 클릭후 자동 체크박스를 눌러주면 만들어지게 됩니다.

그렇게 해준다면 다음과 같이 만들어집니다.

여기까지 계획 칸을 모두 해보았습니다 .

다음 정리해볼 강의는 계획을 해보았으니 이제 실제 시작일 소요일을 이용하여 데이터를 처리하는것을 올려보겠습니다.

고생하셧습니다.

간트 차트란?

프로젝트 일정관리를 위한 바(bar) 형태의 도구로서, 각 업무별로 일정의 시작과 끝을 그래픽으로 표시하여 전체 일정을 한눈에 볼 수 있다, 또한 각 업무(activities) 사이의 관계를 보여줄 수도 있다.

by. 위키백과

일정관리를 하기 위해 Bar 형태로 그래픽 형태로 보이는 거라고 보시면 되는데 보통 프로젝트 일정표를 짤 때 간트차트와 작업일정 진도표를 만들게 됩니다. 저희는 그중 간트차트에 대해 공부하며 직접 만들어 보겠습니다.

만들기 전에 완성품을 보여드리겠습니다.

이렇게 이쁜 간트차트를 만들수 있습니당

간트차트 만들기

1. 소요일 함수

=IF(D4="", "", D4-C4+1)

작업명을 작성하고 그 오른쪽 열에 계획, 실제 행을 만들어주고 시작일, 종료일에 데이터들을 넣고

소요일에 다음과 같이 적어줍니다.

다음과 같이 나온다면 제대로 작성하신 것입니다, 바로 옆 실제 행열 소요일에도 적용을 해줍니다.

=IF(G4="", "", G4-F4+1)

예쁘게 잘 나온 모습을 볼수있습니다.

if(logical_test, value_if_true, value_if_false)

위의 if에 대해서 설명을 하자면 사실 제가 엑셀에서 함수를 써본 적이 처음이라 생소한데 프로그래밍의 삼항 연산자와 비슷했습니다.

첫 번째 인자가 조건문이고 만약 저 조건에 따라서

TRUE이라면 두 번째 인자가 실행

FALSE이라면 세 번째 인자가 실행

이었습니다 코드 자체는 어렵지 않았습니다.

2. 차트 막대 만들기

이제 간트차트를 그려보겠습니다.

삽입 - 차트 - 2차원 가로 막대형 - 두 번째 클릭을 해줍니다.

2-1. 차트에 시작일 (계획) 데이터 넣기

이렇게 빈 차트가 나왔다면 성공입니다.

빈 차트 우클릭을 하여 데이터 선택을 눌러 줍니다.

계열, 이름에 시작일(계획)이라고 넣은 뒤

다음과 같이 계열 값 클릭하고 드래그하여 계획 열 시작일들을 가져옵니다.

2-2. 차트에 소요일 (계획) 데이터 넣기

그럼 다음과 같이 나올 것입니다.

이제 소요일을 넣기 위해 추가 버튼을 눌러줍니다.

계열 이름에 소요일(계획)이라고 넣고

계열 값을 누르고 계획의 소요일들을 가져와줍니다.

다음과 같이 나왔다면 잘하신 겁니다

2-3. 작업명 넣기

이제 왼쪽 열 부분에서 1 ~ 5 숫자가 아닌 작업명을 넣어주도록 하겠습니다.

가로(항목) 축 레이블에서 편집을 눌러줍니다.

범위 선택을 하기 위해 화살표를 눌러줍니다.

작업명들을 드래그 하여 가져옵니다.

이제 이렇게 잘 만들어졌습니다..

2-4. 파란색 Bar 투명하게 만들기

파랑색 Bar는 시작일, 주황색 Bar는 소요일이 됩니다.

파랑색 Bar를 지워서 소요일만 보이게 만들어 보겠습니다.

파랑색 Bar를 누르고 우클릭 - 채우기 - 채우기 없음 을 눌러주면 됩니다.

다음과 같이 나오게 됩니다.

블로그 내용이 너무 길어져 다음 포스팅으로 넘어가겠습니다.

엑셀로 만들고 싶어서 구글링으로 프로젝트 일정표 템플릿 찾다가 괜찮은걸 찾기가 힘들어서 유튜브에 괜찮게 만드는게 있어서 따라 만들어 봤습니다.

심플하긴 한데 구분하기 어렵긴 하네영

TIL?
Today I Learned의 약자.

오늘도 난 공부를 했다. 라는 용어이며

하루에 공부했던 내용을 깃허브 또는 블로그에 올리는 행위를 말합니다.

대표적으로 현재 TIL 진행중인 세분의 git TIL를 가져왔습니다.

진유림님 TIL

namjunemy TIL

Integerous TIL

Example

Integerous님의 Github TIL

namjunemy님의 Github TIL

2주 전부터 저도 Github TIL를 시작하고 있습니당.

https://github.com/GangOn0215/dev-til

오늘 면접을 봤습니다.

네.. ㅠㅠ

이 글을 쓰고 있는 지금도 깃 허브 올려야지.. 진행중인 프로젝트 해야지.. 최근에 다시 나태해져서 시들시들

해졌는데 이번 면접을 보면서 제 암담한 실력과 뭔가 잘못되었다는 직감과 함께 다시 League of Legends 게임을 지울까 고민중입니당

BE 직무 쪽으로 회사에서 면접을 봤고 대면으로 질문 몇가지를 주셧고 코딩테스트 정도를 하였습니다.

사실 제가 본격적으로 준비하고 회사에 가야겠다 라고 하면서 준비한게 한달..? 정도밖에 되지 않아서 준비가 되어 있거나 그런것은 아니었습니다.

그래서 제가 지난 한달동안 했던 React와 (사실 FE부분이라..) 블로그에 정리했던 내용들이 조금은 도움이 되었던것 같습니다.

저는 BE 개발자가 되기위해 준비흘 했지만 실상은 FE에 조금 강한 기이한 현상이(?) 되어 버렸네요.

면접관님이 해주셧던 말이 기억이 나네요..

처음 프로젝트를 하고 모여서 만들고 배포하면 많이 부족해보이고 그렇지만 그런걸 하고 다음 프로젝트를 하면 조금 더 견고한 프로그램을 만들수 있습니다

사실 학교에서 .. 애들끼리 모여서 1~2학년까지 뭔갈 하긴 했는데 실 배포한건 없고.. 남은게 없어서 아차 싶기도 했습니다. 끝을 못본거죠 실 배포하고 서비스하고 그래봤어야했는데 후회가 되기도 하지만 이미 지난 일이기에 지금부터라도 열심히 해봐야졍

그래서 다시 본격적으로 팀 프로젝트 하면서 공부하며 제 진로인 BE 쪽으로 파면서 HTTP, DB 에 대해 공부하며 작게나마 DB 설계, 전체적인 프로젝트 목업 과 프로젝트 진행서, 기획서, 기능 정의서 등을 한번 만들면서 해볼려고 합니다.

많이 부족했지만 값진 경험이었던것 같습니당

개발자가 되는 그날까지 화이팅🧐

React app을 만들고 다른 사람들에게 보여줄려면 배포 라는것을 해야합니다

보통 Cafe24, 가비아, AWS, GCP 등 호스팅을 사용하는데 너무 복잡하기도 하고 단순히 프론트 쪽 배포만 하기 때문에 github 또는 firebase를 사용하게 됩니다.

github는 다음에 알아보기로 하고 firebase를 사용하여 배포해보도록 하겠습니다.

1. firebase 페이지에 들어가서 시작하기 버튼을 눌러줍니다.

2. 프로젝트 만들기 버튼 눌러줍니다.

3. 체크박스 두개를 클릭하고 계속 버튼을 누릅니다.

4. 애널리틱스는 사용하지 않을거라서 사용안함으로 하고 프로젝트 만들기 버튼을 눌러줍니다. (사용하시는 분은 그대로 사용해주세용)

5. Loading...

6. 대쉬보드 화면이 나오는데 왼쪽 사이드바에서 빌드를 눌러줍니다.

7. Hosting 을 눌러줍니다.

시작하기 버튼을 눌러줍니다.

이제 호스팅 설정에 대한 창이 뜨는데

npm install -g firebase-tools

cmd (커맨드 창) 을 관리자 권한으로 킨 다음에 npm install을 해줍니다.

firebase login

설치가 다 되었다면 프로젝트의 root 디렉토리(폴더) 경로에서 해당 커맨드를 실행합니다.

Allow Firebase to collect CLI usage and error reporting information? 이라는 문구가 나오는데 에러가 나오면 제공을 해주냐는 질문입니다. Yes 라고 해줍니다.

그럼 새 창이 뜨면서 구글 로그인을 할수있는데 로그인을 하고 나면 Success! Logged in as ??@gmail.com 이라고 뜨게 됩니다.

그리고 firebase init 명령어를 실행합니다.

Yes 친다음 선택할수있는 항목이 나오는데 화살표로 움직여서 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys 로 움직인 다음 스페이스바 누르고 엔터를 누릅니다.

그 다음 build 라고 친다음 yes 라고 치고 github로도 배포를 하냐고 물어보는데 한다면 yes 아니면 no 라고 합니다..

그 다음 yes를 눌러주면 프로젝트 폴더에 firebase.json, .firebaserc 파일이 생겼을 겁니다.

이제 아까 firebase 대쉬보드로 가서 다음 버튼 다 누르고 마지막 콘솔로 이동을 눌러줍니다.

이렇게 뜰건데 밑으로 내려줍니다.

다른 사이트 추가 를 눌러줍니다.

사이트 추가 밑에 본인이 사용할 사이트 이름을 적어줍니다.

이렇게 뜬다면 성공한것입니다.

{
  "hosting": {
    "site": "react-app-gang",
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

이제 firebase.json 파일에 가서 site 부분을 본인 호스팅 할려던 웹사이트 이름을 넣어줍니다.

이제 cmd 창에 가서 npm run build를 실행해줍니다.

그 다음 firebase deploy 를 실행해줍니다.

이렇게 뜬다면 성공했습니다.

여기까지 따라와주신 여러분 고생하셧습니다.

react에서 date를 처리하는 것은 여간 까다로운 작업이 아닐 수 없습니다.

format을 다 처리해야 하기 때문이죠.

<input type='date' value='2022-04-09' />

react에서 input을 생성하고 type을 date를 줍니다.

date input value의 date format은 YYYY-MM-DD입니다.

const [date, setDate] = useState(new Date());

const getStringDate = (date) => {
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  if (month < 10) {
    month = `0${month}`;
  }
  if (day < 10) {
    day = `0${day}`;
  }

  return `${year}-${month}-${day}`;
};

<input
  type='date'
  value={getStringDate(date)}
  onChange={(e) => {
    setDate(new Date(e.target.value));
  }} 
/ >

date를 받았을 때 YYYY-MM-DD 형식으로 리턴해주는 함수를 만들어줬습니다. ( 한입 크기로 잘라먹는 리액트(React.js) : 기초부터 실전까지 ) 참고하였습니다.

그리고 input value 에다가 date state를 삽입하고 onChange 에다가 setDate를 할 수 있는 콜백 함수를 넣어줍니다.

정상적으로 잘 작동을 하는 것을 볼 수 있습니다.

useEffect(() => {
  console.log(date);
});

useEffect를 이용하여 date를 찍어보면 date 바뀔 때 즉 setDate 함수가 호출이 될 때 리 랜더링이 되며 console에 찍히는 걸 볼 수 있습니다.

기본으로 제공해주는 input date를 사용해도 가볍고 좋긴 한데 커스텀이 불편하다는 단점이 있습니다.

이걸 해결하기 위해 저는 DatePicker 라이브러리를 사용했습니다.

npm install react-datepicker --save

커맨드를 열고 npm으로 install 해줍니다.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';

function App() {
  const [startDate, setStartDate] = useState(new Date());

  <DatePicker
    selected={startDate}
    onChange={(date) => { 
      setDate(date); 
    }}
    className='date-picker'
  />
}

DatePicker component를 불러와주고 DataPicker에서는 value가 아니라 selected 속성을 넣어줍니다.

그리고 input date와는 다르게 따로 별로의 함수를 만들지 않아도 date를 자유롭게 사용할 수 있습니다.

그런데 이걸 이용하면 커스텀이 용이하다고 했는데 한번 css로 수정을 해보겠습니다.

.date-picker {
	border: 1px solid #b0a8b9;
	border-radius: 5px;
	text-align: center;
	width: 90px;
}

.date-picker:focus-visible {
	outline: none;
}

아주 예쁘게 만들어진 모습을 볼 수 있습니다.

이상 data-picker 에 대해 공부한것을 포스팅 해보았습니다.

감사합니다

useMemo 에 이어서 useCallback 에 대해서 알아봅시다.

이번에도 Dingdong Ditch(띵똥 벨튀) component를 뜯어서 개조를 해볼것입니다.

전 포스팅에서도 말했지만 useMemo, useCallback 서로비슷합니다.

useMemo 기반에서 추가된게 useCallback 이니까영

Memoization 이란? 

주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장을 의미합니다.

useMemo:   memoization 된 값을 반환 합니다.

useCallback: memoization 된 함수를 반환 합니다.

useCallback의 간단한 예시를 들자면

1.  useCallback(() => fn, [deps]);  // deps의 데이터가 변하게 된다면

2.  useCallback(() => fn, [deps]);  // callback 함수를 반환 하게 됩니다.

import React, { useState, useEffect } from 'react';

const Bell202 = React.memo(({ call }) => {
  useEffect(() => {
    console.log('Rerender Bell202');
  });

  return <div>{`Bell 202!! ${call}`}</div>;
});

const Bell402 = React.memo(({ ditch, call }) => {
  useEffect(() => {
    console.log('Rerender Bell402');
  });

  return (
    <>
      <div>{`Bell 402!! ${call}`}</div>
      <button onClick={ditch}>Bell 402</button>
    </>
  );
});



const DingdongDitch = () => {
  const [call202, setCall202] = useState(0);
  const [call402, setCall402] = useState(0);

  const ditch = () => {
    setCall402(call402 + 1);
  };

  return (
    <div>
      <Bell202 call={call202} />
      <button onClick={() => setCall202(call202 + 1)}>Bell 202</button>
      <Bell402 call={call402} ditch={ditch} />
    </div>
  );
};

export default DingdongDitch;

202호 벨을 눌렀는데 402호도 rerender 가 되는것을 볼 수 있습니다.

분명 React.memo()를 적용했는데 왜 이런 현상이 일어나는걸까요?

React.memo에 대해 모르신다면 해당 포스팅을 봐주세영!

call402 state가 값이 변하기 때문에 상위 컴포넌트에서 Re-Rendering 이 발생하고 props에 들어온 ditch 함수가 계속 재선언이 되기 때문 입니다.

import React, { useState, useEffect, useCallback } from 'react';

const DingdongDitch = () => {
  const [call202, setCall202] = useState(0);
  const [call402, setCall402] = useState(0);

  const ditch = useCallback(() => {
    setCall402(call402 + 1);
  }, [call402]);

  return (
    <div>
      <Bell202 call={call202} />
      <button onClick={() => setCall202(call202 + 1)}>Bell 202</button>
      <Bell402 call={call402} ditch={ditch} />
    </div>
  );
};

export default DingdongDitch;

ditch 함수를 useCallback으로 감싸서 함수를 넘겨줬더니 202호 벨을 눌렀지만 402호 벨은 Re-Rendering이 발생하지 않는걸 볼수있습니다.

간단하게 예제와 함께 설명을 해보았습니다.

여기까지 봐주신 여러분 감사합니당

useMemo

useMemo에 대해 공부를 하였지만 어떤 예제를 들어야 할지 애매모호 해서 상당히 골치 아팠습니다.

그러다 어제 올린 React.memo 에서 띵똥 벨튀 예제를 가져와서 쓰면 괜찮을것 같아서 DindongDitch를 개조해 보았습니다.

useMemo 를 공부하면 useCallback 은 필연으로 공부를 하게 됩니다.

두가지 비슷하지만 확연히 차이가 있습니다.

Memoization 이란? 

주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장을 의미합니다.

useMemo:   memoization 된 값을 반환 합니다.

useCallback: memoization 된 함수를 반환 합니다.

useMemo의 간단한 예시를 들자면

1.  useMemo(() => fn, [deps]);  // deps의 데이터가 변하게 된다면

2.  useMemo(() => fn, [deps]);  // callback 함수가 실행 된 값을 반환 하게 됩니다.

[ deps ] 저 부분은 dependency ( 의존 ) 이라는 의미이며 저 데이터가 변할때마다 callback 함수가 실행 된 값을 반환 받게 됩니다.

// study React.memo

import React, { useState, useEffect, useMemo } from "react";

const DingdongDitch = () => {
  const [call202, setCall202] = useState(0);
  const [call303, setCall303] = useState(0);
  const [call402, setCall402] = useState(0);

  const getTotalBell202303 = () => {
    console.log('define totalBell202303');

    return call202 + call303;
  }

  const totalBell202303 = getTotalBell202303();

  return (
    <div>
      <span>Bell202 + Bell303: {totalBell202303}</span> <br/>
      <Bell202 call={call202}/>
      <button onClick={() => setCall202(call202 + 1)}>Bell 202</button>

      <Bell303 call={call303}/>
      <button onClick={() => setCall303(call303 + 1)}>Bell 303</button>

      <Bell402 call={call402}/>
      <button onClick={() => setCall402(call402 + 1)}>Bell 402</button>
    </div>
  )
}

export default DingdongDitch;

202호, 303호 벨 눌렀던 횟수를 합치는 함수 getTotalBell202303() 를 만들고 변수 totalBell202303 에다가 데이터를 받습니다.

totalBell202303가 선언 될때 console로 뜨게 했습니다.

분명 402호 벨을 눌렀는데 totalBell202303 변수가 계속 선언이 되고 있습니다.

402호 state가 값이 변할때 Component Re-Rendering이 발생하는건데 그래서 totalBell202303 변수가 계속하여 재선언이 되고 있던것입니다.

import React, { useState, useEffect, useMemo } from "react";

const DingdongDitch = () => {
  const [call202, setCall202] = useState(0);
  const [call303, setCall303] = useState(0);
  const [call402, setCall402] = useState(0);

  const getTotalBell202303 = () => {
    console.log('define totalBell202303');

    return call202 + call303;
  }

  const totalBell202303 = useMemo(getTotalBell202303, [call202, call303]);

  return (
    <div>
      <span>Bell202 + Bell303: {totalBell202303}</span> <br/>
      <Bell202 call={call202}/>
      <button onClick={() => setCall202(call202 + 1)}>Bell 202</button>

      <Bell303 call={call303}/>
      <button onClick={() => setCall303(call303 + 1)}>Bell 303</button>

      <Bell402 call={call402}/>
      <button onClick={() => setCall402(call402 + 1)}>Bell 402</button>
    </div>
  )
}

export default DingdongDitch;

const totalBell202303 = useMemo(getTotalBell202303, [call202, call303]);

useMemo의 첫 번째 인자는 callback 함수와 두번째 인자는 dependency(의존) 변수를 넣어줍니다.

그렇게 의존성 부분의 데이터가 변할때만 값으로 할당이 되어 totalBell202303 변수가 component에 의해 리랜더링 될 때 마다 재선언 하는 일이 없어집니다.

이상 useMemo에 관한 이야기를 해보았습니다.

여기까지 따라와주신 여러분 수고하셧습니다.

비고) Bell202, Bell303, Bell402 컴포넌트는 코드가 너무 길어져 아래에 넣어두겠습니다.

const Bell202 = React.memo(({ call }) => {
  useEffect(() => {
    console.log('Rerender Bell202');
  });

  return <div>{`Bell 202!! ${call}`}</div>
});

const Bell303 = React.memo(({ call }) => {
  useEffect(() => {
    console.log('Rerender Bell303');
  });

  return <div>{`Bell 303!! ${call}`}</div>
});

const Bell402 = React.memo(({ call }) => {
  useEffect(() => {
    console.log('Rerender Bell402');
  })

  return <div>{`Bell 402!! ${call}`}</div>
});

[ 생활코딩 - HTTP 수업 ] 을 보고 노트로 요약, 공부 한것들 입니다.