
안녕하세요.

오늘은 Next JS에서 import 시 복잡한 relative path 대신 absolute path 사용을 위한 설정법을 알아봅시다.

### **들어가며**

```bash
../../../../style/global.scss is not found ...
```

우리는 개발을 할 때 import를 매우 자주 사용하곤 합니다.

file path를 상대경로로 지정하다보면 유지보수면에서도 복잡하고,  
path를 지정할 때마다 경로가 헷갈려서 발생하는 오류는 덤입니다.

이럴 때 path에 대한 alias를 설정하면 코드는 확 깔끔해질 것입니다.

아래 예제를 통해서 따라해봅시다.

### **설정하기**

**1\. jsconfig.json 파일 생성**

프로젝트 루트 폴더에 jsconfig.json을 생성에주세요. 파일에서 몇 가지 옵션을 부여할 것입니다.

**2\. alias 추가하기**

```javascript
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/components/*": ["components/*"],
            "@/styles/*": ["styles/*"]
        }
    }
}
```

위와 같이 compilerOptions를 추가하면 컴파일러는 등록된 alias를 마주할 때마다 path로 치환하게 됩니다.

**3\. 사용해보기**

```javascript
import SomeComponent from '@/components/SomeComponent'

// ...codes below
```

alias를 추가하였다면 위처럼 매우 쉽게 사용할 수 있습니다.



안녕하세요.  
오늘은 Nuxt에서 자주 사용하던 레이아웃 개념을 Next JS에서도 구현해 보았습니다.  
예제를 통해 직접 레이아웃을 구성해 봅시다.

### **들어가며**

홈페이지를 구성할 때, 우리는 대체로 네비게이션과 푸터, 플로팅 버튼 등을 포함합니다.  
개발단계에서 이들 컴포넌트를 페이지마다 일일이 import하는 것은 매우 비효율적인 일입니다.

만약 이들처럼 대부분의 페이지에서 보여줘야될 내용이 있다면,  
레이아웃 컴포넌트를 통해 손쉽게 유지보수할 수 있을 것입니다.

### **만들기**

**1\. /components/Layouts 폴더를 생성하고 Default.js 파일을 생성합니다.**

레이아웃들을 저장하는 폴더에 각 유저 시나리오 대로 필요한 레이아웃들을 구성해둘 것입니다.  
이번 예제에서는 가장 기본적으로 네비게이션와 푸터를 포함한 레이아웃을 만들어 보겠습니다.

**2\. 아래 코드를 입력합니다.**

```javascript
import Head from 'next/head'

import Nav from '@/components/Nav'
import Footer from '@/components/Footer'

const DefaultLayout = (props) => {
  return (
    <div className="layout">
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charSet="utf-8" />
      </Head>

      <Nav></Nav>
      <div className="content-wrapper">{props.children}</div>
      <Footer></Footer>
    </div>
  )
}
```

레이아웃 구성 시 Head를 사용하여 메타태그와 같은 헤더정보를 포함한다면 더 좋은 구성이 될것입니다.

**3\. 페이지에서 import하여 사용합니다.**

```javascript
import DefaultLayout from '@/components/Layouts/Default'

export default function index() {
  return (
    <DefaultLayout>
      <div>레이아웃 테스트</div>
    </DefaultLayout>
  )
}
```

레이아웃을 페이지에서 import하여 위와 같이 사용합니다. DefaultLayout 태그 내에 있는 콘텐츠들은 layout.js의 템플릿에서 props.children을 통해 포함되게 됩니다.



안녕하세요.  
오늘은 Promise를 통해 구문을 동기 처리 할 때, 여러 Promise들을 다루는 법을 소개해보겠습니다.

### **들어가며**

Javscript를 작성하다 보면, 가끔 여러 Promise들을 다룰 때가 있습니다.  
필자도 Nodejs 서버에서 동시에 여러 쿼리를 실행할 때 자주 마주쳤었는데요.  
오늘은 어떻게 하면 Promise들을 유연하게 다룰 수 있는지 알아보겠습니다.

### **시작하기**

```javascript
const promise1 = Promise.resolve(1)
const promise2 = new Promise((resolve) => setTimeout(() => resolve(2), 5000))
const promise3 = Promise.resolve(3)
const promise4 = Promise.reject(4)

const promises = [promise1, promise2, promise3, promise4]
```

시작하기 앞서, 네 가지 Promise를 선언하고, 그들을 하나의 Array에 묶어보겠습니다.  
구성은 즉시 resolve되는 Promise 두 개, 5000ms 후 resolve되는 Promise 하나, 즉시 reject되는 Promise 하나로 하였습니다.

**Promise를 다뤄보자**

우선 주어진 4개의 Promise를 동시에 병렬처리하는 방법을 알아보겠습니다.  
여기엔 두 가지 방법이 있는데, 첫번째는 Promise.all, 두번째는 Promise.allSettled입니다.

### 1\. Promise.all

Promise.all을 사용할 경우에는 하나의 Promise라도 reject되면 error를 발생시킵니다.  
하지만 reject된 Promise 이외의 Promise들은 정상적으로 작동한다는 점을 유의하시길 바랍니다.

```javascript
const app = async () => {
  let result

  try {
    result = await Promise.all(promises)
  } catch (error) {
    console.log('error occurred')
  }

  console.log(result)
}

app()

/* 결과값 :
    error occurred
    undefined
*/
```

### 2\. Promise.allSettled

Promise.allSettled는 모든 Promise를 병렬처리한다는 점에서 Promise.all과 비슷합니다.  
하지만 한가지 다른 점이 있다면, Promise들 중 하나가 reject되더라도 error를 발생시키지 않고 구문을 이어나간다는 것입니다.  
또한 return 값을 통해 각각 Promise들의 결과를 알 수 있습니다.

```javascript
const app = async () => {
  let result

  try {
    result = await Promise.allSettled(promises)
  } catch (error) {
    console.log('error occurred')
  }

  console.log(result)
}

app()

/* 결과값 :
    [
      { status: 'fulfilled', value: 1 },
      { status: 'fulfilled', value: 2 },
      { status: 'fulfilled', value: 3 },
      { status: 'rejected', reason: 4 }
    ]
*/
```

한가지 주의할 점은 nodejs 버전에 따라 Promise.all은 지원하되, Promise.allSettled는 지원하지 않을 수 있으니  
유의하시길 바랍니다.

필자 또한 nodejs에서 오류가 계속 발생하여 ... 삽질한 적이 있습니다.

### 3\. Array.prototype.reduce

이번에는 Promise들을 순차처리하는 법입니다.  
여기에서는 Promise들을 묶어둔 Array의 `reduce`를 사용할 건데요.

꽤 유용한 방법입니다.

```javascript
const app = async () => {
  let result

  try {
    result = await promises.reduce((prev, current) => prev.then(() => current), Promise.resolve())
  } catch (error) {
    console.log('error occurred')
  }

  console.log(result)
}

app()

/* 결과값 :
    error occurred
    undefined
*/
```

### **마치며**

ES6를 도입하게되며 가장 유용하게 쓰이는 Promise. 없으면 너무나도 불편합니다.  
다양한 방법을 통해 유연하게 다루게 되면 코드 퀄리티가 향상 될 것입니다.


Next JS에서 path alias 설정하기 (feat. @/components)

들어가며

설정하기