[TIL] 240126(금) 개인과제 README 작성 / Code Refactoring 하기

오늘 공부한 내용 정리💁🏻‍♀️

1. Git commit message 작성 rules

✅ commit message 란?
: commit 명령어는 git 변경점을 구분하기 위해 작성하는 메세지

git commit -m "작성할 메세지"

그렇다면 커밋 메세지는 아무렇게나 작성하면 될까?

처음에는 그냥 그 날의 날짜를 적어서 올린다거나, 1차 커밋 이런식으로 메세지를 작성했다.
하지만 개인 프로젝트가 아닌 팀 프로젝트를 할 경우, 내가 작성한 메세지를 보고 어떤 부분이 변경 되었는지를 확인 할 수 있도록 좋은 커밋 메세지를 작성해야한다.

좋은 커밋 메세지를 작성하기 위해서는 몇 가지 명령어를 따르는 것이 중요하다.

<commit message TYPE 종류>

• feat : 새로운 기능을 추가할 경우
• fix : 어떤 오류/ 버그를 수정 및 해결
• build : 빌드 관련 파일 수정
• style : 스타일 또는 포맷 등과 연관된 기능
• refactor : 코드의 특정 부분을 refactoring한 경우
• test : 테스트 코드와 관련된 모든 커밋
• docs : 문서 수정에 관한 모든 커밋
• chore : 정규 코드 유지보수 및 그 외 자잘한 코드 수정

2. README 작성하기

To-do list 만들기 개인 프로젝트에 대한 README 작성을 진행하였다.

지난 첫 과제였던 영화 검색 사이트 만들기 프로젝트 때는 README를 어떻게 작성해야하는지 몰라서 작성 하지 못하였다.

하지만 나의 github repository에 처음 들어왔을 때 볼 수 있는 화면이 바로 이 README이다.

내 프로젝트에 대한 첫 인상을 남겨 줄 수 있는 부분이므로, 잘 정리해서 작성하는 습관을 길러야겠다.

첫 README는 아래와 같이 작성을 하였다.

1️⃣ 프로젝트 화면 공유
2️⃣ 기술 스택
3️⃣ 페이지와 필수 기능사항
4️⃣ 컴포넌트 구조
5️⃣ 어려웠던 점

물론 더 많은 내용을 담을 수도 있고, 앞으로 점차 프로젝트 구조가 커질 수록 작성해야하는 부분이 많을 것이다. 이런 부분들을 놓치지 말고 잘 정리해서 기록해야겠다.

그 중에서도, 2. 기술 스택 부분은 다른분들의 github을 구경하다가 종종 봤었는데, 어떻게 작성해야하는지 몰라서 궁금해하던 부분이었다.

🛠️ 기술 스택 넣어주기

이번에 사용한 기술 스택을 아이콘으로 정리해보았다.

https://simpleicons.org/

이 사이트를 이용하여 icon을 만들면 된다.

작성방법은 간단하다.

1) 기본 구조

<img src="https://img.shields.io/badge/(기술명)-(배경색)?style=for-the-badge&logo=(아이콘명)&logoColor=(글자색)"/>

2) 기술명 / 아이콘명

: 사용하고자 하는 기술명을 작성하고, 아이콘명은 빨간 네모 박스에 적힌 기술의 이름을 소문자 로 작성해주면 된다.

3) 배경색 / 글자색

• 배경색 : 하단에 있는 색상을 # 제외하고 작성한다.
• 글자색 : black 또는 white로 작성한다.

(모양은 다른 것들도 있는데, for-the-badge가 가장 깔끔한 스타일이라 난 이걸로 사용하기로)

3. To-do list Code Refactoring

1) 표기법 구분하기

개인과제 피드백에서 className을 어떤 건 camelCase로, 어떤 건 kebab-case로 작성했다는 지적이 있었다.
사실 특별한 이유가 있었던 건 아니고, 변수명을 항상 camelCase로 작성하는게 익숙해지다보니, class 이름을 작성할 때도 camelCase로 작성을 했던 것 같다.

하지만 표기법을 보고도 확실하게 어떤 기능/역할을 하는지 구분할 수 있기 때문에, 표기법에 대해서 다시 한 번 더 짚고 넘어가보고자 한다.

• camelCase
  : 낙타(camel)의 등처럼 올라갔다 내려갔다하는 모습에서 나온 표기법
  ▶️ 변수와 함수의 이름 / 그 외 Javascript에서 많은 곳에서 사용

• kebab-case
  : 케밥처럼 꼬치에 끼워져 있다는 모습에서 나온 표기법
  ▶️ CSS class 명, 폴더명, js 파일 등에 사용

• PascalCase
  : Pascal 언어에서 쓰던 표기법
  ▶️ React 컴포넌트 이름에 사용 (ex) TodoList.jsx) / class 명

• snake_case
  : 뱀이 기어가는 것과 같은 언더바(_)를 사용하는 표기법
  ▶️ 파이썬 언어에서 주로 사용

2) <ul> 태그 안에는 반드시 <li> 태그 작성하기

목록을 만드는 태그에는 <ul>,<ol> 태그가 있다.

<ul> 태그는 unordered list 의 약자로 순서가 필요 없는 목록을 만든다.
<ol> 태그는 ordered list 의 약자로 숫자 또는 알파벳 등 순서가 있는 목록을 만든다.

<ul>과 <ol>의 항목을 나열하기 위해서는 반드시 <li> 태그가 필요하다!!
<li> 태그는 list item 의 약자로 <ul>,<ol> 태그 하에 사용된다.

ex 1) <ul> 태그 예시

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>키위</li>
</ul>

이 코드를 실행하면, 다음과 같이 특별한 순서가 없는 리스트가 나온다.

• 사과
• 바나나
• 키위

ex 2) <ol> 태그 예시

<ol>
  <li>사과</li>
  <li>바나나</li>
  <li>키위</li>
</ol>

이 코드를 실행하면, 다음과 같이 넘버링이 되어 리스트가 나온다.

1. 사과
2. 바나나
3. 키위

넘버링 type은 기본값이 "1"이고, 변경 가능하다. (type : 1 / a / A / 로마숫자 등)
start 숫자도 바꿀 수 있다. (ex| <ol start="5"> 라고 하면 5부터 순서가 매겨진다.)

📌<ul>, <li> 리스트의 점 없애기

<li> 태그를 작성하면 앞에 동그란 spot이 생기는데, 이를 없애주기 위해서는 css style을 변경해주면 된다.

.no-dot{
list-style-type : none;
}

3) Data.toLocalDataString()

: 생성된 Data 객체에서 날짜 부분을 현재 지역의 표기법으로 반환하여 가져오는 메소드이다.

주로 locales(언어와 국가)과 options(옵션)을 매개변수로 받는다.

toLocalDataString(locales, options)

이때, Data 객체는 년, 월, 일, 시, 분, 초, 밀리초 단위까지 호출 할 수 있다.

new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds);

options은 year, month, day, weekday를 설정하여 년, 월, 일, 요일을 표기한다.
주로 numeric과 long을 표기하는데, numeric은 숫자 표기, long은 문자 표기이다.

개인과제를 진행한 To-do list 만들기에 deadline을 설정하도록 마감기한을 넣어보도록 하자.

일단은 평소와 동일하게 useState와 addDateHandler 함수를 만들고, input 태그에 적용시켜준다.

// TodoController component
const [date, setDate] = useState();

const addDateHandler = (event) => {
    setDate(event.target.value);
  };

// TodoForm
<div>Deadline &nbsp;
    <input className="date-class" type="date" value={date} onChange={addDateHandler}/>
</div>

이렇게 하여 <input type="date"/>에 event가 발생했을 때의 console.log(event.target.value)를 찍어보면, 2024-01-26과 같이 해당 날짜가 찍히는 것을 알 수 있다.

이 값을 이용하여 data를 대한민국 표기법으로 전환 해보고자 한다.

   const numberOfDate = new Date(event.target.value);

    const options = {
      weekday: "long",
      year: "numeric",
      month: "numeric",
      day: "numeric",
    };

우선 해당 값을 Data로 가지는 새로운 Data 객체를 선언한다.
options 또한 어떤 type으로 나타낼지 설정해준다.

const changeDateType = numberOfDate.toLocaleDateString("ko-KR", options);
  setDate(changeDateType);

Data 객체를 toLocalDataString 메소드를 이용해, "ko-KR" 한국으로 설정해준다.

이렇게 하면, 2024-01-26 이렇게 뜨던 날짜가 2024년 1월 26일 금요일 이렇게 바뀌는 것을 볼 수 있다!

이상 오늘 끝!!!

하루를 마치며...🤔

이번주는 개인과제가 하나 끝났다는 이유로 뭔가 알게 모르게 해이해진 한 주 였다.. 특히 오늘 오후시간에는 정말 집중을 하기가 어려웠다. React 숙련 강의도 얼른 듣고 다음주에는 또 다른 개인과제를 진행 해야 하는데, 강의를 듣는데 진도도 잘 안 나가고 계속 밀린 복습들과 들어야 할 특강들과 과제 리뷰 등 해야할 일이 너무 많아서 뭐부터 해야할 지 몰라서 혼란스러웠던걸까.. 아무튼 간에 이번 to-do list 만들기 개인과제도 어느정도 리뷰를 했고, 미루고 미루던 README 작성도 오늘 드디어 완료를 하였다.
나도 남들처럼 멋있고 예쁘게 작성하고 싶은데 어떻게 작성하는지도 몰라서 미루기만 했는데, 오늘 집중도 잘 안되는 김에 기술 스택 아이콘 찾아서 넣는 것부터 하나하나 서칭해가며 완성했다ㅋㅋ 기록을 하는데는 시간이 오래 걸릴지 몰라도 나름 기록해놓고 보면 좋을지도..
아무튼 또 한 주가 끝이 났다. 이번 주말에는 과연 얼마나 많은 시간을 내가 혼자서 집중 할 수 있을까? 쉬고 싶으면서도 해야 할 것들이 수도 없이 쌓여 있기에 하나씩 차근차근 끝을 내보자!!