[React] Day_43 데일리 정리

 

살려줘.

 

팀플도 팀플이지만 맠하롱 하나때문에 급체한 림졍...은

주말 내내 TIL도 못쓰고 상태이상으로 혼절.. (ing 중...)

겨우겨우 TIL 써서 업로드해봅니다.. 하하

여튼 후다다 작성해보겠습니다

라쯔고.

 

챌린지반 강의 정리 - Clean Code (클린 코오드)

깔끔한 코드가 보기에도 좋고, 쓰기도 좋다(?)

 

그렇대~

 

 

코드 컨벤션

 

클린코드의 시작 → 의미 있는 변수명을 짓는 것에서 출발

코드 컨벤션 : 팀원들이 같은 규칙을 따르도록 만들어서 협업을 쉽게 + 코드를 빠르게 이해하게 해줌

 

장점

 

팀의 코드를 보면 마치 한 사람이 작성한 것처럼 느껴짐.

사람(개인)에 의존하지 않고 규칙에 의존하도록 함.

코드를 읽을 때 의도를 빠르게 파악 가능.

 

 

변수 및 함수 선언 스타일

 

- camelCase : 변수랑 함수 선언에 주로 사용

const thisIsVariable = true;  
const goToHome = () => {};

 

- kebab-case : 페이지 경로, 폴더명, CSS 클래스 이름 등에 쓰임.

pages/todo-list/TodoList.tsx  
.item-id

 

- snake_case : 상수 선언할 때 주로 대문자랑 같이 씀. (in JS)

const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000;

 

- PascalCase : 컴포넌트나 페이지 파일명에 사용.

TodoList.tsx  
Detail.tsx

 

 

변수명 작명 Tip

- 명확하고 구체적인 의미를 담ㅈr.

 

❌ Bad

let a = 1;

 

✅ Good

let phoneNumber = '010-1234-5678';

 

- Boolean 변수엔 상태를 드러내는 접두사 활용

const isGood = true;  
const hasGirlfriend = false;  
const loading = true;

 

- 복수 데이터를 다룰 땐 이름에 복수형 붙이기

 

❌ Bad

const todo = [1, 2, 3];

 

✅ Good

const todos = [1, 2, 3];

 

함수명 작성법

 

- 동사로 시작하기

 

❌ Bad

const home = () => {};

 

✅ Good

const goToHome = () => {};

 

 

구조 분해 할당 & 스프레드 연산자

 

- 스프레드 연산자

 

[ 배열 ]

const array = [1, 2, 3];  
const newArray = [...array];

 

[ 객체 ]

const obj = { key: 1 };  
const newObj = { ...obj };

 

- 구조 분해 할당

 

[ 배열 ]

const [state, setState] = useState();

 

[ 객체 ]

const ItemComponent = ({ title }) => <span>{title}</span>;

 

- 스프레드 + 구조 분해 할당 혼합 활용

 

[ 컴포넌트 ]

const Parent = ({ title, ...rest }) => (  
  <>  
    <span>{title}</span>  
    <Child {...rest} />  
  </>  
);  



const Child = ({ content, subTitle }) => (  
  <>  
    <span>{content}</span>  
    <span>{subTitle}</span>  
  </>  
);

 

[ 함수 ]

const validBoolean = (...args) => args.every(isTrue => isTrue);

 

 

조건문

 

- 긍정 조건 사용하기 : 부정 조건보다는 긍정 조건이 가독성이 좋음.

 

❌ Bad

const isNotBoy = false;  
if (!isNotBoy) {}

 

✅ Good

const isBoy = true;  
if (isBoy) {}

 

코드 퀄리티 & 가독성 높이기

 

- 함수 분리

 

함수는 하나의 역할만 수행, 함수 이름만 봐도 ‘아, 이거 뭐하는 함수구나~’ 하고 바로 알 수 있게 하기.

 

 

 

 

 

 

마무리 -  “그래서 결론이 뭐야?” 이젠 잘 짜보자고.. 

 

힘들어요.

 

오늘은 간단하게 회고만 적을거임..

 

KPT 회고

• Keep :  그래도 구현할 거 다함.
• Problem : 내 컨디션 비상사태
• Try : 느허엉 내 건강 돌려내

 

ㄲ

-

ㅅ