하지만 한편으로 드는 생각은, 무엇을 NFT로 만드는게 적절한것인지 지금의 우리가 제대로 판단할 수 있을까? 얼마나 달라질지 모르는 시장이기에 누구도 완벽한 판단을 내릴 수는 없을 것이다.

그럼에도 불구하고 필수로 집중해야할게 있다. Identification, 그리고 대중화.

대기업들이 NFT에 뛰어들고 있다. 이는 분명히 Crypto의 대중화에 기여하고 있고, 앞으로 더욱 일반인들을 Crypto인으로 끌어들이는데 기여할거라 생각한다.

왜 여기저기서 다들 NFT 를 한다고 난리야. 하고 비판적으로만 바라볼 필요는 없지 않을까.

명품, 대기업의 NFT 도입

이미 대형 브랜드들은 본인들만의 블록체인 컨소시엄을 설립해서 운영 중이거나 기술을 도입했다.

• LVMH + Cartier + Prada ⇒ Aura 설립
  • 중고거래 시장의 허위 매물 걸러내기 가능
  • 현재 위조품 걸러내기에 막대한 돈을 들이는 명품업계에서는 NFT 가 좋은 해결책
  • 각 제품마다 식별코드/QR코드를 내장하여, 카메라로 인식하여 정품인지 식별 가능
  • 또한 소비자들에게 생산과정을 투명하게 공개하는데 사용
• Breitling + VacheronConstatntin + AudemarsPiguet ⇒ Arianee 설립
  • 마찬가지로 명품 시계의 실제 소유자 등록 및 허위 매물 걸러내기에 사용됨
• Nike > Cryptokicks 블록체인 시스템 개발 및 특허 출원
  • 리셀 시장이 엄청 크다. 중고거래시 정품인증으로 활용 가능
  • 실물을 구매하면 동일한 메타버스 아이템을 제공해줌
• Toyota > 중고차 거래 시장 허위매물, 차량 정비이력 등을 투명하게 나타내기 위해 NFT 발행
• Burberry > Blankos Block Party 자체개발 블록체인 게임 출시
  • 게이머들이 아이템 거래 시, Burberry 가 수익의 n%를 가져가는 형태
• D&G > Collezione Genesi - NFT 콜렉션 출시
  • 메타버스에서 착용가능한 아이템 판매
• Louis Vuitton > Louis the Game - 모바일 게임 출시
  • MZ 세대들의 관심을 모으기 위함
• Gucci X Roblox > 로블록스 내에서 구찌 아이템 판매

왜 하는가?

• 새로운 소비 시장 확장
  • 전통적인 게임에서의 아이템은 희소성 개념이 크게 없었지만, 블록체인 게임 안에서의 아이템은 독점성과 희소성을 줄 수 있다.
• 젊은 층을 고객으로 끌어들이기 위해

• <nav> 태그 및 aria-label 속성 사용
• 상위 페이지는 <a/> 태그 삽입
• 순서가 있는 목록 → <ol/> 태그 사용
• 현재 선택된 페이지는 aria-current="page" 속성 사용
• 구분자는 CSS 의 ::before 속성과 인접선택자 X + Y 으로 해결

목록을 나타내는 태그 종류

1. <ol>: ordered list: 순서가 있는 목록
   • 해당 목록의 항목은 숫자로 표시된다. (순서가 있기 때문에)
2. <ul>: unordered list: 순서가 없는 목록
   • 해당 목록의 항목은 불릿 으로 표시된다. (순서가 없기 때문에)
3. <dl>: definition list: 사전처럼 용어를 설명하는 목록을 만들때

웹 접근성

• 화면에는 목록의 숫자가 나타나지 않지만 스크린 리더는 음성 출력을 해준다.
• 이것을 응용하면 기사나 상품의 목록을 시각적으로는 현재 모양과 똑같이 하면서도 스크린 리더 사용자에게는 목록의 번호를 음성 출력함으로서 훨씬 더 깊은 배려를 할 수 있다.

자세한건 뒤로하고 키워드만 던져봅니다.

1. High-Performance Lightweight Framework

   • Svelte, Sapper
   • React Prepack
   • Angular Ivy

2. Deno 의 성장

   • 2018년, Node.js 를 만든 라이언 달이 Node.js 문제점을 해결한 Deno 출시
   • NodeJS 를 만들며 본인이 실수했다고 생각한 부분들을 새로운 프로젝트에 담아서 TypeScript 가 더 잘 돌아가도록 만든 백엔드형 JS
   • 앞으로 더욱 다양한 ecosystem 이 갖춰지지 않을까

3. No-code platform

   • Bootstrap Studio

4. Rust, SWC

5. Web Assembly

6. Web3.js, NFT

7. Flutter, RN

8. React log tracker

   • LogRocket

• baseUrl 옵션을 사용하여 기본 경로를 지정해주면, 상대경로가 아닌 절대경로로 파일을 import 할 수 있습니다.
• 말그대로 base 가 되는 경로를 직접 설정함으로써, 패키지 depth 가 깊어질수록 구구절절 길어지는 import 문을 아주 짧게 나타낼 수 있게 됩니다.

baseUrl 설정하기

• tsconfig.json 또는 jsconfig.json 에서 아래와 같이 설정해줍니다.
• 경로는 . 또는 .src 등 해당 프로젝트에 맞게 설정해줍니다.

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

그러면 아래와 같이, components 하위의 파일들을 components/button 와 같은 절대경로로 import 할 수 있게 됩니다.

// ./src/components/button.js
export default function Button() {
  return <button>Click me</button>
}

// ./src/pages/index.js
import Button from 'components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

2. alias 설정하기

• baseUrl 설정만으로는 부족한 경우들이 있습니다.
• 예를들어, ./src/components/v1/common/basic/button.js 와 같이 depth 가 깊은 파일에 접근해야하는 경우는 여전히 불편함이 있습니다.
• 이런 경우 alias 를 추가로 설정해주면 됩니다.

alias 설정하기 (paths)

• paths 옵션을 통해 설정합니다.

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/basic/*": ["components/v1/common/basic/*"]
    }
  }
}

위와 같이 특정 경로에 대한 alias 를 설정해주면, 아래와 같이 간단하게 import 할 수 있게 됩니다.

// ./src/components/v1/common/basic/button.js
export default function Button() {
  return <button>Click me</button>
}

// ./src/pages/index.js
import Button from '@/basic/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

참고

• Next.js 공식문서: https://nextjs.org/docs/advanced-features/module-path-aliases