호박고구마

왜 또 공부 안 했냐..

그저께랑 어제는 설날이기도 해서 따로 공부는 안 했다. 심지어 어제는 회사 근무였어가지고 그냥 회사 가서 공부할 수 있는 상황인데 따로 공부는 안 했던거같다. 하지만 어제 회사에서 공부할시간이 있음에도 불구하고 그냥 안했던 내 모습에 뭔가 살짝 아쉬웠던 모습이 있던 거 같다. 

나약한 내 모습에 더 반성하게 되고 꾸준히 하루도 쉬지 않고 채찍질하면서 공부하는 모습이 중요한 거 같다. 

아웃풋

요즘 고민인 게 공부를 해도 뭔가 결과물이 안 나와서 이전에 비해 공부가 흥미가 떨어진 요인이지 않을까 생각한다.  일단 문제점은 목표가 없다는 게 가장 큰 문제점이고, 공부를 했을 때 나에게 실질적으로 득이 돌아오도록 하는 것을 해야 하는데 그걸 어떻게 해야 할지 고민이 된다. 그리하여 생각한 게 블로그이다. 기술 블로그를 매일은 아니더라도 주 2회 정도 글을 쓰면서 목표의식을 갖게 하여 사람들이 내 블로그를 보면서 다른 사람이 나름 득이 된다면 그것도 하나의 나에게 하나의 아웃풋이 되지 않을까 생각이 든다. 

결론

TIL 틈날 때마다 쓰고, 주에 2회 이상 내용이 좋은 블로그 게시물을 쓰도록 노력해 보자

코드를 이쁘게 작성하는 방법은 뭐가 있을까..?

어제 오랜만에 TIL을 썼고 오늘도 쓰려한다. 내가 요즘 부족한게 뭘까 고민중이다. 요즘 프로젝트를 하면서 느낀건데 코드에 중복이 많다는 단점이 있다는 생각이 들었다. 이를 위해 TDD를 먼저 배워야겠다는 생각이 든다. 내 생각에 TDD의 장점은 단순히 테스트 코드를 작성하기 위함이 아니라, 코드를 잘게 쪼개면서 코드를 보기 좋게 만들면서, 유지보수를 할수 있게 하는 장점이 있다는 장점이 있다. 이를 위해 일단 예전에 강의를 사둔 제로초님의 tdd 강의를 배우려 한다. 강의를 사두기만 해놓고 봐야지 하면서 공부를 안했는데, 요번 기회에 공부를 해봐야겠다.

먼저 앞으로 해야할 것

1. 제로초님의 tdd 강의 보기

오랜만에 쓰는 글이다. 요즘 공부를 하고 있긴한데 뭘 공부하는건지도 모르겠고... 고민이 많은거 같다. 회사 생활이 나름 만족하며 다녀서 그런건지 예전에 비해 열정이 많이 떨어진듯 하다. 회사를 다니면서 너무 재밌어서 프론트 개발자로 전직을 하고싶어서 프론트 공부를 많이 했는데 나이가 너무많아서 포기하게되었다.

그리하여 프론트는 그냥 보조무기같은 느낌으로 사용하려고 한다. 다행히 프론트를 하면서 도커랑 백엔드쪽을 같이 공부를 했어가지고 앞으로는 프로그래밍 공부는 백엔드, 스크립트 위주로 공부하려고한다.  

그리고 위에서 언급했듯이 목표감이 많이 없어져서 이제는 남들에게 도움이 되는 블로그를 향해 그런 목적으로 공부할 생각이다. 고민했던 것들을 공부 열심히하면서 남들에게 도움이 되는 블로그가 되고싶다.

올해 목표는 다음과 같이 정리했다. 

1. Node js 정리 한번하기

2. 깃 명령어 다시한번 정리하기

3. tdd 공부 다시해보기

4. 도커 & 쿠버네티스 공부해서 정리하기

5. ci / cd 공부하기

매일 최대한 회고록 작성하면서 부족한 부분에 대해 설명해보고 공부하는 습관을 들여야겠다. 

서론

Write Through, Write Back, Force Write Back은 레이드 컨트롤러를 사용한다면 쓰기 정책 중 하나이다. 여기서 쓰기란 파일을 만들거나 하는 행위를 말한다. 이 3개의 읽기 정책은 각각 차이점을 가지고 있어, 알아두면 좋으니 참고하길 바란다.

Write Through

Write Through는 실제 메모리와 컨트롤러 캐시 메모리에 모두 업데이트 하는 방식을 말한다. 그러기에 Write Back에 비해 느리다. Write Back이 Write Through보다 빠른 이유는 바로 밑에서 보게 될 Write Back에 대해 바로 설명하겠다.

Write Back

Write Back 캐시 메모리에만 데이터를 write하고 있다가, 캐시 메모리가 새로운 데이터 블록으로 교체되는 때 데이터를 주기억장치에도 저장하는 것을 말한다. 실제 메인 메모리에 저장을 하지 않고 캐시 메모리에만 저장을 하기에, Write Through보다 빠른 장점이 있다.
하지만 Write Back은 컨트롤러 배터리라는 BBU가 존재해야 사용이 가능하다. 그에 반해 Write Through는 BBU가 없이도 사용이 가능하다. 이는 BBU가 정전이 되었을 때 데이터 손실을 방지할 수 있다. 컨트롤러 배터리 시간이 수명이 72시간이면, 배터리 수명 내에 서버를 복구할 수 없으면 데이터는 유실된다.
즉, Write Back은 BBU가 존재해야 가능한 모드이다. 만약 BBU가 없다면 Write Back로 설정해도 Write Through로 동작한다.

Force Write Back

그러면 Force Write Back은 뭘까? Force Write Back은 Always Write Back라고도 부르는데, 컨트롤러마다 부르는 게 조금씩 다르다. 말해서 보듯 Force라는 언어로 어림잡을 수 있는데, Force 강제로 Write Back 하겠다는 뜻이다. 그 말은 BBU의 존재 여부 상관없이, 있는 없든 Write Back으로 하겠다는 뜻이다. 위에서 Write Back은 BBU가 있어야 사용가능하다고 말했다. 하지만 Force Write Back은 BBU에 상관없이 Write Back으로 사용하는 것이다. 이것은 Write Back이 Write Through보다 성능이 빠르기에 최적화하기 위해 이와 같은 모드를 사용한다.

결론

결론적으로 3가지 방식의 차이는 메모리 업데이트 방식의 차이와, 컨트롤러 배터리(BBU)의 여부를 차이점을 두고 생각하면 될 것 같다.

Marp란?

Marp는 md 파일을 이용해서 쉽게 PDF 파일을 만들어주는 도구이다.

설치 순서 

먼저 설치를 위해서는 2가지가 필요하다.

1. Visual studio code

2. Marp (Vsc Extension 기능)

설치 방법

먼저 Visual studio code를 설치하기를 바란다. 설치 URL : https://code.visualstudio.com/ 

설치가 완료되었다면, 왼쪽에 확장 Extension을 누른다. 그리고 Marp for VS Code를 검색하여 설치를 진행한다.

사용방법

파일 생성

파일이름을 정하고, 사용 방법은 밑의 Marp Markdown을 선택하게 되면 파일이 만들어진다.

미리 보기

파일을 만들었다면, 간단하게 글을 쓴 후 미리보기가 가능하다. 상단오른쪽에 보면 돋보기 + 책 모양을 선택하면 미리보기가 가능하다.

파일 추출 

그 다음은 파일 추출 기능인데, 오른쪽 상단에서 왼쪽에서 2번째 아이콘 모양을 클릭 하면 다음과 같이 나오는데,

Export Slide Deck 선택 후, 파일을 만들면 만들어진다.

여기서 주의사항은 꼭 Untitle이 아닌 개별 파일로 저장하고 PDF로 추출하기 바란다. (필자는 저장안하고 추출하면 에러가 발생헀음)

css style 넣는 방법

글로벌로 스타일 적용 방법과 페이지 별로 스타일을 적용하는방법

글로벌로 할려면 <style> css 코드 ....</style> 안에 코드를 넣어주면되고,
만약 특정 페이지에 대해서만 스타일을 따로 적용하고 싶다면 <style scoped> css 코드 .... </style>를 해주면 된다.

HTML class 네임 설정하기

---
marp: true
---

<style>
  .flex {
    width: 600px;
    display: flex;
  }

  .hi {
    width: 1000px;
  }

</style>
<div class="flex">
  <div class="hi" style="color:red">나</div> 
  <div class="hi" style="color:red">홍길동</div>
  <div class="hi" style="color:red">아하</div>
  <div class="hi" style="color:red">허허</div>
</div>

Marp는 html 코드를 적용할 수 있다고 말했는데, 다음과 같이 나온다. 그러면 어떻게해야할까?

왼쪽 맨밑에 보면 시계톱니 모양의 Setting을 눌러 준다. 이후 markdown.marp라고 검색을 한다.

그리고, Markdown > Marp: Enable HTML을 선택해주면 html 태그의 글들이 밑의 처럼 사라지게된다.

https://school.programmers.co.kr/learn/courses/30/lessons/12951

function solution(s) {
  const result = s
    .split(" ")
    .map((item) => item.charAt(0).toUpperCase() + item.slice(1).toLowerCase());
  return result.join(" ");
}

문제 풀이 방법

1. 각 문자열을 공백 단위로 나눈다.

2. 나누게 되면 배열이 만들어지는데, 배열 안의 문자열중에 첫문자를 모두 대문자로 바꾸고, 나머지는 소문자로 바꾼다.

3. 그리고 공백 단위로 나눈 문자열을 join 함수를 사용해서 합쳐준다.

서론

React로 회사 업무 사이트 Pagination 다른 프로젝트에서 직접 구현을 해봤는데, 뭔가 좀 더 간단한 라이브러리가 없을까 하여 구글링 도중에 react-paginate를 찾았다. 실제로 구현하는 것도 도움이 많이 되지만, 시간상 직접 구현하면 시간도 걸려서 라이브러리 도움을 받기로 했다. (사실 귀찮음이 컸음)
이 후 적용을 해보니 어렵지도 않고 매우 간단하였고, 독스 설명도 잘 있어서 매우 편리했다.

사용 방법

밑의 URL npm 에서 구글 독스로 봐도 되고, 아니면 해당 글을 참고하여 사용해도 좋을 것 같다.

https://www.npmjs.com/package/react-paginate

리액트는 18.12.0 버전을 사용하였고, node 버전은 v14.17.0을 사용하였다. 

설치 방법

npm install react-paginate --save

설치 방법은 매우 간단하다. npm 사용하여 위의 명령어를 입력해주면 설치가 된다.

styled 컴포넌트와 같이 사용하기

나는 styled컴포넌트와 같이 사용하였는데, styled 컴포넌트와 어떻게 적용할지 고민을 하였는데, 매우 간단하였다. https://stackoverflow.com/questions/75532879/how-to-style-react-paginate-with-styled-components 

위의 stackoverflow를 참고하여 작성하였다. 

실제 예시

styled.ts

import styled from "styled-components";
import ReactPaginate from "react-paginate";

export const StyledPagenate = styled(ReactPaginate)`
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  font-weight: 400;

  .page-number {
    width: 30px;
    height: 40px;
    border: 1px solid gray;
    margin-left: 6px;
    margin-right: 6px;
    cursor: pointer;
  }

  .previous {
    width: 100px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
  }

  .next {
    width: 70px;
    height: 40px;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3px;
    font-weight: 600;
  }

  a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active {
    background-color: #ffb372;
  }
`;

styled styled 컴포넌트와 react-paginate를 import를 해준 후에, styled(ReactPaginate)를 해주면 된다. 이 후 컴포넌트에서 다음과 같이 적용한다.

component.tsx

export default function Component({ data }: IProps) {
  const [currentPageIndex, setCurrentPageIndex] = useState(1);
  const [itemOffset, setItemOffset] = useState(0);

  const itemCountPerOnePage = 12; // 페이지당 보여줄 아이템 갯수
  const dataCount = data!.length; // 

  const totalPageCount = Math.ceil(dataCount / itemCountPerOnePage);
  const endOffset = itemOffset + itemCountPerOnePage;
  const currentItems = hadoopList!.slice(itemOffset, endOffset);

  const handlePageClick = (event: PageChangeEvent) => {
    const newOffset = (event.selected * itemCountPerOnePage) % dataCount;
    setItemOffset(newOffset);
  };

  return (
    <>
        {data &&
          data!
            .slice((currentPageIndex - 1) * 12, currentPageIndex * 12)
            .map((item) => <DataItem item={item} key={data._id} />)}
        <S.StyledPagenate
          breakLabel="..."
          nextLabel="Next >"
          onPageChange={handlePageClick}
          pageRangeDisplayed={3}
          pageCount={totalPageCount}
          previousLabel="< Previous"
          renderOnZeroPageCount={null}
          pageClassName="page-number"
          previousClassName="previous"
          nextClassName="next"
          activeClassName="active"
        />
    </>
  );
}

page 숫자, previous, break, next 버튼을 커스터 마이징 하고싶다면, 위의처럼 className을 지정해주고, styled 컴포넌트에서 원하는 값으로 적용해주면 된다.

결론

밑에는 실제로 적용된 모습이고, data는 보여주고싶지만.. 회사 프로젝트였어가지고 따로 data들에 대한 항목들은 생략하였다.

 brew update

위의 명령어 입력 후 다음과 나올 때 에러 해결 방법

Error: homebrew-core is a shallow clone. To `brew update` first run:
  git -C "/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core" fetch --unshallow

 git -C "/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core" fetch --unshallow 명령어로 core를 업데이트해야 한다. 하지만 만약에 명령어 입력 후에도 아무 반응이 없을 시 다음과 같이 해보길 바란다.

core를 삭제 후 다시 git 명령어를 이용해 howebrew-core를 설치한다.

cd /usr/local/Homebrew/Library/Taps/homebrew/
rm -rf homebrew-core
git clone https://github.com/Homebrew/homebrew-core.git

이 후 다시 brew update를 입력하면 작동이 잘된다.