> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/02./1..md).
# 1. 코딩 스타일 가이드
이 문서는 Nextjs 프로젝트 개발 시 코딩 스타일 작성 방법을 설명합니다.
{% stepper %}
{% step %}
### Componentization
{% hint style="info" %}
가장 중요함: 코딩 후에 refactor도 필요하지만, 우선 처음부터 component화 시키는 것이 중요합니다.
{% endhint %}
가독성과 코드 재사용을 위해서 반드시 component화가 필요합니다. Composable commerce의 필수 요건이라 할 수 있습니다.
예시: layout.tsx
{% code title="layout.tsx" %}
```
```
{% endcode %}
```tsx
const Layout = ({ children }) => (
{children}
);
export default Layout;
```
이 파일 하나에 수 천 line 코딩하지 말고, Header와 Footer를 src/components/에 코딩 후 import 합니다.
{% code title="layout.tsx (refactored)" %}
```tsx
import Header from '@/components/header';
import Footer from '@/components/footer';
const Layout = ({ children }) => (
{children}
);
export default Layout;
```
{% endcode %}
{% endstep %}
{% step %}
### Nullish Coalescing
물음표 두 개 ??를 사용하는 문법입니다. ES2020에 도입된 JavaScript 문법이며, REST API의 response를 json으로 받아 체크할 때 유용합니다.
예시 설명:
* false || true; // => true
* false ?? true; // => false
false라는 값은 boolean 이고, 기본값 연산자 ??는 **undefined 혹은 null** 일 때만 뒤의 default 값을 사용합니다. 즉 응답 json에서 의도적인 빈 문자열 "" 값을 받을 때 이를 변형하지 않습니다.
사용 예시:
{% code title="예시" %}
```javascript
const name = foo ?? "default value";
```
{% endcode %}
{% endstep %}
{% step %}
### 고차함수
.map, .filter, .reduce의 문법을 익히면 좋습니다.
예시:
{% code title="React (map) 예시" %}
```jsx
return (
{items.map((item, index) => (
-
{item}
))}
)
```
{% endcode %}
{% endstep %}
{% step %}
### key
Next.js 고유가 아닌 모든 React 기반으로 코딩할 때 .map()을 쓰면 항상 key 값을 주어야 합니다. 처음 React를 접할 때 가장 많이 하는 실수입니다. 위의 고차함수(map) 예시를 참고하세요.
{% endstep %}
{% step %}
### try-catch
예시:
{% code title="fetch 예시" %}
```javascript
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;
}
}
```
{% endcode %}
{% endstep %}
{% step %}
### ternary operator
예시:
{% code title="ternary 예시" %}
```jsx
return (
<>
{isLogin ? Logged in
: Not Logged in
}
)
```
{% endcode %}
{% endstep %}
{% step %}
### Destructuring
예시: without destructuring
{% code title="without destructuring" %}
```javascript
function displayPerson(person) {
const name = person.name;
console.log(name);
}
```
{% endcode %}
예시: with destructuring
{% code title="with destructuring" %}
```javascript
function displayPerson({ name, age, job }) {
console.log(name);
}
```
{% endcode %}
{% endstep %}
{% step %}
### optional chaining
값이 없을 때 나는 오류를 방지하기 위해 required field가 아니면 물음표 입력:
예시:
```javascript
productList?.info?.color
```
{% endstep %}
{% endstepper %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/02./1..md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.