Skip to main content

· 2 min read
  • TVCC 블록체인 사전 - 아토믹 스왑이란?
    • 거래소를 통하지 않고 코인간 교환하는 것
      • 응? 그럼 DEX가 atomic swap을 하는건가? DEX도 거래소라고 봐야 하나?
    • atomic cross-chain trading의 줄임말
    • 거래소가 없다면 A->B에게 코인을 보냈는데 B->A에게 코인을 안 보내는 경우 발생
      • 이 바닥은 신용이라는게 없다. 새로 만든 주소이고 내가 누군지도 모르는데 돈을 받았으면 보낼 이유가 없다
      • 2013년 Tier Nolan이 고안
    • Lightning network 처럼 A도 B도 아닌 제3의 장부를 사용할 수도 있다
    • Hashed time lock contract
      • A에 swap용 contract가 있으면 A->swap contract에게 보내고 B->swap에 보내면 교환시켜주면 되지 않나?
        • 근데 그렇지 않다. 왜일까?
        • 아. 이건 같은 체인의 사용자 A,B에 해당된다. 체인이 다르면 A->Swap contract에는 보낸다 쳐도 ..
  • 코드도 보는게 이해가 편하다

· One min read
  • 원문: Controlled Components
  • 두가지 상태
    • HTML도 자체 상태를 갖는 컴포넌트들이 있다 (form element들)
    • React는 mutable state를 각 component가 유지하며 setState()로 업데이트 한다
  • 상태의 'Single source of truth'를 위해 React state로 합친다
  • react 제어하에 들어간 input form element를 controlled component라 부른다
  • 원문은 class component기준으로 설명하지만 functional component 기준 설명도 있다. useState() hook을 사용
  • value라는 하나의 field를 갖는 state를 예로들었다(text type의 input의 값)
    • input의 onchange에서 현재값을 react component의 state로 넣어야 할 것이고
    • state의 값을 input의 value로 넣어야 할 것이다

· One min read
  • Deployment
    • vercel에 serverless 형태로 배포하는걸 추천
    • 일반 서버에 배포하려면 nodejs project로 인식해서 npm run start 사용
    • static html export하려면 npm run export 사용
  • Static HTML Export
    • package.json에서 scripts.build에 next export 추가: "build": "next build && next export"

· 2 min read
  • 환경 변수(.env) 파일을 사용하는 방법
    • application 에서 credential처럼 민감한 정보를 저장할 때 사용한다
    • 보통 end user에게는 보이지 않는 정보이다
    • API Key, DB connection information, API endpoints
    • VS Code에서 인식하는 듯. 별도의 아이콘이 나오네 (나는 또 다른 아이콘이긴 하군)
    • Dotenv File Format
      • 파일 포맷은 bash script에서 왔다 (subset이라 생각)
        • 따라서 key앞에 export도 추가 가능하다
        • value에 따옴표, 쌍따옴표 지원된다
        • 앞에서 정의된 변수는 interpolation 지원된다
    • 이 영상은 php에서 .env를 사용하는 내용임
    • SCM(git)에는 .eng는 commit하지 않는다
      • .env.example을 만들어 commit한다. Dotenv를 아는 개발자들은 이 파일을 보면 .env로 rename해서 사용한다

· 2 min read
  • https://nextjs.org/docs/getting-started
  • create-next-app CLI
    • 요즘은 CLI 설치 않고 npx 사용한다
    • npx create-next-app next-oauth-101
    • 바로 실행 가능 cd next-oauth-101; npm run dev
      • 3000번 포트에 뭔가 간단한 UI가 나온다
      • 이 상태로 소스를 수정하면 바로 반영된다
  • next.js/examples 아래서 필요한 기능을 찾는다.
  • Adding Authentication to an existing serverless Next.js App in no time with NextAuth.js!
    • nextjs application이 있는데 user/authentication을 추가하고 싶은가? NextAuth.js를 추가하면 끝이다
    • 일단 OAuth provider로 Google예로들자
      • GCP Console에서 project를 만든다
      • API's & Service -> Credentials -> Create credentials -> OAuth Client ID
      • User type은 external 밖에 못 고른다
        • Internal: Google Workspace 사용자 대상
        • External: App이 production에 push되고 verify되어야 함. 그 전까진 등록된 test user만 사용가능
      • OAuth client ID / Secret을 만들었다. JSON Download가 되는데 이걸 분실하면 안되는건가? -> 아니다. 콘솔에서 보이네
    • npm install next-auth
      • 이 글에선 .env를 사용한다
      • .env.production, .env.development 등을 사용하라는데 이것들은 git에 올리지 않아야겠지?
    • Dynamic API Routes는 그냥 API Routes와 다르다
      • 어쩐지 react관련 오류가 나더라
    • http://localhost:3000/api/auth/a/b/c에 대해 req.query를 출력해 보면 { nextauth: [ 'a', 'b', 'c' ] } 이 나온다
    • https://github.com/nextauthjs/next-auth-example 이걸 보면 dotenv를 읽어들이는 부분이 없다. nextjs에 내장된 기능이다

· One min read
  • https://nextjs.org/docs/basic-features/environment-variables
    • 환경변수는 .env.local를 읽어오게 되어있다
    • 변수명가 NEXT_PUBLIC_ 으로 시작하면 browser에서도 읽을 수 있게 제공된다
    • 중요:Default environment variables
      • .env.local: 최고의 우선순위. 모든걸 override한다. git에 올리면 안된다 (.gitignore에 추가되어야 한다)
      • .env.development, .env.production: development용(next dev), production용(next start) default values. git에 올린다
      • .env: 모든 환경을 커버하는 default values. git에 올린다.