
## Inspiration

- [Software Developer Portfolio](https://github.com/saadpasta/developerFolio)

Github Bookmark


안녕하세요.

이번 시간에는 Next.js 프로젝트를 시작하는 방법에 대해서 알아보겠습니다.

Next.js 프로젝트를 시작하려면 터미널에 다음 명령어를 실행해서 Next.js를 설치합니다.

```powershell
$ npx create-next-app@latest
```

Next.js 프로젝트에 TypeScript를 사용하려면 터미널에 다음 명령어를 실행해서 TypeScript를 지원하는 Next.js를 설치합니다.

```powershell
$ npx create-next-app@latest --typescript
```

`npm init`으로 `package.json` 파일만 생성된 프로젝트에서 next.js를 설치하려면 다음 명령어를 실행합니다.

```powershell
$ yarn add next react react-dom
```

그리고 `package.json` 파일의 `scripts` 코드를 다음과 같이 업데이트 합니다.

```json
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}
```

여기까지가 Next.js 를 설치하는 방법 3가지 방법입니다.

그리고 사용하는 가장 기초적인 방법은 프로젝트 폴더의 가장 최상위에 `pages` 폴더를 만들고 그 안에 `index.js` 파일을 만들거나 수정하여 사용합니다.

```javascript
function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage
```

그리고 개발 환경 프리뷰를 보려면 다음 명령어를 실행합니다.

```powershell
$ yarn dev
```

그리고 배포하기위해서 프로젝트를 빌드하려면 다음 명령을 실행합니다.

```powershell
$ yarn build
```

그리고 배포를 하려면 다음 명령어를 실행합니다.

```powerwhell
$ yarn start
```


이렇게 Next.js 프로젝트를 시작하는 방법에 대해서 알아봤습니다.

감사합니다.



Next.js 프로젝트를 시작하는 방법


자바스크립트에서 많은 함수들은 비동기 코드를 지원해서 해당 함수가 지금 시점에 시작하더라도 나중에 끝날 수 있도록 지원합니다.

먼저 웹사이트의 head 태그에 script 태그를 넣고 로드할 수 있는 loadscript를 살펴 보겠습니다.

<CodeBlock className="lang-javascript">
{`
  function loadScript(src) {
    let script = document.createElement('script')
    script.src = src
    document.head.append(script)
  }

  loadScript('/my/script.js')
`}
</CodeBlock>

`loadScript('/my/script.js')` 바로 다음에 newFunction 함수를 호출한다면 에러가 납니다.

그 이유는 함수가 로딩과 동시에 실행되는 것이 아니기 때문입니다.

<CodeBlock className="lang-javascript">
{`
loadScript('/my/script.js')
newFunction();
`}
</CodeBlock>

그래서 loadScript가 로드가 끝나면 loadScript로 로드한 script의 함수 newFunction()을 호출할 수 있도록 callback을 사용합니다.

```js
function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(script);

  document.head.append(script)
}
```

그리고 함수를 호출할 때는 다음과 같이 사용합니다.

```js filename="index.js"
loadScript('/my/script.js', function() {
  newFunction();
})
```

전체 코드를 보면 다음과 같습니다.

```js filename="index.js"
function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;
  
  script.onload = () => callback(script);
  
  document.head.append(script);
}

loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {
  alert(\`Cool, the script ${script.src} is loaded\`);
  alert( _ );
})
```

JavaScript Callback


안녕하세요.

Next.js에 다크모드 적용을 완료했습니다.

무료로 svg 아이콘을 다운로드 받을 수 있는 사이트에 가서 해와 달 모양의 svg 아이콘을 다운로드 받습니다.

Tailwindcss를 사용하기에 Tailwindcss 설정을 다음과 같이 해줘야 합니다.

tailwind.config.js

```javascript
module.exports = {
  darkMode: 'class',
  // ...
}
```

감사합니다. :)


Next.js에 다크모드 적용하는 방법


<div>
  MDX is <strong>MD</strong> with <strong>JSX</strong>. <br />
  Let's learn about MDX
</div>

<br />

### This is a H3

`###` help you to use H3

<br />

<div>
  Let's try button here.
  <Button>Just click it</Button>
</div>

<br />

### Let's try CodeBlock here.

```
// this is a code block in md syntax
const sayHi = () => {
    return console.log('h1')
}
```

<CodeBlock className="lang-js">
  {`
    const sayHi = () => {
        return console.log('h1')
    }
  `}
</CodeBlock>


MDX with CodeBlock by react-syntax-highlighter


안녕하세요.

Next.js API 서버를 구축해서 그 서버에 블로그 컨텐츠가 담긴 Markdown 파일 올려놓고 그 파일을 읽어 API로 배포해 놓았습니다.

그리고 현재 smilehugo.com의 Next.js 프론트엔드에서 해당 API를 읽어서 Static File을 생성해서 올려놓았습니다.

현재는 API 서버에 직접 접속해서 Markdown 파일을 수동으로 업로드해야해서 이 부분을 추후에 프론트엔드에서 직접 입력해서 Markdown 파일을 생성할 수 있도록 해서 블로그 컨텐츠를 추가할 수 있도록 업데이트 할 예정입니다.

감사합니다. :)


API를 사용해서 블로그 구축완료


안녕하세요.

이번 시간에는 Static Stie Generator를 사용하면 좋은 페이지에 대해 알아보겠습니다.

- Marketing pages
- Blog posts
- E-commerce product listings
- Help and documentation

감사합니다. :)


Static Site Generator를 사용하면 좋은 페이지


안녕하세요.

이번 블로그 포스팅은 Github Codespace를 사용해서 작성해봤습니다.

Github Codespace에서 새 프로젝트를 만들고 현재 웹사이트의 소스에 해당하는 Repository를 선택하고 로컬의 Visual Studio Code로 열어서 Markdown을 추가했습니다.

감사합니다. :)


Github Codespace를 사용하다


안녕하세요.

이번 시간에는 Next.js가 제공하는 기능에 대해서 알아보겠습니다.

Next.js는 다음과 같은 기능이 있습니다.

- Page-based routing system(with dynamic routes)
- Pre-rendering SSG / SSR
- Automatic code splitting for faster page loads
- Client-side routing with optimized prefetching
- API Routes(with Serverless Functions)
- Development environment(with Fast Refresh)

감사합니다. :)


Next.js가 제공하는 기능


안녕하세요. Full Stack Developer 송혁호 입니다.

저의 포트폴리오 웹사이트를 소개하고자 이 글을 씁니다.

이 포트폴리오 웹사이트는 Next.js Framework를 사용해서 개발했으며, Github에 소스코드를 올려놓고 Vercel에 연결하여 호스팅해서 서비스하고 있습니다.

블로그 포스팅은 Vercel에서 직접 파일을 쓰는 것이 안되어, 현재 소스코드에서 Markdown 파일을 추가하는 방법으로 블로그 포스팅을 하고 있습니다.

추후, API 서버를 따로 제작하여 웹사이트에서 Markdown 형식으로 블로그 포스팅을 작성하여 파일을 추가하고 Markdown 파일을 API로 변환해서 제공하고 Next.js에서 제공하는 Static Site Generation(SSG) 방식을 사용해서 서비스할 예정입니다.

그리고 작업한 Website 프로젝트와 Application 프로젝트를 한 눈에 볼 수 있도록 웹사이트에 추가할 예정입니다.

감사합니다. :)


Hyuk Ho Song

Full Stack Developer

Latest Blog Posts