1. 코딩 스타일 가이드

이 문서는 Nextjs 프로젝트 개발 시 코딩 스타일 작성 방법을 설명합니다.

1

Componentization

가장 중요함: 코딩 후에 refactor도 필요하지만, 우선 처음부터 component화 시키는 것이 중요합니다.

가독성과 코드 재사용을 위해서 반드시 component화가 필요합니다. Composable commerce의 필수 요건이라 할 수 있습니다.

예시: layout.tsx

layout.tsx

const Layout = ({ children }) => (
  <div className="layout">
    <header> Header content ... ... </header>
    <main>{children}</main>
    <footer> Footer content ... ... </footer>
  </div>
);
export default Layout;

이 파일 하나에 수 천 line 코딩하지 말고, Header와 Footer를 src/components/에 코딩 후 import 합니다.

layout.tsx (refactored)

import Header from '@/components/header';
import Footer from '@/components/footer';

const Layout = ({ children }) => (
  <div className="layout">
    <Header />
    <main>{children}</main>
    <Footer />
  </div>
);
export default Layout;

2

Nullish Coalescing

물음표 두 개 ??를 사용하는 문법입니다. ES2020에 도입된 JavaScript 문법이며, REST API의 response를 json으로 받아 체크할 때 유용합니다.

예시 설명:

• false || true; // => true

• false ?? true; // => false

false라는 값은 boolean 이고, 기본값 연산자 ??는 undefined 혹은 null 일 때만 뒤의 default 값을 사용합니다. 즉 응답 json에서 의도적인 빈 문자열 "" 값을 받을 때 이를 변형하지 않습니다.

사용 예시:

예시

const name = foo ?? "default value";

3

고차함수

.map, .filter, .reduce의 문법을 익히면 좋습니다.

예시:

React (map) 예시

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        {item}
      </li>
    ))}
  </ul>
)

4

key

Next.js 고유가 아닌 모든 React 기반으로 코딩할 때 .map()을 쓰면 항상 key 값을 주어야 합니다. 처음 React를 접할 때 가장 많이 하는 실수입니다. 위의 고차함수(map) 예시를 참고하세요.

5

try-catch

예시:

fetch 예시

async function fetchData() {
  // An async function for fetching data from an API
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`API call failed with status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    // Error handling or logging logic
    throw error;
  }
}

6

ternary operator

예시:

ternary 예시

return (
  <>
    {isLogin ? <div>Logged in</div> : <div>Not Logged in</div>}
  </>
)

7

Destructuring

예시: without destructuring

without destructuring

function displayPerson(person) {
  const name = person.name;
  console.log(name);
}

예시: with destructuring

with destructuring

function displayPerson({ name, age, job }) {
  console.log(name);
}

8

optional chaining

값이 없을 때 나는 오류를 방지하기 위해 required field가 아니면 물음표 입력:

예시:

productList?.info?.color