코드리뷰 정리

코드리뷰 받은 것들은 정리해보기🌱

시멘틱 태그 사용하기

시맨틱 마크업이란 적절한 태그를 사용하여 태그로 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.

• 헤더/푸터에 <header>와 <footer> 사용
• 메인 컨텐츠에 <main>과 <section> 사용
• 독립적인 컨텐츠에 <article> 사용
• 최상위 제목으로 <h1,2,3> 사용
• 순서가 없는 목록으로 <ul>과 <li> 사용
• 순서가 있는 목록은 <ol> 사용
• 내비게이션에 <nav>사용
• 강조하는 목록에 <strong>

button type 지정하기

<button>의 기본 타입은 submit이다. 따라서 목적에 따라 button, submit, reset type을 지정해주어야한다.

<button type="button|submit|reset">

alt 태그 사용하기

<img src="" alt="사용자 프로필" />

<img>, <input> type이 image 이거나 <button> 인 경우와 <map>의 <area> 에도 대체텍스트가 존재한다면 alt 속성 넣어주어야 한다.
alt 속성이 필요없을 경우는 alt에 빈 값("")을 넣어주면된다.

alt에는 간단 명료하게 목적을 서술한다.

'=='대신 '===' 사용

==는 양 옆의 값을 비교하기 전에 강제 형 변환(Type Coercion)를 수행한다.
강제 형변환 과정을 통해 피 연산자들을 공통 타입으로 만들고 그 안에 있는 값만을 비교하는, '느슨한 비교'를 한다.
하지만 === 의 경우, 강제 형변환 과정을 수행하지 않는 '엄격한 비교'를 한다.

1 == false // true
2 == "2" // true
1 === false // false
2 === "2" // false

절대경로

// 👎
import a from "../A/a";

// 👍
import a from "Alpah/ABC/A/a";

명확한 변수명

// 👎
api.then((res) => console.log(res))

// 👍
api.then((userData) => console.log(userData))

props 안쓰기

// 👎
function User(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 👍
function User({ name }) {
  return <h1>Hello, {name}</h1>;
}

if(true)

// 👎
if(a == true){}

// 👍
if(a){}

Template literals

// 👎
const string = '나는 ' + name + ' 입니다.'

// 👍
const string = `나는 ${name} 입니다.`

배열에 키(key)값 넣기

key를 넣어야하는 이유

구조분해할당

구조분해할당구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식.

구조분해할당을 하지않으면 불필요한 값들이 추가적으로 변수에 들어게 된다.

// 👎
const Id = await api.getUserId();
console.log(Id); // {Id:123, exist:true}

// 👍
const { Id } = await api.getUserId();
console.log(conferenceId); //123

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

예제 링크

wrapper vs container

wrapper
단일한 요소를 감싸는 div

container
여러 요소를 감싸므로 여러개의 div를 감싸는 div

삼항연산자

삼항연산자는 가독성을 떨어뜨릴수도 있다. 무조건 삼항연산자가 더 나은 코드가 아니다. 코드길이와 구조에 따라 if문, 삼항연산자를 선택하자!

버튼 속성 aria-label

<button id="back" type="button" aria-label="Header Left" className="relative h-6 w-6">

aria-label 같이 스크린 리더기가 읽을 수 있는 props를 넣어주어야한다!